KICKS Premium Sneaker Boutique HTML CSS Template Free Download

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KICKS | Premium Sneaker Boutique</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>

<div class="ambient-bg">
        <div class="neon-blob blob-1"></div>
        <div class="neon-blob blob-2"></div>
    </div>
    <div class="grid-overlay"></div>

<div class="cursor-dot" id="c-dot"></div>
    <div class="cursor-ring" id="c-ring"></div>

<nav class="glass reveal active" id="navbar">
        <div class="logo oswald"><i class="fa-solid fa-bolt"></i> KICKS.</div>
        <ul class="nav-links">
            <li><a href="#hero" class="mag-btn">Home</a></li>
            <li><a href="#arrivals" class="mag-btn">Drops</a></li>
            <li><a href="#culture" class="mag-btn">Culture</a></li>
            <li><a href="#collections" class="mag-btn">Collections</a></li>
        </ul>
        <a href="#" class="cart-btn mag-btn">
            <i class="fa-solid fa-bag-shopping"></i>
            <span class="cart-badge">2</span>
        </a>
    </nav>

<section id="hero">
        <div class="huge-bg-text">STREETWEAR</div>
        
        <div class="slider">
            
            <div class="slide active">
                <div class="hero-text">
                    <span class="sec-subtitle">Just Dropped</span>
                    <h1 class="oswald">Air Max <br><span>Evolution</span></h1>
                    <p>Step into the future with the lightest, most responsive cushioning ever created. Limited edition colorways available now.</p>
                    <a href="#arrivals" class="btn mag-btn">Shop Now <i class="fa-solid fa-arrow-right" style="margin-left: 10px;"></i></a>
                </div>
                <div class="hero-img-box">
                    
                    <img src="https://images.unsplash.com/photo-1608231387042-66d1773070a5?q=80&w=1000&auto=format&fit=crop" class="hero-shoe" style="mix-blend-mode: lighten;" alt="Sneaker">
                </div>
            </div>
            
            <div class="slide">
                <div class="hero-text">
                    <span class="sec-subtitle">Exclusive Release</span>
                    <h1 class="oswald">Urban <br><span>Velocity</span></h1>
                    <p>Designed for the streets. Engineered for speed. The ultimate hybrid sneaker for the modern hypebeast.</p>
                    <a href="#collections" class="btn mag-btn">Explore <i class="fa-solid fa-fire" style="margin-left: 10px;"></i></a>
                </div>
                <div class="hero-img-box">
                    <img src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c2hvZXN8ZW58MHx8MHx8fDA%3D" class="hero-shoe" style="mix-blend-mode: lighten; filter: drop-shadow(0 30px 30px rgba(255,69,0,0.4));" alt="Sneaker">
                </div>
            </div>
        </div>
        
        <div class="slider-controls">
            <div class="nav-line active mag-btn" onclick="setSlide(0)"></div>
            <div class="nav-line mag-btn" onclick="setSlide(1)"></div>
        </div>
    </section>

<section id="marquee-sec">
        <div class="marquee mag-btn">
            <span>PREMIUM KICKS &bull; LIMITED EDITIONS &bull; HYPEBEAST CULTURE &bull; AUTHENTIC GUARANTEED &bull;</span>
            <span>PREMIUM KICKS &bull; LIMITED EDITIONS &bull; HYPEBEAST CULTURE &bull; AUTHENTIC GUARANTEED &bull;</span>
        </div>
    </section>

