Neon Flux - Visual Design in Motio by @Darkness977 - Codewith.it

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

Referenze

minImposta il valore numerico o temporale minimo per un elemento input
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
maxImposta il valore numerico o temporale massimo per un elemento input
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<abbr>Inserisce abbreviazioni e acronimi

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

sito mattia chiarabini

Esercizio lezione 9

Round+ - social bar

Snapchat URL Viewer

Landing page di un prodotto

Prova javascript

Neon Flux - Visual Design in Motio

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.0">
  <title>Neon Flux</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body class="dark">

  <!-- Hero -->
  <header class="hero">
    <div class="vertical-slider">
      <section class="hero-slide" data-bg="placeholder-hero1.jpg">
        <h1 class="hero-title">Neon Flux</h1>
        <p class="hero-subtitle">Designed for Presence</p>
      </section>

      <section class="hero-slide" data-bg="placeholder-hero2.jpg">
        <h1 class="hero-title">Light in Motion</h1>
        <p class="hero-subtitle">Where Flow Meets Design</p>
      </section>
    </div>

    <button class="theme-toggle" id="themeToggle">⦿</button>
  </header>

  <!-- Gallery 3×3 -->
  <section class="gallery">
    <h2 class="section-title">Designed for Presence</h2>
    <div class="grid">
      <div class="ph"></div><div class="ph"></div><div class="ph"></div>
      <div class="ph"></div><div class="ph"></div><div class="ph"></div>
      <div class="ph"></div><div class="ph"></div><div class="ph"></div>
    </div>
  </section>

  <!-- Marquee -->
  <section class="marquee-section">
    <div class="marquee">
      <span>Innovation — Presence — Neon Flow — Elegant Motion — Minimal Design — </span>
    </div>
  </section>

  <!-- Features -->
  <section class="features">
    <h2 class="section-title">Flux Features</h2>

    <div class="cards">
      <div class="feature-card glass">
        <h3>Precision Glow</h3>
        <p>The light moves with purpose. Soft, dynamic, alive.</p>
      </div>

      <div class="feature-card glass">
        <h3>Glass Parallax</h3>
        <p>Layers of depth that shift as you scroll.</p>
      </div>

      <div class="feature-card glass">
        <h3>Vertical Flow</h3>
        <p>Transitions engineered with cinematic fluidity.</p>
      </div>
    </div>
  </section>

  <!-- Curve + Quote -->
  <section class="quote-section">
    <div class="curve-bg"></div>
    <blockquote>
      “Design is not what you see — it is what moves you.”
    </blockquote>
  </section>

  <!-- Product -->
  <section class="product-model">
    <div class="product-placeholder"></div>
    <h2>Terracotta Clay</h2>
    <p class="price">€ 299</p>
    <button class="cta">Buy Now</button>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-grid">

      <div class="footer-col">
        <h4>Company</h4>
        <ul><li>About</li><li>Careers</li><li>Press</li></ul>
      </div>

      <div class="footer-col">
        <h4>Products</h4>
        <ul><li>Terracotta Clay</li><li>Neon Series</li><li>Flux Accessories</li></ul>
      </div>

      <div class="footer-col">
        <h4>Support</h4>
        <ul><li>Help Center</li><li>Warranty</li><li>Contact</li></ul>
      </div>

      <div class="footer-col newsletter">
        <h4>Newsletter</h4>
        <input type="email" placeholder="Your email">
        <button>Subscribe</button>
      </div>

    </div>

    <div class="credits">
      © 2025 Neon Flux — Designed with Light & Purpose.
    </div>
  </footer>

<script src="script.js"></script>

</body>
</html>

/* ---------------- CORE DESIGN SYSTEM ---------------- */

:root {
  --bg-1: #0a0a0a;
  --bg-2: #111;
  --bg-3: #1a1a1a;

  --text: #f4f4f4;
  --text-soft: rgba(255,255,255,0.6);

  --accent: #00fff7;
  --accent-soft: rgba(0,255,247,0.15);

  --padding-section: 300px;

  --radius: 14px;
  --glass: rgba(255,255,255,0.05);
  --glass-border: 1px solid rgba(255,255,255,0.1);

  --font: "Helvetica Neue", Arial, sans-serif;
}

/* Dark Mode Default */
body.dark {
  background: var(--bg-1);
  color: var(--text);
}

body {
  font-family: var(--font);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* ---------------- HERO ---------------- */

.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
}

.vertical-slider {
  height: 100%;
  animation: slideHero 18s infinite alternate ease-in-out;
}

.hero-slide {
  height: 100vh;
  background-size: cover;
  background-position: center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
}

.hero-slide::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
}

.hero-slide h1,
.hero-slide p {
  position:relative;
  z-index:2;
}

