Chronē — Orologi d\'autore • by @Darkness977 - Codewith.it

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

References

srcIndica la provenienza di una risorsa esterna (tramite URL).
<tfoot>Definisce il footer o sezione inferiore di una tabella.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<abbr>Inserisce abbreviazioni e acronimi
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

Esercizio (02/02/2024)

tabella delle matricole

Heads Or Tails Tally

Creatore Badge Aziendale

Proposta di Matrimonio

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>Chronē — Orologi d'autore • Accesso VIP</title>

  <!-- Fonts: Playfair Display (luxury serif) + Inter (modern sans) -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --bg:#0b1220;             /* deep navy */
      --card:#0f1722;           /* panel */
      --accent:#c5a65a;         /* soft gold */
      --muted:#a8b0bd;          /* muted text */
      --ivory:#f7f4ef;          /* light background for sections */
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --max-width:1100px;
      --container-gap:28px;
    }

    /* Reset & base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      background:linear-gradient(180deg, var(--bg) 0%, #07101a 100%);
      color:var(--ivory);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      letter-spacing:0.01em;
    }
    a{color:inherit;text-decoration:none}

    /* Layout */
    .wrap{max-width:var(--max-width);margin:36px auto;padding:24px;display:grid;grid-template-columns:1fr;gap:24px}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{
      width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg, rgba(197,166,90,0.12), rgba(255,255,255,0.02));
      display:flex;align-items:center;justify-content:center;font-family:Playfair Display,serif;font-weight:700;color:var(--accent);font-size:20px;box-shadow:0 6px 30px rgba(0,0,0,0.6);
    }
    .brand h1{margin:0;font-family:Playfair Display,serif;font-size:18px;letter-spacing:0.06em}
    .brand p{margin:0;font-size:12px;color:var(--muted)}

    nav{display:flex;gap:14px;align-items:center}
    nav a{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:10px}
    nav a.cta{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--ivory)}

    /* Hero */
    .hero{
      background:
        linear-gradient(180deg, rgba(11,18,32,0.62), rgba(11,18,32,0.82)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600"><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="%23c5a65a"/><stop offset="1" stop-color="%23ffffff"/></linearGradient></defs><rect width="100%" height="100%" fill="%230b1220"/><circle cx="900" cy="220" r="120" fill="url(%23g)" opacity="0.06"/></svg>') center/cover no-repeat;
      border-radius:var(--radius);
      padding:44px;
      display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:center;
      box-shadow:0 10px 50px rgba(0,0,0,0.6);
    }
    .hero .lead{
      max-width:760px;
    }
    .super{color:var(--accent);font-family:Playfair Display,serif;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:12px}
    .headline{font-family:Playfair Display,serif;font-size:44px;margin:0 0 12px;line-height:1.02}
    .headline .highlight{color:var(--accent);padding:0 6px;border-radius:6px;background:linear-gradient(90deg, rgba(197,166,90,0.06), rgba(255,255,255,0.02))}
    .sub{color:var(--muted);font-size:16px;max-width:60ch;margin-bottom:18px}
    .hero-cta{display:flex;gap:12px;align-items:center}

    .btn{
      display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;font-weight:600;font-size:15px;border:0;cursor:pointer;
      transition:transform .14s ease, box-shadow .14s ease;
      box-shadow:0 8px 30px rgba(10,12,16,0.35);
    }
    .btn.primary{background:linear-gradient(90deg,var(--accent),#f0d27a);color:#07101a}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--ivory)}

    .btn:active{transform:translateY(1px)}
    .cta-note{font-size:13px;color:var(--muted)}

    /* VIP card (form) */
    .vip-card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
      border-radius:14px;padding:20px;backdrop-filter: blur(6px);box-shadow:0 8px 30px rgba(2,6,10,0.6);
      border:1px solid rgba(255,255,255,0.03);
    }
    .vip-card h3{margin:0 0 8px;font-family:Playfair Display,serif}
    .vip-card p{margin:0 0 14px;color:var(--muted);font-size:14px}
    .form-row{display:flex;flex-direction:column;gap:8px}
    .input, .select{
      padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:var(--ivory);outline:none;font-size:14px
    }
    .small{font-size:12px;color:var(--muted);margin-top:8px}

    /* Sections */
    section{background:linear-gradient(180deg,transparent, rgba(0,0,0,0.02));padding:28px;border-radius:12px}
    .content{display:grid;gap:18px}
    .two-col{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}

    .prose p{margin:0 0 16px;color:var(--ivory);font-size:16px}
    .prose .highlight{color:var(--accent);font-weight:600}
    .muted{color:var(--muted)}

    /* Testimonials */
    .testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .testi{background:var(--glass);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .testi p{margin:0 0 10px;color:var(--ivory)}
    .testi .who{font-weight:600;color:var(--accent);font-size:13px}

    /* Feature list (visually separated paragraphs) */
    .feature{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));border:1px solid rgba(255,255,255,0.02)}

    /* Footer */
    footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;padding:12px 6px}
    footer a{color:var(--muted)}

    /* A/B toggle (simple) */
    .ab-toggle{display:flex;gap:8px;align-items:center;margin-bottom:8px}
    .ab-toggle button{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted);cursor:pointer}
    .ab-toggle button.active{background:rgba(197,166,90,0.12);color:var(--accent);border-color:rgba(197,166,90,0.2)}

    /* Responsive */
    @media (max-width:1000px){
      .hero{grid-template-columns:1fr; padding:28px}
      .two-col{grid-template-columns:1fr}
      .testimonials{grid-template-columns:1fr}
      .wrap{padding:18px}
    }
  </style>
