Music Equipment Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SoundWave Pro - Premium Music Equipment Store</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

</head>
<body>
    
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>

<header class="header" id="header">
        <div class="nav-container">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-music"></i>
                </div>
                SoundWave Pro
            </div>
            <nav>
                <ul class="nav-menu">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#categories">Categories</a></li>
                    <li><a href="#brands">Brands</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
             
                <div class="mobile-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <div class="hero-text">
                <h1>Premium <span class="highlight">Music Equipment</span> for Every Artist</h1>
                
                <div class="hero-buttons">
                    <a href="#products" class="btn-primary">
                        <i class="fas fa-shopping-bag"></i>
                        Shop Now
                    </a>
                    <a href="#categories" class="btn-secondary">
                        <i class="fas fa-list"></i>
                        Browse Categories
                    </a>
                </div>
                <div class="hero-features">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <div class="feature-text">Free Shipping Over $99</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="feature-text">2-Year Warranty</div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div class="feature-text">Expert Support</div>
                    </div>
                </div>
            </div>
            <div class="hero-image">
                <div class="hero-product">
                    <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Featured guitar" onerror="this.src=''; this.alt='Featured product image failed to load'; this.style.display='none';">
                    <div class="product-name">Gibson Les Paul Standard</div>
                    <div class="product-price">$2,499</div>
                    <div class="product-rating">
                        <i class="fas fa-star star"></i>
                        <i class="fas fa-star star"></i>
                        <i class="fas fa-star star"></i>
                        <i class="fas fa-star star"></i>
                        <i class="fas fa-star star"></i>
                    </div>
                    <button class="btn-primary add-to-cart-hero">
                        <i class="fas fa-cart-plus"></i>
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="section categories" id="categories">
        <div class="container">
            <div class="section-header animate-on-scroll">
                <div class="section-subtitle">Shop by Category</div>
                <h2 class="section-title">Find Your Perfect Instrument</h2>
                <p class="section-description">Explore our comprehensive range of musical instruments and equipment, carefully curated for musicians of all levels.</p>
            </div>
            <div class="categories-grid">
                <div class="category-card animate-on-scroll" data-category="guitars">
                    <div class="category-icon">
                        <i class="fas fa-guitar"></i>
                    </div>
                    <h3 class="category-name">Guitars</h3>
                    <p class="category-count">150+ Products</p>
                    <button class="category-btn">Browse Guitars</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="keyboards">
                    <div class="category-icon">
                        <i class="fas fa-piano-keyboard"></i>
                    </div>
                    <h3 class="category-name">Keyboards & Pianos</h3>
                    <p class="category-count">85+ Products</p>
                    <button class="category-btn">Browse Keyboards</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="drums">
                    <div class="category-icon">
                        <i class="fas fa-drum"></i>
                    </div>
                    <h3 class="category-name">Drums & Percussion</h3>
                    <p class="category-count">120+ Products</p>
                    <button class="category-btn">Browse Drums</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="audio">
                    <div class="category-icon">
                        <i class="fas fa-microphone"></i>
                    </div>
                    <h3 class="category-name">Audio Equipment</h3>
                    <p class="category-count">200+ Products</p>
                    <button class="category-btn">Browse Audio</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="strings">
                    <div class="category-icon">
                        <i class="fas fa-violin"></i>
                    </div>
                    <h3 class="category-name">String Instruments</h3>
                    <p class="category-count">75+ Products</p>
                    <button class="category-btn">Browse Strings</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="wind">
                    <div class="category-icon">
                        <i class="fas fa-saxophone"></i>
                    </div>
                    <h3 class="category-name">Wind Instruments</h3>
                    <p class="category-count">60+ Products</p>
                    <button class="category-btn">Browse Wind</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="studio">
                    <div class="category-icon">
                        <i class="fas fa-sliders-h"></i>
                    </div>
                    <h3 class="category-name">Studio Gear</h3>
                    <p class="category-count">180+ Products</p>
                    <button class="category-btn">Browse Studio</button>
                </div>
                <div class="category-card animate-on-scroll" data-category="accessories">
                    <div class="category-icon">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="category-name">Accessories</h3>
                    <p class="category-count">300+ Products</p>
                    <button class="category-btn">Browse Accessories</button>
                </div>
            </div>
        </div>
    </section>

