Car Rentals Service 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>DriveEasy | Premium Car Rentals</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-car"></i>
                    </div>
                    <div class="logo-text">Drive<span>Easy</span></div>
                </a>
                
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                
                <nav id="mainNav">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#cars">Cars</a></li>
                    </ul>
                    <button class="nav-btn">Book Now</button>
                </nav>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content fade-in">
                <h1>Premium Car Rentals Made Simple</h1>
                <p>Experience the freedom of the road with our premium fleet. From luxury sedans to spacious SUVs, find the perfect vehicle for your journey at unbeatable prices.</p>
                <div class="hero-btns">
                    <a href="#cars" class="btn-primary">
                        <i class="fas fa-car"></i> Browse Cars
                    </a>
                    <a href="#booking" class="btn-secondary">
                        <i class="fas fa-calendar-alt"></i> Book Now
                    </a>
                </div>
            </div>
        </div>
    </section>

<section class="features" id="features">
        <div class="container">
            <div class="section-header fade-in">
                <p class="section-subtitle">Why Choose Us</p>
                <h2 class="section-title">Drive With Confidence</h2>
                <p class="section-desc">We're committed to providing an exceptional car rental experience with premium vehicles and outstanding customer service.</p>
            </div>
            
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>Easy & Fast Booking</h3>
                    <p>Book your car in under 2 minutes with our streamlined online reservation system.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Full Coverage Insurance</h3>
                    <p>Comprehensive insurance included with every rental for complete peace of mind.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <h3>Best Price Guarantee</h3>
                    <p>We offer the most competitive rates with no hidden fees. Find a better price and we'll match it.</p>
                </div>
                
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Roadside Assistance</h3>
                    <p>Our support team is available around the clock to assist you wherever you are.</p>
                </div>
            </div>
        </div>
    </section>

