Aurora Flux — Concept Design by @Darkness977 - Codewith.it

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

Referenze

nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<li>Inserisce voci all'interno di una lista
<em>Formatta il testo in corsivo/italico enfatizzato
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
formnovalidateImpedisce la convalida di un singolo elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

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>Aurora Flux — Concept Design (Updated)</title>

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

  <style>
    :root{
      --bg: #0b0b0b;
      --panel: #0f0f10;
      --muted: #bfbfbf;
      --text: #ffffff;
      --accent: #a46cff;
      --accent2: #4fd2ff;
      --card: #111214;
      --border: rgba(255,255,255,0.06);

      --container: 1200px;

      --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      --font-serif: "Playfair Display", Georgia, serif;

      /* global section padding (desktop base) */
      --padding-section: 300px;

      /* button base */
      --btn-vert: 19px; /* +5px rispetto a 14 */
      --btn-horz: 33px; /* +5px rispetto a 28 */

      --radius: 12px;
      --shadow-lg: 0 12px 60px rgba(0,0,0,0.6);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:var(--font-sans);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.55;
      font-size:15px;
    }
    img{display:block;max-width:100%;height:auto;border-radius:10px}
    a{color:inherit;text-decoration:none}

    .container{
      width:calc(100% - 48px);
      max-width:var(--container);
      margin:0 auto;
      padding-left:24px;
      padding-right:24px;
    }

    h1,h2,h3{font-family:var(--font-serif);margin:0;color:var(--text)}
    .lead{color:var(--muted)}

    /* ----- global section spacing ----- */
    section{ padding: var(--padding-section) 0; position:relative; }

    /* ----- HERO ----- */
    header.hero{ padding:180px 0 140px; text-align:center }
    .hero-title{
      font-size:82px; font-weight:700; letter-spacing:0.4px;
      background: linear-gradient(90deg,var(--accent),var(--accent2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      opacity:0; transform:translateY(40px); animation:heroIn .9s ease-out forwards;
    }
    .hero-sub{ font-family:var(--font-serif); font-style:italic; color:var(--muted); margin-top:10px; opacity:0; transform:translateY(40px); animation:heroIn .95s ease-out .15s forwards; }
    @keyframes heroIn{ to{opacity:1; transform:translateY(0)} }

    .lead { max-width:820px; margin:18px auto 0; font-size:18px; color:var(--muted) }

    /* ----- GALLERY 3x3 ----- */
    #gallery .gallery-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
      margin-top:40px;
    }
    #gallery .gallery-grid img{
      height:340px; object-fit:cover; border-radius:14px;
      transition: transform .6s cubic-bezier(.2,.9,.2,1), filter .45s;
      filter:grayscale(.04) contrast(.98) saturate(.95);
    }
    #gallery .gallery-grid img:hover{ transform:scale(1.03); filter:grayscale(0) contrast(1.02) saturate(1.05) }

    /* Ensure the marquee is close to gallery: make bottom padding of gallery small and top padding of marquee small so the distance ≈ 400px */
    #gallery { padding-bottom:200px; } /* 200px */
    #flux-carousel { padding-top:200px; } /* 200px → 200+200 = 400px */

    /* ----- MARQUEE (testo scorrevole) ----- */
    .marquee-wrap{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
    .marquee{
      display:inline-block; font-size:44px; font-family:var(--font-serif);
      padding-right:6vw; opacity:.95;
      animation:scroll 28s linear infinite;
    }
    @keyframes scroll { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

    /* ----- FEATURES — contrast + overlay + hover ----- */
    #features .features-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:40px;
      margin-top:60px;
    }

    .feature-card{
      position:relative;
      padding:44px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      border-radius:16px;
      overflow:hidden;
      min-height:320px;
      transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s, border-color .36s;
      box-shadow: 0 6px 30px rgba(0,0,0,0.55);
    }

    /* subtle accent overlay layered behind */
    .feature-card::before{
      content:'';
      position:absolute; inset:0; pointer-events:none;
      background: linear-gradient(135deg, rgba(164,108,255,0.06), rgba(79,210,255,0.02));
      mix-blend-mode: screen;
      opacity:0.9;
      transition: opacity .36s;
    }

    .feature-icon{
      width:68px; height:68px; border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:30px; color:#050505;
      background:linear-gradient(180deg,var(--accent),var(--accent2));
      box-shadow: 0 8px 30px rgba(164,108,255,0.14);
      transform: translateY(-2px);
    }

    .feature-card h3{ font-size:28px; margin-top:18px; color: #f7f7f7 }
    .feature-card p{ margin:12px 0 0; color:var(--muted); font-size:15px }

    /* hover: lift, stronger border, overlay more visible, text contrast up */
    .feature-card:hover{
      transform: translateY(-10px) scale(1.01);
      box-shadow: 0 26px 80px rgba(0,0,0,0.65);
      border-color: rgba(164,108,255,0.22);
    }
    .feature-card:hover::before{ opacity:1; filter: blur(6px) }
    .feature-card:hover h3{ color:#fff }
    .feature-card:hover p{ color:#e6e6e6 }

    /* ----- BIG CTA BUTTONS (all buttons +5px) ----- */
    .btn{
      display:inline-block;
      border-radius:12px;
      padding: var(--btn-vert) var(--btn-horz);
      font-weight:700;
      font-size:16px;
      cursor:pointer;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      transition: transform .18s ease, box-shadow .18s ease, background .18s;
    }
    .btn:active{ transform: translateY(1px) scale(.998) }
    .btn:hover{ transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,0.6) }

    .btn-primary{
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
      color:#050505;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 16px 60px rgba(164,108,255,0.18);
    }
    .btn-primary:hover{ box-shadow: 0 28px 100px rgba(164,108,255,0.22); transform: translateY(-4px) scale(1.01) }

    /* visible border variant for other frame */
    .btn-outline{
      border: 2px solid rgba(255,255,255,0.08);
      padding: calc(var(--btn-vert) - 2px) calc(var(--btn-horz) - 2px);
    }

    /* ----- CURVE + QUOTE ----- */
    .curve-section{
      background: radial-gradient(circle at 20% 10%, rgba(164,108,255,0.06), transparent 20%),
                  radial-gradient(circle at 80% 90%, rgba(79,210,255,0.03), transparent 15%);
      padding:220px 0;
      text-align:center;
    }
    .curve-quote{ font-size:42px; font-family:var(--font-serif); max-width:980px; margin:0 auto; color:#f6f6f6 }
    .curve-small{ color:var(--muted); margin-top:18px }

    /* ----- NEWSLETTER (elegante) ----- */
    .newsletter {
      padding:80px 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }
    .newsletter .card{
      max-width:920px; margin:0 auto; padding:34px; border-radius:16px;
      background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03);
      display:flex; gap:18px; align-items:center; justify-content:space-between;
      box-shadow: var(--shadow-lg);
    }
    .newsletter .meta{ max-width:62% }
    .newsletter h3{ font-size:26px; margin:0 0 6px }
    .newsletter p{ margin:0; color:var(--muted) }

    .newsletter form{ display:flex; gap:12px; align-items:center }
    .newsletter input[type="email"]{
      background:transparent; border:1px solid rgba(255,255,255,0.06);
      color:var(--text); padding:14px 18px; border-radius:10px; min-width:320px;
    }
    .newsletter .btn{ margin:0; }

    /* ----- FOOTER ----- */
    footer.footer{
      background: #0a0a0a; border-top:1px solid rgba(255,255,255,0.06); padding:80px 0 40px; color:var(--muted);
    }
    .footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px; max-width:1200px; margin:0 auto; padding:0 24px; }
    .footer-col h4{ font-family:var(--font-serif); color:var(--text); font-size:15px; margin-bottom:12px }
    .footer-col a{ display:block; margin-bottom:8px; color:var(--muted); text-decoration:none; font-size:14px }
    .footer-bottom{ text-align:center; margin-top:32px; opacity:0.6; font-size:14px; border-top:1px solid rgba(255,255,255,0.04); padding-top:18px }

    /* ----- Responsive ----- */
    @media (max-width:1000px){
      .feature-card{ min-height:240px; padding:28px }
      #gallery .gallery-grid{ grid-template-columns:repeat(2,1fr) }
      section{ padding:220px 0 }
      #gallery{ padding-bottom:150px } /* adjust for mobile spacing */
      #flux-carousel{ padding-top:150px }
    }
    @media (max-width:680px){
      header.hero{ padding:110px 0 80px }
      .hero-title{ font-size:98px }
      .marquee{ font-size:26px }
      .newsletter .card{ flex-direction:column; gap:14px }
      .newsletter input[type="email"]{ min-width:100% }
      .footer-grid{ grid-template-columns:repeat(2,1fr) }
      section{ padding:140px 0 }
    }
    @media (max-width:420px){
      .footer-grid{ grid-template-columns:1fr }
      #gallery .gallery-grid{ grid-template-columns:1fr }
    }

  </style>
</head>
<body>

  <!-- HERO -->
  <header class="hero">
    <div class="container">
      <h1 class="hero-title">Aurora Flux</h1>
      <div class="hero-sub">Resonance in Motion</div>
      <p class="lead">Una presenza scultorea. Un motore acustico. Una nuova estetica del suono.</p>
    </div>
  </header>

  <!-- GALLERY 3x3 -->
  <section id="gallery">
    <div class="container">
      <h2>Designed for Presence</h2>
      <p class="lead">Una collezione visiva che mostra come Aurora Flux vive nello spazio.</p>

      <div class="gallery-grid" style="margin-top:40px;">
        <!-- 9 immagini (mock URLs) -->
        <img src="https://images.unsplash.com/photo-1493666438817-866a91353ca9?w=1200&q=60&auto=format&fit=crop" alt="gallery1">
        <img src="https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=60&auto=format&fit=crop" alt="gallery2">
        <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1200&q=60&auto=format&fit=crop" alt="gallery3">
        <img src="https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?w=1200&q=60&auto=format&fit=crop" alt="gallery4">
        <img src="https://images.unsplash.com/photo-1487014679447-9f8336841d58?w=1200&q=60&auto=format&fit=crop" alt="gallery5">
        <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&q=60&auto=format&fit=crop" alt="gallery6">
        <img src="https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?w=1200&q=60&auto=format&fit=crop" alt="gallery7">
        <img src="https://images.unsplash.com/photo-1519710164239-da123dc03ef4?w=1200&q=60&auto=format&fit=crop" alt="gallery8">
        <img src="https://images.unsplash.com/photo-1505691723518-36a0d88a6c24?w=1200&q=60&auto=format&fit=crop" alt="gallery9">
      </div>
    </div>
  </section>

  <!-- MARQUEE (avvicinato alla gallery) -->
  <section id="flux-carousel">
    <div class="container">
      <div class="marquee-wrap">
        <div class="marquee">
          AURORA FLUX — RESONANCE IN MOTION — SOUND DESIGNED AS LIGHT — HARMONIC PRESENCE — AURORA FLUX —
        </div>
      </div>
    </div>
  </section>

  <!-- FEATURES — maggiore leggibilità + overlay + hover -->
  <section id="features">
    <div class="container">
      <h2>Flux Features</h2>
      <p class="lead">Componenti progettati per una percezione più profonda — leggibilità migliorata, contrasto rinforzato.</p>

      <div class="features-grid">
        <div class="feature-card" aria-hidden="false">
          <div class="feature-icon" aria-hidden="true">?</div>
          <h3>Spatial Acoustic Bloom</h3>
          <p>Diffusione controllata per una sensazione ambientale naturale e priva di colorazioni.</p>
        </div>

        <div class="feature-card" aria-hidden="false">
          <div class="feature-icon" aria-hidden="true">?</div>
          <h3>Zero-Noise Shell</h3>
          <p>Struttura interna damped per eliminare risonanze improduttive e migliorare la purezza timbrica.</p>
        </div>

        <div class="feature-card" aria-hidden="false">
          <div class="feature-icon" aria-hidden="true">⚙️</div>
          <h3>Flux Motion Engine</h3>
          <p>Adattamento in tempo reale del campo sonoro in base alla geometria e alla presenza umana.</p>
        </div>

        <div class="feature-card" aria-hidden="false">
          <div class="feature-icon" aria-hidden="true">?</div>
          <h3>Capacitive Surface Mesh</h3>
          <p>Interazione tattile nascosta nella scocca: gesti semplici per un controllo immediato.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CURVE + QUOTE -->
  <section class="curve-section" aria-labelledby="curve-quote">
    <div class="container">
      <div class="curve-quote" id="curve-quote">“Il suono non è soltanto ciò che ascoltiamo, ma ciò che abita lo spazio.”</div>
      <div class="curve-small">— Aurora Flux Studio</div>
    </div>
  </section>

  <!-- NEWSLETTER (prima del footer) -->
  <section class="newsletter" aria-labelledby="newsletter-title">
    <div class="container">
      <div class="card">
        <div class="meta">
          <h3 id="newsletter-title">Ricevi aggiornamenti dal laboratorio Aurora Flux</h3>
          <p class="lead">Progetti futuri, limited drops e studi acustici — direttamente nella tua casella.</p>
        </div>

        <form onsubmit="event.preventDefault(); alert('Grazie — iscrizione demo registrata');" aria-label="Iscriviti alla newsletter">
          <input type="email" placeholder="La tua email" aria-label="Email" required />
          <button class="btn btn-primary" type="submit">Iscriviti</button>
        </form>
      </div>
    </div>
  </section>

  <!-- MODEL & CTA -->
  <section id="model">
    <div class="container" style="text-align:center">
      <h2>Aurora Flux — Terracotta Clay</h2>
      <div class="price" style="font-size:38px;font-weight:800;margin:12px 0 20px">$799</div>

      <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap">
        <button class="btn btn-primary" onclick="alert('Aggiunto al carrello (simulazione).')">Add to Cart</button>
        <button class="btn btn-outline" onclick="alert('Trova in negozio (simulazione)')">Find in Store</button>
      </div>
    </div>
  </section>

  <!-- FOOTER ELEGANTE -->
  <footer class="footer" role="contentinfo">
    <div class="footer-grid">
      <div class="footer-col">
        <h4>Aurora Flux</h4>
        <a href="#">About</a>
        <a href="#">Design Philosophy</a>
        <a href="#">Materials</a>
        <a href="#">Studio</a>
      </div>

      <div class="footer-col">
        <h4>Products</h4>
        <a href="#">Terracotta Clay</a>
        <a href="#">Matte Graphite</a>
        <a href="#">Limited Editions</a>
        <a href="#">Accessories</a>
      </div>

      <div class="footer-col">
        <h4>Support</h4>
        <a href="#">FAQ</a>
        <a href="#">Guides</a>
        <a href="#">Repair & Care</a>
        <a href="#">Warranty</a>
      </div>

      <div class="footer-col">
        <h4>Connect</h4>
        <a href="#">Instagram</a>
        <a href="#">Behance</a>
        <a href="#">Press</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <div class="footer-bottom">
      <p>© 2025 Aurora Flux Studio. All rights reserved.</p>
    </div>
  </footer>

  <!-- Small script: nothing fancy, solo demo interactions -->
  <script>
    // Nothing heavy: keep the page light.
    // Hook: close marquee animation on reduced motion preferences
    (function(){
      const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
      if(mq.matches){
        document.querySelectorAll('.marquee').forEach(m=> m.style.animation = 'none');
      }
    })();
  </script>
</body>
</html>

/* -----------------------------------------------------------
   FOOTER — Apple-inspired
----------------------------------------------------------- */
.footer {
    background: #0a0a0a;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 80px 0 40px;
    margin-top: 120px;
    font-size: 15px;
    color: var(--muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--muted);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.footer-col ul li a:hover {
    opacity: 0.6;
}

.footer-bottom {
    text-align: center;
    font-size: 14px;
    opacity: 0.6;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}