<section class="section featured-products" id="products">
        <div class="container">
            <div class="section-header animate-on-scroll">
                <div class="section-subtitle">Featured Products</div>
                <h2 class="section-title">Best Sellers & New Arrivals</h2>
                <p class="section-description">Discover our most popular instruments and the latest additions to our collection.</p>
            </div>
            <div class="products-filter animate-on-scroll">
                <button class="filter-btn active" data-filter="all">All Products</button>
                <button class="filter-btn" data-filter="bestsellers">Best Sellers</button>
                <button class="filter-btn" data-filter="new">New Arrivals</button>
                <button class="filter-btn" data-filter="sale">On Sale</button>
            </div>
            <div class="products-grid">
                <div class="product-card animate-on-scroll" data-category="bestsellers">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Electric Guitar" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">Best Seller</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Fender Player Stratocaster</h3>
                        <p class="product-brand">Fender</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="product-reviews">(124 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$849</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="Fender Player Stratocaster" data-price="849">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card animate-on-scroll" data-category="new">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Audio Interface" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">New Arrival</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Focusrite Scarlett 2i2</h3>
                        <p class="product-brand">Focusrite</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="product-reviews">(89 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$199</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="Focusrite Scarlett 2i2" data-price="199">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card animate-on-scroll" data-category="sale">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1571327073757-71d13c24de30?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Drum Kit" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">25% Off</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Pearl Export Series Drum Kit</h3>
                        <p class="product-brand">Pearl</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="far fa-star star"></i>
                            </div>
                            <span class="product-reviews">(67 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$599</span>
                            <span class="product-old-price">$799</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="Pearl Export Series Drum Kit" data-price="599">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card animate-on-scroll" data-category="bestsellers">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Keyboard" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">Best Seller</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Yamaha P-125 Digital Piano</h3>
                        <p class="product-brand">Yamaha</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="product-reviews">(156 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$699</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="Yamaha P-125 Digital Piano" data-price="699">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card animate-on-scroll" data-category="new">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Bass Guitar" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">New Arrival</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">Fender Player Jazz Bass</h3>
                        <p class="product-brand">Fender</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="far fa-star star"></i>
                            </div>
                            <span class="product-reviews">(43 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$899</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="Fender Player Jazz Bass" data-price="899">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card animate-on-scroll" data-category="sale">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Studio Monitors" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        <div class="product-badge">15% Off</div>
                        <div class="product-wishlist">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="product-content">
                        <h3 class="product-title">KRK Rokit 5 G4 Studio Monitors</h3>
                        <p class="product-brand">KRK</p>
                        <div class="product-rating-section">
                            <div class="product-stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="product-reviews">(92 reviews)</span>
                        </div>
                        <div class="product-price-section">
                            <span class="product-price">$339</span>
                            <span class="product-old-price">$399</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart" data-product="KRK Rokit 5 G4 Studio Monitors" data-price="339">
                                <i class="fas fa-cart-plus"></i>
                                Add to Cart
                            </button>
                            <button class="quick-view">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="brands" id="brands">
        <div class="container">
            <div class="section-header animate-on-scroll">
                <div class="section-subtitle">Trusted Brands</div>
                <h2 class="section-title">We Partner with the Best</h2>
            </div>
            <div class="brands-slider">
                <div class="brands-track">
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkZlbmRlcjwvdGV4dD4KPC9zdmc+" alt="Fender">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkdpYnNvbjwvdGV4dD4KPC9zdmc+" alt="Gibson">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPllhbWFoYTwvdGV4dD4KPC9zdmc+" alt="Yamaha">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBlYXJsPC90ZXh0Pgo8L3N2Zz4=" alt="Pearl">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1hcnNoYWxsPC90ZXh0Pgo8L3N2Zz4=" alt="Marshall">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPktSSzwvdGV4dD4KPC9zdmc+" alt="KRK">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkZvY3Vzcml0ZTwvdGV4dD4KPC9zdmc+" alt="Focusrite">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlNodXJlPC90ZXh0Pgo8L3N2Zz4=" alt="Shure">
                    </div>
                    
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkZlbmRlcjwvdGV4dD4KPC9zdmc+" alt="Fender">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkdpYnNvbjwvdGV4dD4KPC9zdmc+" alt="Gibson">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPllhbWFoYTwvdGV4dD4KPC9zdmc+" alt="Yamaha">
                    </div>
                    <div class="brand-item">
                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMzMzMiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBlYXJsPC90ZXh0Pgo8L3N2Zz4=" alt="Pearl">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section services" id="services">
        <div class="container">
            <div class="section-header animate-on-scroll">
                <div class="section-subtitle">Our Services</div>
                <h2 class="section-title">More Than Just a Store</h2>
                <p class="section-description">We provide comprehensive services to support your musical journey from purchase to performance.</p>
            </div>
            <div class="services-grid">
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="service-title">Expert Repairs</h3>
                    <p class="service-description">Professional instrument repair and maintenance services by certified technicians. We handle everything from basic setups to complex restorations.</p>
                </div>
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3 class="service-title">Music Lessons</h3>
                    <p class="service-description">Learn from experienced instructors in our state-of-the-art teaching studios. We offer lessons for all skill levels and instruments.</p>
                </div>
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3 class="service-title">Trade-In Program</h3>
                    <p class="service-description">Upgrade your gear with our fair trade-in program. Get competitive value for your current instruments toward new purchases.</p>
                </div>
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3 class="service-title">Equipment Rental</h3>
                    <p class="service-description">Rent professional equipment for gigs, recording sessions, or events. Perfect for trying before buying or special occasions.</p>
                </div>
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h3 class="service-title">Custom Setups</h3>
                    <p class="service-description">Personalized instrument setups to match your playing style and preferences. Optimize your instrument's performance and playability.</p>
                </div>
                <div class="service-card animate-on-scroll">
                    <div class="service-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3 class="service-title">24/7 Support</h3>
                    <p class="service-description">Round-the-clock customer support for all your questions and concerns. Our music experts are always ready to help.</p>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>SoundWave Pro</h3>
                    <p>Your premier destination for professional music equipment. We've been serving musicians worldwide for over 20 years with quality instruments and exceptional service.</p>
                    <div class="footer-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <p><a href="#categories">Shop Categories</a></p>
                    <p><a href="#products">Featured Products</a></p>
                    <p><a href="#brands">Our Brands</a></p>
                    <p><a href="#services">Services</a></p>
                    <p><a href="#contact">Contact Us</a></p>
                </div>
                <div class="footer-section">
                    <h3>Customer Service</h3>
                    <p><a href="#">Shipping Information</a></p>
                    <p><a href="#">Returns & Exchanges</a></p>
                    <p><a href="#">Warranty Information</a></p>
                    <p><a href="#">Size Guides</a></p>
                    <p><a href="#">FAQ</a></p>
                </div>
                <div class="footer-section">
                    <h3>Contact Info</h3>
                    <p>? 123 Music Street, Harmony City</p>
                    <p>? (555) 123-MUSIC</p>
                    <p>✉️ info@soundwavepro.com</p>
                    <p>? Mon-Fri: 9AM-8PM</p>
                    <p>? Sat-Sun: 10AM-6PM</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 SoundWave Pro. All rights reserved. | Privacy Policy | Terms of Service | Accessibility</p>
            </div>
        </div>
    </footer>

<div class="cart-sidebar" id="cartSidebar">
        <div class="cart-header">
            <h3 class="cart-title">Shopping Cart</h3>
            <button class="cart-close" id="cartClose">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="cart-items" id="cartItems">
            <p style="text-align: center; color: #666; padding: 2rem;">Your cart is empty</p>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>Total: $<span id="cartTotal">0.00</span></span>
            </div>
            <button class="checkout-btn" id="checkoutBtn">
                <i class="fas fa-credit-card"></i>
                Proceed to Checkout
            </button>
        </div>
    </div>

<div class="scroll-top" id="scrollTop">
        <i class="fas fa-arrow-up"></i>
    </div>

CSS

:root {
            --primary-color: #FF6B35;
            --secondary-color: #F7931E;
            --accent-color: #FFD23F;
            --dark-color: #1a1a1a;
            --light-color: #ffffff;
            --gray-color: #f8f9fa;
            --text-dark: #333333;
            --text-light: #666666;
            --gradient-primary: linear-gradient(135deg, #FF6B35, #F7931E);
            --gradient-secondary: linear-gradient(135deg, #F7931E, #FFD23F);
            --gradient-dark: linear-gradient(135deg, #1a1a1a, #333333);
            --shadow-light: 0 5px 15px rgba(0,0,0,0.08);
            --shadow-medium: 0 10px 30px rgba(0,0,0,0.12);
            --shadow-heavy: 0 20px 60px rgba(0,0,0,0.15);
            --border-radius: 15px;
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

/* Advanced Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(60px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-60px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(60px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

@keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

.animate-on-scroll {
            opacity: 0;
            transform: translateY(50px);
            transition: var(--transition);
        }

.animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 107, 53, 0.1);
            z-index: 1000;
            transition: var(--transition);
            padding: 1rem 0;
        }

.header.scrolled {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: var(--shadow-medium);
            padding: 0.5rem 0;
        }

.nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.8rem;
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.logo-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            animation: pulse 2s infinite;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 2.5rem;
            align-items: center;
        }

.nav-menu a {
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: var(--transition);
            padding: 0.5rem 0;
        }

.nav-menu a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: var(--transition);
            transform: translateX(-50%);
        }

.nav-menu a:hover::before {
            width: 100%;
        }

.nav-menu a:hover {
            color: var(--primary-color);
            transform: translateY(-2px);
        }

.nav-actions {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

.search-box {
            position: relative;
            display: flex;
            align-items: center;
        }

.search-input {
            padding: 0.8rem 1rem 0.8rem 3rem;
            border: 2px solid #eee;
            border-radius: 50px;
            font-size: 0.9rem;
            width: 250px;
            transition: var(--transition);
            background: white;
        }

.search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
        }

.search-icon {
            position: absolute;
            left: 1rem;
            color: var(--text-light);
            font-size: 1rem;
        }

.cart-btn {
            position: relative;
            background: var(--gradient-primary);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
        }

.cart-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

.cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent-color);
            color: var(--dark-color);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
        }

.mobile-menu {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
        }

.mobile-menu span {
            width: 25px;
            height: 3px;
            background: var(--text-dark);
            margin: 3px 0;
            transition: var(--transition);
            border-radius: 2px;
        }

/* Hero Section */
        .hero {
            min-height: 100vh;
            background: var(--gradient-dark);
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
            opacity: 0.2;
            z-index: 1;
        }

.hero-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
            position: relative;
            z-index: 3;
        }

.hero-text {
            color: white;
        }

.hero-text h1 {
            font-size: 4rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            animation: fadeInLeft 1s ease;
        }

.hero-text .highlight {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-text p {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            animation: fadeInLeft 1s ease 0.3s both;
        }

.hero-buttons {
            display: flex;
            gap: 1.5rem;
            animation: fadeInLeft 1s ease 0.6s both;
        }

.btn-primary {
            background: var(--gradient-primary);
            color: white;
            padding: 1.2rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-medium);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-heavy);
        }

.btn-secondary {
            background: transparent;
            color: white;
            padding: 1.2rem 2.5rem;
            border: 2px solid white;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

.btn-secondary:hover {
            background: white;
            color: var(--primary-color);
            transform: translateY(-3px);
        }

.hero-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
            animation: fadeInLeft 1s ease 0.9s both;
        }

.feature-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: white;
        }

.feature-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

.feature-text {
            font-weight: 600;
            font-size: 0.9rem;
        }

.hero-image {
            position: relative;
            animation: fadeInRight 1s ease 0.5s both;
        }

.hero-product {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 30px;
            padding: 3rem;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: var(--transition);
        }

.hero-product:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
        }

.hero-product img {
            width: 100%;
            max-width: 300px;
            border-radius: 20px;
            margin-bottom: 2rem;
        }

.product-name {
            color: white;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

.product-price {
            color: var(--accent-color);
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
        }

.product-rating {
            display: flex;
            justify-content: center;
            gap: 0.3rem;
            margin-bottom: 2rem;
        }

.star {
            color: var(--accent-color);
            font-size: 1.2rem;
        }

/* Section Styles */
        .section {
            padding: 8rem 0;
            position: relative;
        }

.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

.section-header {
            text-align: center;
            margin-bottom: 5rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

.section-subtitle {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.section-title {
            font-size: 3rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

.section-description {
            font-size: 1.2rem;
            color: var(--text-light);
            line-height: 1.8;
        }

/* Categories Section */
        .categories {
            background: var(--gray-color);
        }

.categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.category-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            text-align: center;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

.category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            opacity: 0.05;
            transition: var(--transition);
        }

.category-card:hover::before {
            left: 0;
        }

.category-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }

.category-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 2rem;
            transition: var(--transition);
        }

.category-card:hover .category-icon {
            transform: scale(1.1) rotate(10deg);
        }

.category-name {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

.category-count {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }

.category-btn {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

.category-card:hover .category-btn {
            background: var(--primary-color);
            color: white;
        }

/* Featured Products */
        .featured-products {
            background: white;
        }

.products-filter {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 4rem;
            flex-wrap: wrap;
        }

.filter-btn {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

.filter-btn.active,
        .filter-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

.product-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
        }

.product-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }

.product-image {
            position: relative;
            height: 250px;
            overflow: hidden;
            background: var(--gray-color);
        }

.product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.product-card:hover .product-image img {
            transform: scale(1.1);
        }

.product-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--gradient-primary);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

.product-wishlist {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

.product-wishlist:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }

.product-content {
            padding: 2rem;
        }

.product-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

.product-brand {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

.product-rating-section {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

.product-stars {
            display: flex;
            gap: 0.2rem;
        }

.product-reviews {
            color: var(--text-light);
            font-size: 0.9rem;
        }

.product-price-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

.product-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
        }

.product-old-price {
            color: var(--text-light);
            text-decoration: line-through;
            font-size: 1rem;
            margin-left: 0.5rem;
        }

.product-actions {
            display: flex;
            gap: 1rem;
        }

.add-to-cart {
            flex: 1;
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

.add-to-cart:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

.quick-view {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            padding: 1rem;
            border-radius: 15px;
            cursor: pointer;
            transition: var(--transition);
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.quick-view:hover {
            background: var(--primary-color);
            color: white;
        }

/* Brands Section */
        .brands {
            background: var(--gray-color);
            padding: 5rem 0;
        }

.brands-slider {
            overflow: hidden;
            position: relative;
        }

.brands-track {
            display: flex;
            animation: scroll 30s linear infinite;
            gap: 4rem;
        }

.brand-item {
            flex-shrink: 0;
            width: 150px;
            height: 80px;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
        }

.brand-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.brand-item img {
            max-width: 80%;
            max-height: 60%;
            object-fit: contain;
            filter: grayscale(100%);
            transition: var(--transition);
        }

.brand-item:hover img {
            filter: grayscale(0%);
        }

@keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

/* Services Section */
        .services {
            background: white;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

.service-card {
            text-align: center;
            padding: 3rem 2rem;
            border-radius: 20px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0;
            transition: var(--transition);
            border-radius: 20px;
        }

.service-card:hover::before {
            opacity: 0.05;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }

.service-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 2rem;
            position: relative;
            z-index: 2;
        }

.service-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
            position: relative;
            z-index: 2;
        }

.service-description {
            color: var(--text-light);
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

/* Newsletter Section */
        .newsletter {
            background: var(--gradient-dark);
            color: white;
            text-align: center;
        }

.newsletter-content {
            max-width: 600px;
            margin: 0 auto;
        }

.newsletter h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
        }

.newsletter p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 3rem;
        }

.newsletter-form {
            display: flex;
            gap: 1rem;
            max-width: 500px;
            margin: 0 auto;
        }

.newsletter-input {
            flex: 1;
            padding: 1.2rem;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.newsletter-input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.newsletter-input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
        }

.newsletter-btn {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 1.2rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

.newsletter-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

/* Footer */
        .footer {
            background: var(--dark-color);
            color: white;
            padding: 5rem 0 2rem;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 4rem;
            margin-bottom: 3rem;
        }

.footer-section h3 {
            color: var(--primary-color);
            margin-bottom: 2rem;
            font-size: 1.5rem;
            font-weight: 700;
        }

.footer-section p,
        .footer-section a {
            color: #ccc;
            text-decoration: none;
            line-height: 1.8;
            transition: var(--transition);
        }

.footer-section a:hover {
            color: var(--primary-color);
        }

.footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

.footer-social a {
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
        }

.footer-social a:hover {
            transform: translateY(-3px) scale(1.1);
        }

.footer-bottom {
            border-top: 1px solid #444;
            padding-top: 2rem;
            text-align: center;
            color: #ccc;
        }

/* Cart Sidebar */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: white;
            box-shadow: var(--shadow-heavy);
            z-index: 10000;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

.cart-sidebar.open {
            right: 0;
        }

.cart-header {
            padding: 2rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.cart-title {
            font-size: 1.5rem;
            font-weight: 700;
        }

.cart-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
        }

.cart-items {
            flex: 1;
            padding: 2rem;
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid #eee;
        }

.cart-item-image {
            width: 80px;
            height: 80px;
            background: var(--gray-color);
            border-radius: 10px;
            overflow: hidden;
        }

.cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.cart-item-details {
            flex: 1;
        }

.cart-item-name {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

.cart-item-price {
            color: var(--primary-color);
            font-weight: 700;
        }

.cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

.quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.cart-footer {
            padding: 2rem;
            border-top: 1px solid #eee;
        }

.cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            font-size: 1.2rem;
            font-weight: 700;
        }

.checkout-btn {
            width: 100%;
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 1.2rem;
            border-radius: 15px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }

.checkout-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

/* Scroll to Top */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            opacity: 0;
            transition: var(--transition);
            z-index: 1000;
            box-shadow: var(--shadow-medium);
        }

.scroll-top.visible {
            opacity: 1;
        }

.scroll-top:hover {
            transform: translateY(-5px) scale(1.1);
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

.hero-text h1 {
                font-size: 3rem;
            }

.section-title {
                font-size: 2.5rem;
            }

.hero-features {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

.mobile-menu {
                display: flex;
            }

.search-input {
                width: 200px;
            }

.hero-text h1 {
                font-size: 2.5rem;
            }

.hero-buttons {
                flex-direction: column;
                align-items: center;
            }

.section {
                padding: 5rem 0;
            }

.section-title {
                font-size: 2rem;
            }

.newsletter-form {
                flex-direction: column;
            }

.cart-sidebar {
                width: 100%;
                right: -100%;
            }
        }

@media (max-width: 480px) {
            .container {
                padding: 0 1rem;
            }

.hero-text h1 {
                font-size: 2rem;
            }

.section {
                padding: 3rem 0;
            }

.products-grid,
            .categories-grid,
            .services-grid {
                grid-template-columns: 1fr;
            }

.nav-actions {
                gap: 1rem;
            }

.search-input {
                width: 150px;
            }
        }

/* Loading Animation */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease;
        }

.loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

.spinner {
            width: 60px;
            height: 60px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

JavaScript

// Loading screen
        window.addEventListener('load', () => {
            const loading = document.getElementById('loading');
            setTimeout(() => {
                loading.classList.add('hidden');
            }, 1000);
        });

// Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.getElementById('header');
            const scrollTop = document.getElementById('scrollTop');
            
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
                scrollTop.classList.add('visible');
            } else {
                header.classList.remove('scrolled');
                scrollTop.classList.remove('visible');
            }
        });

// Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Scroll to top
        document.getElementById('scrollTop').addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Animate on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

document.querySelectorAll('.animate-on-scroll').forEach(el => {
            observer.observe(el);
        });

// Product filter functionality
        const filterBtns = document.querySelectorAll('.products-filter .filter-btn');
        const productCards = document.querySelectorAll('.product-card');

filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

const filter = btn.getAttribute('data-filter');

productCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 100);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

// Cart functionality
        let cart = [];
        let cartTotal = 0;

function updateCartUI() {
            const cartCount = document.getElementById('cartCount');
            const cartItems = document.getElementById('cartItems');
            const cartTotalElement = document.getElementById('cartTotal');

cartCount.textContent = cart.length;
            cartTotalElement.textContent = cartTotal.toFixed(2);

if (cart.length === 0) {
                cartItems.innerHTML = '<p style="text-align: center; color: #666; padding: 2rem;">Your cart is empty</p>';
            } else {
                cartItems.innerHTML = cart.map(item => `
                    <div class="cart-item">
                        <div class="cart-item-image">
                            <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="${item.name}" onerror="this.src=''; this.alt='Product image failed to load'; this.style.display='none';">
                        </div>
                        <div class="cart-item-details">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">$${item.price}</div>
                            <div class="cart-item-quantity">
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', -1)">-</button>
                                <span>${item.quantity}</span>
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', 1)">+</button>
                                <button class="quantity-btn" onclick="removeFromCart('${item.id}')" style="margin-left: 1rem; color: red;">×</button>
                            </div>
                        </div>
                    </div>
                `).join('');
            }
        }

function removeFromCart(itemId) {
            cart = cart.filter(item => item.id !== itemId);
            cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            updateCartUI();
        }

// Add to cart event listeners
        document.querySelectorAll('.add-to-cart').forEach(btn => {
            btn.addEventListener('click', function() {
                const productName = this.getAttribute('data-product');
                const price = this.getAttribute('data-price');
                addToCart(productName, price);
            });
        });

// Hero add to cart
        document.querySelector('.add-to-cart-hero').addEventListener('click', function() {
            addToCart('Gibson Les Paul Standard', '2499');
        });

// Cart sidebar toggle
        document.getElementById('cartBtn').addEventListener('click', () => {
            document.getElementById('cartSidebar').classList.add('open');
        });

document.getElementById('cartClose').addEventListener('click', () => {
            document.getElementById('cartSidebar').classList.remove('open');
        });

// Checkout functionality
        document.getElementById('checkoutBtn').addEventListener('click', () => {
            if (cart.length === 0) {
                alert('Your cart is empty!');
                return;
            }
            
            alert(`Proceeding to checkout with ${cart.length} items totaling $${cartTotal.toFixed(2)}. This is a demo - no actual payment will be processed.`);
        });

// Category card clicks
        document.querySelectorAll('.category-card').forEach(card => {
            card.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                alert(`Browsing ${category} category. This would typically navigate to a category page with filtered products.`);
            });
        });

// Wishlist functionality
        document.querySelectorAll('.product-wishlist').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.style.background = 'var(--primary-color)';
                    this.style.color = 'white';
                    alert('Added to wishlist!');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.style.background = 'rgba(255, 255, 255, 0.9)';
                    this.style.color = 'var(--text-dark)';
                    alert('Removed from wishlist!');
                }
            });
        });

