Portfolio Base Freelance – Web, by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<label>Mostrare un testo di etichetta per un elemento di input.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<input>Definisce un area di input per l'invio di dati e informazioni
<tr>Definisce le righe di una tabella (rows)
disabledImpedisce la modifica di un input
<th>Definisce una cella di intestazione di una tabella HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio gatto

Informazioni Cliente - Quiz a Rami

esercitazione 1

Pagina Test-A D&D story

mappa del malandrino

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Portfolio freelance di Web Design, UX Design e Content Creation per B2B, freelance e liberi professionisti." />
  <title>Portfolio Freelance – Web & UX Design</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

  <style>
    :root {
      --bg: #0e0f13;
      --bg-soft: #151720;
      --text: #f5f6fa;
      --text-muted: #b5b8c5;
      --accent: #7c7cff;
      --accent-soft: rgba(124,124,255,0.15);
      --radius: 20px;
      --transition: 0.3s ease;
      --max-width: 1180px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* Layout */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    section {
      padding: 200px 0;
    }

    /* Navbar */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      backdrop-filter: blur(10px);
      background: rgba(14,15,19,0.6);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }

    .nav .logo {
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .nav ul {
      display: flex;
      gap: 32px;
      list-style: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav li {
      font-size: 14px;
      color: var(--text-muted);
      transition: color var(--transition);
    }

    .nav li:hover {
      color: var(--text);
    }

    .nav .cta {
      padding: 10px 18px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }

    /* Hero */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .hero-content {
      max-width: 760px;
    }

    .hero h1 {
      font-size: clamp(40px, 6vw, 64px);
      line-height: 1.1;
      margin-bottom: 32px;
      letter-spacing: -1.5px;
    }

    .hero p {
      font-size: 20px;
      color: var(--text-muted);
      margin-bottom: 48px;
    }

    .hero-actions {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      padding: 16px 28px;
      border-radius: 999px;
      font-weight: 500;
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(124,124,255,0.3);
    }

    .btn-secondary {
      color: var(--text-muted);
      font-weight: 500;
    }

    /* Sections */
    .section-title {
      font-size: 36px;
      margin-bottom: 24px;
      letter-spacing: -0.8px;
    }

    .section-intro {
      max-width: 620px;
      color: var(--text-muted);
      margin-bottom: 80px;
    }

    /* Services */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
    }

    .service-card {
      background: var(--bg-soft);
      border-radius: var(--radius);
      padding: 40px;
      transition: transform var(--transition), background var(--transition);
    }

    .service-card:hover {
      transform: translateY(-6px);
      background: #1a1c27;
    }

    .service-card h3 {
      margin-bottom: 16px;
      font-size: 20px;
    }

    .service-card p {
      color: var(--text-muted);
      font-size: 15px;
    }

    /* Authority */
    .metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 48px;
    }

    .metric {
      text-align: center;
    }

    .metric strong {
      display: block;
      font-size: 48px;
      margin-bottom: 8px;
      color: var(--accent);
    }

    .metric span {
      color: var(--text-muted);
      font-size: 14px;
    }

    /* FAQ */
    details {
      background: var(--bg-soft);
      border-radius: var(--radius);
      padding: 24px 32px;
      margin-bottom: 16px;
      cursor: pointer;
    }

    details summary {
      font-weight: 500;
      list-style: none;
    }

    details p {
      margin-top: 16px;
      color: var(--text-muted);
      font-size: 15px;
    }

    /* Contact */
    .contact-box {
      background: linear-gradient(135deg, var(--accent-soft), transparent);
      border-radius: var(--radius);
      padding: 80px;
    }

    .contact-box p {
      color: var(--text-muted);
      max-width: 520px;
      margin-bottom: 40px;
    }

    form {
      display: grid;
      gap: 24px;
      max-width: 520px;
    }

    input, textarea {
      background: #0c0d12;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 16px 18px;
      border-radius: 12px;
      color: var(--text);
      font-family: inherit;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    footer {
      padding: 80px 0 40px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      section {
        padding: 120px 0;
      }

      .nav ul {
        display: none;
      }

      .contact-box {
        padding: 48px 32px;
      }
    }
  </style>
</head>
<body>

<header>
  <div class="container nav">
    <div class="logo">Nome Cognome</div>
    <ul>
      <li><a href="#servizi">Servizi</a></li>
      <li><a href="#metodo">Metodo</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contatti">Contatti</a></li>
    </ul>
    <a href="#contatti" class="cta">Call gratuita</a>
  </div>
</header>

<main>
  <section class="hero">
    <div class="container hero-content">
      <h1>Progetto esperienze digitali chiare, utili e orientate ai risultati.</h1>
      <p>Aiuto freelance, professionisti e realtà B2B a trasformare siti e contenuti in strumenti di business, senza fronzoli inutili.</p>
      <div class="hero-actions">
        <a href="#contatti" class="btn-primary">Prenota una call gratuita</a>
        <a href="#servizi" class="btn-secondary">Scopri come lavoro</a>
      </div>
    </div>
  </section>

  <section id="servizi">
    <div class="container">
      <h2 class="section-title">Come posso aiutarti</h2>
      <p class="section-intro">Ogni progetto parte da un problema reale e arriva a una soluzione concreta, misurabile e sostenibile.</p>

      <div class="services">
        <div class="service-card">
          <h3>Web Design & UI</h3>
          <p>Siti eleganti, veloci e coerenti con il tuo posizionamento, progettati per comunicare valore fin dal primo scroll.</p>
        </div>
        <div class="service-card">
          <h3>UX & Conversione</h3>
          <p>Architettura delle informazioni, flussi e micro-copy pensati per ridurre attrito e aumentare fiducia.</p>
        </div>
        <div class="service-card">
          <h3>Content & Strategia</h3>
          <p>Contenuti chiari e orientati al business, che parlano alle persone giuste nel momento giusto.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="metodo">
    <div class="container">
      <h2 class="section-title">Esperienza e metodo</h2>
      <p class="section-intro">Lavoro con un approccio strutturato, basato su ascolto, analisi e scelte consapevoli.</p>

      <div class="metrics">
        <div class="metric">
          <strong>20+</strong>
          <span>Anni di esperienza</span>
        </div>
        <div class="metric">
          <strong>150+</strong>
          <span>Progetti realizzati</span>
        </div>
        <div class="metric">
          <strong>B2B</strong>
          <span>Focus su professionisti e aziende</span>
        </div>
      </div>
    </div>
  </section>

  <section id="faq">
    <div class="container">
      <h2 class="section-title">Domande frequenti</h2>
      <details>
        <summary>Quanto dura la call gratuita?</summary>
        <p>La call dura 30 minuti ed è senza impegno. Serve per capire se e come posso aiutarti.</p>
      </details>
      <details>
        <summary>Lavori solo su progetti completi?</summary>
        <p>No, posso intervenire anche su singole fasi: UX review, redesign o consulenza strategica.</p>
      </details>
      <details>
        <summary>Che tipo di clienti segui?</summary>
        <p>Principalmente freelance, consulenti e piccole/medie realtà B2B.</p>
      </details>
    </div>
  </section>

  <section id="contatti">
    <div class="container">
      <div class="contact-box">
        <h2 class="section-title">Parliamo del tuo progetto</h2>
        <p>Nessuna vendita forzata, nessuna pressione. Solo una conversazione onesta per capire se ha senso collaborare.</p>

        <form>
          <input type="text" placeholder="Nome e cognome" required />
          <input type="email" placeholder="Email" required />
          <textarea placeholder="Raccontami brevemente il tuo progetto"></textarea>
          <button type="submit" class="btn-primary">Invia richiesta</button>
        </form>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    © 2025 – Nome Cognome · Web & UX Designer Freelance
  </div>
</footer>

</body>
</html>