Bike Parts Shop 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>GearUp - Premium Bike Parts</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 id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <i class="fas fa-bicycle"></i>
                <span>GearUp</span>
            </a>
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">Home</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#categories">Categories</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Premium Bike Parts for Ultimate Performance</h1>
                <p>Upgrade your ride with our high-quality bike components. From professional cyclists to weekend warriors, we have everything you need to enhance your cycling experience.</p>
                <div class="hero-btns">
                    <a href="#products" class="btn btn-primary">Shop Now</a>
                    <a href="#about" class="btn btn-outline">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="features" id="features">
        <div class="container">
            <h2 class="section-title">Why Choose Us</h2>
            <p class="section-subtitle">We provide the best bike parts and accessories with exceptional service and support</p>
            <div class="features-container">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Premium Quality</h3>
                    <p class="feature-desc">All our parts are made from high-grade materials and tested for durability and performance.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3 class="feature-title">Fast Shipping</h3>
                    <p class="feature-desc">Get your order delivered quickly with our reliable shipping partners worldwide.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3 class="feature-title">24/7 Support</h3>
                    <p class="feature-desc">Our expert team is always ready to help with any questions or issues you may have.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-undo"></i>
                    </div>
                    <h3 class="feature-title">Easy Returns</h3>
                    <p class="feature-desc">Not satisfied? Return your purchase within 30 days for a full refund.</p>
                </div>
            </div>
        </div>
    </section>

<section class="categories" id="categories">
        <div class="container">
            <h2 class="section-title">Our Categories</h2>
            <p class="section-subtitle">Browse through our wide range of bike parts and accessories</p>
            <div class="categories-container">
                <div class="category-card">
                    <img src="https://images.unsplash.com/photo-1485965120184-e220f721d03e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bike Frames" class="category-img">
                    <div class="category-content">
                        <h3 class="category-title">Frames</h3>
                        <p class="category-desc">Lightweight and durable frames for all types of cycling.</p>
                        <a href="#" class="btn btn-outline">Explore</a>
                    </div>
                </div>
                <div class="category-card">
                    <img src="https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wheels" class="category-img">
                    <div class="category-content">
                        <h3 class="category-title">Wheels & Tires</h3>
                        <p class="category-desc">High-performance wheels and tires for speed and traction.</p>
                        <a href="#" class="btn btn-outline">Explore</a>
                    </div>
                </div>
                <div class="category-card">
                    <img src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Drivetrain" class="category-img">
                    <div class="category-content">
                        <h3 class="category-title">Drivetrain</h3>
                        <p class="category-desc">Smooth-shifting gears and durable chains for efficient pedaling.</p>
                        <a href="#" class="btn btn-outline">Explore</a>
                    </div>
                </div>
                <div class="category-card">
                    <img src="https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1022&q=80" alt="Accessories" class="category-img">
                    <div class="category-content">
                        <h3 class="category-title">Accessories</h3>
                        <p class="category-desc">Essential accessories to enhance your riding experience.</p>
                        <a href="#" class="btn btn-outline">Explore</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <h2 class="section-title">Popular Products</h2>
            <p class="section-subtitle">Check out our best-selling bike parts and accessories</p>
            <div class="products-container">
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Carbon Fiber Frame" class="product-img">
                    <div class="product-content">
                        <h3 class="product-title">Carbon Pro Frame</h3>
                        <div class="product-price">$899.99</div>
                        <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-actions">
                            <a href="#" class="btn btn-primary">Add to Cart</a>
                            <a href="#" class="btn btn-outline">Details</a>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1507035895480-2b3156c31fc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aero Wheelset" class="product-img">
                    <div class="product-content">
                        <h3 class="product-title">Aero Speed Wheelset</h3>
                        <div class="product-price">$649.99</div>
                        <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>(36)</span>
                        </div>
                        <div class="product-actions">
                            <a href="#" class="btn btn-primary">Add to Cart</a>
                            <a href="#" class="btn btn-outline">Details</a>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1022&q=80" alt="Helmet" class="product-img">
                    <div class="product-content">
                        <h3 class="product-title">Pro Safety Helmet</h3>
                        <div class="product-price">$129.99</div>
                        <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>(58)</span>
                        </div>
                        <div class="product-actions">
                            <a href="#" class="btn btn-primary">Add to Cart</a>
                            <a href="#" class="btn btn-outline">Details</a>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1485965120184-e220f721d03e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pedals" class="product-img">
                    <div class="product-content">
                        <h3 class="product-title">Performance Pedals</h3>
                        <div class="product-price">$89.99</div>
                        <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>(27)</span>
                        </div>
                        <div class="product-actions">
                            <a href="#" class="btn btn-primary">Add to Cart</a>
                            <a href="#" class="btn btn-outline">Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <h2 class="section-title">What Our Customers Say</h2>
            <p class="section-subtitle">Hear from cyclists who trust our products for their rides</p>
            <div class="testimonials-container">
                <div class="testimonial-card">
                    <p class="testimonial-text">The carbon frame I bought transformed my riding experience. It's lightweight yet incredibly sturdy, and the customer service was exceptional when I had questions about installation.</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sarah J." class="author-img">
                        <div class="author-info">
                            <h4>Sarah J.</h4>
                            <p>Professional Cyclist</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <p class="testimonial-text">I've been using their wheelset for my triathlon training and the difference in speed is noticeable. The quick shipping meant I got them just in time for my big race!</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Michael T." class="author-img">
                        <div class="author-info">
                            <h4>Michael T.</h4>
                            <p>Triathlete</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <p class="testimonial-text">As a bike mechanic, I recommend GearUp parts to all my clients. The quality is consistently high, and their technical support team really knows their stuff when we have installation questions.</p>
                    <div class="testimonial-author">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80" alt="Lisa K." class="author-img">
                        <div class="author-info">
                            <h4>Lisa K.</h4>
                            <p>Bike Mechanic</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container about-container">
            <div class="about-img">
                <img src="https://images.unsplash.com/photo-1511994298241-608e28f14fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About GearUp">
            </div>
            <div class="about-content">
                <h2 class="section-title">Our Story</h2>
                <p>Founded in 2010 by a group of passionate cyclists, GearUp started as a small workshop dedicated to crafting high-performance bike parts for local racing teams.</p>
                <p>Today, we've grown into a trusted global brand, but we've never lost sight of our roots. Every product we sell is tested by our team of cycling enthusiasts to ensure it meets our strict standards for quality and performance.</p>
                <div class="about-stats">
                    <div class="stat-item">
                        <div class="stat-number">12+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">Products</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">50K+</div>
                        <div class="stat-label">Happy Customers</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">10+</div>
                        <div class="stat-label">Countries Served</div>
                    </div>
                </div>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
        </div>
    </section>