.hero-title {
  font-size:4rem;
  color:var(--accent);
  text-shadow:0 0 18px var(--accent-soft);
  animation:Glow 4s infinite alternate;
}

.hero-subtitle {
  margin-top:1rem;
  font-size:1.4rem;
  opacity:0.85;
}

/* Hero animation */
@keyframes slideHero {
  0% {transform: translateY(0);}
  100% {transform: translateY(-100%);}
}

@keyframes Glow {
  from { text-shadow: 0 0 8px var(--accent-soft); }
  to   { text-shadow: 0 0 20px var(--accent); }
}

/* Theme toggle */
.theme-toggle {
  position:absolute;
  right:30px;
  bottom:30px;
  background:var(--glass);
  border:var(--glass-border);
  color:var(--text);
  padding:10px 14px;
  border-radius: var(--radius);
  cursor:pointer;
}


/* ---------------- GALLERY ---------------- */

.gallery {
  padding: var(--padding-section) 0;
  background: var(--bg-2);
  text-align: center;
}

.section-title {
  font-size:2.2rem;
  margin-bottom:50px;
  color:var(--text);
}

.grid {
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:22px;
}

.ph {
  height:250px;
  background: linear-gradient(145deg, #0f0f0f, #1d1d1d);
  border-radius:var(--radius);
  position:relative;
  box-shadow:0 0 15px rgba(0,0,0,0.3);
}

.ph::after {
  content:"PHOTO";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--text-soft);
  font-size:0.9rem;
  letter-spacing:2px;
}


/* ---------------- MARQUEE ---------------- */

.marquee-section {
  background: var(--bg-3);
  overflow:hidden;
  padding:40px 0;
}

.marquee span {
  display:inline-block;
  white-space:nowrap;
  color:var(--accent);
  font-size:1.2rem;
  animation:marquee 12s linear infinite;
}

@keyframes marquee {
  from { transform:translateX(100%); }
  to   { transform:translateX(-100%); }
}


/* ---------------- FEATURES ---------------- */

.features {
  padding: var(--padding-section) 0;
  background: var(--bg-1);
  text-align:center;
}

.cards {
  max-width:1100px;
  margin:auto;
  display:flex;
  gap:40px;
  justify-content:center;
}

.glass {
  background: var(--glass);
  border: var(--glass-border);
  padding:40px;
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  width:300px;
  transition:0.35s;
}

.glass:hover {
  transform: translateY(-10px);
  box-shadow:0 0 20px var(--accent-soft);
}

.glass h3 {
  color:var(--accent);
  margin-bottom:15px;
}


/* ---------------- QUOTE ---------------- */

.quote-section {
  position:relative;
  padding: var(--padding-section) 0;
  text-align:center;
  background: var(--bg-2);
}

.curve-bg {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:140%;
  height:200px;
  background:var(--accent-soft);
  border-radius:50%/100%;
  filter:blur(80px);
}

.quote-section blockquote {
  position:relative;
  font-size:1.8rem;
  max-width:800px;
  margin:auto;
}


/* ---------------- PRODUCT ---------------- */

.product-model {
  padding: var(--padding-section) 0;
  text-align:center;
  background: var(--bg-1);
}