<section id="arrivals">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 60px;" class="reveal">
            <div>
                <span class="sec-subtitle">The Heat</span>
                <h2 class="sec-title oswald">Latest <span>Drops</span></h2>
            </div>
            <a href="#" class="btn mag-btn" style="background:transparent; color:var(--primary); border-color:var(--primary); font-size:0.9rem; padding:10px 25px;">View All</a>
        </div>
        
        <div class="carousel-wrapper reveal delay-1">
            <div class="carousel-track" id="track">
                <div class="glass shoe-card mag-btn">
                    <div class="shoe-img-wrap">
                        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=800&auto=format&fit=crop" style="mix-blend-mode: lighten;" alt="Shoe">
                    </div>
                    <div class="shoe-info">
                        <h3 class="oswald">Retro High OG</h3>
                        <span class="shoe-price">$220</span>
                        <a href="#" class="btn"><i class="fa-solid fa-cart-plus" style="margin-right: 10px;"></i> Add to Cart</a>
                    </div>
                </div>
                <div class="glass shoe-card mag-btn">
                    <div class="shoe-img-wrap">
                        <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?q=80&w=800&auto=format&fit=crop" style="mix-blend-mode: lighten;" alt="Shoe">
                    </div>
                    <div class="shoe-info">
                        <h3 class="oswald">Neon Runner V2</h3>
                        <span class="shoe-price">$180</span>
                        <a href="#" class="btn"><i class="fa-solid fa-cart-plus" style="margin-right: 10px;"></i> Add to Cart</a>
                    </div>
                </div>
                <div class="glass shoe-card mag-btn">
                    <div class="shoe-img-wrap">
                        <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?q=80&w=800&auto=format&fit=crop" style="mix-blend-mode: lighten;" alt="Shoe">
                    </div>
                    <div class="shoe-info">
                        <h3 class="oswald">Street Chunky</h3>
                        <span class="shoe-price">$150</span>
                        <a href="#" class="btn"><i class="fa-solid fa-cart-plus" style="margin-right: 10px;"></i> Add to Cart</a>
                    </div>
                </div>
                <div class="glass shoe-card mag-btn">
                    <div class="shoe-img-wrap">
                        <img src="https://images.unsplash.com/photo-1605348532760-6753d2c43329?q=80&w=800&auto=format&fit=crop" style="mix-blend-mode: lighten;" alt="Shoe">
                    </div>
                    <div class="shoe-info">
                        <h3 class="oswald">Court Classic</h3>
                        <span class="shoe-price">$110</span>
                        <a href="#" class="btn"><i class="fa-solid fa-cart-plus" style="margin-right: 10px;"></i> Add to Cart</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="c-controls reveal">
            <button class="c-btn mag-btn" id="prevBtn"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="c-btn mag-btn" id="nextBtn"><i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </section>

<section id="culture">
        <div class="culture-grid">
            <div class="culture-text reveal">
                <span class="sec-subtitle">The Movement</span>
                <h2 class="sec-title oswald">More Than <br>Just <span>Shoes.</span></h2>
                <div class="highlight-box">
                    <p style="margin: 0; color: #fff; font-style: italic;">"Sneakers are an extension of your identity. We don't just sell footwear; we supply the culture."</p>
                </div>
                <p>Born from the streets and elevated by design, KICKS is the ultimate destination for authentic, hard-to-find sneakers. We rigorously authenticate every pair so you can step out with absolute confidence.</p>
                <a href="#" class="btn mag-btn" style="margin-top: 20px;">Read Our Story</a>
            </div>
            <div class="culture-images reveal delay-1">
                <img src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?q=80&w=800&auto=format&fit=crop" class="c-img c-img-1 mag-btn" alt="Culture">
                <img src="https://images.unsplash.com/photo-1618354691792-d1d42acfd860?q=80&w=800&auto=format&fit=crop" class="c-img c-img-2 mag-btn" alt="Style">
            </div>
        </div>
    </section>