<section class="newsletter">
        <div class="container">
            <h2 class="section-title">Join Our Community</h2>
            <p class="section-subtitle">Subscribe to our newsletter for exclusive deals, cycling tips, and new product announcements</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Your email address" class="newsletter-input" required>
                <button type="submit" class="newsletter-btn">Subscribe</button>
            </form>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container contact-container">
            <div class="contact-info">
                <h2 class="section-title">Get In Touch</h2>
                <p>Have questions about our products or need help choosing the right parts for your bike? Our team is here to help!</p>
                <div class="contact-details">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Address</h3>
                            <p>123 Cycling Street, Portland, OR 97201</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Phone</h3>
                            <p>(503) 555-0123</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Email</h3>
                            <p>info@gearupbikes.com</p>
                        </div>
                    </div>
                </div>
           
            </div>
            <form class="contact-form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Your Name" required>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" placeholder="Your Email" required>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Subject">
                </div>
                <div class="form-group">
                    <textarea class="form-control" placeholder="Your Message" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Send Message</button>
            </form>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>GearUp</h3>
                    <p>Your one-stop shop for premium bike parts and accessories. We're passionate about cycling and committed to helping riders of all levels enhance their performance.</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">Home</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#categories">Categories</a></li>
                        <li><a href="#products">Products</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Categories</h3>
                    <ul class="footer-links">
                        <li><a href="#">Frames</a></li>
                        <li><a href="#">Wheels & Tires</a></li>
                        <li><a href="#">Drivetrain</a></li>
                        <li><a href="#">Brakes</a></li>
                        <li><a href="#">Accessories</a></li>
                        <li><a href="#">Tools</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Support</h3>
                    <ul class="footer-links">
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Shipping Policy</a></li>
                        <li><a href="#">Return Policy</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms & Conditions</a></li>
                        <li><a href="#">Size Guide</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 GearUp Bike Parts. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #3b82f6;
            --secondary: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #94a3b8;
            --gray-dark: #64748b;
        }

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

html {
            scroll-behavior: smooth;
        }

body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }

a {
            text-decoration: none;
            color: inherit;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

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

.btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

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

.btn-secondary:hover {
            background-color: #e67e22;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

.btn-outline {
            background-color: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

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

section {
            padding: 80px 0;
        }

.section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark);
            position: relative;
            display: inline-block;
        }

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

.section-subtitle {
            font-size: 1.1rem;
            color: var(--gray-dark);
            margin-bottom: 40px;
            max-width: 600px;
        }

/* Header */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
        }

header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
        }

.logo i {
            margin-right: 10px;
            font-size: 2rem;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

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

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

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

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

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark);
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1485965120184-e220f721d03e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
            padding-top: 80px;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 1s ease;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            font-weight: 700;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

/* Features Section */
        .features {
            background-color: white;
        }

.features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.feature-card {
            background-color: var(--light);
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }

.feature-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

.feature-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }

.feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
        }

.feature-desc {
            color: var(--gray-dark);
            font-size: 0.95rem;
        }

/* Categories Section */
        .categories {
            background-color: #f1f5f9;
        }

.categories-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.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;
            opacity: 0;
            transform: translateY(20px);
        }

.category-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

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

.category-content {
            padding: 20px;
        }

.category-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--dark);
        }

.category-desc {
            color: var(--gray-dark);
            font-size: 0.95rem;
            margin-bottom: 15px;
        }

