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

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

Referenze

hrefDefinisce l'URL della risorsa/pagina di destinazione.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<video>Integra e controlla video in una pagina HTML
text/plainDefinisce un metodo di non codifica dei valori di un form
<table>Tag primario per la creazione di tabelle

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

Esercitazione 1

Esercizio 1 Html

image gattino siamese

form per il torneo misto disfor s

Movimento libero JS

Our first web page!

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" />
  <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>