Bike 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>CycleRide - Premium Bike Rental Service</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="overflow-x-hidden bg-gray-50 font-inter"> <!-- Promotion Banner --> <div class="promotion-banner p-3 text-center"> <div class="container mx-auto"> <span class="font-semibold text-amber-800">?♂️ Spring Special! </span> <span class="text-amber-700">Get 20% off weekend rentals - Book now!</span> <button class="ml-4 text-amber-800 hover:text-amber-900 font-semibold">Claim Offer →</button> </div> </div> <!-- Navigation --> <nav class="fixed w-full z-50 py-4 px-6 glass-cycling"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center"> <div class="text-4xl font-poppins font-bold text-gray-900 tracking-wider"> ? CYCLERIDE </div> <!-- <div class="ml-3 text-sm text-gray-600">Premium Rentals</div> --> </div> <div class="hidden lg:flex items-center space-x-10"> <a href="#home" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Home <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#bikes" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Bikes <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#locations" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Locations <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#routes" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Routes <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#pricing" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Pricing <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> <a href="#contact" class="text-gray-700 hover:text-green-500 transition-all duration-300 font-medium relative group"> Contact <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-green-500 transition-all duration-300 group-hover:w-full"></span> </a> </div> <div class="flex items-center space-x-6"> <div class="relative"> <i class="fas fa-map-marker-alt text-gray-700 hover:text-green-500 cursor-pointer text-xl transition-colors duration-300"></i> <span class="absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center cycling-badge">12</span> </div> <button class="btn-cycling text-white px-8 py-3 rounded-full font-semibold"> Book Now </button> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="min-h-screen relative overflow-hidden"> <div class="absolute inset-0 adventure-gradient opacity-90"></div> <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-40"></div> <div class="relative z-10 container mx-auto px-6 py-32 min-h-screen flex items-center"> <div class="grid lg:grid-cols-2 gap-16 items-center w-full"> <div class="slide-in-left text-white"> <h1 class="text-7xl md:text-8xl font-poppins font-bold mb-8 leading-tight"> Ride <span class="block freedom-gradient bg-clip-text text-transparent">Your Adventure</span> </h1> <p class="text-2xl mb-12 leading-relaxed text-gray-100 font-light"> Discover the city on two wheels. Premium bike rentals with flexible hours, multiple locations, and unbeatable prices. </p> <div class="flex flex-col sm:flex-row gap-6 mb-16"> <button class="btn-cycling text-white px-12 py-4 rounded-full font-bold text-lg"> ?♂️ Rent Now </button> <button class="btn-outline-cycling border-white text-white hover:text-white px-12 py-4 rounded-full font-bold text-lg"> ?️ View Routes </button> </div> <div class="grid grid-cols-3 gap-8"> <div class="text-center"> <div class="text-4xl font-bold freedom-gradient bg-clip-text text-transparent mb-2">500+</div> <div class="text-gray-200 text-sm">Bikes Available</div> </div> <div class="text-center"> <div class="text-4xl font-bold freedom-gradient bg-clip-text text-transparent mb-2">25+</div> <div class="text-gray-200 text-sm">Rental Stations</div> </div> <div class="text-center"> <div class="text-4xl font-bold freedom-gradient bg-clip-text text-transparent mb-2">24/7</div> <div class="text-gray-200 text-sm">Service</div> </div> </div> </div> <div class="slide-in-right"> <div class="relative"> <div class="bike-bounce"> <img src="https://images.pexels.com/photos/2128805/pexels-photo-2128805.jpeg" alt="Premium Bike" class="rounded-3xl shadow-adventure w-full"> </div> <div class="absolute -bottom-10 -left-10 glass-dark text-white p-8 rounded-2xl shadow-adventure"> <div class="flex items-center space-x-4"> <div class="w-16 h-16 freedom-gradient rounded-full flex items-center justify-center wheel-animation"> <i class="fas fa-bicycle text-white text-2xl"></i> </div> <div> <div class="font-bold text-xl">Premium Fleet</div> <div class="text-sm text-gray-300">Latest Models</div> </div> </div> </div> <div class="absolute -top-10 -right-10 energy-gradient text-black p-8 rounded-2xl shadow-freedom route-glow"> <div class="text-center"> <div class="text-3xl font-bold">$5</div> <div class="text-lg">Per Hour</div> <div class="text-sm">Starting</div> </div> </div> </div> </div> </div> </div> </section> <!-- Bikes Section --> <section id="bikes" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-6xl font-poppins font-bold text-gray-900 mb-6">Our Bike Fleet</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Choose from our diverse collection of premium bikes, each maintained to the highest standards for your safety and comfort. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10"> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.pexels.com/photos/2128805/pexels-photo-2128805.jpeg" alt="City Cruiser" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 adventure-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> POPULAR </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">City Cruiser</h3> <p class="text-gray-600 mb-6 leading-relaxed">Perfect for leisurely rides around the city. Comfortable seating, smooth gears, and built-in basket for your belongings.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$5/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(245)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">15 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">City rides</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ?♂️ Rent Now </button> </div> </div> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Mountain Bike" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 speed-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> ADVENTURE </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">Mountain Explorer</h3> <p class="text-gray-600 mb-6 leading-relaxed">Built for off-road adventures. Rugged frame, superior suspension, and all-terrain tires for challenging trails.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$8/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(189)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">8 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">Off-road</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ?️ Rent Now </button> </div> </div> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1502744688674-c619d1586c9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Electric Bike" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 energy-gradient text-black px-4 py-2 rounded-full text-sm font-bold"> ELECTRIC </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">E-Bike Pro</h3> <p class="text-gray-600 mb-6 leading-relaxed">Electric-powered assistance for effortless rides. Long battery life, multiple power modes, and smart display.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$12/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(312)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">12 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">50km</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ⚡ Rent Now </button> </div> </div> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.pexels.com/photos/30387183/pexels-photo-30387183.jpeg" alt="Road Bike" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 freedom-gradient text-white px-4 py-2 rounded-full text-sm font-bold"> SPEED </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">Road Racer</h3> <p class="text-gray-600 mb-6 leading-relaxed">Lightweight carbon frame designed for speed and performance. Perfect for fitness enthusiasts and long-distance rides.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$10/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(156)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">6 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">Long distance</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ?♂️ Rent Now </button> </div> </div> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1571068316344-75bc76f77890?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Family Bike" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 bg-pink-500 text-white px-4 py-2 rounded-full text-sm font-bold"> FAMILY </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">Family Tandem</h3> <p class="text-gray-600 mb-6 leading-relaxed">Double the fun with tandem bikes. Perfect for couples or parent-child adventures. Safety features and comfortable seating.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$15/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(203)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">4 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">Family fun</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ???? Rent Now </button> </div> </div> <div class="bike-card bg-white rounded-3xl shadow-adventure overflow-hidden scale-in"> <div class="relative"> <img src="https://images.unsplash.com/photo-1701876413956-6d7f5ee2b969?q=80&w=773&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Kids Bike" class="bike-image w-full h-64 object-cover"> <div class="absolute top-4 left-4 bg-purple-500 text-white px-4 py-2 rounded-full text-sm font-bold"> KIDS </div> <div class="absolute top-4 right-4 status-available w-4 h-4 rounded-full"></div> </div> <div class="p-8"> <h3 class="text-2xl font-poppins font-bold text-gray-900 mb-4">Kids Explorer</h3> <p class="text-gray-600 mb-6 leading-relaxed">Safe and fun bikes for children. Adjustable seats, training wheels available, and bright safety colors.</p> <div class="flex justify-between items-center mb-6"> <div class="text-3xl font-bold text-green-500">$3/hr</div> <div class="flex items-center space-x-1"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> <span class="text-gray-500 text-sm">(178)</span> </div> </div> <div class="flex justify-between items-center mb-6"> <div class="text-sm text-gray-600">Available: <span class="font-bold text-green-500">20 bikes</span></div> <div class="text-sm text-gray-600">Range: <span class="font-bold">Ages 5-12</span></div> </div> <button class="w-full btn-cycling text-white py-3 rounded-full font-semibold"> ? Rent Now </button> </div> </div> </div> </div> </section> <!-- Locations Section --> <section id="locations" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-6xl font-poppins font-bold text-gray-900 mb-6">Rental Locations</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Find us at convenient locations throughout the city. Pick up and drop off at any of our stations. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="station-profile bg-white rounded-3xl shadow-adventure overflow-hidden scale-in text-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Downtown Station" class="station-image w-full h-48 object-cover"> <div class="absolute bottom-4 right-4 adventure-gradient text-white p-3 rounded-full map-marker"> <i class="fas fa-map-marker-alt text-xl"></i> </div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-2">Downtown Hub</h3> <p class="text-green-500 font-semibold mb-4">Main Street & 5th Ave</p> <p class="text-gray-600 text-sm mb-4">Our flagship location with the largest fleet and 24/7 service.</p> <div class="flex justify-center space-x-1 mb-4"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> </div> <div class="text-sm text-gray-600 mb-4">Available: <span class="font-bold text-green-500">45 bikes</span></div> <button class="btn-outline-cycling px-6 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="station-profile bg-white rounded-3xl shadow-adventure overflow-hidden scale-in text-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Park Station" class="station-image w-full h-48 object-cover"> <div class="absolute bottom-4 right-4 freedom-gradient text-white p-3 rounded-full map-marker"> <i class="fas fa-tree text-xl"></i> </div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-2">Central Park</h3> <p class="text-green-500 font-semibold mb-4">Park Entrance North</p> <p class="text-gray-600 text-sm mb-4">Perfect starting point for scenic park rides and nature trails.</p> <div class="flex justify-center space-x-1 mb-4"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> </div> <div class="text-sm text-gray-600 mb-4">Available: <span class="font-bold text-green-500">32 bikes</span></div> <button class="btn-outline-cycling px-6 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="station-profile bg-white rounded-3xl shadow-adventure overflow-hidden scale-in text-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="University Station" class="station-image w-full h-48 object-cover"> <div class="absolute bottom-4 right-4 energy-gradient text-black p-3 rounded-full map-marker"> <i class="fas fa-graduation-cap text-xl"></i> </div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-2">University Campus</h3> <p class="text-green-500 font-semibold mb-4">Student Union Building</p> <p class="text-gray-600 text-sm mb-4">Student-friendly location with special rates and extended hours.</p> <div class="flex justify-center space-x-1 mb-4"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> </div> <div class="text-sm text-gray-600 mb-4">Available: <span class="font-bold text-green-500">28 bikes</span></div> <button class="btn-outline-cycling px-6 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> <div class="station-profile bg-white rounded-3xl shadow-adventure overflow-hidden scale-in text-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Beach Station" class="station-image w-full h-48 object-cover"> <div class="absolute bottom-4 right-4 speed-gradient text-white p-3 rounded-full map-marker"> <i class="fas fa-umbrella-beach text-xl"></i> </div> </div> <div class="p-6"> <h3 class="text-xl font-poppins font-bold text-gray-900 mb-2">Beachfront</h3> <p class="text-green-500 font-semibold mb-4">Ocean Drive Pier</p> <p class="text-gray-600 text-sm mb-4">Coastal rides with beach cruisers and scenic ocean views.</p> <div class="flex justify-center space-x-1 mb-4"> <span class="text-yellow-400">⭐⭐⭐⭐⭐</span> </div> <div class="text-sm text-gray-600 mb-4">Available: <span class="font-bold text-green-500">38 bikes</span></div> <button class="btn-outline-cycling px-6 py-2 rounded-full text-sm font-semibold"> View Details </button> </div> </div> </div> </div> </section> <!-- Features Section --> <section class="py-20 adventure-gradient text-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-6xl font-poppins font-bold mb-6">? Why Choose CycleRide</h2> <p class="text-xl leading-relaxed text-gray-100 max-w-3xl mx-auto"> Experience the best bike rental service with premium features, flexible options, and unmatched customer support. </p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="glass-dark p-8 rounded-3xl scale-in feature-card"> <div class="text-center mb-6"> <div class="w-20 h-20 freedom-gradient rounded-full flex items-center justify-center mx-auto mb-4 wheel-animation"> <i class="fas fa-clock text-3xl text-white"></i> </div> <h3 class="text-2xl font-bold mb-4">24/7 Availability</h3> </div> <p class="text-lg mb-6 leading-relaxed text-center"> Rent bikes anytime, anywhere with our automated stations and mobile app. No waiting, no hassle. </p> <div class="text-center"> <button class="btn-outline-cycling border-white text-white hover:text-green-600 px-8 py-3 rounded-full font-semibold"> Learn More </button> </div> </div> <div class="glass-dark p-8 rounded-3xl scale-in feature-card"> <div class="text-center mb-6"> <div class="w-20 h-20 energy-gradient rounded-full flex items-center justify-center mx-auto mb-4 pedal-animation"> <i class="fas fa-shield-alt text-3xl text-black"></i> </div> <h3 class="text-2xl font-bold mb-4">Safety First</h3> </div> <p class="text-lg mb-6 leading-relaxed text-center"> All bikes undergo regular maintenance and safety checks. Helmets and safety gear included with every rental. </p> <div class="text-center"> <button class="btn-outline-cycling border-white text-white hover:text-green-600 px-8 py-3 rounded-full font-semibold"> Safety Info </button> </div> </div> <div class="glass-dark p-8 rounded-3xl scale-in feature-card"> <div class="text-center mb-6"> <div class="w-20 h-20 speed-gradient rounded-full flex items-center justify-center mx-auto mb-4 bike-bounce"> <i class="fas fa-mobile-alt text-3xl text-white"></i> </div> <h3 class="text-2xl font-bold mb-4">Smart App</h3> </div> <p class="text-lg mb-6 leading-relaxed text-center"> Find bikes, unlock rentals, track routes, and manage payments all through our intuitive mobile application. </p> <div class="text-center"> <button class="btn-outline-cycling border-white text-white hover:text-green-600 px-8 py-3 rounded-full font-semibold"> Download App </button> </div> </div> </div> </div> </section> <!-- Routes Section --> <section id="routes" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-6xl font-poppins font-bold text-gray-900 mb-6">Popular Routes</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Discover the best cycling routes in the city, from scenic park trails to urban adventures. </p> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 adventure-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-route text-white"></i> </div> <div> <div class="font-bold text-gray-900">Riverside Trail</div> <div class="text-sm text-gray-600">8.5 km • Easy</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">Scenic River Path</h3> <p class="text-gray-600 mb-4">Beautiful waterfront route with bridges, parks, and wildlife viewing spots. Perfect for families.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 45 min</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.8/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 freedom-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-city text-white"></i> </div> <div> <div class="font-bold text-gray-900">Urban Explorer</div> <div class="text-sm text-gray-600">12.3 km • Moderate</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">City Highlights Tour</h3> <p class="text-gray-600 mb-4">Discover historic landmarks, cultural districts, and hidden gems throughout the downtown area.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 1.5 hours</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.9/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 energy-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-mountain text-black"></i> </div> <div> <div class="font-bold text-gray-900">Hill Challenge</div> <div class="text-sm text-gray-600">15.7 km • Hard</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">Mountain Vista Trail</h3> <p class="text-gray-600 mb-4">Challenging uphill route with breathtaking panoramic views of the city and surrounding landscape.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 2 hours</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.7/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 speed-gradient rounded-full flex items-center justify-center mr-4"> <i class="fas fa-umbrella-beach text-white"></i> </div> <div> <div class="font-bold text-gray-900">Coastal Cruise</div> <div class="text-sm text-gray-600">10.2 km • Easy</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">Beachfront Boardwalk</h3> <p class="text-gray-600 mb-4">Relaxing ride along the coast with ocean views, beach access, and seaside cafes.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 1 hour</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.9/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-heart text-white"></i> </div> <div> <div class="font-bold text-gray-900">Romantic Loop</div> <div class="text-sm text-gray-600">6.8 km • Easy</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">Sunset Gardens</h3> <p class="text-gray-600 mb-4">Perfect for couples with beautiful gardens, quiet paths, and romantic sunset viewing spots.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 40 min</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.8/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> <div class="feature-card bg-white rounded-2xl shadow-adventure p-6 stagger-fade"> <div class="flex items-center mb-4"> <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-child text-white"></i> </div> <div> <div class="font-bold text-gray-900">Family Fun</div> <div class="text-sm text-gray-600">4.5 km • Easy</div> </div> </div> <h3 class="text-xl font-bold text-gray-900 mb-3">Park Adventure</h3> <p class="text-gray-600 mb-4">Kid-friendly route through parks with playgrounds, picnic areas, and safe cycling paths.</p> <div class="flex justify-between items-center mb-4"> <span class="text-sm text-gray-600">Duration: 30 min</span> <span class="text-sm text-green-500 font-semibold">⭐ 4.9/5</span> </div> <button class="text-green-500 font-semibold hover:text-green-600 transition-colors"> View Route → </button> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <div class="text-center mb-16 fade-in-up"> <h2 class="text-6xl font-poppins font-bold text-gray-900 mb-6">Simple Pricing</h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"> Transparent pricing with no hidden fees. Choose the plan that works best for your cycling needs. </p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white rounded-3xl shadow-adventure p-8 scale-in"> <div class="text-center mb-8"> <h3 class="text-2xl font-bold text-gray-900 mb-4">Hourly</h3> <div class="text-5xl font-bold text-green-500 mb-2">$5</div> <div class="text-gray-600">per hour</div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Any bike type available</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Helmet included</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Basic insurance coverage</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Mobile app access</span> </li> </ul> <button class="w-full btn-outline-cycling px-8 py-3 rounded-full font-semibold"> Rent Hourly </button> </div> <div class="bg-white rounded-3xl shadow-adventure p-8 scale-in relative"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 adventure-gradient text-white px-6 py-2 rounded-full text-sm font-bold"> MOST POPULAR </div> <div class="text-center mb-8"> <h3 class="text-2xl font-bold text-gray-900 mb-4">Daily</h3> <div class="text-5xl font-bold text-green-500 mb-2">$25</div> <div class="text-gray-600">per day</div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Premium bike selection</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Helmet & safety gear</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Full insurance coverage</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Route recommendations</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>24/7 support</span> </li> </ul> <button class="w-full btn-cycling text-white px-8 py-3 rounded-full font-semibold"> Rent Daily </button> </div> <div class="bg-white rounded-3xl shadow-adventure p-8 scale-in"> <div class="text-center mb-8"> <h3 class="text-2xl font-bold text-gray-900 mb-4">Weekly</h3> <div class="text-5xl font-bold text-green-500 mb-2">$120</div> <div class="text-gray-600">per week</div> </div> <ul class="space-y-4 mb-8"> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Any bike, anytime</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Complete safety package</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Premium insurance</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Personal cycling coach</span> </li> <li class="flex items-center"> <i class="fas fa-check text-green-500 mr-3"></i> <span>Priority booking</span> </li> </ul> <button class="w-full btn-outline-cycling px-8 py-3 rounded-full font-semibold"> Rent Weekly </button> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-white"> <div class="container mx-auto px-6"> <div class="grid lg:grid-cols-2 gap-16"> <div class="slide-in-left"> <h2 class="text-6xl font-poppins font-bold text-gray-900 mb-8">Get in Touch</h2> <p class="text-xl text-gray-600 mb-10 leading-relaxed"> Have questions about our bikes or need assistance? We're here to help you plan your perfect cycling adventure. </p> <div class="space-y-8"> <div class="flex items-center"> <div class="w-16 h-16 adventure-gradient rounded-full flex items-center justify-center mr-6 route-glow"> <i class="fas fa-map-marker-alt text-2xl text-white"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Main Office</h4> <p class="text-gray-600">456 Cycling Boulevard, Bike District<br>Adventure City, State 12345</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 freedom-gradient rounded-full flex items-center justify-center mr-6 bike-bounce"> <i class="fas fa-phone text-2xl text-white"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">24/7 Support</h4> <p class="text-gray-600">(555) BIKE-NOW<br>Available anytime, anywhere</p> </div> </div> <div class="flex items-center"> <div class="w-16 h-16 energy-gradient rounded-full flex items-center justify-center mr-6 pedal-animation"> <i class="fas fa-envelope text-2xl text-black"></i> </div> <div> <h4 class="text-xl font-bold text-gray-900 mb-2">Email</h4> <p class="text-gray-600">hello@cycleride.com<br>support@cycleride.com</p> </div> </div> </div> </div> <div class="glass-cycling p-10 rounded-3xl shadow-adventure slide-in-right"> <form class="space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-3">Full Name</label> <input type="text" class="w-full px-6 py-4 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Phone Number</label> <input type="tel" class="w-full px-6 py-4 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Email Address</label> <input type="email" class="w-full px-6 py-4 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Rental Interest</label> <select class="w-full px-6 py-4 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"> <option>City Cruiser</option> <option>Mountain Explorer</option> <option>E-Bike Pro</option> <option>Road Racer</option> <option>Family Tandem</option> <option>Kids Explorer</option> <option>General Inquiry</option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Message</label> <textarea rows="5" class="w-full px-6 py-4 border border-gray-300 rounded-xl focus:outline-none focus:border-green-500 transition-all duration-300"></textarea> </div> <button type="submit" class="w-full btn-cycling text-white py-4 rounded-xl font-bold text-lg"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="adventure-gradient text-white py-16"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-4 gap-12 mb-12"> <div> <div class="text-4xl font-poppins font-bold mb-6 tracking-wider"> ? CYCLERIDE </div> <p class="text-gray-100 mb-6 leading-relaxed"> Your premium bike rental service for urban adventures, scenic routes, and unforgettable cycling experiences. </p> <div class="flex space-x-4"> <i class="fab fa-facebook text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-twitter text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-instagram text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> <i class="fab fa-youtube text-2xl hover:text-yellow-300 cursor-pointer transition-colors duration-300"></i> </div> </div> <div> <h3 class="text-xl font-bold mb-6">Bike Types</h3> <ul class="space-y-3 text-gray-100"> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">City Cruisers</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Mountain Bikes</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Electric Bikes</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Road Bikes</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Family Bikes</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Services</h3> <ul class="space-y-3 text-gray-100"> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Hourly Rentals</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Daily Packages</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Weekly Deals</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Group Bookings</a></li> <li><a href="#" class="hover:text-yellow-300 transition-colors duration-300">Guided Tours</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-6">Contact Info</h3> <ul class="space-y-3 text-gray-100"> <li><i class="fas fa-map-marker-alt mr-3"></i>456 Cycling Boulevard</li> <li><i class="fas fa-phone mr-3"></i>(555) BIKE-NOW</li> <li><i class="fas fa-envelope mr-3"></i>hello@cycleride.com</li> <li><i class="fas fa-clock mr-3"></i>24/7 Service</li> </ul> </div> </div> <div class="border-t border-green-300 pt-8 text-center text-gray-100"> <p>© 2024 CycleRide Premium Rentals. All rights reserved. | Privacy Policy | Terms of Service | Safety Guidelines</p> </div> </div> </footer> <!-- Booking Modal --> <div id="bookingModal" class="modal"> <div class="modal-content"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-poppins font-bold">Book Your Bike</h3> <button class="text-gray-500 hover:text-gray-700 text-2xl">×</button> </div> <div class="booking-form"> <form class="space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-3">Bike Type</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> <option>City Cruiser - $5/hr</option> <option>Mountain Explorer - $8/hr</option> <option>E-Bike Pro - $12/hr</option> <option>Road Racer - $10/hr</option> <option>Family Tandem - $15/hr</option> <option>Kids Explorer - $3/hr</option> </select> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Pickup Location</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> <option>Downtown Hub</option> <option>Central Park</option> <option>University Campus</option> <option>Beachfront</option> </select> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 font-semibold mb-3">Pickup Date</label> <input type="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Pickup Time</label> <input type="time" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Rental Duration</label> <div class="duration-slider relative"> <div class="duration-thumb" style="left: 25%;"></div> </div> <div class="flex justify-between text-sm text-gray-600 mt-2"> <span>1 hour</span> <span id="durationDisplay">3 hours</span> <span>8 hours</span> </div> </div> <div> <label class="block text-gray-700 font-semibold mb-3">Contact Information</label> <div class="grid md:grid-cols-2 gap-4"> <input type="text" placeholder="Full Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-green-500"> </div> </div> <div class="bg-gray-50 p-6 rounded-lg"> <h4 class="font-bold text-gray-900 mb-4">Booking Summary:</h4> <div class="space-y-2 text-sm"> <div class="flex justify-between"> <span>Bike Type:</span> <span class="font-semibold">City Cruiser</span> </div> <div class="flex justify-between"> <span>Duration:</span> <span class="font-semibold">3 hours</span> </div> <div class="flex justify-between"> <span>Rate:</span> <span class="font-semibold">$5/hour</span> </div> <div class="flex justify-between border-t pt-2 font-bold"> <span>Total:</span> <span class="text-green-500">$15.00</span> </div> </div> </div> <button type="submit" class="w-full btn-cycling text-white py-3 rounded-lg font-bold"> Confirm Booking </button> </form> </div> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96d9c44b1560a74d',t:'MTc1NDkzNjYzNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
.font-inter { font-family: 'Inter', sans-serif; } .font-poppins { font-family: 'Poppins', sans-serif; } /* Cycling Animations */ .fade-in-up { opacity: 0; transform: translateY(60px); transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .fade-in-up.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-100px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.4, 0, 0.2, 1); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .scale-in.visible { opacity: 1; transform: scale(1); } .stagger-fade { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .stagger-fade.visible { opacity: 1; transform: translateY(0); } /* Cycling Gradients */ .adventure-gradient { background: linear-gradient(135deg, #10b981 0%, #059669 25%, #047857 50%, #059669 75%, #10b981 100%); } .freedom-gradient { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 25%, #1e40af 50%, #1d4ed8 75%, #3b82f6 100%); } .energy-gradient { background: linear-gradient(135deg, #f59e0b 0%, #d97706 25%, #b45309 50%, #d97706 75%, #f59e0b 100%); } .speed-gradient { background: linear-gradient(135deg, #ef4444 0%, #dc2626 25%, #b91c1c 50%, #dc2626 75%, #ef4444 100%); } /* Bike Card Hover Effects */ .bike-card { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .bike-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.8s; z-index: 1; } .bike-card:hover::before { left: 100%; } .bike-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 60px rgba(16, 185, 129, 0.3); } .bike-card:hover .bike-image { transform: scale(1.1); } .bike-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Glass Morphism Cycling Style */ .glass-cycling { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.1); } .glass-dark { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Premium Shadows */ .shadow-adventure { box-shadow: 0 25px 50px rgba(16, 185, 129, 0.25); } .shadow-freedom { box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3); } /* Button Animations */ .btn-cycling { background: linear-gradient(135deg, #10b981, #059669); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .btn-cycling::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s; } .btn-cycling:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4); } .btn-cycling:hover::before { left: 100%; } .btn-outline-cycling { border: 2px solid #10b981; color: #10b981; background: transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .btn-outline-cycling::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #10b981, #059669); transition: left 0.4s; z-index: -1; } .btn-outline-cycling:hover { color: white; transform: translateY(-3px); } .btn-outline-cycling:hover::before { left: 0; } /* Cycling Animations */ @keyframes bikeWheel { 0%, 100% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes bikeBounce { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes speedLines { 0% { transform: translateX(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } } @keyframes pedalMotion { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } } .wheel-animation { animation: bikeWheel 3s linear infinite; } .bike-bounce { animation: bikeBounce 4s ease-in-out infinite; } .speed-lines { animation: speedLines 2s ease-in-out infinite; } .pedal-animation { animation: pedalMotion 2s linear infinite; } /* Booking Form Animation */ .booking-bounce { animation: bookingBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes bookingBounce { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } /* Loading Animation */ .loading-cycling::after { content: ''; animation: loadingCycling 2s infinite; } @keyframes loadingCycling { 0%, 20% { content: '?'; } 40% { content: '?'; } 60%, 100% { content: '?'; } } /* Search Animation */ .search-cycling { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; } .search-cycling:focus { width: 450px; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } /* Availability Badge */ .cycling-badge { animation: cyclingPulse 2.5s infinite; } @keyframes cyclingPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f8f8f8; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #10b981, #059669); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #059669, #10b981); } /* Responsive Enhancements */ @media (max-width: 768px) { .search-cycling:focus { width: 300px; } } /* Modal */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(10px); } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-content { background: white; padding: 2rem; border-radius: 20px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; transform: scale(0.7); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .modal.show .modal-content { transform: scale(1); opacity: 1; } /* Route Animation */ .route-glow { animation: routeGlow 3s ease-in-out infinite; } @keyframes routeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } 50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); } } /* Rental Station Animation */ .station-profile { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .station-profile:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); } .station-profile:hover .station-image { transform: scale(1.05); } .station-image { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Price Display */ .price-display { transition: all 0.3s ease; cursor: pointer; } .price-display:hover { background: #10b981; color: white; transform: scale(1.05); } /* Calendar Animation */ .calendar-day { transition: all 0.3s ease; cursor: pointer; } .calendar-day:hover { background: #10b981; color: white; transform: scale(1.1); } .calendar-day.available { background: #10b981; color: white; } /* News Ticker */ .news-ticker { animation: ticker 30s linear infinite; } @keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Progress Bar Animation */ .progress-bar { transition: width 2s ease-in-out; } /* Bike Type Icon Animations */ .bike-icon { transition: all 0.3s ease; } .bike-icon:hover { transform: scale(1.2) rotate(10deg); } /* Booking Form Animation */ .booking-form { transform: translateY(20px); opacity: 0; transition: all 0.5s ease; } .booking-form.show { transform: translateY(0); opacity: 1; } /* Feature Card Hover */ .feature-card { transition: all 0.4s ease; position: relative; overflow: hidden; } .feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); opacity: 0; transition: opacity 0.4s; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .feature-card:hover::after { opacity: 1; } /* Rental Performance Chart */ .performance-chart { position: relative; height: 200px; background: linear-gradient(to top, #ecfdf5 0%, #ffffff 100%); border-radius: 10px; overflow: hidden; } .chart-bar { position: absolute; bottom: 0; width: 40px; background: linear-gradient(to top, #10b981, #34d399); border-radius: 4px 4px 0 0; transition: height 2s ease-in-out; } /* Promotion Banner */ .promotion-banner { background: linear-gradient(45deg, #fef3c7, #fde68a); border-left: 4px solid #f59e0b; animation: slideDown 0.5s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Bike Status Indicators */ .status-available { background: #10b981; animation: statusPulse 2s infinite; } .status-rented { background: #ef4444; } .status-maintenance { background: #f59e0b; } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Map Animation */ .map-marker { animation: markerBounce 2s ease-in-out infinite; } @keyframes markerBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Rental Duration Slider */ .duration-slider { background: linear-gradient(to right, #10b981, #34d399); height: 6px; border-radius: 3px; position: relative; } .duration-thumb { width: 20px; height: 20px; background: white; border: 3px solid #10b981; border-radius: 50%; position: absolute; top: -7px; cursor: pointer; transition: all 0.3s ease; } .duration-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
JavaScript
// Advanced Intersection Observer with cycling animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach((entry, index) => { if (entry.isIntersecting) { if (entry.target.classList.contains('stagger-fade')) { setTimeout(() => { entry.target.classList.add('visible'); }, index * 200); } else { entry.target.classList.add('visible'); } } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .slide-in-left, .slide-in-right, .scale-in, .stagger-fade').forEach(el => { observer.observe(el); }); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Booking Modal functionality const bookingModal = document.getElementById('bookingModal'); // Open booking modal document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Book Now') || button.textContent.includes('Rent Now')) { button.addEventListener('click', function(e) { e.preventDefault(); bookingModal.classList.add('show'); // Add booking animation this.classList.add('booking-bounce'); setTimeout(() => { this.classList.remove('booking-bounce'); }, 800); // Show booking form setTimeout(() => { bookingModal.querySelector('.booking-form').classList.add('show'); }, 300); }); } }); // Close modal bookingModal.addEventListener('click', function(e) { if (e.target === bookingModal || e.target.textContent === '×') { bookingModal.classList.remove('show'); bookingModal.querySelector('.booking-form').classList.remove('show'); } }); // Search functionality const searchInput = document.querySelector('input[placeholder*="Search"]'); searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { const searchTerm = this.value.trim(); if (searchTerm) { alert(`? Searching for "${searchTerm}"...\n\nFound 8 results:\n• City Cruiser bikes available at Downtown Hub\n• Mountain Explorer bikes at Central Park\n• E-Bike Pro available at University Campus\n• Beachfront location has 15 bikes available\n• Riverside Trail route matches your search\n• Urban Explorer route available\n\nBook now for instant availability!`); this.value = ''; } } }); // Location availability let availableStations = 12; document.querySelector('.fa-map-marker-alt').addEventListener('click', function() { alert(`? Nearby Rental Stations (${availableStations})\n\n? Downtown Hub - 0.2 km away\n Available: 45 bikes | Open 24/7\n\n? Central Park - 0.8 km away\n Available: 32 bikes | Open 6AM-10PM\n\n? University Campus - 1.2 km away\n Available: 28 bikes | Open 24/7\n\n? Beachfront - 2.1 km away\n Available: 38 bikes | Open 5AM-11PM\n\nTap any location to reserve your bike!`); }); // Bike rental functionality document.querySelectorAll('.bike-card button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const bikeType = this.closest('.bike-card').querySelector('h3').textContent; const price = this.closest('.bike-card').querySelector('.text-3xl').textContent; const available = this.closest('.bike-card').querySelector('.font-bold.text-green-500').textContent; alert(`?♂️ ${bikeType}\n\nPrice: ${price}\nAvailable: ${available}\n\n✨ Included with rental:\n• Premium helmet and safety gear\n• Basic insurance coverage\n• Mobile app with GPS tracking\n• 24/7 roadside assistance\n• Route recommendations\n\n? Book instantly through our app or website!\n\nReady to start your cycling adventure?`); }); }); // Station details document.querySelectorAll('.station-profile button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const stationName = this.closest('.station-profile').querySelector('h3').textContent; const location = this.closest('.station-profile').querySelector('.text-green-500').textContent; const available = this.closest('.station-profile').querySelector('.font-bold.text-green-500').textContent; alert(`? ${stationName}\n\nLocation: ${location}\nAvailable: ${available}\n\n? Operating Hours:\nMon-Sun: 24/7 (Automated station)\n\n? Bike Types Available:\n• City Cruisers: 15 bikes\n• E-Bikes: 8 bikes\n• Mountain Bikes: 6 bikes\n• Kids Bikes: 12 bikes\n\n? Features:\n• Contactless pickup/return\n• Real-time availability\n• Mobile app integration\n• Secure bike storage\n\nReserve your bike now!`); }); }); // Enhanced form handling document.querySelector('#contact form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.innerHTML = 'Sending message<span class="loading-cycling"></span>'; submitBtn.disabled = true; setTimeout(() => { alert('? Thank you for contacting CycleRide!\n\nOur cycling experts will respond within 2 hours to:\n• Answer your questions about bike rentals\n• Provide route recommendations\n• Assist with group bookings\n• Help plan your cycling adventure\n• Offer personalized service options\n\n?♂️ In the meantime, download our mobile app for:\n• Instant bike availability\n• Real-time GPS tracking\n• Route planning tools\n• Exclusive member discounts\n\nHappy cycling!'); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2500); }); // Booking form submission document.querySelector('#bookingModal form').addEventListener('submit', function(e) { e.preventDefault(); const bikeType = this.querySelector('select').value; const location = this.querySelectorAll('select')[1].value; const date = this.querySelector('input[type="date"]').value; const time = this.querySelector('input[type="time"]').value; const name = this.querySelector('input[placeholder="Full Name"]').value; if (!bikeType || !location || !date || !time || !name) { alert('Please fill in all required fields to complete your booking.'); return; } bookingModal.classList.remove('show'); // Show booking confirmation setTimeout(() => { alert(`? Booking Confirmed!\n\nBooking Details:\n• Bike: ${bikeType}\n• Location: ${location}\n• Date: ${date}\n• Time: ${time}\n• Customer: ${name}\n\n? Confirmation sent to your phone!\n\n✨ What's Next:\n• Download our mobile app\n• Receive pickup instructions\n• Get safety briefing\n• Start your adventure!\n\n?♂️ Booking Reference: CR${Math.floor(Math.random() * 10000)}\n\nSee you soon for an amazing ride!`); }, 500); }); // Route viewing document.querySelectorAll('.feature-card button').forEach(button => { if (button.textContent.includes('View Route')) { button.addEventListener('click', function(e) { e.preventDefault(); const routeName = this.closest('.feature-card').querySelector('h3').textContent; const distance = this.closest('.feature-card').querySelector('.text-sm').textContent; const duration = this.closest('.feature-card').querySelector('.text-sm.text-gray-600').textContent; alert(`?️ ${routeName}\n\n${distance} • ${duration}\n\n? Route Highlights:\n• Scenic viewpoints and photo spots\n• Rest areas and bike-friendly cafes\n• Safe cycling paths and bike lanes\n• Points of interest and landmarks\n• Emergency contact points\n\n?♂️ Difficulty Level & Tips:\n• Recommended bike types\n• Weather considerations\n• Best times to ride\n• Safety precautions\n\n? Available in our mobile app with:\n• Turn-by-turn navigation\n• Real-time traffic updates\n• Fellow cyclist locations\n• Emergency assistance\n\nReady to explore this route?`); }); } }); // Pricing plan selection document.querySelectorAll('#pricing button').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const planType = this.closest('div').querySelector('h3').textContent; const price = this.closest('div').querySelector('.text-5xl').textContent; if (button.textContent.includes('Hourly')) { alert(`⏰ Hourly Rental Plan\n\nPrice: ${price} per hour\n\n✅ Perfect for:\n• Quick errands and short trips\n• Testing different bike types\n• Spontaneous adventures\n• First-time riders\n\n? How it works:\n1. Find available bike nearby\n2. Unlock with mobile app\n3. Ride and explore\n4. Return to any station\n5. Automatic billing\n\nStart your hourly adventure now!`); } else if (button.textContent.includes('Daily')) { alert(`? Daily Rental Plan - MOST POPULAR!\n\nPrice: ${price} per day (Save 38%!)\n\n✅ Perfect for:\n• Full day explorations\n• Tourist sightseeing\n• Fitness and exercise\n• Multiple short trips\n\n? Bonus Features:\n• Premium bike selection\n• Route planning assistance\n• Priority customer support\n• Extended rental hours\n\nBook your daily adventure!`); } else { alert(`? Weekly Rental Plan - BEST VALUE!\n\nPrice: ${price} per week (Save 65%!)\n\n✅ Perfect for:\n• Extended vacations\n• Business travelers\n• Fitness enthusiasts\n• Regular commuters\n\n? VIP Benefits:\n• Personal cycling coach\n• Any bike, anytime access\n• Premium insurance coverage\n• Priority booking system\n• Exclusive member events\n\nJoin our weekly riders community!`); } }); }); // Promotion banner interaction document.querySelector('.promotion-banner button').addEventListener('click', function() { alert('? Spring Special - 20% Off Weekend Rentals!\n\nOffer Details:\n? Valid: Saturdays & Sundays\n? All bike types included\n⏰ Valid until April 30th\n? Automatic discount applied\n\n? Perfect for:\n• Weekend adventures\n• Family outings\n• Romantic rides\n• Fitness activities\n\n? How to claim:\n1. Book any weekend rental\n2. Discount applied automatically\n3. No promo code needed\n4. Valid for new and existing customers\n\nBook now and save big on your weekend cycling adventure!'); }); // Social media interactions document.querySelectorAll('.fab').forEach(icon => { icon.addEventListener('click', function() { const platform = this.classList[1].replace('fa-', ''); alert(`? Follow CycleRide on ${platform.charAt(0).toUpperCase() + platform.slice(1)}!\n\nStay connected for:\n• Daily cycling inspiration\n• New route discoveries\n• Bike maintenance tips\n• Community challenges\n• Exclusive member offers\n• Safety updates\n• Event announcements\n\n?♂️ Join our cycling community of 50,000+ riders!\n\nShare your cycling adventures with #CycleRideAdventure`); }); }); // Duration slider functionality const durationSlider = document.querySelector('.duration-slider'); const durationThumb = document.querySelector('.duration-thumb'); const durationDisplay = document.getElementById('durationDisplay'); if (durationSlider && durationThumb) { durationThumb.addEventListener('mousedown', function(e) { const slider = durationSlider; const thumb = this; function moveThumb(e) { const rect = slider.getBoundingClientRect(); const x = e.clientX - rect.left; const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100)); thumb.style.left = percentage + '%'; // Calculate duration (1-8 hours) const duration = Math.max(1, Math.round((percentage / 100) * 7 + 1)); if (durationDisplay) { durationDisplay.textContent = duration + (duration === 1 ? ' hour' : ' hours'); } } document.addEventListener('mousemove', moveThumb); document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', moveThumb); }); }); } // Add loading animation on page load window.addEventListener('load', function() { document.body.classList.add('loaded'); }); // Parallax effect for cycling elements window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const cyclingElements = document.querySelectorAll('.bike-bounce, .wheel-animation, .pedal-animation'); cyclingElements.forEach(element => { const speed = scrolled * 0.02; element.style.transform = `translateY(${speed}px)`; }); }); // Feature card interactions document.querySelectorAll('.feature-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); });
Output Preview
Desktop
Mobile
Fullscreen