<section id="collections">
        <div style="text-align: center; margin-bottom: 60px;" class="reveal">
            <span class="sec-subtitle" style="justify-content: center;">Shop By Style</span>
            <h2 class="sec-title oswald">The <span>Vault</span></h2>
        </div>
        
        <div class="col-grid">
            <a href="#" class="glass col-card reveal mag-btn">
                <img src="https://images.unsplash.com/photo-1511556532299-8f662fc26c06?q=80&w=1000&auto=format&fit=crop" class="col-bg" alt="Lifestyle">
                <div class="col-content">
                    <h3 class="oswald">Lifestyle</h3>
                    <span>View Collection <i class="fa-solid fa-arrow-right"></i></span>
                </div>
            </a>
            <a href="#" class="glass col-card reveal mag-btn" style="transition-delay: 0.1s;">
                <img src="https://images.unsplash.com/photo-1579338559194-a162d19bf842?q=80&w=1000&auto=format&fit=crop" class="col-bg" alt="Basketball">
                <div class="col-content">
                    <h3 class="oswald">Basketball</h3>
                    <span>View Collection <i class="fa-solid fa-arrow-right"></i></span>
                </div>
            </a>
            <a href="#" class="glass col-card reveal mag-btn">
                <img src="https://images.unsplash.com/photo-1539185441755-769473a23570?q=80&w=1000&auto=format&fit=crop" class="col-bg" alt="Running">
                <div class="col-content">
                    <h3 class="oswald">Performance</h3>
                    <span>View Collection <i class="fa-solid fa-arrow-right"></i></span>
                </div>
            </a>
            <a href="#" class="glass col-card reveal mag-btn" style="transition-delay: 0.1s;">
                <img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?q=80&w=1000&auto=format&fit=crop" class="col-bg" alt="Classics">
                <div class="col-content">
                    <h3 class="oswald">Classics</h3>
                    <span>View Collection <i class="fa-solid fa-arrow-right"></i></span>
                </div>
            </a>
        </div>
    </section>

<section id="promo" class="reveal">
        <div class="glass promo-content mag-btn">
            <a href="#" class="play-btn"><i class="fa-solid fa-play" style="margin-left: 5px;"></i></a>
            <h2 class="sec-title oswald">Step Into <br><span>The Future.</span></h2>
            <p style="font-size: 1.2rem; color: #ddd; margin-top: 20px;">Watch our latest campaign featuring the highly anticipated Winter Drop.</p>
        </div>
    </section>

<section id="testimonials">
        <div style="text-align: center; margin-bottom: 60px;" class="reveal">
            <span class="sec-subtitle" style="justify-content: center;">Community</span>
            <h2 class="sec-title oswald">Hype <span>Reviews</span></h2>
        </div>
        
        <div class="testi-grid">
            <div class="glass testi-card reveal mag-btn">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <p class="testi-text">"Fastest shipping ever. The authentication tags give me total peace of mind. KICKS is my new go-to for all sneaker drops."</p>
                <div class="user">
                    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=150&auto=format&fit=crop" alt="User">
                    <div>
                        <h4>Marcus J.</h4>
                        <span>Sneakerhead</span>
                    </div>
                </div>
            </div>
            <div class="glass testi-card reveal mag-btn" style="transition-delay: 0.1s;">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
                <p class="testi-text">"Managed to cop the limited edition Retros here when they were sold out everywhere else. The packaging was immaculate."</p>
                <div class="user">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=150&auto=format&fit=crop" alt="User">
                    <div>
                        <h4>Elena R.</h4>
                        <span>Verified Buyer</span>
                    </div>
                </div>
            </div>
            <div class="glass testi-card reveal mag-btn" style="transition-delay: 0.2s;">
                <i class="fa-solid fa-quote-right quote-icon"></i>
                <div class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i></div>
                <p class="testi-text">"Love the UI of the site, love the curation of shoes. Customer service was super responsive when I needed a size swap."</p>
                <div class="user">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=150&auto=format&fit=crop" alt="User">
                    <div>
                        <h4>David C.</h4>
                        <span>Verified Buyer</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="reveal">
        <div class="footer-grid">
            <div>
                <div class="f-logo oswald"><i class="fa-solid fa-bolt"></i> KICKS.</div>
                <p class="f-text">The premier destination for authentic, limited edition sneakers and streetwear. Elevate your sole.</p>
            </div>
            <div class="f-links">
                <h4>Shop</h4>
                <ul>
                    <li><a href="#">New Arrivals</a></li>
                    <li><a href="#">Best Sellers</a></li>
                    <li><a href="#">Release Calendar</a></li>
                    <li><a href="#">Sale</a></li>
                </ul>
            </div>
            <div class="f-links">
                <h4>Support</h4>
                <ul>
                    <li><a href="#">Authentication</a></li>
                    <li><a href="#">Shipping & Returns</a></li>
                    <li><a href="#">Size Guide</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="newsletter">
                <h4>Stay Plugged In</h4>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 15px;">Sign up for exclusive drop alerts and early access.</p>
                <input type="email" placeholder="Enter your email" class="mag-btn">
                <button class="btn mag-btn" style="width: 100%;">Subscribe</button>
            </div>
        </div>
        
        <div class="footer-bottom">
            <div>&copy; 2024 KICKS Sneaker Boutique. Authentic Guaranteed.</div>
            <div class="socials">
                <a href="#" class="mag-btn"><i class="fa-brands fa-instagram"></i></a>
                <a href="#" class="mag-btn"><i class="fa-brands fa-tiktok"></i></a>
                <a href="#" class="mag-btn"><i class="fa-brands fa-twitter"></i></a>
                <a href="#" class="mag-btn"><i class="fa-brands fa-youtube"></i></a>
            </div>
        </div>
        <div class="huge-bg-text">KICKS</div>
    </footer>

