Car 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>AutoParts Pro - Premium Car Parts Shop</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="header-container">
            <a href="#" class="logo">
                <i class="fas fa-car"></i>
                <span>AutoParts Pro</span>
            </a>
            
            <nav id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            
            <div class="header-actions">
                <i class="fas fa-search search-icon"></i>
                <i class="fas fa-shopping-cart cart-icon"></i>
                <div class="hamburger" id="hamburger">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="hero-content">
            <h1>Premium Car Parts for Your Vehicle</h1>
            <p>Discover high-quality auto parts and accessories at competitive prices. We offer everything you need to keep your vehicle running smoothly.</p>
            <div class="hero-buttons">
                <a href="#" class="btn btn-primary">Shop Now</a>
                <a href="#" class="btn btn-outline">Learn More</a>
            </div>
        </div>
    </section>

<section class="features">
        <div class="section-title animate-on-scroll">
            <h2>Why Choose Us</h2>
            <p>We provide the best quality auto parts with exceptional customer service and fast shipping.</p>
        </div>
        
        <div class="features-grid">
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>Quality Guarantee</h3>
                <p>All our parts come with a minimum 1-year warranty for your peace of mind.</p>
            </div>
            
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon">
                    <i class="fas fa-truck"></i>
                </div>
                <h3>Fast Shipping</h3>
                <p>Get your parts delivered to your doorstep within 2-3 business days.</p>
            </div>
            
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3>24/7 Support</h3>
                <p>Our expert team is available round the clock to assist you with any queries.</p>
            </div>
        </div>
    </section>

<section class="categories">
        <div class="section-title animate-on-scroll">
            <h2>Shop By Category</h2>
            <p>Browse through our extensive collection of auto parts organized by category.</p>
        </div>
        
        <div class="categories-grid">
            <div class="category-card animate-on-scroll">
                <img src="https://plus.unsplash.com/premium_photo-1664304163284-9c844b50b439?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Engine Parts">
                <div class="category-overlay">
                    <h3>Engine Parts</h3>
                    <p>50+ Products</p>
                </div>
            </div>
            
            <div class="category-card animate-on-scroll">
                <img src="https://images.unsplash.com/photo-1654742967873-0bfb6cd0e719?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Brake Systems">
                <div class="category-overlay">
                    <h3>Brake Systems</h3>
                    <p>35+ Products</p>
                </div>
            </div>
            
            <div class="category-card animate-on-scroll">
                <img src="https://images.unsplash.com/photo-1723099971299-3789db53604c?q=80&w=430&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Suspension">
                <div class="category-overlay">
                    <h3>Suspension</h3>
                    <p>40+ Products</p>
                </div>
            </div>
            
            <div class="category-card animate-on-scroll">
                <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1280&q=80" alt="Lighting">
                <div class="category-overlay">
                    <h3>Lighting</h3>
                    <p>60+ Products</p>
                </div>
            </div>
        </div>
    </section>

<section class="popular-products">
        <div class="section-title animate-on-scroll">
            <h2>Popular Products</h2>
            <p>Our customers' favorite products that keep them coming back for more.</p>
        </div>
        
        <div class="products-grid">
            <div class="product-card animate-on-scroll">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1522598140461-ec9911e01c53?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Performance Air Filter">
                </div>
                <div class="product-info">
                    <span class="product-category">Engine Parts</span>
                    <h3>Performance Air Filter</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>(128)</span>
                    </div>
                    <div class="product-price">$49.99</div>
                    <div class="product-actions">
                        <a href="#" class="btn btn-primary btn-sm">Add to Cart</a>
                        <a href="#" class="btn btn-outline btn-sm">View Details</a>
                    </div>
                </div>
            </div>
            
            <div class="product-card animate-on-scroll">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Ceramic Brake Pads">
                </div>
                <div class="product-info">
                    <span class="product-category">Brake Systems</span>
                    <h3>Ceramic Brake Pads</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>(95)</span>
                    </div>
                    <div class="product-price">$89.99</div>
                    <div class="product-actions">
                        <a href="#" class="btn btn-primary btn-sm">Add to Cart</a>
                        <a href="#" class="btn btn-outline btn-sm">View Details</a>
                    </div>
                </div>
            </div>
            
            <div class="product-card animate-on-scroll">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="LED Headlights">
                </div>
                <div class="product-info">
                    <span class="product-category">Lighting</span>
                    <h3>LED Headlight Kit</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>(210)</span>
                    </div>
                    <div class="product-price">$129.99</div>
                    <div class="product-actions">
                        <a href="#" class="btn btn-primary btn-sm">Add to Cart</a>
                        <a href="#" class="btn btn-outline btn-sm">View Details</a>
                    </div>
                </div>
            </div>
            
            <div class="product-card animate-on-scroll">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1723099971299-3789db53604c?q=80&w=430&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Performance Exhaust">
                </div>
                <div class="product-info">
                    <span class="product-category">Exhaust Systems</span>
                    <h3>Performance Exhaust</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>(76)</span>
                    </div>
                    <div class="product-price">$349.99</div>
                    <div class="product-actions">
                        <a href="#" class="btn btn-primary btn-sm">Add to Cart</a>
                        <a href="#" class="btn btn-outline btn-sm">View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="special-offer">
        <div class="section-title animate-on-scroll">
            <h2>Summer Sale</h2>
            <p>Get up to 30% off on selected items. Limited time offer!</p>
        </div>
        
        <div class="offer-content animate-on-scroll">
            <h3>Premium Car Care Kit</h3>
            <p>Complete kit with wax, polish, microfiber towels, and cleaning solutions</p>
            
            <div class="offer-timer">
                <div class="timer-box">
                    <span id="days">00</span>
                    <span>Days</span>
                </div>
                <div class="timer-box">
                    <span id="hours">00</span>
                    <span>Hours</span>
                </div>
                <div class="timer-box">
                    <span id="minutes">00</span>
                    <span>Minutes</span>
                </div>
                <div class="timer-box">
                    <span id="seconds">00</span>
                    <span>Seconds</span>
                </div>
            </div>
            
            <a href="#" class="btn btn-white">Shop The Sale</a>
        </div>
    </section>

