Lighthouse Electronics 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>Lighthouse Electronics - Premium Gadgets & Tech</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=Poppins:wght@300;400;500;600;700&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>
    
    <header>
        <div class="navbar">
            <div class="logo">
                <h1>Lighthouse</h1>
            </div>
            <div class="nav-links">
                <a href="#">Home</a>
                <a href="#">Shop</a>
                <a href="#">Categories</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </div>
            <div class="nav-icons">
       
                <div class="hamburger">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1>Discover the Latest in Electronics</h1>
                <p>Explore our premium collection of gadgets, devices, and accessories that will elevate your tech experience to new heights.</p>
                <div class="hero-btns">
                    <button class="btn btn-primary">Shop Now</button>
                    <button class="btn btn-secondary">Learn More</button>
                </div>
            </div>
         
        </div>
        <div class="hero-wave"></div>
    </section>

<section class="categories">
        <div class="section-title">
            <h2>Shop by Category</h2>
            <p>Browse through our wide range of electronic categories to find exactly what you're looking for</p>
        </div>
        <div class="category-grid">
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Laptops">
                <div class="category-info">
                    <h3>Laptops</h3>
                    <p>Premium performance machines</p>
                </div>
            </div>
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Smartphones">
                <div class="category-info">
                    <h3>Smartphones</h3>
                    <p>Latest mobile technology</p>
                </div>
            </div>
            <div class="category-card">
                <img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg" alt="Audio">
                <div class="category-info">
                    <h3>Audio</h3>
                    <p>Immersive sound experience</p>
                </div>
            </div>
            <div class="category-card">
                <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Gaming">
                <div class="category-info">
                    <h3>Gaming</h3>
                    <p>Next-level gaming gear</p>
                </div>
            </div>
        </div>
    </section>

<section class="featured">
        <div class="featured-container">
            <div class="section-title">
                <h2>Featured Products</h2>
                <p>Check out our handpicked selection of premium electronics</p>
            </div>
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-badge">New</div>
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="MacBook Pro">
                    </div>
                    <div class="product-info">
                        <h3>MacBook Pro 14" M2</h3>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span>(42)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$1,999</span>
                            <span class="old-price">$2,199</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i> Add to Cart
                            </button>
                            <button class="wishlist">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1603921326210-6edd2d60ca68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="iPhone 14 Pro">
                    </div>
                    <div class="product-info">
                        <h3>iPhone 14 Pro Max</h3>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                            <span>(128)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$1,099</span>
                            <span class="old-price">$1,199</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i> Add to Cart
                            </button>
                            <button class="wishlist">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-badge">Sale</div>
                    <div class="product-image">
                        <img src="https://images.pexels.com/photos/33259518/pexels-photo-33259518.jpeg" alt="Sony Headphones">
                    </div>
                    <div class="product-info">
                        <h3>Sony WH-1000XM5</h3>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <span>(256)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$349</span>
                            <span class="old-price">$399</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i> Add to Cart
                            </button>
                            <button class="wishlist">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="PlayStation 5">
                    </div>
                    <div class="product-info">
                        <h3>PlayStation 5 Console</h3>
                        <div class="product-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span>(84)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$499</span>
                        </div>
                        <div class="product-actions">
                            <button class="add-to-cart">
                                <i class="fas fa-shopping-cart"></i> Add to Cart
                            </button>
                            <button class="wishlist">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="deal">
        <div class="deal-pattern"></div>
        <div class="deal-container">
            <div class="deal-image">
                <img src="https://images.pexels.com/photos/33259518/pexels-photo-33259518.jpeg" alt="Samsung TV Deal">
            </div>
            <div class="deal-content">
                <h2>Deal of the Day</h2>
                <p>Don't miss this incredible offer on our premium 65" Samsung QLED Smart TV with crystal clear 4K resolution and immersive sound.</p>
                <div class="deal-price">
                    <span class="deal-current">$1,299</span>
                    <span class="deal-old">$1,799</span>
                </div>
                <div class="deal-timer">
                    <div class="timer-title">Hurry! Offer ends in:</div>
                    <div class="timer">
                        <div class="timer-item">
                            12
                            <span>Hours</span>
                        </div>
                        <div class="timer-item">
                            45
                            <span>Minutes</span>
                        </div>
                        <div class="timer-item">
                            30
                            <span>Seconds</span>
                        </div>
                    </div>
                </div>
                <div class="deal-btns">
                    <button class="btn btn-primary">Buy Now</button>
                    <button class="btn btn-secondary">Add to Cart</button>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="testimonials-container">
            <div class="section-title">
                <h2>What Our Customers Say</h2>
                <p>Hear from our satisfied customers about their shopping experience</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial-track">
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            "I've been shopping at Lighthouse Electronics for years and they never disappoint. The quality of their products and customer service is unmatched. My new MacBook Pro arrived earlier than expected and works perfectly!"
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Sarah Johnson">
                            </div>
                            <div class="author-info">
                                <h4>Sarah Johnson</h4>
                                <p>Graphic Designer</p>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            "The delivery was super fast and the product was exactly as described. I got a great deal on the Sony headphones and they sound amazing. Lighthouse is now my go-to for all electronics purchases."
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Michael Chen">
                            </div>
                            <div class="author-info">
                                <h4>Michael Chen</h4>
                                <p>Software Engineer</p>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            "Excellent customer service! When I had an issue with my order, the support team resolved it immediately. The range of products is impressive and the prices are competitive. Highly recommend Lighthouse Electronics!"
                        </div>
                        <div class="testimonial-author">
                            <div class="author-avatar">
                                <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="David Martinez">
                            </div>
                            <div class="author-info">
                                <h4>David Martinez</h4>
                                <p>College Student</p>
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <button class="slider-btn prev-btn">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="slider-btn next-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="newsletter">
        <div class="newsletter-container">
            <h2>Subscribe to Our Newsletter</h2>
            <p>Get the latest updates on new products, exclusive deals, and tech tips delivered straight to your inbox.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
     
        </div>
    </section>

