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

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

Referenze

methodDetermina il metodo di invio dei dati di un form al server
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<body>Tag primario di un documento HTML
<iframe>Crea un frame all'interno di una pagina HTML.
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizi 05/03/2024 es1

Liste e tabelle

Refresh page script

Heads Or Tails Random Tally

Vendi Casa ad Ardea in 90 Giorni F

Esercizi 05/03/2024 es6

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>