<section class="testimonials">
        <div class="section-title animate-on-scroll">
            <h2>What Our Customers Say</h2>
            <p>Hear from our satisfied customers about their experience with AutoParts Pro.</p>
        </div>
        
        <div class="testimonials-container">
            <div class="testimonial-slider animate-on-scroll">
                <div class="testimonial-track">
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p class="testimonial-text">I've been buying car parts from AutoParts Pro for years. Their quality is unmatched and their customer service is exceptional. I recently ordered brake pads and they arrived faster than expected.</p>
                            <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=1287&q=80" alt="Michael Johnson">
                                </div>
                                <div class="author-info">
                                    <h4>Michael Johnson</h4>
                                    <p>Auto Enthusiast</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p class="testimonial-text">As a professional mechanic, I rely on AutoParts Pro for all my parts needs. Their extensive catalog and fast shipping help me keep my shop running smoothly. The quality of their parts is consistently excellent.</p>
                            <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=1287&q=80" alt="Sarah Williams">
                                </div>
                                <div class="author-info">
                                    <h4>Sarah Williams</h4>
                                    <p>Professional Mechanic</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p class="testimonial-text">The LED headlights I purchased transformed my nighttime driving experience. The installation was straightforward, and the difference in visibility is remarkable. Will definitely shop here again!</p>
                            <div class="testimonial-author">
                                <div class="author-avatar">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="David Chen">
                                </div>
                                <div class="author-info">
                                    <h4>David Chen</h4>
                                    <p>Daily Commuter</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="testimonial-nav">
                <div class="testimonial-dot active"></div>
                <div class="testimonial-dot"></div>
                <div class="testimonial-dot"></div>
            </div>
        </div>
    </section>

<section class="brands">
        <div class="section-title animate-on-scroll">
            <h2>Trusted Brands</h2>
            <p>We partner with the most reputable brands in the automotive industry.</p>
        </div>
        
        <div class="brands-grid animate-on-scroll">
            <div class="brand-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Bosch_logo.svg/1280px-Bosch_logo.svg.png" alt="Bosch">
            </div>
            <div class="brand-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Mobil_1_logo.svg/1280px-Mobil_1_logo.svg.png" alt="Mobil 1">
            </div>
            <div class="brand-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Michelin_logo.svg/1280px-Michelin_logo.svg.png" alt="Michelin">
            </div>
            <div class="brand-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Castrol_logo.svg/1280px-Castrol_logo.svg.png" alt="Castrol">
            </div>
            <div class="brand-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Brembo_Logo.svg/1280px-Brembo_Logo.svg.png" alt="Brembo">
            </div>
        </div>
    </section>