<section class="services">
        <div class="services-container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>We go beyond just selling products to provide exceptional service</p>
            </div>
            <div class="service-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-shipping-fast"></i>
                    </div>
                    <h3>Free Shipping</h3>
                    <p>Enjoy free shipping on all orders over $50 with delivery within 2-3 business days.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-undo"></i>
                    </div>
                    <h3>Easy Returns</h3>
                    <p>Not satisfied? Return within 30 days for a full refund, no questions asked.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Our customer service team is available round the clock to assist you with any queries.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Warranty Protection</h3>
                    <p>All products come with manufacturer warranty and our extended protection plans.</p>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-col">
                <h3>Lighthouse Electronics</h3>
                <p>Your premier destination for the latest and greatest in electronics and technology since 2010.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Customer Service</h3>
                <ul class="footer-links">
                    <li><a href="#">My Account</a></li>
                    <li><a href="#">Order Tracking</a></li>
                    <li><a href="#">Wishlist</a></li>
                    <li><a href="#">Returns & Exchanges</a></li>
                    <li><a href="#">FAQs</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Us</h3>
                <div class="footer-contact">
                    <p><i class="fas fa-map-marker-alt"></i> 123 Tech Street, Silicon Valley, CA 94025</p>
                    <p><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</p>
                    <p><i class="fas fa-envelope"></i> info@lighthouseelectronics.com</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Lighthouse Electronics. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: #ef4444;"></i> by Lighthouse Team</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #3b82f6;
            --secondary-color: #1e40af;
            --accent-color: #60a5fa;
            --text-color: #1f2937;
            --light-text: #f9fafb;
            --gray-light: #e5e7eb;
            --gray-dark: #6b7280;
            --max-width: 1400px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background-color: #f9fafb;
            color: var(--text-color);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 1rem 2rem;
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: var(--max-width);
            margin: 0 auto;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.logo img {
            height: 40px;
            animation: pulse 2s infinite;
        }

.logo h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-links a:hover {
            color: var(--primary-color);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

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

.nav-icons i {
            font-size: 1.2rem;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.nav-icons i:hover {
            color: var(--primary-color);
            transform: scale(1.1);
        }

.hamburger {
            display: none;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.pexels.com/photos/5094564/pexels-photo-5094564.jpeg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--white);
            animation: fadeIn 1s ease-in-out;
        }

.hero-container {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 2;
        }

.hero-content {
            max-width: 600px;
            animation: fadeInLeft 1s ease;
        }

.hero-content h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
            color: white;
        }

.hero-content p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            color: white;
        }

.hero-btns {
            display: flex;
            gap: 1rem;
        }

.btn {
            padding: 0.8rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-size: 1rem;
        }

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

.btn-primary:hover {
            background-color: var(--gray-light);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }

.btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

/* Categories Section */
        .categories {
            padding: 5rem 2rem;
            max-width: var(--max-width);
            margin: 0 auto;
        }

.section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

.section-title h2 {
            font-size: 2.2rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            width: 60%;
            height: 4px;
            background-color: var(--accent-color);
            bottom: -10px;
            left: 20%;
            border-radius: 2px;
        }

