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

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
postDefinisce un metodo di invio di dati al server
<canvas>Tag per disegnare grafica dinamica su pagine web.
<em>Formatta il testo in corsivo/italico enfatizzato
<head>Tag primario di un documento HTML
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

Festava Live - Bootstrap 5 CSS Tem

Design & Comunicazione Digitale ??

Tabella Marcatori Serie A 20

esercizio 02 pagina complessa

Scheda: immagine a sinistra + tab

Elaborato esame

Attività della settimana.

Heads Or Tails Random Tally

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>