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

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

References

requiredRende obbligatorio un campo di input
minImposta il valore numerico o temporale minimo per un elemento input
<q>Indica una parte di testo come citazione breve
<meta>Definisce i meta dati di una pagina web.
<h3>Titolo di intestazione di terzo livello
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video

Users

Log in to search for users

Explore

Find inspiration

Il Giro del Mondo in 80 Giorni(2)

Éclat Couture - Alta Moda Artigia

Quiz su Kylie Jenner

primo esercizio 26 gennaio

UX / Web Design, Freelance – Pro

programma di x,y,z

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>