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

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

Referenze

<input>Definisce un area di input per l'invio di dati e informazioni
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<nav>Definisce un menu di navigazione
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<option>Serve ad inserire una voce in un menu di selezione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Background Property > filter() met

Bootstrap Basics

Heads Or Tails Random Tally 2

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

PROVA SITO ALEX

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