// Quick view functionality
        document.querySelectorAll('.quick-view').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const productCard = this.closest('.product-card');
                const productName = productCard.querySelector('.product-title').textContent;
                alert(`Quick view for ${productName}. This would typically open a product details modal.`);
            });
        });

// Search functionality
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = this.value.trim();
                if (searchTerm) {
                    alert(`Searching for "${searchTerm}". This would typically filter products or navigate to search results.`);
                }
            }
        });

// Newsletter form
        document.getElementById('newsletterForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('.newsletter-input').value;
            alert(`Thank you for subscribing with ${email}! You'll receive our latest updates and exclusive offers.`);
            this.reset();
        });

// Mobile menu toggle
        document.querySelector('.mobile-menu').addEventListener('click', function() {
            const navMenu = document.querySelector('.nav-menu');
            const spans = this.querySelectorAll('span');
            
            navMenu.classList.toggle('active');
            spans.forEach((span, index) => {
                span.style.transform = navMenu.classList.contains('active') 
                    ? `rotate(${index === 1 ? 0 : index === 0 ? 45 : -45}deg) translate(${index === 1 ? '100px' : '0'}, ${index === 0 ? '6px' : index === 2 ? '-6px' : '0'})`
                    : 'none';
                span.style.opacity = navMenu.classList.contains('active') && index === 1 ? '0' : '1';
            });
        });

// Initialize cart
        updateCartUI();

// Add CSS for mobile menu
        const style = document.createElement('style');
        style.textContent = `
            @media (max-width: 768px) {
                .nav-menu {
                    position: fixed;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    background: white;
                    flex-direction: column;
                    padding: 2rem;
                    box-shadow: var(--shadow-heavy);
                    transform: translateY(-100%);
                    opacity: 0;
                    visibility: hidden;
                    transition: var(--transition);
                }
                
                .nav-menu.active {
                    transform: translateY(0);
                    opacity: 1;
                    visibility: visible;
                }
                
                .nav-actions {
                    margin-top: 2rem;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                .search-input {
                    width: 100%;
                }
            }
        `;
        document.head.appendChild(style);

// Close cart when clicking outside
        document.addEventListener('click', function(e) {
            const cartSidebar = document.getElementById('cartSidebar');
            const cartBtn = document.getElementById('cartBtn');
            
            if (!cartSidebar.contains(e.target) && !cartBtn.contains(e.target)) {
                cartSidebar.classList.remove('open');
            }
        });

// Prevent cart sidebar from closing when clicking inside
        document.getElementById('cartSidebar').addEventListener('click', function(e) {
            e.stopPropagation();
        });

Music Equipment Template Preview

Download Options