<section class="cars" id="cars">
        <div class="container">
            <div class="cars-header">
                <div class="section-header">
                    <p class="section-subtitle">Our Fleet</p>
                    <h2 class="section-title">Choose Your Vehicle</h2>
                    <p class="section-desc">Select from our wide range of premium vehicles for any occasion.</p>
                </div>
                
                <div class="cars-filter">
                    <button class="filter-btn active" data-filter="all">All Cars</button>
                    <button class="filter-btn" data-filter="economy">Economy</button>
                    <button class="filter-btn" data-filter="suv">SUV</button>
                    <button class="filter-btn" data-filter="luxury">Luxury</button>
                </div>
            </div>
            
            <div class="cars-grid">
                
                <div class="car-card fade-in" data-category="economy">
                    <div class="car-img-container">
                        <div class="car-badge">Most Popular</div>
                        <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="Toyota Camry" class="car-img">
                    </div>
                    <div class="car-info">
                        <div class="car-header">
                            <div class="car-title">
                                <h3>Toyota Camry</h3>
                                <p class="car-subtitle">Hybrid Sedan</p>
                            </div>
                            <div class="car-price">$49<span>/day</span></div>
                        </div>
                        
                        <div class="car-features">
                            <div class="car-feature">
                                <i class="fas fa-users"></i>
                                <span>5 Seats</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-gas-pump"></i>
                                <span>Hybrid</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-cogs"></i>
                                <span>Automatic</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-suitcase"></i>
                                <span>2 Luggage</span>
                            </div>
                        </div>
                        
                        <div class="car-actions">
                            <button class="car-btn" data-car="toyota-camry">
                                <i class="fas fa-calendar-alt"></i> Book Now
                            </button>
                            <button class="car-favorite">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                
                <div class="car-card fade-in" data-category="luxury">
                    <div class="car-img-container">
                        <div class="car-badge">Premium</div>
                        <img src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="BMW X5" class="car-img">
                    </div>
                    <div class="car-info">
                        <div class="car-header">
                            <div class="car-title">
                                <h3>BMW X5</h3>
                                <p class="car-subtitle">Luxury SUV</p>
                            </div>
                            <div class="car-price">$99<span>/day</span></div>
                        </div>
                        
                        <div class="car-features">
                            <div class="car-feature">
                                <i class="fas fa-users"></i>
                                <span>5 Seats</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-gas-pump"></i>
                                <span>Premium</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-cogs"></i>
                                <span>Automatic</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-suitcase"></i>
                                <span>4 Luggage</span>
                            </div>
                        </div>
                        
                        <div class="car-actions">
                            <button class="car-btn" data-car="bmw-x5">
                                <i class="fas fa-calendar-alt"></i> Book Now
                            </button>
                            <button class="car-favorite">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                
                <div class="car-card fade-in" data-category="luxury">
                    <div class="car-img-container">
                        <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mercedes-Benz" class="car-img">
                    </div>
                    <div class="car-info">
                        <div class="car-header">
                            <div class="car-title">
                                <h3>Mercedes C-Class</h3>
                                <p class="car-subtitle">Luxury Sedan</p>
                            </div>
                            <div class="car-price">$89<span>/day</span></div>
                        </div>
                        
                        <div class="car-features">
                            <div class="car-feature">
                                <i class="fas fa-users"></i>
                                <span>5 Seats</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-gas-pump"></i>
                                <span>Premium</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-cogs"></i>
                                <span>Automatic</span>
                            </div>
                            <div class="car-feature">
                                <i class="fas fa-suitcase"></i>
                                <span>3 Luggage</span>
                            </div>
                        </div>
                        
                        <div class="car-actions">
                            <button class="car-btn" data-car="mercedes-c-class">
                                <i class="fas fa-calendar-alt"></i> Book Now
                            </button>
                            <button class="car-favorite">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="booking" id="booking">
        <div class="container">
            <div class="section-header fade-in">
                <p class="section-subtitle">Reservation</p>
                <h2 class="section-title">Book Your Car</h2>
                <p class="section-desc">Fill out the form below to reserve your vehicle. We'll confirm your booking within 30 minutes.</p>
            </div>
            
            <div class="booking-container">
                <div class="booking-form fade-in">
                    <h3 class="form-title">Quick Reservation</h3>
                    <p class="form-subtitle">Complete the form to book your selected vehicle</p>
                    
                    <form id="bookingForm">
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="fullName" class="form-label">Full Name</label>
                                <input type="text" id="fullName" class="form-control" placeholder="John Smith" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" id="email" class="form-control" placeholder="john@example.com" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="tel" id="phone" class="form-control" placeholder="(123) 456-7890" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="carType" class="form-label">Car Type</label>
                                <select id="carType" class="form-control" required>
                                    <option value="" disabled selected>Select a car</option>
                                    <option value="toyota-camry">Toyota Camry - $49/day</option>
                                    <option value="bmw-x5">BMW X5 - $99/day</option>
                                    <option value="mercedes-c-class">Mercedes C-Class - $89/day</option>
                                    <option value="honda-civic">Honda Civic - $39/day</option>
                                    <option value="ford-explorer">Ford Explorer - $69/day</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="pickupDate" class="form-label">Pickup Date</label>
                                <input type="date" id="pickupDate" class="form-control" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="returnDate" class="form-label">Return Date</label>
                                <input type="date" id="returnDate" class="form-control" required>
                            </div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="specialRequests" class="form-label">Special Requests</label>
                            <textarea id="specialRequests" class="form-control" rows="3" placeholder="Any special requests or additional information..."></textarea>
                        </div>
                        
                        <button type="submit" class="form-btn">
                            <i class="fas fa-paper-plane"></i> Complete Booking
                        </button>
                    </form>
                </div>
                
                <div class="booking-highlights fade-in">
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="highlight-text">
                            <h4>Instant Confirmation</h4>
                            <p>Receive booking confirmation within minutes of completing your reservation.</p>
                        </div>
                    </div>
                    
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="highlight-text">
                            <h4>Flexible Cancellation</h4>
                            <p>Free cancellation up to 24 hours before your scheduled pickup time.</p>
                        </div>
                    </div>
                    
                    <div class="highlight-item">
                        <div class="highlight-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="highlight-text">
                            <h4>Premium Service</h4>
                            <p>Enjoy our premium concierge service with contactless pickup and drop-off.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="reviews" id="reviews">
        <div class="container">
            <div class="section-header fade-in">
                <p class="section-subtitle">Testimonials</p>
                <h2 class="section-title">What Our Customers Say</h2>
                <p class="section-desc">Don't just take our word for it. Here's what our customers have to say about their experience.</p>
            </div>
            
            <div class="reviews-grid">
                <div class="review-card fade-in">
                    <div class="review-header">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="review-avatar">
                        <div class="review-info">
                            <h4>Sarah Johnson</h4>
                            <p class="review-date">March 15, 2023</p>
                        </div>
                    </div>
                    <div class="review-stars">
                        <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>
                    <p class="review-text">The booking process was incredibly smooth, and the car was in perfect condition when I picked it up. The customer service team was helpful throughout the entire process. Will definitely use DriveEasy again for my next trip!</p>
                </div>
                
                <div class="review-card fade-in">
                    <div class="review-header">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="review-avatar">
                        <div class="review-info">
                            <h4>Michael Chen</h4>
                            <p class="review-date">April 2, 2023</p>
                        </div>
                    </div>
                    <div class="review-stars">
                        <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>
                    <p class="review-text">I rented a BMW X5 for a week-long business trip. The car was immaculate and drove beautifully. The pickup and drop-off process was seamless, and the pricing was transparent with no hidden fees. Highly recommended!</p>
                </div>
                
                <div class="review-card fade-in">
                    <div class="review-header">
                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jessica Williams" class="review-avatar">
                        <div class="review-info">
                            <h4>Jessica Williams</h4>
                            <p class="review-date">May 10, 2023</p>
                        </div>
                    </div>
                    <div class="review-stars">
                        <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>
                    <p class="review-text">My family and I rented a Toyota Camry for our vacation. The car was comfortable, fuel-efficient, and had plenty of space for our luggage. The customer service was excellent throughout the entire process. Five stars!</p>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <div class="footer-logo">
                        <div class="logo-icon">
                            <i class="fas fa-car"></i>
                        </div>
                        <div class="footer-logo-text">Drive<span>Easy</span></div>
                    </div>
                    <p class="footer-desc">Your trusted partner for premium car rentals. We provide exceptional vehicles and outstanding service to make every journey memorable.</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-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h4>Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="#features"><i class="fas fa-chevron-right"></i> Features</a></li>
                        <li><a href="#cars"><i class="fas fa-chevron-right"></i> Our Fleet</a></li>
                        <li><a href="#reviews"><i class="fas fa-chevron-right"></i> Reviews</a></li>
                        <li><a href="#booking"><i class="fas fa-chevron-right"></i> Book Now</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h4>Services</h4>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Car Rental</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Airport Pickup</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Long Term Rental</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Corporate Rental</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Luxury Cars</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h4>Contact Us</h4>
                    <div class="footer-contact">
                        <p><i class="fas fa-map-marker-alt"></i> 123 Main Street, Cityville</p>
                        <p><i class="fas fa-phone"></i> (555) 123-4567</p>
                        <p><i class="fas fa-envelope"></i> info@driveeasy.com</p>
                        <p><i class="fas fa-clock"></i> Mon-Sun: 24/7 Service</p>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 DriveEasy Car Rentals. All rights reserved. | Designed with <i class="fas fa-heart" style="color: var(--secondary);"></i></p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #1a2b4c;
            --secondary: #ff7e30;
            --accent: #3a86ff;
            --light: #f8fafc;
            --dark: #0f172a;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --success: #10b981;
            --shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            --border-radius: 12px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }
        
        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        /* Header */
        header {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 18px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        header.scrolled {
            padding: 12px 0;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }
        
        .logo-icon {
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, var(--secondary), var(--accent));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        
        .logo-text {
            font-size: 26px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .logo-text span {
            color: var(--secondary);
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 32px;
        }
        
        nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            font-size: 16px;
            transition: var(--transition);
            position: relative;
            padding: 8px 0;
        }
        
        nav a:hover {
            color: var(--secondary);
        }
        
        nav a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            background: linear-gradient(to right, var(--secondary), var(--accent));
            bottom: 0;
            left: 0;
            border-radius: 10px;
            transition: var(--transition);
        }
        
        nav a:hover::after {
            width: 100%;
        }
        
        .nav-btn {
            background: linear-gradient(to right, var(--secondary), var(--accent));
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(255, 126, 48, 0.3);
        }
        
        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 126, 48, 0.4);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--primary);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            background: linear-gradient(rgba(26, 43, 76, 0.85), rgba(26, 43, 76, 0.9)), url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255, 126, 48, 0.2) 0%, transparent 70%);
            top: -100px;
            right: -100px;
            border-radius: 50%;
        }
        
        .hero-content {
            max-width: 700px;
            position: relative;
            z-index: 1;
        }
        
        .hero h1 {
            font-size: 52px;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(to right, #fff, #ffd8c1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 32px;
            color: rgba(255, 255, 255, 0.85);
            max-width: 600px;
        }
        
        .hero-btns {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .btn-primary {
            background: linear-gradient(to right, var(--secondary), var(--accent));
            color: white;
            padding: 16px 36px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition);
            box-shadow: 0 6px 20px rgba(255, 126, 48, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(255, 126, 48, 0.4);
        }
        
        .btn-secondary {
            background: transparent;
            color: white;
            padding: 16px 36px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-4px);
        }
        
        /* Features Section */
        .features {
            padding: 100px 0;
            background-color: white;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-subtitle {
            color: var(--secondary);
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 16px;
        }
        
        .section-desc {
            color: var(--gray);
            font-size: 18px;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
        }
        
        .feature-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 32px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid var(--light-gray);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
            border-color: transparent;
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255, 126, 48, 0.1), rgba(58, 134, 255, 0.1));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            font-size: 34px;
            color: var(--secondary);
        }
        
        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 16px;
            color: var(--primary);
        }
        
        .feature-card p {
            color: var(--gray);
        }
        
        /* Cars Section */
        .cars {
            padding: 100px 0;
            background-color: var(--light);
        }
        
        .cars-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .cars-filter {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            padding: 10px 24px;
            background: white;
            border: 1px solid var(--light-gray);
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-btn.active, .filter-btn:hover {
            background: linear-gradient(to right, var(--secondary), var(--accent));
            color: white;
            border-color: transparent;
        }
        
        .cars-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 32px;
        }
        
        .car-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .car-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }
        
        .car-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--secondary);
            color: white;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            z-index: 2;
        }
        
        .car-img-container {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        
        .car-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .car-card:hover .car-img {
            transform: scale(1.05);
        }
        
        .car-info {
            padding: 28px;
        }
        
        .car-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .car-title h3 {
            font-size: 22px;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .car-subtitle {
            color: var(--gray);
            font-size: 14px;
        }
        
        .car-price {
            font-size: 26px;
            font-weight: 700;
            color: var(--secondary);
        }
        
        .car-price span {
            font-size: 14px;
            font-weight: 400;
            color: var(--gray);
        }
        
        .car-features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .car-feature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--gray);
            font-size: 15px;
        }
        
        .car-feature i {
            color: var(--secondary);
        }
        
        .car-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .car-btn {
            background: linear-gradient(to right, var(--secondary), var(--accent));
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .car-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 126, 48, 0.3);
        }
        
        .car-favorite {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .car-favorite:hover, .car-favorite.active {
            color: var(--secondary);
            background-color: rgba(255, 126, 48, 0.1);
        }
        
        /* Booking Form */
        .booking {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--primary) 0%, #2c3e6e 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .booking::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255, 126, 48, 0.15) 0%, transparent 70%);
            bottom: -200px;
            right: -200px;
            border-radius: 50%;
        }
        
        .booking .section-title {
            color: white;
        }
        
        .booking .section-desc {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .booking-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .booking-form {
            background: rgba(255, 255, 255, 0.95);
            border-radius: var(--border-radius);
            padding: 48px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
        }
        
        .form-title {
            font-size: 28px;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .form-subtitle {
            color: var(--gray);
            margin-bottom: 32px;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group.full-width {
            grid-column: 1 / -1;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--primary);
        }
        
        .form-control {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid var(--light-gray);
            border-radius: 10px;
            font-size: 16px;
            transition: var(--transition);
            background-color: white;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 3px rgba(255, 126, 48, 0.1);
        }
        
        .form-btn {
            background: linear-gradient(to right, var(--secondary), var(--accent));
            color: white;
            border: none;
            width: 100%;
            padding: 18px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 17px;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .form-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 126, 48, 0.3);
        }
        
        .booking-highlights {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }
        
        .highlight-item {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .highlight-icon {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--secondary);
            flex-shrink: 0;
        }
        
        .highlight-text h4 {
            font-size: 20px;
            margin-bottom: 6px;
        }
        
        .highlight-text p {
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Reviews Section */
        .reviews {
            padding: 100px 0;
            background-color: white;
        }
        
        .reviews-slider {
            position: relative;
            overflow: hidden;
        }
        
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 32px;
        }
        
        .review-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 36px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid var(--light-gray);
        }
        
        .review-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
            border-color: transparent;
        }
        
        .review-header {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .review-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 4px solid var(--light);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .review-info h4 {
            font-size: 20px;
            margin-bottom: 6px;
            color: var(--primary);
        }
        
        .review-date {
            color: var(--gray);
            font-size: 14px;
        }
        
        .review-stars {
            color: var(--secondary);
            margin-bottom: 20px;
            font-size: 16px;
        }
        
        .review-text {
            color: var(--gray);
            font-style: italic;
            position: relative;
            padding-left: 20px;
        }
        
        .review-text::before {
            content: '"';
            position: absolute;
            left: 0;
            top: -10px;
            font-size: 60px;
            color: var(--light-gray);
            font-family: Georgia, serif;
            line-height: 1;
        }
        
        /* Footer */
        footer {
            background-color: var(--primary);
            color: white;
            padding: 80px 0 30px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 60px;
            margin-bottom: 60px;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .footer-logo-text {
            font-size: 28px;
            font-weight: 700;
        }
        
        .footer-logo-text span {
            color: var(--secondary);
        }
        
        .footer-desc {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 30px;
            max-width: 350px;
        }
        
        .social-links {
            display: flex;
            gap: 16px;
        }
        
        .social-link {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .social-link:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }
        
        .footer-column h4 {
            font-size: 20px;
            margin-bottom: 28px;
            color: white;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 16px;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .footer-links a:hover {
            color: var(--secondary);
            transform: translateX(5px);
        }
        
        .footer-contact p {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .footer-contact i {
            color: var(--secondary);
            width: 20px;
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 15px;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeInUp 0.8s ease forwards;
        }
        
        /* Responsive Design */
        @media (max-width: 1024px) {
            .booking-container {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                position: relative;
            }
            
            nav {
                position: fixed;
                top: 80px;
                left: 0;
                width: 100%;
                background: white;
                padding: 20px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                transform: translateY(-150%);
                opacity: 0;
                transition: var(--transition);
                z-index: 999;
            }
            
            nav.active {
                transform: translateY(0);
                opacity: 1;
            }
            
            nav ul {
                flex-direction: column;
                gap: 0;
            }
            
            nav li {
                padding: 15px 0;
                border-bottom: 1px solid var(--light-gray);
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h1 {
                font-size: 40px;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .cars-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .reviews-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 32px;
            }
            
            .section-title {
                font-size: 32px;
            }
            
            .hero-btns {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .btn-primary, .btn-secondary {
                width: 100%;
                justify-content: center;
            }
            
            .feature-card, .review-card, .booking-form {
                padding: 30px 20px;
            }
        }

JavaScript

// Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mainNav = document.getElementById('mainNav');
        
        mobileMenuBtn.addEventListener('click', () => {
            mainNav.classList.toggle('active');
            mobileMenuBtn.innerHTML = mainNav.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');
            }
        });
        
        // Car filter functionality
        const filterBtns = document.querySelectorAll('.filter-btn');
        const carCards = document.querySelectorAll('.car-card');
        
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(b => b.classList.remove('active'));
                
                // Add active class to clicked button
                btn.classList.add('active');
                
                // Get filter value
                const filterValue = btn.getAttribute('data-filter');
                
                // Show/hide car cards based on filter
                carCards.forEach(card => {
                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
        
        // Favorite button functionality
        const favoriteBtns = document.querySelectorAll('.car-favorite');
        favoriteBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const icon = btn.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    btn.classList.add('active');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    btn.classList.remove('active');
                }
            });
        });
        
        // Car booking button functionality
        const carBtns = document.querySelectorAll('.car-btn');
        carBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const car = btn.getAttribute('data-car');
                const carTypeSelect = document.getElementById('carType');
                
                // Find and select the corresponding option
                for (let option of carTypeSelect.options) {
                    if (option.value === car) {
                        carTypeSelect.value = car;
                        break;
                    }
                }
                
                // Scroll to booking form
                document.getElementById('booking').scrollIntoView({ behavior: 'smooth' });
            });
        });
        
        // Form submission
        const bookingForm = document.getElementById('bookingForm');
        bookingForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form values
            const fullName = document.getElementById('fullName').value;
            const carType = document.getElementById('carType').value;
            
            // Show success message
            alert(`Thank you ${fullName}! Your booking for the ${carType} has been received. We'll send a confirmation email shortly.`);
            
            // Reset form
            bookingForm.reset();
            
            // Set min dates for pickup and return
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('pickupDate').min = today;
        });
        
        // Set min dates for date inputs
        const today = new Date().toISOString().split('T')[0];
        const pickupDateInput = document.getElementById('pickupDate');
        const returnDateInput = document.getElementById('returnDate');
        
        pickupDateInput.min = today;
        
        // Update return date min based on pickup date
        pickupDateInput.addEventListener('change', () => {
            returnDateInput.min = pickupDateInput.value;
            
            // If return date is before new min, clear it
            if (returnDateInput.value && returnDateInput.value < pickupDateInput.value) {
                returnDateInput.value = '';
            }
        });
        
        // Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                }
            });
        }, observerOptions);
        
        // Observe elements for animation
        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

Car Rentals Service Template Preview

Download Options