</body>
</html>

CSS

/* ================= VARIABLES & RESET ================= */
        :root {
            --bg-dark: #09090b;
            --text-main: #ffffff;
            --text-muted: #8a8a93;
            --primary: #FF4500; /* Neon Orange / Red */
            --primary-glow: rgba(255, 69, 0, 0.5);
            
            /* Extreme Dark Glassmorphism */
            --glass-bg: rgba(25, 25, 28, 0.4);
            --glass-border: 1px solid rgba(255, 255, 255, 0.05);
            --glass-glow: 0 20px 40px rgba(0, 0, 0, 0.8);
            
            --font-head: 'Oswald', sans-serif;
            --font-body: 'Poppins', sans-serif;
            --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
        html { scroll-behavior: smooth; overflow-x: hidden; }

body {
            background-color: var(--bg-dark); color: var(--text-main);
            font-family: var(--font-body); overflow-x: hidden;
        }

h1, h2, h3, h4, .oswald { font-family: var(--font-head); text-transform: uppercase; }

/* ================= AMBIENT BACKGROUND ================= */
        .ambient-bg { position: fixed; inset: 0; z-index: -2; background: var(--bg-dark); overflow: hidden; }
        
        /* Neon Blobs */
        .neon-blob {
            position: absolute; border-radius: 50%; filter: blur(150px); opacity: 0.3;
            animation: drift 25s infinite alternate ease-in-out;
        }
        .blob-1 { width: 40vw; height: 40vw; background: var(--primary); top: -10%; left: -10%; }
        .blob-2 { width: 50vw; height: 50vw; background: #2a0800; bottom: -20%; right: -10%; animation-delay: -5s; }
        
        /* Grid Overlay */
        .grid-overlay {
            position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.15;
            background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }

@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(15vw, 15vh) scale(1.2); } }

/* ================= CUSTOM CURSOR ================= */
        .cursor-dot {
            position: fixed; width: 6px; height: 6px; background: var(--primary);
            border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%);
            box-shadow: 0 0 15px var(--primary);
        }
        .cursor-ring {
            position: fixed; width: 40px; height: 40px; border: 2px solid rgba(255, 69, 0, 0.5);
            border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
            transition: width 0.2s, height 0.2s, background 0.2s; backdrop-filter: blur(2px);
        }
        .cursor-active .cursor-ring { width: 70px; height: 70px; background: rgba(255, 69, 0, 0.1); border-color: var(--primary); }
        .cursor-active .cursor-dot { width: 0; height: 0; }

/* ================= GLASS UTILITIES ================= */
        .glass {
            background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
            border: var(--glass-border); box-shadow: var(--glass-glow);
            border-radius: 20px; position: relative; overflow: hidden; transition: var(--transition);
        }
        /* Shine effect on hover */
        .glass::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(-25deg); transition: 0.7s; z-index: 1; pointer-events: none;
        }
        .glass:hover::after { left: 200%; }
        .glass:hover { border-color: rgba(255, 69, 0, 0.3); box-shadow: 0 20px 50px var(--primary-glow); }