/* Popular Products */
        .products .section-title {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.products .section-subtitle {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.products-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.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;
            opacity: 0;
            transform: translateY(20px);
        }

.product-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

.product-img {
            height: 200px;
            width: 100%;
            object-fit: cover;
        }

.product-content {
            padding: 20px;
        }

.product-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--dark);
        }

.product-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
        }

.product-rating {
            color: var(--secondary);
            margin-bottom: 15px;
        }

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

/* Testimonials */
        .testimonials {
            background-color: #f1f5f9;
        }

.testimonials .section-title {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.testimonials .section-subtitle {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.testimonials-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.testimonial-card {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }

.testimonial-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

.testimonial-text {
            font-style: italic;
            color: var(--gray-dark);
            margin-bottom: 20px;
            position: relative;
        }

.testimonial-text::before {
            content: '"';
            font-size: 3rem;
            color: var(--primary-light);
            position: absolute;
            top: -20px;
            left: -15px;
            opacity: 0.3;
        }

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

.author-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

.author-info h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--dark);
        }

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

/* About Section */
        .about-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.about-img {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease;
        }

.about-img.animate {
            opacity: 1;
            transform: translateX(0);
        }

.about-img img {
            width: 100%;
            height: auto;
            display: block;
        }

.about-content {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s ease;
        }

.about-content.animate {
            opacity: 1;
            transform: translateX(0);
        }

.about-content h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark);
        }

.about-content p {
            color: var(--gray-dark);
            margin-bottom: 20px;
            line-height: 1.6;
        }

.about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }

.stat-label {
            font-size: 1rem;
            color: var(--gray-dark);
        }

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

.newsletter .section-title {
            color: white;
        }

.newsletter .section-title::after {
            background-color: var(--secondary);
        }

.newsletter .section-subtitle {
            color: rgba(255, 255, 255, 0.8);
        }

.newsletter-form {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }

.newsletter-form.animate {
            opacity: 1;
            transform: translateY(0);
        }

.newsletter-input {
            flex: 1;
            padding: 15px 20px;
            border-radius: 50px;
            border: none;
            font-size: 1rem;
            outline: none;
        }

.newsletter-btn {
            background-color: var(--secondary);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.newsletter-btn:hover {
            background-color: #e67e22;
            transform: translateY(-2px);
        }

/* Team Section */
        .team .section-title {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.team .section-subtitle {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

.team-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.team-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;
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
        }

.team-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

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

.team-img {
            height: 250px;
            width: 100%;
            object-fit: cover;
        }

.team-content {
            padding: 20px;
        }

.team-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark);
        }

.team-position {
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 15px;
        }

.team-social {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.team-social a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dark);
            transition: all 0.3s ease;
        }

.team-social a:hover {
            background-color: var(--primary);
            color: white;
        }

/* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }

.contact-info {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease;
        }

.contact-info.animate {
            opacity: 1;
            transform: translateX(0);
        }

.contact-info h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark);
        }

.contact-info p {
            color: var(--gray-dark);
            margin-bottom: 30px;
            line-height: 1.6;
        }

.contact-details {
            margin-bottom: 30px;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.contact-icon {
            font-size: 1.2rem;
            color: var(--primary);
            margin-right: 15px;
            margin-top: 5px;
        }

.contact-text h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark);
        }

.contact-text p {
            color: var(--gray-dark);
            margin-bottom: 0;
        }

.contact-social {
            display: flex;
            gap: 15px;
        }

.contact-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dark);
            transition: all 0.3s ease;
        }

.contact-social a:hover {
            background-color: var(--primary);
            color: white;
        }

.contact-form {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s ease;
        }

.contact-form.animate {
            opacity: 1;
            transform: translateX(0);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

.form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 60px 0 20px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

.footer-col h3 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 20px;
            position: relative;
        }

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

.footer-col p {
            color: var(--gray);
            margin-bottom: 20px;
            line-height: 1.6;
        }

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

.footer-links li {
            margin-bottom: 10px;
        }

.footer-links a {
            color: var(--gray);
            transition: color 0.3s ease;
        }

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

.footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.footer-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
        }

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

.footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gray);
            font-size: 0.9rem;
        }

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

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-container {
                grid-template-columns: 1fr;
                gap: 30px;
            }

.about-img {
                order: 2;
            }

.about-content {
                order: 1;
            }
        }

@media (max-width: 768px) {
            section {
                padding: 60px 0;
            }

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

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

.hero p {
                font-size: 1rem;
            }

.mobile-menu-btn {
                display: block;
            }

.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;
                transition: all 0.5s ease;
            }

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

.nav-links li {
                margin: 15px 0;
            }

.hero-btns {
                flex-direction: column;
                gap: 15px;
            }

.btn {
                width: 100%;
                text-align: center;
            }

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

.newsletter-input, .newsletter-btn {
                width: 100%;
            }
        }

@media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }

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

.about-stats {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navLinks = document.getElementById('navLinks');

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

// Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
            });
        });

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

// Animation on scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.feature-card, .category-card, .product-card, .testimonial-card, .about-img, .about-content, .newsletter-form, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animate');
                }
            });
        };

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

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

Bike Parts Shop Template Preview

Download Options