Design & Comunicazione Digitale ?? by @Darkness977 - Codewith.it

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

References

<link>Collega il documento corrente con una risorsa esterna
langSpecifica la lingua del contenuto di un elemento
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<object>Incorpora risorse varie nella pagina web.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Users

Log in to search for users

Explore

Find inspiration

STILI + IMMAGINI

Esercitazione 1

Esercitazione 3 MORRA

esercitazione4.html(2)

Esercitazione n. 1

esercitazione n1

Le meraviglie d\\

esercizio perfetto

ARKO - Artificial Intelligence Kno

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" />
  <title>Design & Comunicazione Digitale — Studio Creativo</title>
  <meta name="description" content="Studio creativo specializzato in design e comunicazione digitale. Progetti, blog, portfolio e risorse per brand moderni e professionali." />
  <link rel="canonical" href="https://www.tuositoexample.com/" />
  <meta name="robots" content="index, follow" />
  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Design & Comunicazione Digitale — Studio Creativo" />
  <meta property="og:description" content="Progetti, portfolio, e risorse per design e comunicazione digitale." />
  <meta property="og:url" content="https://www.tuositoexample.com/" />
  <meta property="og:site_name" content="Studio Creativo" />
  <meta property="og:image" content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80&auto=format&fit=crop" />

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Design & Comunicazione Digitale — Studio Creativo" />
  <meta name="twitter:description" content="Progetti, portfolio, e risorse per design e comunicazione digitale." />
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80&auto=format&fit=crop" />

  <!-- Preconnect fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">

  <!-- Favicons (examples) -->
  <link rel="icon" href="/favicon.ico">

  <!-- SEO: structured data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": "https://www.tuositoexample.com/#org",
        "name": "Studio Creativo",
        "url": "https://www.tuositoexample.com/",
        "logo": "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&q=80&auto=format&fit=crop",
        "sameAs": []
      },
      {
        "@type": "WebSite",
        "@id": "https://www.tuositoexample.com/#website",
        "url": "https://www.tuositoexample.com/",
        "name": "Design & Comunicazione Digitale — Studio Creativo",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://www.tuositoexample.com/?s={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      },
      {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {"@type": "ListItem","position":1,"name":"Home","item":"https://www.tuositoexample.com/"},
          {"@type": "ListItem","position":2,"name":"Progetti","item":"https://www.tuositoexample.com/progetti"},
          {"@type": "ListItem","position":3,"name":"Blog","item":"https://www.tuositoexample.com/blog"}
        ]
      },
      {
        "@type": "BlogPosting",
        "headline": "Come progettare una comunicazione digitale efficace",
        "description": "Strategie, strumenti e casi studio su design e comunicazione digitale.",
        "url": "https://www.tuositoexample.com/blog/progettare-comunicazione-digitale",
        "author": {"@type":"Person","name":"Nome Autore"},
        "publisher": {"@id":"https://www.tuositoexample.com/#org"},
        "datePublished": "2025-01-10",
        "image": "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1200&q=80&auto=format&fit=crop"
      }
    ]
  }
  </script>

  <style>
    /* =========================
       Design System Variables
       ========================= */
    :root{
      /* Palette */
      --purple-900: #1a0636; /* viola scuro */
      --green-500: #00ff9c; /* verde elettrico */
      --silver-300: #c9ccd1; /* grigio silver */
      --matte-black: #0f1111; /* nero opaco */
      --muted: #6b7280;

      /* Accents & UI */
      --glass: rgba(255,255,255,0.06);
      --glass-strong: rgba(255,255,255,0.08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --max-width: 1200px;

      /* Typography */
      --font-sans: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      --h1: 2.25rem;
      --h2: 1.5rem;
      --base: 1rem;

      /* Motion */
      --ease-1: cubic-bezier(.2,.9,.2,1);
      --duration-fast: 180ms;
      --duration-base: 320ms;
    }

    /* Global reset & base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font-sans);
      color:linear-gradient;
      color: #e9eef6;
      background: #07060a;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}

    /* Layout container */
    .wrap{max-width:var(--max-width);margin:0 auto;padding:2rem;}

    /* Skip link for accessibility */
    .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:black;color:white;border-radius:6px;z-index:9999}

    /* =========================
       Animated gradient background (welcome)
       ========================= */
    .hero-welcome{
      position:relative;
      min-height:85vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:white;
      overflow:hidden;
      isolation:isolate;
      padding:4rem 1rem;
    }

    /* animated gradient (subtle) */
    .animated-gradient{
      position:absolute;inset:0;
      background:linear-gradient(120deg, rgba(26,6,54,0.9) 0%, rgba(0,255,156,0.06) 25%, rgba(12,12,12,0.7) 50%, rgba(60,24,120,0.35) 75%, rgba(10,10,10,0.95) 100%);
      mix-blend-mode:normal;
      z-index:0;
      animation:flow 14s linear infinite;
      filter:blur(28px) saturate(115%);
      transform-origin:center;
    }
    @keyframes flow{
      0% { transform:translate3d(-6%, -2%,0) scale(1); }
      50% { transform:translate3d(6%, 2%,0) scale(1.03); }
      100% { transform:translate3d(-6%, -2%,0) scale(1); }
    }

    /* gradient overlay shapes */
    .gradient-shape{
      position:absolute; width:60vmax; height:60vmax; border-radius:50%;
      filter:blur(80px); opacity:.7; z-index:0;
    }
    .g1{right:-20vmax; top:-25vmax; background:radial-gradient(circle at 30% 30%, var(--green-500), transparent 45%);}
    .g2{left:-20vmax; bottom:-30vmax; background:radial-gradient(circle at 60% 60%, var(--purple-900), transparent 40%);}

    /* Hero content */
    .hero-content{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:3rem 1rem}
    .eyebrow{display:inline-block;padding:.25rem .6rem;background:rgba(255,255,255,0.06);border-radius:999px;font-weight:600;font-size:.85rem;color:var(--silver-300)}
    h1{font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.02;margin:.6rem 0;font-weight:800;letter-spacing:-0.02em}
    p.lead{font-size:1.05rem;color:rgba(233,238,246,0.9);margin-bottom:1.25rem}

    /* CTA & rating */
    .cta-row{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:12px;background:linear-gradient(90deg,var(--green-500),#66FFA8);
      color:var(--matte-black);font-weight:700;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform var(--duration-fast) var(--ease-1),box-shadow var(--duration-fast) var(--ease-1);
    }
    .btn:active{transform:translateY(2px)}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--silver-300);backdrop-filter:blur(4px)}
    .rating{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:999px;background:rgba(255,255,255,0.06);font-weight:600}
    .rating .stars{color:var(--green-500);font-weight:800}

    /* =========================
       Navbar: transparent, sticky
       ========================= */
    header.site-header{
      position:sticky;top:0;z-index:999;
      background:transparent;
      padding:.9rem 1rem;
      transition:backdrop-filter .24s ease, background .28s ease, padding .28s ease;
      display:flex;align-items:center;justify-content:center;
      backdrop-filter: blur(6px) saturate(115%);
      -webkit-backdrop-filter: blur(6px) saturate(115%);
    }
    header.scrolled{background:linear-gradient(180deg, rgba(10,10,10,0.45), rgba(10,10,10,0.25));padding:.6rem 1rem}
    .nav-inner{max-width:var(--max-width);width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
    .brand{display:flex;align-items:center;gap:.6rem;color:white;font-weight:800}
    .brand .logo-mark{width:40px;height:40px;border-radius:10px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--green-500),#7b5cff);font-weight:900;color:var(--matte-black)}
    nav.main-nav{display:flex;gap:1rem;align-items:center}
    nav.main-nav a{padding:.5rem .65rem;border-radius:8px;color:rgba(255,255,255,0.85);font-weight:600;transition:transform .18s var(--ease-1),background .18s var(--ease-1)}
    nav.main-nav a:hover, nav.main-nav a:focus{transform:translateY(-3px);background:rgba(255,255,255,0.03)}
    .mobile-toggle{display:none}

    /* Responsive grid & components */
    .grid{display:grid;gap:1rem}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:var(--radius-md);box-shadow:0 6px 24px rgba(10,10,10,0.6);transition:transform .25s var(--ease-1),box-shadow .25s var(--ease-1)}
    .card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,0.6)}

    /* Info box */
    .infobox{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;border-radius:12px;background:rgba(255,255,255,0.03);border-left:4px solid var(--green-500)}
    .infobox h3{margin:0;font-size:1.05rem}

    /* Gallery a scacchiera (masonry-like) */
    .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:10px}
    .gallery .item{position:relative;overflow:hidden;border-radius:10px}
    .item .meta{position:absolute;left:0;bottom:0;padding:.6rem .75rem;background:linear-gradient(0deg, rgba(0,0,0,0.6), transparent);color:white;font-weight:600;font-size:.95rem;backdrop-filter: blur(4px)}
    .span-2{grid-column:span 2}
    .span-3{grid-column:span 3}
    @media (max-width:980px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px} .grid.cols-3{grid-template-columns:repeat(2,1fr)} .grid.cols-2{grid-template-columns:1fr} .nav-inner{gap:.5rem} .mobile-toggle{display:inline-flex} nav.main-nav{display:none} }
    @media (max-width:520px){ .hero-content{padding:2rem 0} h1{font-size:1.8rem} .gallery{grid-template-columns:1fr} }

    /* Hero marketing section with "gradimento" (progress/score) */
    .hero-marketing{display:flex;align-items:center;gap:2rem;padding:2rem 1rem;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
    .score{width:120px;height:120px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));font-weight:800;font-size:1.6rem;color:var(--green-500)}
    .progress{width:100%;height:12px;background:rgba(255,255,255,0.04);border-radius:999px;overflow:hidden}
    .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--green-500),#7b5cff);width:75%;transition:width .8s var(--ease-1)}

    /* Testimonials */
    .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    .testimonial{padding:1rem;border-radius:12px;background:rgba(255,255,255,0.02);display:flex;gap:1rem;align-items:center}
    .avatar{width:54px;height:54px;border-radius:999px;display:inline-grid;place-items:center;background:var(--silver-300);font-weight:700;color:var(--matte-black)}

    /* Blog post snippet */
    .post{display:flex;gap:1rem;align-items:flex-start}
    .post .thumb{width:140px;height:100px;border-radius:8px;overflow:hidden;flex-shrink:0}
    .post h4{margin:.2rem 0 0;font-size:1.05rem}

    /* Newsletter */
    .newsletter{display:flex;gap:.8rem;align-items:center}
    .newsletter input[type="email"]{flex:1;padding:.7rem 1rem;border-radius:10px;border:0;background:rgba(255,255,255,0.03);color:white;outline:none}
    .newsletter button{padding:.7rem .9rem;border-radius:10px;border:0;background:var(--green-500);font-weight:700}

    /* Footer */
    footer{padding:3rem 1rem;background:linear-gradient(180deg, rgba(10,10,10,0.35), rgba(5,5,5,0.6));color:rgba(255,255,255,0.7)}
    .socials a{margin-right:.6rem;color:var(--silver-300)}

    /* Small utilities */
    .muted{color:var(--muted)}
    .uppercase{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
    .center{text-align:center}

    /* Micro interactions */
    .hover-lift{transition:transform .28s var(--ease-1);will-change:transform}
    .hover-lift:hover{transform:translateY(-6px) rotateX(0.01deg)}
    button:focus, a:focus{outline:3px solid rgba(0,255,156,0.12);outline-offset:3px}

  </style>
</head>
<body>
  <a class="skip-link" href="#main">Vai al contenuto</a>

  <!-- HEADER / NAVBAR (sticky transparent) -->
  <header class="site-header" id="site-header" role="banner" aria-label="Main header">
    <div class="nav-inner">
      <div class="brand" aria-hidden="false">
        <div class="logo-mark" aria-hidden="true">DC</div>
        <div>
          <div style="font-weight:800">Studio Creativo</div>
          <div style="font-size:.8rem;color:var(--silver-300);margin-top:-4px">Design & Comunicazione</div>
        </div>
      </div>

      <nav class="main-nav" role="navigation" aria-label="Main navigation">
        <a href="#progetti">Progetti</a>
        <a href="#servizi">Servizi</a>
        <a href="#blog">Blog</a>
        <a href="#contatti">Contatti</a>
      </nav>

      <div style="display:flex;align-items:center;gap:.5rem">
        <button class="btn ghost" aria-label="Contattaci">Contattaci</button>
        <button class="mobile-toggle" aria-expanded="false" aria-controls="mobile-menu">☰</button>
      </div>
    </div>
  </header>

  <!-- WELCOME / HERO -->
  <section class="hero-welcome" role="region" aria-labelledby="welcome-title">
    <div class="animated-gradient" aria-hidden="true"></div>
    <div class="gradient-shape g1" aria-hidden="true"></div>
    <div class="gradient-shape g2" aria-hidden="true"></div>

    <div class="hero-content wrap" id="main">
      <span class="eyebrow">Studio — Branding & UX</span>
      <h1 id="welcome-title">Progettiamo esperienze digitali con impatto — <span style="color:var(--green-500)">chiaro</span>, <span style="color:#7b5cff">strategico</span>, creativo.</h1>
      <p class="lead">Un approccio integrato tra design e comunicazione digitale: brand system, UI/UX, produzione di contenuti e strategie di marketing per realtà ambiziose.</p>

      <div class="cta-row" role="group" aria-label="Call to action">
        <button class="btn" onclick="location.href='#contatti'">Lavora con noi</button>
        <button class="btn ghost" onclick="location.href='#progetti'">Scopri i progetti</button>
        <div class="rating" aria-hidden="true">
          <span class="stars">★ ★ ★ ★ ☆</span>
          <small style="opacity:.9">4.6 (valutazioni clienti)</small>
        </div>
      </div>
    </div>
  </section>

  <!-- MAIN CONTENT -->
  <main class="wrap" role="main" aria-labelledby="main-heading">

    <!-- Info row -->
    <section id="servizi" style="margin-top:2rem">
      <div class="grid cols-3" style="align-items:start">
        <div class="card">
          <h3>Brand System & Identity</h3>
          <p class="muted">Costruiamo guide di stile, librerie di componenti e design token per una comunicazione coerente su tutti i touchpoint.</p>
        </div>
        <div class="card">
          <h3>UI / UX Design</h3>
          <p class="muted">Interfacce chiare, accessibili e ottimizzate per conversione ed engagement.</p>
        </div>
        <div class="card">
          <h3>Content & Strategy</h3>
          <p class="muted">Contenuti pensati per raccontare il valore del brand, dalla creatività al performance marketing.</p>
        </div>
      </div>
    </section>

    <!-- Infobox -->
    <section style="margin-top:2rem">
      <div class="infobox" role="note" aria-label="Informazioni sul servizio">
        <div style="min-width:44px;">
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="#00FF9C"/><path d="M9 11l2 2 4-4" stroke="#081018" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div>
          <h3>Progettazione su misura</h3>
          <p class="muted">Progetti su misura con design system documentati, accessibili e scalabili per startup e aziende enterprise.</p>
        </div>
      </div>
    </section>

    <!-- HERO MARKETING with gradimento -->
    <section style="margin-top:2.2rem">
      <div class="hero-marketing card" aria-label="Sezione marketing">
        <div style="flex:1">
          <h2 style="margin:0">Strategia digitale che converte</h2>
          <p class="muted">Dalla ricerca alle metriche, ottimizziamo funnel e UX per migliorare l'engagement e la fiducia degli utenti.</p>
          <div style="margin-top:1rem">
            <div class="progress" aria-hidden="true" style="margin-bottom:.6rem"><i style="width:84%"></i></div>
            <small class="muted">Soddisfazione clienti: <strong>84%</strong></small>
          </div>
        </div>
        <div style="width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center">
          <div class="score" role="img" aria-label="Punteggio 8.4">8.4</div>
          <small class="muted" style="margin-top:.6rem">Punteggio medio progetti (2023-2025)</small>
        </div>
      </div>
    </section>

    <!-- GALLERY A SCACCHIERA -->
    <section id="progetti" style="margin-top:2.5rem">
      <h2 class="center">Progetti selezionati</h2>
      <p class="center muted">Immagini prese da Unsplash — tema: design, creatività e ambiente professionale</p>

      <!-- GALLERY: default usa Unsplash -->
      <div class="gallery" aria-label="Galleria progetti">
        <!-- Note: each image uses srcset for responsive loading and lazy loading -->
        <figure class="item span-3" style="grid-row: span 2;">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80&auto=format&fit=crop 1200w, https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80&auto=format&fit=crop 800w" sizes="(min-width:980px) 66vw, 100vw">
            <img loading="lazy" alt="Workspace design team al lavoro" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80&auto=format&fit=crop">
          </picture>
          <figcaption class="meta">Brand strategy — Studio</figcaption>
        </figure>

        <figure class="item">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1509228627159-645d6f71d5e9?w=1200&q=80&auto=format&fit=crop 1200w, https://images.unsplash.com/photo-1509228627159-645d6f71d5e9?w=800&q=80&auto=format&fit=crop 800w" sizes="(min-width:980px) 20vw, 50vw">
            <img loading="lazy" alt="Sketch e wireframe UI" src="https://images.unsplash.com/photo-1509228627159-645d6f71d5e9?w=800&q=80&auto=format&fit=crop">
          </picture>
          <figcaption class="meta">UI / Wireframes</figcaption>
        </figure>

        <figure class="item">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&q=80&auto=format&fit=crop 1200w, https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80&auto=format&fit=crop 800w" sizes="(min-width:980px) 20vw, 50vw">
            <img loading="lazy" alt="Designer che lavora su illustrazione digitale" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80&auto=format&fit=crop">
          </picture>
          <figcaption class="meta">Illustrazione & Motion</figcaption>
        </figure>

        <figure class="item">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&q=80&auto=format&fit=crop 1200w, https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80&auto=format&fit=crop 800w" sizes="(min-width:980px) 20vw, 50vw">
            <img loading="lazy" alt="Fotografia ambiente ufficio moderno e piante" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80&auto=format&fit=crop">
          </picture>
          <figcaption class="meta">Ambiente creativo</figcaption>
        </figure>

        <figure class="item span-2">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?w=1200&q=80&auto=format&fit=crop 1200w, https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?w=800&q=80&auto=format&fit=crop 800w" sizes="(min-width:980px) 40vw, 100vw">
            <img loading="lazy" alt="Display con UI colorata e tabelle" src="https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?w=800&q=80&auto=format&fit=crop">
          </picture>
          <figcaption class="meta">Dashboard & Data Viz</figcaption>
        </figure>
      </div>

      <!-- === LOCAL IMAGE OPTION ===
         Per usare immagini locali, scarica i file Unsplash indicati sotto e salvali in /img/
         Poi rimuovi o commenta la gallery sopra e scommenta la gallery locale qui sotto.
         I file consigliati (nomi suggeriti):
         - /img/hero_workspace.jpg  (photo-1498050108023-c5249f4df085)
         - /img/wireframes.jpg      (photo-1509228627159-645d6f71d5e9)
         - /img/illustration.jpg    (photo-1522202176988-66273c2fd55f)
         - /img/office_plants.jpg   (photo-1519389950473-47ba0277781c)
         - /img/dashboard.jpg       (photo-1496307042754-b4aa456c4a2d)
      -->
      <!--
      <div class="gallery" aria-label="Galleria progetti - locale">
        <figure class="item span-3" style="grid-row: span 2;">
          <img loading="lazy" alt="Workspace design team al lavoro" src="/img/hero_workspace.jpg">
          <figcaption class="meta">Brand strategy — Studio</figcaption>
        </figure>
        <figure class="item">
          <img loading="lazy" alt="Sketch e wireframe UI" src="/img/wireframes.jpg">
          <figcaption class="meta">UI / Wireframes</figcaption>
        </figure>
        <figure class="item">
          <img loading="lazy" alt="Designer che lavora su illustrazione digitale" src="/img/illustration.jpg">
          <figcaption class="meta">Illustrazione & Motion</figcaption>
        </figure>
        <figure class="item">
          <img loading="lazy" alt="Fotografia ambiente ufficio moderno e piante" src="/img/office_plants.jpg">
          <figcaption class="meta">Ambiente creativo</figcaption>
        </figure>
        <figure class="item span-2">
          <img loading="lazy" alt="Display con UI colorata e tabelle" src="/img/dashboard.jpg">
          <figcaption class="meta">Dashboard & Data Viz</figcaption>
        </figure>
      </div>
      -->

    </section>

    <!-- BLOG POST SAMPLE -->
    <section id="blog" style="margin-top:2.4rem">
      <h2>Dal nostro blog</h2>
      <article class="card post" aria-labelledby="post-title-1">
        <div class="thumb" style="overflow:hidden;border-radius:8px">
          <img loading="lazy" alt="Immagine blog: processo creativo" src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=800&q=80&auto=format&fit=crop">
        </div>
        <div>
          <a href="https://www.tuositoexample.com/blog/progettare-comunicazione-digitale" id="post-title-1"><h4>Come progettare una comunicazione digitale efficace</h4></a>
          <p class="muted" style="margin:.3rem 0 .6rem">Strategie, approccio e casi pratici per un design che parla al pubblico giusto.</p>
          <div class="muted" style="font-size:.9rem">10 gennaio 2025 • 6 min di lettura</div>
        </div>
      </article>
    </section>

    <!-- TESTIMONIALS -->
    <section style="margin-top:2.4rem">
      <h2 class="center">Testimonianze</h2>
      <div class="testimonials" role="list" aria-label="Testimonianze clienti">
        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true">AL</div>
          <div>
            <strong>Alessandra R.</strong>
            <p class="muted">"Il team ha trasformato il nostro brand: lavoro impeccabile e attenzione ai dettagli."</p>
          </div>
        </div>
        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true">MR</div>
          <div>
            <strong>Marco R.</strong>
            <p class="muted">"Veloci, strategici e creativi — i risultati sono arrivati in poche settimane."</p>
          </div>
        </div>
        <div class="testimonial" role="listitem">
          <div class="avatar" aria-hidden="true">LV</div>
          <div>
            <strong>Laura V.</strong>
            <p class="muted">"Collaborazione eccellente e deliverable ben documentati — raccomandati."</p>
          </div>
        </div>
      </div>
    </section>

    <!-- NEWSLETTER -->
    <section style="margin-top:2.4rem">
      <div class="card" style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
        <div style="flex:1">
          <h3>Iscriviti alla newsletter</h3>
          <p class="muted">Ricevi risorse per design, case study e aggiornamenti esclusivi.</p>
        </div>
        <form class="newsletter" onsubmit="event.preventDefault();subscribeDemo()" aria-label="Modulo newsletter">
          <label class="sr-only" for="email">Email</label>
          <input id="email" type="email" placeholder="il tuo indirizzo email" required aria-required="true" />
          <button type="submit">Iscriviti</button>
        </form>
      </div>
    </section>

    <!-- CONTACT / FOOTER CTA -->
    <section id="contatti" style="margin-top:2.4rem">
      <div class="card" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap">
        <div>
          <h3>Pronto a iniziare?</h3>
          <p class="muted">Parliamo del tuo progetto e costruiamo insieme il design system perfetto.</p>
        </div>
        <div style="display:flex;gap:.6rem">
          <a class="btn" href="mailto:hello@tuositoexample.com">Scrivici</a>
          <a class="btn ghost" href="/brief.pdf">Brief</a>
        </div>
      </div>
    </section>

  </main>

  <!-- FOOTER -->
  <footer role="contentinfo" aria-label="Footer">
    <div class="wrap" style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap">
      <div>
        <strong>Studio Creativo</strong>
        <div class="muted">Via Esempio 12, Milano • P.IVA 123456789</div>
      </div>

      <div class="center">
        <div class="muted">© <span id="year"></span> Studio Creativo — Tutti i diritti riservati</div>
      </div>

      <div style="text-align:right">
        <div class="socials"><a href="#" aria-label="Twitter">T</a><a href="#" aria-label="LinkedIn">in</a></div>
      </div>
    </div>
  </footer>

  <!-- ================
       Micro scripts: parallax, sticky header, subscribe demo & accessibility
       ================ -->
  <script>
    // Set year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Sticky header on scroll (adds class 'scrolled')
    const header = document.getElementById('site-header');
    const heroHeight = document.querySelector('.hero-welcome')?.offsetHeight || 300;
    window.addEventListener('scroll', () => {
      if (window.scrollY > (heroHeight - 120)) header.classList.add('scrolled'); else header.classList.remove('scrolled');
      // Parallax subtle effect on hero gradient
      const hero = document.querySelector('.hero-welcome');
      if (hero){
        const rect = hero.getBoundingClientRect();
        const y = Math.max(-40, Math.min(40, -rect.top / 12));
        document.querySelectorAll('.gradient-shape').forEach((el,i)=> {
          el.style.transform = 'translate3d(' + (y*(i+1)) + 'px,' + (y*(i+1)/2) + 'px,0) rotate(' + (y/5) + 'deg)';
        });
      }
    });

    // Accessibility: keyboard toggle for mobile menu
    document.querySelectorAll('.mobile-toggle').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        const nav = document.querySelector('nav.main-nav');
        const open = nav.style.display !== 'flex';
        nav.style.display = open ? 'flex' : 'none';
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
    });

    // Small demo subscribe function (replace with real integration)
    function subscribeDemo(){
      const email = document.getElementById('email').value;
      if (!email) return alert('Inserisci la tua email');
      // Here you'd call your API (Mailchimp, Sendinblue...). For demo:
      alert('Grazie! Ti abbiamo aggiunto alla lista: ' + email);
      document.getElementById('email').value = '';
    }

    // Performance tip: add lazy loading + intersection for subtle reveal (progressive enhancement)
    if ('IntersectionObserver' in window) {
      document.querySelectorAll('.card, .item').forEach(el=>{
        el.style.opacity = 0;
      });
      const io = new IntersectionObserver((entries)=>{
        entries.forEach(entry=>{
          if (entry.isIntersecting) { entry.target.style.transition = 'opacity .8s ease, transform .6s ease'; entry.target.style.opacity=1; entry.target.style.transform='translateY(0)'; io.unobserve(entry.target); }
        });
      }, {threshold:.12});
      document.querySelectorAll('.card, .item').forEach(el=>{
        el.style.transform='translateY(12px)'; io.observe(el);
      });
    }

    // Progressive enhancement: respects prefers-reduced-motion
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced){
      document.querySelectorAll('.animated-gradient, .gradient-shape').forEach(e=> e.style.animation = 'none');
    }
  </script>

  <!-- ===== SEO / Performance Hints (in-page for devs) =====
       - Use HTTP/2 or HTTP/3 + Brotli compression on server.
       - Serve scaled images and modern formats (AVIF/WebP) from your CDN.
       - Use caching (Cache-Control) for /img/ assets and set long expires.
       - Add critical CSS inline (we included core CSS inline) and defer large CSS files.
       - Implement <link rel="preload"> for hero images if needed.
       - Use real sitemap.xml and robots.txt at root, and set canonical URLs.
       - Integrate server-side structured data rendering (we included JSON-LD).
  -->

</body>
</html>