.btn {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 15px 40px; border-radius: 50px; color: #fff; font-family: var(--font-head);
            font-size: 1.1rem; letter-spacing: 2px; text-decoration: none;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
            position: relative; overflow: hidden; transition: var(--transition);
        }
        .btn:hover { background: var(--primary); border-color: var(--primary); color: #000; box-shadow: 0 0 30px var(--primary-glow); transform: scale(1.05); }

/* ================= SECTION STYLING & GLOBAL SCROLL ================= */
        section { padding: 120px 5%; position: relative; transition: background 0.6s ease; }
        section:hover { background: radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.03) 0%, transparent 60%); }

.sec-title { font-size: 4rem; letter-spacing: 2px; margin-bottom: 20px; line-height: 1.1; }
        .sec-title span { color: var(--primary); }
        .sec-subtitle { color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 4px; font-size: 0.9rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
        .sec-subtitle::before { content: ''; width: 40px; height: 2px; background: var(--primary); }

.reveal { opacity: 0; transform: translateY(60px); transition: 1s cubic-bezier(0.25, 1, 0.2, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

/* ================= 1. NAVBAR ================= */
        nav {
            position: fixed; top: 20px; left: 5%; width: 90%; z-index: 1000;
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 30px; border-radius: 50px;
        }
        .logo { font-size: 2.2rem; font-weight: 700; letter-spacing: 3px; display: flex; align-items: center; gap: 10px; }
        .logo i { color: var(--primary); transform: rotate(-15deg); }
        .nav-links { display: flex; gap: 40px; list-style: none; }
        .nav-links a { color: var(--text-main); text-decoration: none; font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; position: relative; }
        .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: 0.3s; }
        .nav-links a:hover { color: var(--primary); }
        .nav-links a:hover::after { width: 100%; }
        
        .cart-btn { background: var(--primary); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 1.2rem; transition: 0.3s; position: relative; }
        .cart-btn:hover { box-shadow: 0 0 20px var(--primary-glow); transform: scale(1.1); }
        .cart-badge { position: absolute; top: -5px; right: -5px; background: #fff; color: #000; font-size: 0.7rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }

/* ================= 2. HERO SLIDER ================= */
        #hero { padding: 0; height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; }
        
        .huge-bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25vw; font-family: var(--font-head); font-weight: 700; color: rgba(255,255,255,0.02); white-space: nowrap; z-index: 1; pointer-events: none; }

.slider { width: 100%; height: 100%; position: relative; z-index: 2; }
        .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; }
        .slide.active { opacity: 1; z-index: 5; }

.hero-text { max-width: 600px; transform: translateX(-50px); opacity: 0; transition: 1s 0.4s ease; padding-left: 5%; }
        .slide.active .hero-text { transform: translateX(0); opacity: 1; }
        .hero-text h1 { font-size: 6rem; line-height: 1; margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0,0,0,0.8); }
        .hero-text h1 span { color: transparent; -webkit-text-stroke: 2px var(--primary); }
        .hero-text p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; font-weight: 300; line-height: 1.6; }

/* Floating Shoe Animation */
        .hero-img-box { width: 50%; height: 80%; position: relative; display: flex; justify-content: center; align-items: center; transform: translateX(50px); opacity: 0; transition: 1s 0.6s ease; perspective: 1000px; }
        .slide.active .hero-img-box { transform: translateX(0); opacity: 1; }
        .hero-shoe { width: 120%; max-width: 800px; object-fit: contain; transform: rotate(-15deg); animation: floatShoe 6s infinite ease-in-out; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.8)); }
        @keyframes floatShoe { 0% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-30px) rotate(-10deg); } 100% { transform: translateY(0) rotate(-15deg); } }