</head>
<body>
  <div class="wrap" role="main">

    <!-- Header -->
    <header aria-label="Header">
      <div class="brand">
        <div class="logo" aria-hidden="true">C</div>
        <div>
          <h1>Chronē</h1>
          <p>Orologi d'autore</p>
        </div>
      </div>
      <nav>
        <a href="#philosophy">Filosofia</a>
        <a href="#vip">VIP List</a>
        <a class="cta" href="#contact">Contatti</a>
      </nav>
    </header>

    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="lead">
        <div class="super">Edizioni Limitate • Anteprime Riservate</div>
        <h2 id="hero-title" class="headline">
          Il tempo non si misura: <span class="highlight">si firma.</span>
        </h2>
        <p class="sub">
          Chronē unisce <span class="highlight">arte</span>, ingegneria svizzera e materiali nobili per creare orologi che sono <span class="highlight">veri segni di identità</span>. Non un accessorio: un gesto estetico che parla di chi lo indossa.
        </p>

        <div class="hero-cta" aria-hidden="false">
          <button class="btn primary" onclick="document.getElementById('email').focus()">
            Iscriviti alla VIP List — Accedi all'anteprima
          </button>
          <a class="btn ghost" href="#philosophy">Scopri la Filosofia</a>
        </div>

        <p class="cta-note small">Accesso riservato. Edizioni limitate. Posti alla prevendita numerati.</p>
      </div>

      <!-- VIP Signup card -->
      <aside class="vip-card" id="vip" aria-labelledby="vip-title">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:10px">
          <div>
            <h3 id="vip-title">Accesso Privato — VIP List</h3>
            <p class="muted">Ricevi inviti, anteprime e prenotazioni prioritarie sulle collezioni limitate.</p>
          </div>
          <div style="text-align:right;color:var(--muted);font-size:13px">Edizioni <strong>≤ 50</strong> pezzi</div>
        </div>

        <div style="margin-top:14px">
          <div class="ab-toggle" role="tablist" aria-label="A/B copy toggle">
            <button id="btnA" class="active" role="tab" aria-selected="true" onclick="setVariant('A')">Variante A</button>
            <button id="btnB" role="tab" aria-selected="false" onclick="setVariant('B')">Variante B</button>
          </div>

          <form id="vipForm" onsubmit="onSubmit(event)">
            <div class="form-row">
              <input id="name" name="name" class="input" placeholder="Nome" aria-label="Nome" required>
              <input id="email" name="email" class="input" placeholder="Email — es. nome@esempio.com" aria-label="Email" type="email" required>
              <select id="interest" name="interest" class="select" aria-label="Interesse">
                <option value="">Interesse (seleziona)</option>
                <option>Collezione limitata</option>
                <option>Custom & su misura</option>
                <option>Eventi VIP</option>
              </select>
            </div>

            <p class="small muted">Iscrivendoti confermi di voler ricevere comunicazioni relative alle collezioni e alle anteprime. Nessuna vendita automatica.</p>

            <div style="display:flex;gap:10px;margin-top:12px">
              <button class="btn primary" type="submit" id="submitBtn">Richiedi accesso VIP</button>
              <button class="btn ghost" type="button" onclick="previewPDF()">Scarica Brochure (PDF)</button>
            </div>

            <p id="formNote" class="small muted" style="margin-top:10px">I primi 50 iscritti riceveranno un invito personale al lancio.</p>
          </form>
        </div>
      </aside>
    </section>

    <!-- Two-column content: Copy + Highlights -->
    <section class="two-col" id="philosophy">
      <div class="content prose">
        <h3 style="font-family:Playfair Display,serif;margin-top:0">Il design come dichiarazione</h3>
        <p>
          Indossare Chronē è compiere una scelta consapevole: non seguire il tempo, ma definirlo. Ogni cassa è disegnata come una <span class="highlight">scultura portatile</span>, ogni movimento è tarato per offrire una precisione che sfida la routine quotidiana. La nostra filosofia nasce dall'incontro fra <span class="highlight">maestria artigiana</span> e ricerca formale: creando pezzi che raccontano storie avanti nel tempo.
        </p>

        <p>
          Il lusso, per noi, è selezione. È il piacere di possedere qualcosa che pochi possono avere, e che molti ammirano. È uno <span class="highlight">status symbol sottile</span>, capace di trasformare un gesto quotidiano in un atto di stile.
        </p>

        <div class="feature" aria-hidden="false">
          <strong>Perché Chronē?</strong>
          <p class="muted">Precisione svizzera, finiture in oro rosa e titanio, vetro zaffiro antiriflesso, cinturini in pelle conciata italiana. Ogni pezzo è numerato e accompagnato da documentazione di autenticità.</p>
        </div>
      </div>

      <aside>
        <div class="feature">
          <h4 style="margin:0 0 8px;font-family:Playfair Display,serif">Materiali e meccanica</h4>
          <p class="muted">Movimenti meccanici a carica manuale e automatica, parti lavorate a mano, combinazioni materiche studiate per la durabilità estetica. La sensazione tattile è parte dell'opera.</p>
        </div>

        <div class="feature" style="margin-top:18px">
          <h4 style="margin:0 0 8px;font-family:Playfair Display,serif">Accesso riservato</h4>
          <p class="muted">La VIP List sblocca prevendite, eventi privati e la possibilità di richiedere personalizzazioni su misura. L'accesso è curato e limitato.</p>
        </div>
      </aside>
    </section>

    <!-- Testimonials & Proof -->
    <section>
      <h3 style="font-family:Playfair Display,serif;margin-top:0">Parlano di noi</h3>
      <div class="testimonials">
        <div class="testi">
          <p>"Un equilibrio perfetto tra arte e ingegneria. È più di un orologio: è una dichiarazione di stile."</p>
          <div class="who">Luca R., Architetto — Milano</div>
        </div>

        <div class="testi">
          <p>"Materiali straordinari, rifiniture impeccabili. L'invito alla VIP List è stato il segnale che volevo: esclusività tangibile."</p>
          <div class="who">Elena M., Collezionista — Roma</div>
        </div>

        <div class="testi">
          <p>"Le edizioni limitate hanno numeri ristretti: un vero oggetto da collezione, pensato per durare nel tempo."</p>
          <div class="who">Press: <span class="muted">Design & Time</span></div>
        </div>

        <div class="testi">
          <p>"Assistenza dedicata, prevendite riservate e una comunità discreta. Sentirsi parte di qualcosa di curato."</p>
          <div class="who">Giovanni F., Collezionista — Firenze</div>
        </div>
      </div>
    </section>

    <!-- Strong persuasion block -->
    <section>
      <div class="content">
        <h3 style="font-family:Playfair Display,serif;margin-top:0">Ciò che ottieni iscrivendoti</h3>
        <p class="muted">
          Accesso anticipato ai lanci • Priorità prenotazioni • Eventi privati • Possibilità di personalizzazione • Documentazione e certificato numerato.
        </p>

        <p class="prose">
          <span class="highlight">Non è un catalogo:</span> è un percorso di scoperta riservato. Se l'idea di possedere un pezzo unico, numerato e curato fino al più piccolo dettaglio ti attrae, la VIP List è la via d'ingresso. L'anteprima di una collezione può essere l'inizio di una piccola eredità da tramandare.
        </p>

        <div style="display:flex;gap:14px;align-items:center">
          <button class="btn primary" onclick="document.getElementById('email').focus()">Richiedi accesso ora — Posti limitati</button>
          <a class="btn ghost" href="#vip">Scopri come funziona</a>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div>© <strong>Chronē</strong> — Orologi d'autore</div>
      <div>
        <a href="#privacy">Privacy</a> · <a href="#terms">Termini</a>
      </div>
    </footer>
  </div>

  <!-- Minimal JS for A/B toggle & form UX -->
  <script>
    // Initial variant A
    function setVariant(v){
      document.getElementById('btnA').classList.remove('active');
      document.getElementById('btnB').classList.remove('active');
      if(v === 'A'){
        document.getElementById('btnA').classList.add('active');
        // Set copy for Variant A (emotional)
        document.querySelector('.headline').innerHTML = 'Il tempo non si misura: <span class="highlight">si firma.</span>';
        document.querySelector('.sub').innerHTML = 'Chronē unisce <span class="highlight">arte</span>, ingegneria svizzera e materiali nobili per creare orologi che sono <span class="highlight">veri segni di identità</span>. Non un accessorio: un gesto estetico che parla di chi lo indossa.';
        document.getElementById('submitBtn').innerText = 'Iscriviti — Entra in anteprima';
      } else {
        document.getElementById('btnB').classList.add('active');
        // Set copy for Variant B (authority / conversion)
        document.querySelector('.headline').innerHTML = 'Design, ingegneria, privilegio: <span class="highlight">possedere il tempo.</span>';
        document.querySelector('.sub').innerHTML = 'Progettati per chi pretende precisione assoluta. Edizioni limitate, meccanismi certificati e un’esperienza VIP che trasforma il possesso in privilegio.';
        document.getElementById('submitBtn').innerText = 'Richiedi Accesso VIP — Priorità';
      }
    }

    // default A
    setVariant('A');

    // Simple form handler (no backend). Replace with your endpoint.
    function onSubmit(e){
      e.preventDefault();
      const name = document.getElementById('name').value || 'Amico';
      // Show a lightweight modal/alert — in production replace with proper flow
      alert('Grazie, ' + name + '. La tua richiesta è stata ricevuta. Riceverai presto le istruzioni via email.');
      document.getElementById('vipForm').reset();
    }

    function previewPDF(){
      // Placeholder: in produzione link to real brochure
      alert('Brochure demo non disponibile in questa preview. Carica il PDF e sostituisci la funzione per il download.');
    }
  </script>
</body>
</html>