.product-placeholder {
  width:350px;
  height:350px;
  margin:auto;
  background:linear-gradient(145deg,#0f0f0f,#1c1c1c);
  border-radius:var(--radius);
  box-shadow:0 0 20px rgba(0,0,0,0.35);
}

.price {
  font-size:1.9rem;
  margin:15px 0 25px;
  opacity:0.9;
}

.cta {
  padding:14px 32px;
  font-size:1rem;
  background:var(--accent);
  border:none;
  border-radius:var(--radius);
  color:var(--bg-1);
  cursor:pointer;
  transition:0.3s;
}

.cta:hover {
  background:var(--accent-soft);
  color:var(--text);
}

/* ---------------- FOOTER ---------------- */

.footer {
  background:var(--bg-2);
  padding:80px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  color:var(--text-soft);
}

.footer-grid {
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.footer-col h4 {
  margin-bottom:20px;
  color:var(--text);
}

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

.footer-col li {
  margin-bottom:10px;
  cursor:pointer;
  transition:0.2s;
}

.footer-col li:hover {
  color:var(--accent);
}

.newsletter input {
  padding:10px;
  background:var(--bg-1);
  border:1px solid var(--glass-border);
  color:var(--text);
  border-radius:var(--radius);
  margin-bottom:10px;
}

.newsletter button {
  padding:10px;
  background:var(--accent);
  border:none;
  color:#000;
  border-radius:var(--radius);
  cursor:pointer;
}

.credits {
  margin-top:50px;
  text-align:center;
  font-size:0.85rem;
  opacity:0.6;
}

// Neon Flux — interactions: hero vertical slider, parallax small, theme toggle persistence, newsletter stub

(() => {
  /* THEME: persist toggle */
  const THEME_KEY = 'neonflux_theme';
  const body = document.body;
  const toggle = document.getElementById('theme-toggle');

  // init from storage or prefers-color-scheme
  const saved = localStorage.getItem(THEME_KEY);
  if(saved === 'light') body.classList.add('light');
  else if(saved === 'dark') body.classList.remove('light');
  else if(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) body.classList.add('light');

  toggle.addEventListener('click', () => {
    body.classList.toggle('light');
    localStorage.setItem(THEME_KEY, body.classList.contains('light') ? 'light' : 'dark');
    toggle.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(180deg)' }], { duration: 350, easing: 'ease-out' });
  });

  /* HERO: vertical slider with controls & auto cycle */
  const track = document.getElementById('hero-track');
  const slides = Array.from(track.querySelectorAll('.hero-slide'));
  let current = 0;
  const total = slides.length;
  const prevBtn = document.getElementById('hero-prev');
  const nextBtn = document.getElementById('hero-next');
  const slideHeight = () => window.innerHeight;

  // position stack vertically
  const updateTrack = (index, instant=false) => {
    // set aria-hidden appropriately
    slides.forEach((s, i) => s.setAttribute('aria-hidden', i === index ? 'false' : 'true'));
    const y = -index * slideHeight();
    if(instant) track.style.transition = 'none';
    else track.style.transition = 'transform 0.85s cubic-bezier(.2,.9,.3,1)';
    track.style.transform = `translateY(${y}px)`;
    // re-enable transitions if instant
    if(instant) requestAnimationFrame(()=> track.style.transition = '');
  };

  // auto cycle
  let auto = setInterval(()=> { goTo((current+1)%total) }, 7000);

  const goTo = (index) => {
    current = (index + total) % total;
    updateTrack(current);
  };

  prevBtn.addEventListener('click', () => { goTo(current-1); resetAuto() });
  nextBtn.addEventListener('click', () => { goTo(current+1); resetAuto() });

  // pause on hover or focus
  [track, prevBtn, nextBtn].forEach(el => {
    el.addEventListener('mouseenter', ()=> clearInterval(auto));
    el.addEventListener('mouseleave', ()=> auto = setInterval(()=> { goTo((current+1)%total) }, 7000));
  });

  // adjust on resize
  window.addEventListener('resize', ()=> updateTrack(current, true));

  // init positions
  updateTrack(0, true);

  function resetAuto(){
    clearInterval(auto);
    auto = setInterval(()=> { goTo((current+1)%total) }, 7000);
  }

  /* PARALLAX: subtle parallax based on mouse & scroll */
  const parallaxElems = Array.from(document.querySelectorAll('[data-parallax]'));

  // mouse based parallax for hero area (subtle)
  document.addEventListener('mousemove', (e) => {
    const cx = window.innerWidth / 2;
    const cy = window.innerHeight / 2;
    const mx = (e.clientX - cx) / cx;
    const my = (e.clientY - cy) / cy;
    parallaxElems.forEach(el => {
      const depth = parseFloat(el.getAttribute('data-parallax')) || 0.02;
      const tx = mx * depth * 30; // px
      const ty = my * depth * 30;
      el.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
    });
  });

  // scroll parallax (for larger screens)
  window.addEventListener('scroll', () => {
    const sc = window.scrollY;
    parallaxElems.forEach(el => {
      const depth = parseFloat(el.getAttribute('data-parallax')) || 0.02;
      el.style.transform = `translate3d(0, ${sc * depth * -1}px, 0)`;
    });
  }, { passive: true });

  /* GALLERY: click to replace placeholder (developer helper) */
  const galleryItems = document.querySelectorAll('.grid-item');
  galleryItems.forEach((gi, idx) => {
    gi.addEventListener('click', () => {
      // instruction-only: in produzione sostituire con immagine reale.
      gi.classList.add('loading');
      setTimeout(() => gi.classList.remove('loading'), 600);
    });
  });

  /* NEWSLETTER: basic front-end stub */
  const news = document.getElementById('newsletter');
  if(news){
    news.addEventListener('submit', (ev) => {
      ev.preventDefault();
      const email = news.querySelector('input[name="email"]').value;
      if(!email || !/\S+@\S+\.\S+/.test(email)){
        alert('Inserisci una email valida.');
        return;
      }
      // fake success: mostra feedback visivo
      news.querySelector('button').textContent = 'Grazie!';
      setTimeout(()=> news.reset() && (news.querySelector('button').textContent='Iscriviti'), 1600);
    });
  }

  /* Respect reduced motion preference */
  if(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches){
    // disable animations: stop auto hero cycle
    clearInterval(auto);
  }

})();