.slider-controls { position: absolute; bottom: 50px; left: 10%; z-index: 10; display: flex; gap: 20px; }
        .nav-line { width: 50px; height: 3px; background: rgba(255,255,255,0.2); transition: 0.4s; }
        .nav-line.active { background: var(--primary); width: 100px; box-shadow: 0 0 10px var(--primary); }

/* ================= 3. INFINITE MARQUEE ================= */
        #marquee-sec { padding: 40px 0; background: var(--primary); overflow: hidden; transform: skewY(-2deg); margin-top: -20px; z-index: 10; border: none; }
        .marquee { display: flex; width: max-content; animation: scrollMarquee 15s linear infinite; }
        .marquee:hover { animation-play-state: paused; }
        .marquee span { font-family: var(--font-head); font-size: 3rem; text-transform: uppercase; margin: 0 40px; color: #000; transition: 0.3s; font-weight: 700; -webkit-text-stroke: 1px #000; }
        .marquee span:hover { color: transparent; text-shadow: 4px 4px 0 rgba(255,255,255,0.8); }
        @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ================= 4. NEW ARRIVALS CAROUSEL ================= */
        .carousel-wrapper { width: 100%; overflow: hidden; padding: 20px 0; cursor: grab; perspective: 1000px; }
        .carousel-wrapper:active { cursor: grabbing; }
        .carousel-track { display: flex; gap: 40px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); padding-left: 20px; }
        
        .shoe-card {
            min-width: 380px; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between;
            transform-style: preserve-3d; transition: var(--transition); border-top: 2px solid transparent;
        }
        .shoe-card:hover { border-top-color: var(--primary); transform: translateY(-15px) rotateX(5deg); box-shadow: 0 30px 60px rgba(0,0,0,0.9); }
        
        .shoe-img-wrap { width: 100%; height: 250px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transform: translateZ(50px); }
        .shoe-img-wrap img { width: 90%; object-fit: contain; transition: 0.5s; transform: rotate(-20deg); filter: drop-shadow(0 20px 20px rgba(0,0,0,0.8)); }
        .shoe-card:hover .shoe-img-wrap img { transform: rotate(0deg) scale(1.1); }
        
        .shoe-info { transform: translateZ(30px); }
        .shoe-info h3 { font-size: 2rem; margin-bottom: 5px; }
        .shoe-price { color: var(--primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; display: block; }
        .shoe-card .btn { width: 100%; background: transparent; border-color: rgba(255,255,255,0.2); }
        .shoe-card:hover .btn { background: var(--primary); border-color: var(--primary); color: #000; }

.c-controls { display: flex; justify-content: center; gap: 20px; margin-top: 50px; }
        .c-btn { width: 60px; height: 60px; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 1.2rem; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
        .c-btn:hover { background: var(--primary); color: #000; transform: scale(1.1); border-color: var(--primary); box-shadow: 0 0 20px var(--primary-glow); }

/* ================= 5. THE CULTURE (ABOUT) ================= */
        .culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .culture-images { position: relative; height: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .c-img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; filter: grayscale(100%); transition: var(--transition); }
        .c-img-1 { height: 80%; align-self: end; }
        .c-img-2 { height: 90%; }
        .culture-images:hover .c-img { filter: grayscale(0%); transform: scale(1.05); box-shadow: 0 20px 40px var(--primary-glow); }
        
        .culture-text p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 30px; }
        .highlight-box { padding: 30px; border-left: 4px solid var(--primary); background: rgba(255, 69, 0, 0.05); margin-bottom: 30px; border-radius: 0 15px 15px 0; }

/* ================= 6. COLLECTIONS GRID ================= */
        .col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
        .col-card { height: 400px; position: relative; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; padding: 40px; text-decoration: none; }
        .col-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s ease; filter: brightness(0.5); }
        .col-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); z-index: -1; transition: 0.5s; }
        
        .col-card:hover .col-bg { transform: scale(1.1); filter: brightness(0.7); }
        .col-card:hover::after { background: linear-gradient(to top, rgba(255, 69, 0, 0.8), transparent); }
        
        .col-content { position: relative; z-index: 2; transition: 0.4s; transform: translateY(20px); }
        .col-card:hover .col-content { transform: translateY(0); }
        .col-content h3 { font-size: 3rem; color: #fff; margin-bottom: 5px; text-shadow: 0 5px 15px rgba(0,0,0,0.8); }
        .col-content span { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: 0; transition: 0.4s 0.1s; }
        .col-card:hover .col-content span { opacity: 1; color: #000; }

/* ================= 7. PARALLAX PROMO VIDEO ================= */
        #promo { min-height: 70vh; background: url('https://images.unsplash.com/photo-1552346154-21d32810baa3?q=80&w=2000&auto=format&fit=crop') fixed center/cover; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
        #promo::before { content: ''; position: absolute; inset: 0; background: rgba(9, 9, 11, 0.8); backdrop-filter: blur(8px); }
        .promo-content { position: relative; z-index: 2; max-width: 800px; padding: 60px; }
        .play-btn { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--primary); display: inline-flex; justify-content: center; align-items: center; font-size: 2.5rem; color: var(--primary); margin-bottom: 30px; animation: pulsePlay 2s infinite; transition: 0.3s; background: rgba(255, 69, 0, 0.1); }
        .play-btn:hover { background: var(--primary); color: #000; animation: none; transform: scale(1.1); }
        @keyframes pulsePlay { 0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.6); } 70% { box-shadow: 0 0 0 40px rgba(255, 69, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); } }

