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

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

References

heightDetermina l'altezza di un elemento HTML in pixel
<aside>Definisce un contenuto separato dal testo perincipale
<h2>Titolo di intestazione di secondo livello
methodDetermina il metodo di invio dei dati di un form al server
<a>Inserisce link e collegamenti ipertestuali
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

Review of Functions I

il museo di leonardo

Movimento libero JS

passi avanti regioni italiane

\\\"Il Razzismo - Un Tema Importa(2)

esercizio 2 esame

Éclat Couture - Alta Moda Artigia

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>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);
}