.section-title p {
            color: var(--gray-dark);
            max-width: 700px;
            margin: 0 auto;
        }

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

.category-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

.category-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.category-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

.category-info {
            padding: 1.5rem;
            text-align: center;
        }

.category-info h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

.category-info p {
            color: var(--gray-dark);
            font-size: 0.9rem;
        }

.category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.3));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.category-card:hover::before {
            opacity: 1;
        }

/* Featured Products */
        .featured {
            padding: 5rem 2rem;
            background-color: #f0f4f8;
        }

.featured-container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

.product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }

.product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

.product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.product-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--primary-color);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }

.product-image {
            height: 200px;
            position: relative;
            overflow: hidden;
        }

.product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

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

.product-info {
            padding: 1.5rem;
        }

.product-info h3 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

.product-rating {
            color: #f59e0b;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

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

.current-price {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.old-price {
            font-size: 0.9rem;
            color: var(--gray-dark);
            text-decoration: line-through;
        }

.product-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.add-to-cart {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.add-to-cart:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
        }

.wishlist {
            background: none;
            border: none;
            color: var(--gray-dark);
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.wishlist:hover {
            color: #ef4444;
            transform: scale(1.1);
        }

/* Deal of the Day */
        .deal {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            position: relative;
            overflow: hidden;
        }

.deal-container {
            max-width: var(--max-width);
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 3rem;
            position: relative;
            z-index: 2;
        }

.deal-image {
            flex: 1;
            animation: bounce 3s infinite;
        }

.deal-image img {
            width: 100%;
            max-width: 500px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.deal-content {
            flex: 1;
        }

.deal-content h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

.deal-content p {
            margin-bottom: 2rem;
            opacity: 0.9;
            font-size: 1.1rem;
        }

.deal-price {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

.deal-current {
            font-size: 2rem;
            font-weight: 700;
        }

.deal-old {
            font-size: 1.2rem;
            opacity: 0.7;
            text-decoration: line-through;
        }

.deal-timer {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            text-align: center;
        }

.timer-title {
            margin-bottom: 1rem;
            font-weight: 500;
        }

.timer {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

.timer-item {
            background-color: white;
            color: var(--primary-color);
            padding: 0.5rem 1rem;
            border-radius: 5px;
            font-weight: 700;
            min-width: 60px;
        }

.timer-item span {
            display: block;
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--gray-dark);
        }

.deal-btns {
            display: flex;
            gap: 1rem;
        }

.deal-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.05;
            background-image: radial-gradient(var(--light-text) 1px, transparent 1px);
            background-size: 20px 20px;
        }

/* Testimonials */
        .testimonials {
            padding: 5rem 2rem;
            background-color: white;
        }

.testimonials-container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

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

.testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.testimonial-card {
            min-width: 100%;
            padding: 2rem;
            background-color: #f9fafb;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin: 0 1rem;
            transition: all 0.3s ease;
        }

.testimonial-content {
            margin-bottom: 1.5rem;
            font-style: italic;
            color: var(--text-color);
            line-height: 1.6;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
        }

.author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            font-weight: 600;
            color: var(--primary-color);
        }

.author-info p {
            font-size: 0.8rem;
            color: var(--gray-dark);
        }

.testimonial-rating {
            color: #f59e0b;
            margin-top: 0.5rem;
        }

.slider-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

.slider-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.slider-btn:hover {
            background-color: var(--primary-dark);
            transform: scale(1.1);
        }

/* Brands */
        .brands {
            padding: 4rem 2rem;
            background-color: #f0f4f8;
        }

.brands-container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

.brand-logos {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
        }

.brand-logo {
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
            max-width: 150px;
            height: auto;
        }

.brand-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
        }

/* Newsletter */
        .newsletter {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            text-align: center;
        }

.newsletter-container {
            max-width: 700px;
            margin: 0 auto;
        }

.newsletter h2 {
            font-size: 2.2rem;
            margin-bottom: 1rem;
        }

.newsletter p {
            margin-bottom: 2rem;
            opacity: 0.9;
        }

.newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border-radius: 50px;
            overflow: hidden;
        }

.newsletter-form input {
            flex: 1;
            padding: 1rem 1.5rem;
            border: none;
            font-size: 1rem;
            outline: none;
        }

.newsletter-form button {
            background-color: var(--text-color);
            color: white;
            border: none;
            padding: 0 2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.newsletter-form button:hover {
            background-color: #111827;
        }

.newsletter-social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 2rem;
        }

.newsletter-social a {
            color: white;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

.newsletter-social a:hover {
            transform: translateY(-5px);
            color: var(--accent-color);
        }

/* Services */
        .services {
            padding: 5rem 2rem;
            background-color: white;
        }

.services-container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

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

.service-card {
            background-color: #f9fafb;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            background-color: var(--primary-color);
            color: white;
        }

.service-card:hover .service-icon {
            background-color: white;
            color: var(--primary-color);
        }

.service-card:hover p {
            color: rgba(255, 255, 255, 0.8);
        }

.service-icon {
            width: 70px;
            height: 70px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin: 0 auto 1.5rem;
            transition: all 0.3s ease;
        }

.service-card h3 {
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

.service-card p {
            color: var(--gray-dark);
            transition: all 0.3s ease;
        }

/* Footer */
        footer {
            background-color: #111827;
            color: white;
            padding: 5rem 2rem 2rem;
        }

.footer-container {
            max-width: var(--max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
        }

.footer-col h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background-color: var(--primary-color);
        }

.footer-col p {
            color: var(--gray-light);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: var(--gray-light);
            text-decoration: none;
            transition: all 0.3s ease;
            display: block;
        }

.footer-links a:hover {
            color: var(--primary-light);
            transform: translateX(5px);
        }

.footer-contact p {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

.footer-contact i {
            color: var(--primary-color);
        }

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

.footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #1f2937;
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background-color: var(--primary-color);
            transform: translateY(-5px);
        }

.footer-bottom {
            max-width: var(--max-width);
            margin: 3rem auto 0;
            padding-top: 2rem;
            border-top: 1px solid #1f2937;
            text-align: center;
            color: var(--gray-light);
            font-size: 0.9rem;
        }

/* Animations */
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

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

@keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

/* Responsive Styles */
        @media (max-width: 1024px) {
            .hero-container {
                flex-direction: column;
                text-align: center;
            }

.hero-content {
                margin-bottom: 3rem;
            }

.hero-btns {
                justify-content: center;
            }

.hero-image {
                width: 80%;
            }

.deal-container {
                flex-direction: column;
            }

.deal-content {
                text-align: center;
            }

.deal-btns {
                justify-content: center;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2rem;
                transition: all 0.5s ease;
                z-index: 999;
            }

.nav-links.active {
                left: 0;
            }

.hamburger {
                display: block;
            }

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

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

.deal-content h2 {
                font-size: 2rem;
            }

.newsletter h2 {
                font-size: 1.8rem;
            }
        }

@media (max-width: 480px) {
            .hero-content h1 {
                font-size: 2rem;
            }

.hero-btns {
                flex-direction: column;
            }

.btn {
                width: 100%;
            }

.newsletter-form {
                flex-direction: column;
                border-radius: 10px;
            }

.newsletter-form button {
                padding: 1rem;
            }

.timer {
                flex-wrap: wrap;
            }

.footer-container {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

// Testimonial Slider
        const track = document.querySelector('.testimonial-track');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        let currentIndex = 0;
        const testimonials = document.querySelectorAll('.testimonial-card');
        const testimonialCount = testimonials.length;

function updateSlider() {
            track.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % testimonialCount;
            updateSlider();
        });

prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + testimonialCount) % testimonialCount;
            updateSlider();
        });

// Auto slide testimonials
        setInterval(() => {
            currentIndex = (currentIndex + 1) % testimonialCount;
            updateSlider();
        }, 5000);

// Countdown Timer
        function updateTimer() {
            const hoursElement = document.querySelector('.timer-item:nth-child(1)');
            const minutesElement = document.querySelector('.timer-item:nth-child(2)');
            const secondsElement = document.querySelector('.timer-item:nth-child(3)');

let hours = parseInt(hoursElement.textContent);
            let minutes = parseInt(minutesElement.textContent);
            let seconds = parseInt(secondsElement.textContent);

seconds--;
            if (seconds < 0) {
                seconds = 59;
                minutes--;
                if (minutes < 0) {
                    minutes = 59;
                    hours--;
                    if (hours < 0) {
                        // Reset timer when it reaches 0
                        hours = 12;
                        minutes = 0;
                        seconds = 0;
                    }
                }
            }

hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');
        }

setInterval(updateTimer, 1000);

// Scroll Animation
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.category-card, .product-card, .service-card');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };

// Set initial state for animation
        document.querySelectorAll('.category-card, .product-card, .service-card').forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';
            element.style.transition = 'all 0.6s ease';
        });

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Lighthouse Electronics Template Preview

Download Options