<section class="newsletter">
        <div class="section-title animate-on-scroll">
            <h2>Stay Updated</h2>
            <p>Subscribe to our newsletter for exclusive deals, new arrivals, and automotive tips.</p>
        </div>
        
        <form class="newsletter-form animate-on-scroll">
            <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
            <button type="submit" class="btn btn-white">Subscribe</button>
        </form>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-about">
                <a href="#" class="footer-logo">
                    <i class="fas fa-car"></i> AutoParts Pro
                </a>
                <p>Your one-stop shop for premium automotive parts and accessories. We're committed to providing quality products and exceptional customer service.</p>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            
            <div class="footer-links">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">Brands</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            
            <div class="footer-links">
                <h3>Customer Service</h3>
                <ul>
                    <li><a href="#">My Account</a></li>
                    <li><a href="#">Order Tracking</a></li>
                    <li><a href="#">Wishlist</a></li>
                    <li><a href="#">Shipping Policy</a></li>
                    <li><a href="#">Returns & Refunds</a></li>
                    <li><a href="#">FAQs</a></li>
                </ul>
            </div>
            
            <div class="footer-contact">
                <h3>Contact Us</h3>
                <p><i class="fas fa-map-marker-alt"></i> 123 Auto Parts Street, Detroit, MI 48201</p>
                <p><i class="fas fa-phone-alt"></i> +1 (800) 555-1234</p>
                <p><i class="fas fa-envelope"></i> info@autopartspro.com</p>
                <p><i class="fas fa-clock"></i> Mon-Fri: 9AM - 6PM, Sat: 10AM - 4PM</p>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; 2023 AutoParts Pro. All Rights Reserved. | Designed with <i class="fas fa-heart" style="color: #ef4444;"></i> by WebCraft</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #3b82f6;
            --secondary: #1e40af;
            --accent: #60a5fa;
            --text: #1f2937;
            --light: #f8fafc;
            --gray: #e5e7eb;
            --dark-gray: #6b7280;
        }

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

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text);
            background-color: var(--light);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 4px 6px -1px 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 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

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

.logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

.logo i {
            font-size: 2rem;
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

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

nav ul li a:hover {
            color: var(--primary);
        }

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

nav ul li a:hover::after {
            width: 100%;
        }

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

.cart-icon, .search-icon {
            font-size: 1.2rem;
            color: var(--text);
            cursor: pointer;
            transition: color 0.3s ease;
        }

.cart-icon:hover, .search-icon:hover {
            color: var(--primary);
        }

.hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://plus.unsplash.com/premium_photo-1664304163284-9c844b50b439?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            padding-top: 80px;
            animation: fadeIn 1s ease-in-out;
        }

.hero-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            width: 100%;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            line-height: 1.2;
            animation: slideInLeft 1s ease-in-out;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 600px;
            animation: slideInLeft 1.2s ease-in-out;
        }

.hero-buttons {
            display: flex;
            gap: 1rem;
            animation: fadeIn 1.5s ease-in-out;
        }

.btn {
            padding: 0.8rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

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

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

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

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

/* Features Section */
        .features {
            padding: 5rem 2rem;
            background-color: white;
        }

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

.section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

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

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.feature-card {
            background-color: var(--light);
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

.feature-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

.feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--primary-dark);
        }

/* Categories Section */
        .categories {
            padding: 5rem 2rem;
            background-color: var(--light);
        }

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

.category-card {
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
            height: 300px;
            transition: transform 0.3s ease;
        }

.category-card:hover {
            transform: scale(1.03);
        }

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

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

.category-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            padding: 2rem 1.5rem 1.5rem;
            color: white;
        }

.category-overlay h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