/* ================= 8. TESTIMONIALS (HYPE REVIEWS) ================= */
        .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        .testi-card { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; top: 0; transition: var(--transition); }
        .testi-card:hover { top: -15px; border-color: var(--primary); box-shadow: 0 20px 50px rgba(255, 69, 0, 0.15); }
        .quote-icon { font-size: 3rem; color: rgba(255, 69, 0, 0.2); position: absolute; top: 20px; right: 30px; }
        .stars { color: var(--primary); font-size: 1.2rem; margin-bottom: 20px; }
        .testi-text { font-size: 1.1rem; font-style: italic; line-height: 1.8; color: #d4d4d8; margin-bottom: 30px; }
        .user { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
        .user img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
        .user h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
        .user span { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }

/* ================= 9. FOOTER ================= */
        footer { padding: 100px 5% 30px; position: relative; border-top: 1px solid rgba(255, 69, 0, 0.2); overflow: hidden; background: #050505; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; position: relative; z-index: 2; margin-bottom: 60px; }
        .f-logo { font-size: 3rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .f-logo i { color: var(--primary); transform: rotate(-15deg); }
        .f-text { color: var(--text-muted); line-height: 1.8; max-width: 320px; }
        .f-links h4 { font-size: 1.2rem; margin-bottom: 25px; color: #fff; letter-spacing: 1px; }
        .f-links ul { list-style: none; display: flex; flex-direction: column; gap: 15px; }
        .f-links a { color: var(--text-muted); text-decoration: none; transition: 0.3s; }
        .f-links a:hover { color: var(--primary); padding-left: 8px; }
        
        .newsletter input { width: 100%; padding: 16px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; color: #fff; font-family: var(--font-body); margin-bottom: 15px; outline: none; transition: 0.3s; }
        .newsletter input:focus { border-color: var(--primary); background: rgba(255, 69, 0, 0.05); }
        
        .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.9rem; position: relative; z-index: 2; }
        .socials { display: flex; gap: 15px; }
        .socials a { width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; justify-content: center; align-items: center; color: #fff; transition: 0.4s; }
        .socials a:hover { background: var(--primary); color: #000; transform: translateY(-5px); }

.huge-bg-text { position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%); font-size: 22vw; font-family: var(--font-head); font-weight: 700; color: rgba(255, 255, 255, 0.02); white-space: nowrap; pointer-events: none; z-index: 1; letter-spacing: -5px; }

/* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .culture-grid, .col-grid { grid-template-columns: 1fr; }
            .testi-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
            .slide { flex-direction: column-reverse; justify-content: center; text-align: center; }
            .hero-text { transform: translateX(0) translateY(50px); padding: 0; }
            .hero-img-box { width: 100%; height: 50%; transform: translateX(0) translateY(-50px); margin-bottom: 40px; }
            .hero-text h1 { font-size: 5rem; }
        }
        @media (max-width: 768px) {
            .testi-grid, .footer-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            .sec-title { font-size: 3rem; }
            .marquee span { font-size: 2rem; }
        }

JavaScript

// --- 1. Custom Cursor & Magnetic Buttons ---
        const cDot = document.getElementById('c-dot');
        const cRing = document.getElementById('c-ring');
        const magBtns = document.querySelectorAll('.mag-btn, a, button');

magBtns.forEach(btn => {
            btn.addEventListener('mouseenter', () => document.body.classList.add('cursor-active'));
            btn.addEventListener('mouseleave', () => {
                document.body.classList.remove('cursor-active');
                btn.style.transform = ''; // Reset magnetic pull
            });
            
            // Only apply magnetic physical pull to smaller buttons, not large cards
            if(btn.classList.contains('btn') || btn.classList.contains('cart-btn') || btn.classList.contains('c-btn') || btn.classList.contains('play-btn') || btn.tagName.toLowerCase() === 'a' && !btn.classList.contains('col-card')) {
                btn.addEventListener('mousemove', (e) => {
                    const rect = btn.getBoundingClientRect();
                    const h = rect.width / 2;
                    const v = rect.height / 2;
                    const x = e.clientX - rect.left - h;
                    const y = e.clientY - rect.top - v;
                    
                    btn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
                });
            }
        });

// --- 2. Scroll Reveal Animations ---
        const reveals = document.querySelectorAll('.reveal');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });

reveals.forEach(reveal => observer.observe(reveal));

// --- 3. Hero Slider ---
        const slides = document.querySelectorAll('.slide');
        const lines = document.querySelectorAll('.nav-line');
        let currentSlide = 0;
        let slideInterval;

function setSlide(index) {
            slides.forEach(s => s.classList.remove('active'));
            lines.forEach(l => l.classList.remove('active'));
            
            currentSlide = index;
            
            slides[currentSlide].classList.add('active');
            lines[currentSlide].classList.add('active');
            resetInterval();
        }

function nextSlide() { setSlide((currentSlide + 1) % slides.length); }
        function resetInterval() {
            clearInterval(slideInterval);
            slideInterval = setInterval(nextSlide, 6000);
        }
        resetInterval();

// --- 4. Draggable Carousel ---
        const track = document.getElementById('track');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const cards = document.querySelectorAll('.shoe-card');
        
        let cIndex = 0;
        
        function updateCarousel() {
            const cardWidth = cards[0].offsetWidth;
            const gap = 40; // Gap from CSS
            track.style.transform = `translateX(-${(cardWidth + gap) * cIndex}px)`;
        }

nextBtn.addEventListener('click', () => {
            const visible = Math.floor(track.parentElement.offsetWidth / cards[0].offsetWidth);
            if(cIndex < cards.length - visible) { cIndex++; }
            else { cIndex = 0; }
            updateCarousel();
        });

prevBtn.addEventListener('click', () => {
            if(cIndex > 0) { cIndex--; }
            else { 
                const visible = Math.floor(track.parentElement.offsetWidth / cards[0].offsetWidth);
                cIndex = cards.length - visible; 
            }
            updateCarousel();
        });
        window.addEventListener('resize', updateCarousel);

// --- 5. Navbar Blur on Scroll ---
        const nav = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if(window.scrollY > 50) {
                nav.style.background = 'rgba(9, 9, 11, 0.9)';
                nav.style.boxShadow = '0 10px 30px rgba(0,0,0,0.8)';
            } else {
                nav.style.background = 'var(--glass-bg)';
                nav.style.boxShadow = 'var(--glass-glow)';
            }
        });

KICKS Premium Sneaker Boutique Preview

Download Options