Rickshaw Rental Service Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EcoRide | Electric Rickshaw Rental Service</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navbar --> <header class="header"> <div class="container"> <a href="#" class="logo">Eco<span>Ride</span></a> <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#features">Features</a> <a href="#vehicles">Our Fleet</a> <a href="#pricing">Pricing</a> <a href="#testimonials">Testimonials</a> <a href="#faq">FAQ</a> <a href="#contact">Contact</a> </nav> <div class="icons"> <div id="menu-btn" class="fas fa-bars"></div> <a href="#book-now" class="btn book-btn">Book Now</a> </div> </div> </header> <!-- Hero Section --> <section class="home" id="home"> <div class="container"> <div class="content"> <h3 class="title">Affordable & Eco-Friendly <span>E-Rickshaw Rentals</span></h3> <p class="description">Zero emissions, low maintenance, and perfect for short-distance urban travel. Rent today and join the green revolution!</p> <div class="cta-buttons"> <a href="#book-now" class="btn">Book Your Ride</a> <a href="#vehicles" class="btn btn-outline">View Fleet</a> </div> <div class="stats"> <div class="stat-item"> <h4 class="count" data-count="250">0</h4> <span>Happy Customers</span> </div> <div class="stat-item"> <h4 class="count" data-count="50">0</h4> <span>E-Rickshaws</span> </div> <div class="stat-item"> <h4 class="count" data-count="10000">0</h4> <span>KM Driven</span> </div> </div> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="E-Rickshaw" class="home-img"> <div class="battery-indicator"> <div class="battery-level" style="width: 85%;"></div> <span>85% Charged</span> </div> </div> </div> </section> <!-- Scrolling Banner Section --> <section class="scrolling-banner"> <div class="scrolling-content"> <div class="scrolling-item"> <i class="fas fa-bolt"></i> <span>100% Electric</span> </div> <div class="scrolling-item"> <i class="fas fa-leaf"></i> <span>Zero Emissions</span> </div> <div class="scrolling-item"> <i class="fas fa-rupee-sign"></i> <span>Low Cost</span> </div> <div class="scrolling-item"> <i class="fas fa-clock"></i> <span>24/7 Support</span> </div> <div class="scrolling-item"> <i class="fas fa-battery-full"></i> <span>Long Range</span> </div> <div class="scrolling-item"> <i class="fas fa-bolt"></i> <span>100% Electric</span> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="About E-Rickshaw"> <div class="experience-badge"> <span>5+</span> <p>Years Experience</p> </div> </div> <div class="content"> <h3 class="subtitle">About Our Service</h3> <h2 class="title">Why Choose <span>EcoRide?</span></h2> <p>EcoRide is revolutionizing urban transportation with our fleet of modern, eco-friendly electric rickshaws. We provide affordable rental solutions for individuals and businesses looking for sustainable transport options.</p> <div class="features-grid"> <div class="feature-box"> <i class="fas fa-charging-station"></i> <h4>Easy Charging</h4> <p>Multiple charging stations across the city with fast charging capability.</p> </div> <div class="feature-box"> <i class="fas fa-shield-alt"></i> <h4>Fully Insured</h4> <p>All our vehicles come with comprehensive insurance coverage.</p> </div> <div class="feature-box"> <i class="fas fa-headset"></i> <h4>24/7 Support</h4> <p>Our customer service team is always available to assist you.</p> </div> <div class="feature-box"> <i class="fas fa-map-marker-alt"></i> <h4>Citywide Service</h4> <p>Available for rental across the entire metropolitan area.</p> </div> </div> <a href="#features" class="btn">Explore Features</a> </div> </div> </section> <!-- Features Section --> <section class="features" id="features"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Our Advantages</h3> <h2 class="title">Key <span>Features</span></h2> </div> <div class="features-container"> <div class="feature-tabs"> <button class="tab-btn active" data-tab="performance">Performance</button> <button class="tab-btn" data-tab="safety">Safety</button> <button class="tab-btn" data-tab="comfort">Comfort</button> <button class="tab-btn" data-tab="technology">Technology</button> </div> <div class="feature-content"> <div class="tab-panel active" id="performance"> <div class="feature-details"> <div class="detail-item"> <i class="fas fa-tachometer-alt"></i> <div> <h4>45 km/h Top Speed</h4> <p>Perfect for urban commuting with optimal speed for city roads.</p> </div> </div> <div class="detail-item"> <i class="fas fa-battery-three-quarters"></i> <div> <h4>80-100 km Range</h4> <p>Long battery life for a full day of operation on single charge.</p> </div> </div> <div class="detail-item"> <i class="fas fa-bolt"></i> <div> <h4>Fast Charging</h4> <p>4-5 hours for full charge with our fast charging stations.</p> </div> </div> <div class="detail-item"> <i class="fas fa-hill-rockslide"></i> <div> <h4>15° Gradeability</h4> <p>Handles city slopes and bridges with ease.</p> </div> </div> </div> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Performance Features"> </div> </div> <div class="tab-panel" id="safety"> <div class="feature-details"> <div class="detail-item"> <i class="fas fa-shield-alt"></i> <div> <h4>Dual Braking System</h4> <p>Hydraulic brakes with regenerative braking for maximum safety.</p> </div> </div> <div class="detail-item"> <i class="fas fa-lightbulb"></i> <div> <h4>LED Lighting</h4> <p>Bright headlights and tail lights for night-time visibility.</p> </div> </div> <div class="detail-item"> <i class="fas fa-car-crash"></i> <div> <h4>Impact Resistant</h4> <p>Reinforced steel frame for passenger protection.</p> </div> </div> <div class="detail-item"> <i class="fas fa-bell"></i> <div> <h4>Reverse Alarm</h4> <p>Audible alert system when reversing.</p> </div> </div> </div> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Safety Features"> </div> </div> <div class="tab-panel" id="comfort"> <div class="feature-details"> <div class="detail-item"> <i class="fas fa-chair"></i> <div> <h4>Ergonomic Seating</h4> <p>Comfortable seats with ample legroom for passengers.</p> </div> </div> <div class="detail-item"> <i class="fas fa-fan"></i> <div> <h4>Ventilation</h4> <p>Well-ventilated cabin with optional rain covers.</p> </div> </div> <div class="detail-item"> <i class="fas fa-sun"></i> <div> <h4>Weather Protection</h4> <p>Waterproof canopy for rainy days and sun shade.</p> </div> </div> <div class="detail-item"> <i class="fas fa-music"></i> <div> <h4>Entertainment</h4> <p>Bluetooth music system available in premium models.</p> </div> </div> </div> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Comfort Features"> </div> </div> <div class="tab-panel" id="technology"> <div class="feature-details"> <div class="detail-item"> <i class="fas fa-microchip"></i> <div> <h4>Smart Battery</h4> <p>Lithium-ion batteries with battery management system.</p> </div> </div> <div class="detail-item"> <i class="fas fa-mobile-alt"></i> <div> <h4>App Integration</h4> <p>Track your vehicle and battery status via mobile app.</p> </div> </div> <div class="detail-item"> <i class="fas fa-tachometer-alt"></i> <div> <h4>Digital Dashboard</h4> <p>Real-time display of speed, battery and diagnostics.</p> </div> </div> <div class="detail-item"> <i class="fas fa-map-marked-alt"></i> <div> <h4>GPS Tracking</h4> <p>Theft prevention and route optimization.</p> </div> </div> </div> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Technology Features"> </div> </div> </div> </div> </div> </section> <!-- Vehicles Section --> <section class="vehicles" id="vehicles"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Our Fleet</h3> <h2 class="title">Choose Your <span>E-Rickshaw</span></h2> </div> <div class="vehicle-slider"> <div class="vehicle-card"> <div class="vehicle-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Standard E-Rickshaw"> <div class="vehicle-badge">Most Popular</div> </div> <div class="vehicle-info"> <h3>Standard E-Rickshaw</h3> <div class="vehicle-specs"> <div class="spec-item"> <i class="fas fa-users"></i> <span>3 Passengers</span> </div> <div class="spec-item"> <i class="fas fa-battery-full"></i> <span>80 km Range</span> </div> <div class="spec-item"> <i class="fas fa-tachometer-alt"></i> <span>45 km/h</span> </div> </div> <div class="vehicle-price"> <span class="price">₹150 <small>/hour</small></span> <span class="discount">₹200 <small>/hour</small></span> </div> <a href="#book-now" class="btn">Book Now</a> </div> </div> <div class="vehicle-card"> <div class="vehicle-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Premium E-Rickshaw"> <div class="vehicle-badge">Luxury</div> </div> <div class="vehicle-info"> <h3>Premium E-Rickshaw</h3> <div class="vehicle-specs"> <div class="spec-item"> <i class="fas fa-users"></i> <span>4 Passengers</span> </div> <div class="spec-item"> <i class="fas fa-battery-full"></i> <span>100 km Range</span> </div> <div class="spec-item"> <i class="fas fa-tachometer-alt"></i> <span>50 km/h</span> </div> </div> <div class="vehicle-price"> <span class="price">₹200 <small>/hour</small></span> <span class="discount">₹250 <small>/hour</small></span> </div> <a href="#book-now" class="btn">Book Now</a> </div> </div> <div class="vehicle-card"> <div class="vehicle-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Cargo E-Rickshaw"> <div class="vehicle-badge">New</div> </div> <div class="vehicle-info"> <h3>Cargo E-Rickshaw</h3> <div class="vehicle-specs"> <div class="spec-item"> <i class="fas fa-box"></i> <span>300 kg Capacity</span> </div> <div class="spec-item"> <i class="fas fa-battery-full"></i> <span>70 km Range</span> </div> <div class="spec-item"> <i class="fas fa-tachometer-alt"></i> <span>40 km/h</span> </div> </div> <div class="vehicle-price"> <span class="price">₹180 <small>/hour</small></span> <span class="discount">₹220 <small>/hour</small></span> </div> <a href="#book-now" class="btn">Book Now</a> </div> </div> </div> <div class="slider-controls"> <button class="slider-prev"><i class="fas fa-chevron-left"></i></button> <button class="slider-next"><i class="fas fa-chevron-right"></i></button> </div> </div> </section> <!-- Pricing Section --> <section class="pricing" id="pricing"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Rental Plans</h3> <h2 class="title">Affordable <span>Pricing</span></h2> </div> <div class="pricing-plans"> <div class="pricing-card"> <div class="pricing-header"> <h3>Hourly</h3> <div class="price"> <span>₹150</span> <small>/hour</small> </div> <p>Perfect for short trips and quick errands</p> </div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Minimum 2 hours</li> <li><i class="fas fa-check"></i> 80 km range</li> <li><i class="fas fa-check"></i> Free helmet</li> <li><i class="fas fa-check"></i> Roadside assistance</li> </ul> <a href="#book-now" class="btn">Choose Plan</a> </div> <div class="pricing-card featured"> <div class="pricing-badge">Best Value</div> <div class="pricing-header"> <h3>Daily</h3> <div class="price"> <span>₹1000</span> <small>/day</small> </div> <p>Great for full day use and business</p> </div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> 8 hours usage</li> <li><i class="fas fa-check"></i> Unlimited km</li> <li><i class="fas fa-check"></i> Free helmet</li> <li><i class="fas fa-check"></i> Free charging</li> <li><i class="fas fa-check"></i> 24/7 support</li> </ul> <a href="#book-now" class="btn">Choose Plan</a> </div> <div class="pricing-card"> <div class="pricing-header"> <h3>Monthly</h3> <div class="price"> <span>₹15,000</span> <small>/month</small> </div> <p>Ideal for commercial and regular use</p> </div> <ul class="pricing-features"> <li><i class="fas fa-check"></i> Unlimited usage</li> <li><i class="fas fa-check"></i> Free maintenance</li> <li><i class="fas fa-check"></i> 2 free helmets</li> <li><i class="fas fa-check"></i> Priority support</li> <li><i class="fas fa-check"></i> Free insurance</li> </ul> <a href="#book-now" class="btn">Choose Plan</a> </div> </div> <div class="pricing-note"> <p>* All prices include GST. Security deposit required. Discounts available for long-term rentals.</p> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Customer Feedback</h3> <h2 class="title">What Our <span>Customers Say</span></h2> </div> <div class="testimonial-slider"> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <p class="review">"EcoRide has transformed my daily commute. The e-rickshaws are comfortable, affordable and eco-friendly. Customer service is excellent!"</p> <div class="customer"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer"> <div class="customer-info"> <h4>Rajesh Kumar</h4> <span>Daily Commuter</span> </div> </div> </div> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <p class="review">"As a small business owner, the monthly rental plan saves me money on logistics. The cargo model is perfect for local deliveries."</p> <div class="customer"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer"> <div class="customer-info"> <h4>Priya Sharma</h4> <span>Small Business Owner</span> </div> </div> </div> <div class="testimonial-card"> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <p class="review">"I've been using EcoRide for tourist rides in my area. The premium model is comfortable for visitors and the battery lasts all day."</p> <div class="customer"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Customer"> <div class="customer-info"> <h4>Arjun Singh</h4> <span>Tour Guide</span> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-prev"><i class="fas fa-chevron-left"></i></button> <button class="slider-next"><i class="fas fa-chevron-right"></i></button> </div> </div> </section> <!-- FAQ Section --> <section class="faq" id="faq"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Have Questions?</h3> <h2 class="title">Frequently Asked <span>Questions</span></h2> </div> <div class="faq-container"> <div class="faq-image"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="FAQ Image"> </div> <div class="faq-accordion"> <div class="accordion-item active"> <div class="accordion-header"> <h3>What documents do I need to rent an e-rickshaw?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>You need a valid driving license (LMV or motorcycle license is acceptable), ID proof (Aadhar card, PAN card, or passport), and address proof. For commercial use, additional documents may be required.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>How long does the battery last on a single charge?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Our standard e-rickshaws provide 80-100 km range on a full charge, depending on load and terrain. The premium models offer slightly better range of 100-120 km.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>What is your cancellation policy?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>You can cancel your booking up to 24 hours before the scheduled pickup time for a full refund. Cancellations within 24 hours may incur a small fee.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>Do you provide charging stations?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Yes, we have multiple charging stations across the city. You can also charge at any standard 220V outlet. We provide the charging cable with each rental.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <h3>What happens if the battery runs out during my rental?</h3> <i class="fas fa-chevron-down"></i> </div> <div class="accordion-content"> <p>Our 24/7 support team can assist with battery replacement or towing to the nearest charging station. We recommend monitoring the battery level and planning your route accordingly.</p> </div> </div> </div> </div> </div> </section> <!-- Book Now Section --> <section class="book-now" id="book-now"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Ready to Ride?</h3> <h2 class="title">Book Your <span>E-Rickshaw</span></h2> </div> <div class="booking-container"> <div class="booking-steps"> <div class="step active"> <span>1</span> <h4>Choose Vehicle</h4> </div> <div class="step"> <span>2</span> <h4>Select Plan</h4> </div> <div class="step"> <span>3</span> <h4>Personal Details</h4> </div> <div class="step"> <span>4</span> <h4>Confirmation</h4> </div> </div> <form class="booking-form"> <div class="form-step active" id="step-1"> <h3>Select Your E-Rickshaw Type</h3> <div class="vehicle-options"> <div class="vehicle-option"> <input type="radio" name="vehicle-type" id="standard" checked> <label for="standard"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Standard"> <h4>Standard</h4> <p>₹150/hour</p> </label> </div> <div class="vehicle-option"> <input type="radio" name="vehicle-type" id="premium"> <label for="premium"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Premium"> <h4>Premium</h4> <p>₹200/hour</p> </label> </div> <div class="vehicle-option"> <input type="radio" name="vehicle-type" id="cargo"> <label for="cargo"> <img src="https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D" alt="Cargo"> <h4>Cargo</h4> <p>₹180/hour</p> </label> </div> </div> <div class="form-navigation"> <button type="button" class="btn next-step">Next</button> </div> </div> <div class="form-step" id="step-2"> <h3>Select Rental Plan</h3> <div class="plan-options"> <div class="plan-option"> <input type="radio" name="rental-plan" id="hourly" checked> <label for="hourly"> <h4>Hourly</h4> <p>₹150/hour</p> <ul> <li>Minimum 2 hours</li> <li>80 km range</li> <li>Free helmet</li> </ul> </label> </div> <div class="plan-option"> <input type="radio" name="rental-plan" id="daily"> <label for="daily"> <h4>Daily</h4> <p>₹1000/day</p> <ul> <li>8 hours usage</li> <li>Unlimited km</li> <li>Free charging</li> </ul> </label> </div> <div class="plan-option"> <input type="radio" name="rental-plan" id="monthly"> <label for="monthly"> <h4>Monthly</h4> <p>₹15,000/month</p> <ul> <li>Unlimited usage</li> <li>Free maintenance</li> <li>Free insurance</li> </ul> </label> </div> </div> <div class="form-navigation"> <button type="button" class="btn prev-step">Previous</button> <button type="button" class="btn next-step">Next</button> </div> </div> <div class="form-step" id="step-3"> <h3>Enter Your Details</h3> <div class="input-group"> <input type="text" placeholder="Full Name" required> <input type="email" placeholder="Email Address" required> </div> <div class="input-group"> <input type="tel" placeholder="Phone Number" required> <input type="text" placeholder="Address" required> </div> <div class="input-group"> <input type="date" placeholder="Pickup Date" required> <input type="time" placeholder="Pickup Time" required> </div> <div class="input-group"> <textarea placeholder="Special Requests (Optional)"></textarea> </div> <div class="form-navigation"> <button type="button" class="btn prev-step">Previous</button> <button type="button" class="btn next-step">Next</button> </div> </div> <div class="form-step" id="step-4"> <div class="confirmation"> <i class="fas fa-check-circle"></i> <h3>Confirm Your Booking</h3> <div class="booking-summary"> <div class="summary-item"> <span>Vehicle:</span> <span class="vehicle-summary">Standard E-Rickshaw</span> </div> <div class="summary-item"> <span>Plan:</span> <span class="plan-summary">Hourly Rental</span> </div> <div class="summary-item"> <span>Duration:</span> <span class="duration-summary">2 hours</span> </div> <div class="summary-item"> <span>Pickup:</span> <span class="pickup-summary">Tomorrow, 10:00 AM</span> </div> <div class="summary-item total"> <span>Total:</span> <span class="price-summary">₹300</span> </div> </div> <div class="terms"> <input type="checkbox" id="agree-terms" required> <label for="agree-terms">I agree to the terms and conditions and privacy policy</label> </div> <div class="form-navigation"> <button type="button" class="btn prev-step">Previous</button> <button type="submit" class="btn">Confirm Booking</button> </div> </div> </div> </form> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="section-header"> <h3 class="subtitle">Get In Touch</h3> <h2 class="title">Contact <span>Us</span></h2> </div> <div class="contact-container"> <div class="contact-info"> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <h4>Address</h4> <p>123 Green Street, Eco City, India - 560001</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div> <h4>Phone</h4> <p>+91 9876543210</p> <p>080-12345678</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <h4>Email</h4> <p>info@ecoride.com</p> <p>support@ecoride.com</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div> <h4>Opening Hours</h4> <p>Monday-Sunday: 7:00 AM - 10:00 PM</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="contact-form"> <form> <div class="input-group"> <input type="text" placeholder="Your Name" required> <input type="email" placeholder="Your Email" required> </div> <div class="input-group"> <input type="tel" placeholder="Phone Number" required> <input type="text" placeholder="Subject" required> </div> <textarea placeholder="Your Message" required></textarea> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>EcoRide</h3> <p>Leading provider of eco-friendly electric rickshaw rentals. Committed to sustainable urban transportation solutions.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#vehicles">Our Fleet</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul> <li><a href="#">Hourly Rental</a></li> <li><a href="#">Daily Rental</a></li> <li><a href="#">Monthly Rental</a></li> <li><a href="#">Commercial Rental</a></li> <li><a href="#">Charging Stations</a></li> <li><a href="#">Maintenance</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for special offers and updates.</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 EcoRide. All Rights Reserved.</p> <div class="footer-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Refund Policy</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <a href="#home" class="back-to-top"><i class="fas fa-arrow-up"></i></a> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary: #4CAF50; --primary-dark: #388E3C; --secondary: #333; --light: #f9f9f9; --dark: #222; --white: #fff; --black: #000; --gray: #777; --light-gray: #eee; --transition: all 0.3s ease; --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; text-transform: capitalize; font-family: 'Poppins', sans-serif; transition: var(--transition); } html { font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 8rem; } body { background: var(--white); color: var(--dark); } section { padding: 5rem 9%; } .btn { display: inline-block; margin-top: 1rem; padding: 1.2rem 3rem; background: var(--primary); color: var(--white); font-size: 1.7rem; font-weight: 600; border-radius: 0.5rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1rem; box-shadow: var(--shadow); } .btn:hover { background: var(--primary-dark); transform: translateY(-0.3rem); box-shadow: var(--shadow-hover); color: var(--white); } .btn-outline { background: transparent; color: var(--primary); border: 0.2rem solid var(--primary); margin-left: 1.5rem; } .btn-outline:hover { background: var(--primary); color: var(--white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 5rem; } .section-header .subtitle { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; display: block; } .section-header .title { font-size: 4rem; color: var(--secondary); position: relative; display: inline-block; padding-bottom: 1.5rem; } .section-header .title span { color: var(--primary); } .section-header .title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 8rem; height: 0.3rem; background: var(--primary); } .heading { text-align: center; font-size: 4rem; color: var(--secondary); margin-bottom: 3rem; position: relative; } .heading span { color: var(--primary); } .heading::after { content: ''; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 8rem; height: 0.3rem; background: var(--primary); } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); box-shadow: var(--shadow); padding: 2rem 9%; display: flex; align-items: center; justify-content: space-between; } .header .logo { font-size: 2.5rem; font-weight: 700; color: var(--secondary); } .header .logo span { color: var(--primary); } .header .navbar a { font-size: 1.7rem; margin: 0 1rem; color: var(--secondary); position: relative; } .header .navbar a::after { content: ''; position: absolute; bottom: -0.5rem; left: 0; width: 0; height: 0.2rem; background: var(--primary); transition: var(--transition); } .header .navbar a:hover::after { width: 100%; } .header .navbar a:hover { color: var(--primary); } .header .icons div { font-size: 2.5rem; margin-left: 1.7rem; color: var(--secondary); cursor: pointer; } .header .icons .book-btn { padding: 1rem 2rem; font-size: 1.6rem; margin-left: 2rem; } #menu-btn { display: none; } /* Hero Section */ .home { padding-top: 12rem; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1634034379073-f689b460a3fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZS1yaWNrc2hhd3xlbnwwfHwwfHx8MA%3D%3D') no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .home .container { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; } .home .content { flex: 1 1 45rem; } .home .image { flex: 1 1 45rem; position: relative; } .home .image .home-img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow-hover); animation: float 3s linear infinite; } .home .image .battery-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 80%; background: rgba(255, 255, 255, 0.8); padding: 1rem 2rem; border-radius: 5rem; display: flex; align-items: center; box-shadow: var(--shadow); } .home .image .battery-level { height: 1.5rem; background: var(--primary); border-radius: 5rem; margin-right: 1rem; position: relative; overflow: hidden; } .home .image .battery-level::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: shine 2s infinite; } .home .image .battery-indicator span { font-size: 1.4rem; font-weight: 600; color: var(--secondary); } .home .title { font-size: 5.5rem; color: var(--secondary); line-height: 1.2; margin-bottom: 2rem; animation: fadeIn 1s ease backwards; } .home .title span { color: var(--primary); } .home .description { font-size: 1.8rem; color: var(--gray); line-height: 1.8; padding: 1rem 0; animation: fadeIn 1s ease backwards 0.2s; } .home .cta-buttons { animation: fadeIn 1s ease backwards 0.4s; } .home .stats { display: flex; gap: 3rem; margin-top: 3rem; animation: fadeIn 1s ease backwards 0.6s; } .home .stat-item { text-align: center; } .home .stat-item h4 { font-size: 3.5rem; color: var(--primary); margin-bottom: 0.5rem; } .home .stat-item span { font-size: 1.6rem; color: var(--gray); } /* Scrolling Banner */ .scrolling-banner { background: var(--primary); padding: 2rem 0; overflow: hidden; white-space: nowrap; position: relative; } .scrolling-banner::before, .scrolling-banner::after { position: absolute; top: 0; width: 10rem; height: 100%; content: ""; z-index: 2; } .scrolling-banner::before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--primary)); } .scrolling-banner::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--primary)); } .scrolling-content { display: inline-block; animation: scroll 20s linear infinite; } .scrolling-item { display: inline-block; margin: 0 4rem; color: var(--white); font-size: 2rem; font-weight: 600; } .scrolling-item i { margin-right: 1rem; font-size: 2.5rem; } /* About Section */ .about { background: var(--light); } .about .container { display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; } .about .image { flex: 1 1 40rem; position: relative; } .about .image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow); } .about .image .experience-badge { position: absolute; bottom: -2rem; right: -2rem; background: var(--primary); color: var(--white); padding: 2rem; border-radius: 50%; width: 12rem; height: 12rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-hover); animation: pulse 2s infinite; } .about .image .experience-badge span { font-size: 3rem; font-weight: 700; line-height: 1; } .about .image .experience-badge p { font-size: 1.4rem; margin-top: 0.5rem; } .about .content { flex: 1 1 40rem; } .about .content .subtitle { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; display: block; } .about .content .title { font-size: 3.5rem; color: var(--secondary); margin-bottom: 2rem; } .about .content .title span { color: var(--primary); } .about .content p { font-size: 1.6rem; color: var(--gray); line-height: 1.8; padding: 1rem 0; margin-bottom: 2rem; } .about .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 3rem; } .about .feature-box { background: var(--white); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow); text-align: center; } .about .feature-box:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-hover); } .about .feature-box i { font-size: 3rem; color: var(--primary); margin-bottom: 1.5rem; } .about .feature-box h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 1rem; } .about .feature-box p { font-size: 1.4rem; margin: 0; } /* Features Section */ .features { background: var(--white); } .features-container { background: var(--light); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); } .feature-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; } .feature-tabs .tab-btn { padding: 1rem 2.5rem; font-size: 1.6rem; font-weight: 600; background: var(--white); color: var(--secondary); border-radius: 0.5rem; cursor: pointer; box-shadow: var(--shadow); } .feature-tabs .tab-btn.active { background: var(--primary); color: var(--white); } .feature-content { position: relative; min-height: 40rem; } .tab-panel { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 3rem; } .tab-panel.active { position: relative; opacity: 1; visibility: visible; } .feature-details { flex: 1; } .detail-item { display: flex; gap: 2rem; margin-bottom: 3rem; align-items: flex-start; } .detail-item i { font-size: 2.5rem; color: var(--primary); margin-top: 0.5rem; } .detail-item h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 0.5rem; } .detail-item p { font-size: 1.4rem; color: var(--gray); line-height: 1.6; } .feature-image { flex: 1; } .feature-image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow-hover); animation: float 3s linear infinite; } /* Vehicles Section */ .vehicles { background: var(--light); } .vehicle-slider { display: flex; gap: 3rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 3rem; margin-bottom: 3rem; scrollbar-width: none; /* Firefox */ } .vehicle-slider::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .vehicle-card { min-width: 35rem; background: var(--white); border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow); scroll-snap-align: start; transform: translateY(0); transition: var(--transition); } .vehicle-card:hover { transform: translateY(-1rem); box-shadow: var(--shadow-hover); } .vehicle-image { height: 25rem; position: relative; overflow: hidden; } .vehicle-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .vehicle-card:hover .vehicle-image img { transform: scale(1.1); } .vehicle-badge { position: absolute; top: 1rem; right: 1rem; background: var(--primary); color: var(--white); padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-size: 1.4rem; font-weight: 600; } .vehicle-info { padding: 2rem; } .vehicle-info h3 { font-size: 2.2rem; color: var(--secondary); margin-bottom: 1.5rem; } .vehicle-specs { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .spec-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .spec-item i { font-size: 2rem; color: var(--primary); } .spec-item span { font-size: 1.4rem; color: var(--gray); } .vehicle-price { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .vehicle-price .price { font-size: 2.5rem; font-weight: 700; color: var(--primary); } .vehicle-price .price small { font-size: 1.4rem; font-weight: 400; } .vehicle-price .discount { font-size: 1.6rem; color: var(--gray); text-decoration: line-through; } .vehicle-price .discount small { font-size: 1.2rem; } .vehicle-info .btn { width: 100%; text-align: center; margin: 0; } .slider-controls { display: flex; justify-content: center; gap: 2rem; } .slider-controls button { width: 5rem; height: 5rem; background: var(--white); color: var(--primary); border-radius: 50%; font-size: 2rem; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } .slider-controls button:hover { background: var(--primary); color: var(--white); } /* Pricing Section */ .pricing { background: var(--white); } .pricing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 3rem; } .pricing-card { background: var(--light); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); position: relative; transform: translateY(0); transition: var(--transition); } .pricing-card:hover { transform: translateY(-1rem); box-shadow: var(--shadow-hover); } .pricing-card.featured { border: 0.2rem solid var(--primary); transform: scale(1.05); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-1rem); } .pricing-badge { position: absolute; top: -1rem; right: 2rem; background: var(--primary); color: var(--white); padding: 0.5rem 2rem; border-radius: 0.5rem; font-size: 1.4rem; font-weight: 600; } .pricing-header { text-align: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 0.1rem solid var(--light-gray); } .pricing-header h3 { font-size: 2.2rem; color: var(--secondary); margin-bottom: 1rem; } .pricing-header .price { margin-bottom: 1rem; } .pricing-header .price span { font-size: 4rem; font-weight: 700; color: var(--primary); } .pricing-header .price small { font-size: 1.6rem; color: var(--gray); } .pricing-header p { font-size: 1.4rem; color: var(--gray); } .pricing-features { margin-bottom: 3rem; } .pricing-features li { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 1.4rem; color: var(--secondary); } .pricing-features li i { color: var(--primary); font-size: 1.6rem; } .pricing-card .btn { width: 100%; text-align: center; } .pricing-note { text-align: center; margin-top: 3rem; font-size: 1.4rem; color: var(--gray); } /* Testimonials Section */ .testimonials { background: var(--light); } .testimonial-slider { display: flex; gap: 3rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 3rem; margin-bottom: 3rem; scrollbar-width: none; } .testimonial-slider::-webkit-scrollbar { display: none; } .testimonial-card { min-width: 35rem; background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); scroll-snap-align: start; transform: translateY(0); transition: var(--transition); } .testimonial-card:hover { transform: translateY(-1rem); box-shadow: var(--shadow-hover); } .testimonial-card .rating { margin-bottom: 2rem; } .testimonial-card .rating i { color: var(--primary); font-size: 1.8rem; } .testimonial-card .review { font-size: 1.6rem; color: var(--gray); line-height: 1.8; margin-bottom: 2rem; font-style: italic; } .testimonial-card .customer { display: flex; align-items: center; gap: 1.5rem; } .testimonial-card .customer img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 0.5rem solid var(--white); } .testimonial-card .customer-info h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 0.3rem; } .testimonial-card .customer-info span { font-size: 1.4rem; color: var(--gray); } /* FAQ Section */ .faq { background: var(--white); } .faq-container { display: flex; align-items: center; flex-wrap: wrap; gap: 3rem; } .faq-image { flex: 1 1 40rem; } .faq-image img { width: 100%; border-radius: 1rem; box-shadow: var(--shadow-hover); animation: float 3s linear infinite; } .faq-accordion { flex: 1 1 40rem; } .accordion-item { margin-bottom: 1.5rem; border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow); } .accordion-item.active .accordion-header { background: var(--primary); color: var(--white); } .accordion-item.active .accordion-header i { transform: rotate(180deg); } .accordion-header { padding: 2rem; background: var(--light); color: var(--secondary); font-size: 1.8rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion-header i { font-size: 1.6rem; transition: var(--transition); } .accordion-content { padding: 0 2rem; max-height: 0; overflow: hidden; transition: var(--transition); background: var(--white); } .accordion-item.active .accordion-content { padding: 2rem; max-height: 30rem; } .accordion-content p { font-size: 1.4rem; color: var(--gray); line-height: 1.8; } /* Book Now Section */ .book-now { background: var(--light); } .booking-container { background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); } .booking-steps { display: flex; justify-content: space-between; margin-bottom: 5rem; position: relative; } .booking-steps::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 0.2rem; background: var(--light-gray); z-index: 1; } .step { width: 5rem; height: 5rem; background: var(--light-gray); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; color: var(--gray); } .step.active { background: var(--primary); color: var(--white); } .step span { font-size: 1.8rem; font-weight: 700; } .step h4 { font-size: 1.2rem; margin-top: 0.5rem; display: none; } .booking-form { position: relative; min-height: 50rem; } .form-step { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; } .form-step.active { position: relative; opacity: 1; visibility: visible; } .form-step h3 { font-size: 2.2rem; color: var(--secondary); margin-bottom: 3rem; text-align: center; } .vehicle-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; margin-bottom: 3rem; } .vehicle-option { position: relative; } .vehicle-option input { position: absolute; opacity: 0; } .vehicle-option label { display: block; background: var(--light); border-radius: 1rem; padding: 2rem; text-align: center; cursor: pointer; border: 0.2rem solid transparent; transition: var(--transition); } .vehicle-option input:checked + label { border-color: var(--primary); background: rgba(76, 175, 80, 0.1); } .vehicle-option img { width: 100%; height: 15rem; object-fit: cover; border-radius: 0.5rem; margin-bottom: 1.5rem; } .vehicle-option h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 0.5rem; } .vehicle-option p { font-size: 1.6rem; color: var(--primary); font-weight: 600; } .plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 2rem; margin-bottom: 3rem; } .plan-option { position: relative; } .plan-option input { position: absolute; opacity: 0; } .plan-option label { display: block; background: var(--light); border-radius: 1rem; padding: 2rem; cursor: pointer; border: 0.2rem solid transparent; transition: var(--transition); height: 100%; } .plan-option input:checked + label { border-color: var(--primary); background: rgba(76, 175, 80, 0.1); } .plan-option h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 1rem; } .plan-option p { font-size: 2rem; color: var(--primary); font-weight: 700; margin-bottom: 1.5rem; } .plan-option ul { list-style: none; } .plan-option ul li { font-size: 1.4rem; color: var(--gray); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .plan-option ul li::before { content: '•'; color: var(--primary); font-size: 2rem; } .input-group { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; } .input-group input, .input-group select, .input-group textarea { flex: 1; padding: 1.5rem; font-size: 1.6rem; background: var(--light); border-radius: 0.5rem; width: 100%; } .input-group textarea { resize: none; height: 15rem; } .form-navigation { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; } .confirmation { text-align: center; } .confirmation i { font-size: 8rem; color: var(--primary); margin-bottom: 2rem; } .confirmation h3 { font-size: 2.5rem; color: var(--secondary); margin-bottom: 3rem; } .booking-summary { background: var(--light); border-radius: 1rem; padding: 3rem; margin-bottom: 3rem; } .summary-item { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 1.6rem; color: var(--gray); } .summary-item.total { padding-top: 1.5rem; border-top: 0.1rem solid var(--light-gray); font-weight: 700; color: var(--secondary); } .summary-item.total .price-summary { color: var(--primary); font-size: 2rem; } .terms { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; justify-content: center; } .terms input { width: 2rem; height: 2rem; } .terms label { font-size: 1.4rem; color: var(--gray); } /* Contact Section */ .contact { background: var(--light); } .contact-container { display: flex; flex-wrap: wrap; gap: 3rem; } .contact-info { flex: 1 1 40rem; background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); } .info-item { display: flex; gap: 2rem; margin-bottom: 3rem; align-items: flex-start; } .info-item i { width: 6rem; height: 6rem; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .info-item .details h4 { font-size: 2rem; color: var(--secondary); margin-bottom: 0.5rem; } .info-item .details p { font-size: 1.6rem; color: var(--gray); line-height: 1.6; } .social-links { display: flex; gap: 1.5rem; margin-top: 3rem; } .social-links a { width: 4rem; height: 4rem; background: var(--light); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .social-links a:hover { background: var(--primary); color: var(--white); } .contact-form { flex: 1 1 40rem; background: var(--white); border-radius: 1rem; padding: 3rem; box-shadow: var(--shadow); } .contact-form .input-group { margin-bottom: 2rem; } .contact-form textarea { height: 20rem; } .contact-form .btn { width: 100%; } /* Footer */ .footer { background: var(--secondary); color: var(--white); padding-top: 7rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 3rem; } .footer-col h3 { font-size: 2.2rem; margin-bottom: 2rem; position: relative; padding-bottom: 1rem; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 6rem; height: 0.2rem; background: var(--primary); } .footer-col p { font-size: 1.5rem; line-height: 1.8; margin-bottom: 2rem; color: #aaa; } .footer-col .social-links { display: flex; gap: 1.5rem; } .footer-col .social-links a { width: 4rem; height: 4rem; background: rgba(255, 255, 255, 0.1); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .footer-col .social-links a:hover { background: var(--primary); } .footer-col ul li { margin-bottom: 1.5rem; } .footer-col ul li a { font-size: 1.5rem; color: #aaa; display: block; } .footer-col ul li a:hover { color: var(--primary); padding-left: 0.5rem; } .footer-col .newsletter-form { display: flex; margin-top: 2rem; } .footer-col .newsletter-form input { width: 100%; padding: 1.5rem; font-size: 1.5rem; background: rgba(255, 255, 255, 0.1); color: var(--white); border-radius: 0.5rem 0 0 0.5rem; } .footer-col .newsletter-form button { padding: 0 2rem; background: var(--primary); color: var(--white); font-size: 1.8rem; border-radius: 0 0.5rem 0.5rem 0; cursor: pointer; } .footer-col .newsletter-form button:hover { background: var(--primary-dark); } .footer-bottom { text-align: center; padding: 2rem 0; margin-top: 5rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.1); } .footer-bottom p { font-size: 1.5rem; color: #aaa; } .footer-bottom .footer-links { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; } .footer-bottom .footer-links a { font-size: 1.4rem; color: #aaa; } .footer-bottom .footer-links a:hover { color: var(--primary); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 3rem; right: 3rem; width: 5rem; height: 5rem; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; z-index: 999; opacity: 0; visibility: hidden; box-shadow: var(--shadow); } .back-to-top.active { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--primary-dark); transform: translateY(-0.5rem); } /* Animations */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2rem); } } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 1.5rem rgba(76, 175, 80, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Media Queries */ @media (max-width: 991px) { html { font-size: 55%; scroll-padding-top: 7rem; } section { padding: 3rem 2rem; } .header { padding: 2rem; } .home .title { font-size: 4.5rem; } .about .content .title { font-size: 3rem; } } @media (max-width: 768px) { #menu-btn { display: inline-block; } .header .navbar { position: absolute; top: 99%; left: 0; right: 0; background: var(--white); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } .header .navbar.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .header .navbar a { display: block; margin: 2rem; font-size: 2rem; } .home .container { flex-direction: column-reverse; } .home .content { text-align: center; } .home .stats { justify-content: center; } .home .cta-buttons { justify-content: center; } .section-header .title { font-size: 3.5rem; } .about .container { flex-direction: column; } .feature-content { flex-direction: column; } .feature-details { margin-bottom: 3rem; } .contact-container { flex-direction: column; } .booking-steps { flex-direction: column; align-items: center; gap: 2rem; } .booking-steps::before { width: 0.2rem; height: 100%; left: 50%; transform: translateX(-50%); } .step h4 { display: block; } } @media (max-width: 450px) { html { font-size: 50%; } .home .title { font-size: 3.5rem; } .input-group { flex-direction: column; } .footer-content { grid-template-columns: 1fr; } .footer-bottom .footer-links { flex-direction: column; gap: 1rem; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const menuBtn = document.getElementById('menu-btn'); const navbar = document.querySelector('.header .navbar'); menuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); menuBtn.classList.toggle('fa-times'); }); window.addEventListener('scroll', function() { navbar.classList.remove('active'); menuBtn.classList.remove('fa-times'); }); // Back to Top Button const backToTop = document.querySelector('.back-to-top'); window.addEventListener('scroll', function() { if (window.scrollY > 300) { backToTop.classList.add('active'); } else { backToTop.classList.remove('active'); } }); // Feature Tabs const tabBtns = document.querySelectorAll('.feature-tabs .tab-btn'); const tabPanels = document.querySelectorAll('.tab-panel'); tabBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons and panels tabBtns.forEach(btn => btn.classList.remove('active')); tabPanels.forEach(panel => panel.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Show corresponding panel const tabId = this.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); }); }); // Vehicle Slider const vehicleSlider = document.querySelector('.vehicle-slider'); const vehiclePrev = document.querySelector('.vehicles .slider-prev'); const vehicleNext = document.querySelector('.vehicles .slider-next'); let currentSlide = 0; function updateVehicleSlider() { const slideWidth = document.querySelector('.vehicle-card').offsetWidth; vehicleSlider.scrollTo({ left: currentSlide * (slideWidth + 30), // 30 is gap behavior: 'smooth' }); } vehiclePrev.addEventListener('click', function() { if (currentSlide > 0) { currentSlide--; updateVehicleSlider(); } }); vehicleNext.addEventListener('click', function() { const totalSlides = document.querySelectorAll('.vehicle-card').length; if (currentSlide < totalSlides - 1) { currentSlide++; updateVehicleSlider(); } }); // Testimonial Slider const testimonialSlider = document.querySelector('.testimonial-slider'); const testimonialPrev = document.querySelector('.testimonials .slider-prev'); const testimonialNext = document.querySelector('.testimonials .slider-next'); let currentTestimonial = 0; function updateTestimonialSlider() { const slideWidth = document.querySelector('.testimonial-card').offsetWidth; testimonialSlider.scrollTo({ left: currentTestimonial * (slideWidth + 30), // 30 is gap behavior: 'smooth' }); } testimonialPrev.addEventListener('click', function() { if (currentTestimonial > 0) { currentTestimonial--; updateTestimonialSlider(); } }); testimonialNext.addEventListener('click', function() { const totalTestimonials = document.querySelectorAll('.testimonial-card').length; if (currentTestimonial < totalTestimonials - 1) { currentTestimonial++; updateTestimonialSlider(); } }); // FAQ Accordion const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('click', function() { // Close all other items accordionItems.forEach(otherItem => { if (otherItem !== item) { otherItem.classList.remove('active'); } }); // Toggle current item item.classList.toggle('active'); }); }); // Booking Form Steps const formSteps = document.querySelectorAll('.form-step'); const nextButtons = document.querySelectorAll('.next-step'); const prevButtons = document.querySelectorAll('.prev-step'); const bookingSteps = document.querySelectorAll('.booking-steps .step'); let currentStep = 0; function updateFormSteps() { formSteps.forEach((step, index) => { if (index === currentStep) { step.classList.add('active'); bookingSteps[index].classList.add('active'); } else { step.classList.remove('active'); bookingSteps[index].classList.remove('active'); } }); // Update summary in last step if (currentStep === 3) { updateBookingSummary(); } } nextButtons.forEach(button => { button.addEventListener('click', function() { if (currentStep < 3) { currentStep++; updateFormSteps(); } }); }); prevButtons.forEach(button => { button.addEventListener('click', function() { if (currentStep > 0) { currentStep--; updateFormSteps(); } }); }); function updateBookingSummary() { // Get selected vehicle const selectedVehicle = document.querySelector('input[name="vehicle-type"]:checked + label h4').textContent; document.querySelector('.vehicle-summary').textContent = selectedVehicle; // Get selected plan const selectedPlan = document.querySelector('input[name="rental-plan"]:checked + label h4').textContent; document.querySelector('.plan-summary').textContent = selectedPlan; // Calculate duration based on plan let duration = ''; const planId = document.querySelector('input[name="rental-plan"]:checked').id; if (planId === 'hourly') { duration = '2 hours (minimum)'; } else if (planId === 'daily') { duration = '1 day (8 hours)'; } else if (planId === 'monthly') { duration = '1 month (unlimited)'; } document.querySelector('.duration-summary').textContent = duration; // Get pickup date and time const pickupDate = document.querySelector('input[type="date"]').value; const pickupTime = document.querySelector('input[type="time"]').value; if (pickupDate && pickupTime) { const dateObj = new Date(pickupDate); const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const formattedDate = dateObj.toLocaleDateString('en-US', options); document.querySelector('.pickup-summary').textContent = `${formattedDate}, ${pickupTime}`; } // Calculate price let price = 0; if (planId === 'hourly') { price = 150 * 2; // Minimum 2 hours } else if (planId === 'daily') { price = 1000; } else if (planId === 'monthly') { price = 15000; } document.querySelector('.price-summary').textContent = `₹${price}`; } // Counter Animation const counters = document.querySelectorAll('.count'); const speed = 200; function animateCounters() { counters.forEach(counter => { const target = +counter.getAttribute('data-count'); const count = +counter.textContent; const increment = target / speed; if (count < target) { counter.textContent = Math.ceil(count + increment); setTimeout(animateCounters, 1); } else { counter.textContent = target; } }); } // Intersection Observer for counter animation const aboutSection = document.querySelector('.about'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); observer.observe(aboutSection); // Form submission const bookingForm = document.querySelector('.booking-form'); bookingForm.addEventListener('submit', function(e) { e.preventDefault(); // In a real app, you would send this data to a server alert('Your booking has been confirmed! We will contact you shortly.'); this.reset(); currentStep = 0; updateFormSteps(); }); // Contact form submission const contactForm = document.querySelector('.contact-form form'); contactForm.addEventListener('submit', function(e) { e.preventDefault(); // In a real app, you would send this data to a server alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); // Newsletter form const newsletterForm = document.querySelector('.newsletter-form'); newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const email = this.querySelector('input').value; // In a real app, you would send this to a server alert(`Thank you for subscribing with ${email}!`); this.reset(); }); // Initialize animations on scroll const animateElements = document.querySelectorAll('.home .content, .about, .features, .vehicles, .pricing, .testimonials, .faq, .book-now, .contact'); function checkScroll() { animateElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } // Set initial styles animateElements.forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(30px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); // Check on scroll window.addEventListener('scroll', checkScroll); // Check on load checkScroll(); });
Output Preview
Desktop
Mobile
Fullscreen