/* Popular Products */
        .popular-products {
            padding: 5rem 2rem;
            background-color: white;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.product-card {
            background-color: var(--light);
            border-radius: 0.5rem;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

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

.product-image {
            height: 200px;
            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.2rem;
            margin-bottom: 0.5rem;
            color: var(--primary-dark);
        }

.product-category {
            color: var(--dark-gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            display: block;
        }

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

.product-rating {
            color: #f59e0b;
            margin-bottom: 1rem;
        }

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

.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
        }

/* Special Offer */
        .special-offer {
            padding: 5rem 2rem;
            background: linear-gradient(rgba(37, 99, 235, 0.9), rgba(37, 99, 235, 0.9)), url('https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
        }

.special-offer .section-title h2 {
            color: white;
        }

.special-offer .section-title p {
            color: rgba(255, 255, 255, 0.9);
        }

.offer-content {
            max-width: 800px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 3rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.offer-timer {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 2rem 0;
        }

.timer-box {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 1rem;
            border-radius: 0.5rem;
            min-width: 80px;
        }

.timer-box span:first-child {
            font-size: 2rem;
            font-weight: 700;
            display: block;
        }

.timer-box span:last-child {
            font-size: 0.9rem;
            opacity: 0.9;
        }

/* Testimonials */
        .testimonials {
            padding: 5rem 2rem;
            background-color: var(--light);
        }

.testimonials-container {
            max-width: 1200px;
            margin: 0 auto;
        }

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

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

.testimonial-card {
            min-width: 100%;
            padding: 0 1rem;
        }

.testimonial-content {
            background-color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: relative;
        }

.testimonial-content::before {
            content: '"';
            font-size: 5rem;
            color: var(--primary-light);
            opacity: 0.2;
            position: absolute;
            top: 1rem;
            left: 1rem;
            line-height: 1;
        }

.testimonial-text {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
        }

.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-size: 1.1rem;
            color: var(--primary-dark);
        }

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

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

.testimonial-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--gray);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.testimonial-dot.active {
            background-color: var(--primary);
        }

/* Brands */
        .brands {
            padding: 5rem 2rem;
            background-color: white;
        }

.brands-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.brand-item {
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
        }

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

.brand-item img {
            height: 40px;
            width: auto;
            object-fit: contain;
        }

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

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

.newsletter .section-title p {
            color: rgba(255, 255, 255, 0.9);
        }

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

.newsletter-input {
            flex: 1;
            padding: 1rem;
            border-radius: 0.5rem;
            border: none;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
        }

.newsletter-input:focus {
            outline: 2px solid var(--primary-dark);
        }

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

.btn-white:hover {
            background-color: transparent;
            color: white;
        }

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

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

.footer-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 1.5rem;
            display: inline-block;
        }

.footer-about p {
            color: var(--gray);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

.social-links {
            display: flex;
            gap: 1rem;
        }

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

.social-link:hover {
            color: #ffff;
            background-color: var(--primary);
        }

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

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

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

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

.footer-links ul li a {
            color: var(--gray);
            text-decoration: none;
            transition: color 0.3s ease;
        }

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

.footer-contact p {
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;
            color: var(--gray);
            margin-bottom: 1rem;
        }

.footer-contact i {
            color: var(--primary);
            margin-top: 3px;
        }

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

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

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

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

.animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

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

/* Responsive Styles */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.8rem;
            }
        }

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

nav {
                position: fixed;
                top: 80px;
                left: 0;
                width: 100%;
                background-color: white;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                padding: 1rem;
                transform: translateY(-150%);
                transition: transform 0.3s ease;
            }

nav.active {
                transform: translateY(0);
            }

nav ul {
                flex-direction: column;
                gap: 1rem;
            }

.hamburger {
                display: block;
            }

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

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

.hero-buttons {
                flex-direction: column;
                gap: 1rem;
            }

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

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

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

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

.offer-timer {
                flex-wrap: wrap;
            }

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

JavaScript

// Mobile Navigation Toggle
        const hamburger = document.getElementById('hamburger');
        const nav = document.getElementById('nav');
        
        hamburger.addEventListener('click', () => {
            nav.classList.toggle('active');
            hamburger.innerHTML = nav.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

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

// Countdown Timer
        function updateCountdown() {
            const now = new Date();
            const endDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days from now
            
            const totalSeconds = (endDate - now) / 1000;
            
            const days = Math.floor(totalSeconds / 3600 / 24);
            const hours = Math.floor(totalSeconds / 3600) % 24;
            const minutes = Math.floor(totalSeconds / 60) % 60;
            const seconds = Math.floor(totalSeconds) % 60;
            
            document.getElementById('days').textContent = formatTime(days);
            document.getElementById('hours').textContent = formatTime(hours);
            document.getElementById('minutes').textContent = formatTime(minutes);
            document.getElementById('seconds').textContent = formatTime(seconds);
        }
        
        function formatTime(time) {
            return time < 10 ? `0${time}` : time;
        }
        
        setInterval(updateCountdown, 1000);
        updateCountdown();

// Testimonial Slider
        const track = document.querySelector('.testimonial-track');
        const dots = document.querySelectorAll('.testimonial-dot');
        let currentSlide = 0;
        
        function goToSlide(index) {
            track.style.transform = `translateX(-${index * 100}%)`;
            
            dots.forEach(dot => dot.classList.remove('active'));
            dots[index].classList.add('active');
            
            currentSlide = index;
        }
        
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => goToSlide(index));
        });
        
        // Auto slide every 5 seconds
        setInterval(() => {
            currentSlide = (currentSlide + 1) % dots.length;
            goToSlide(currentSlide);
        }, 5000);

// Scroll Animation
        function animateOnScroll() {
            const elements = document.querySelectorAll('.animate-on-scroll');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animated');
                }
            });
        }
        
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Car Parts Shop Template Preview

Download Options