hhh / index.html
imsarfaraz's picture
- Initial Deployment
b5fc3a1 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earn Money by Driving or Get a Ride Now | Uber India</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
.mobile-menu {
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
transform: translateX(0);
}
.hero-bg {
background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)), url('https://www.uber-assets.com/image/upload/f_auto,q_auto:eco,c_fill,h_552,w_552/v1712926828/assets/a3/cf8564-e2a6-418c-b9b0-65dd285c100b/original/3-2-ridesharing-new.jpg');
background-size: cover;
background-position: center;
}
.input-focus:focus {
outline: none;
box-shadow: 0 0 0 2px #000;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="font-sans">
<!-- Header -->
<header class="bg-black text-white">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-8">
<a href="#" class="text-2xl font-bold">Uber</a>
<nav class="hidden lg:flex space-x-6">
<div class="dropdown relative">
<button class="flex items-center">
Ride <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-black mt-2 py-2 w-48 rounded shadow-lg z-10">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Request a ride</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Reserve a ride</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Ride options</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center">
Drive <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-black mt-2 py-2 w-48 rounded shadow-lg z-10">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Drive with Uber</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Deliver with Uber</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Fleet management</a>
</div>
</div>
<a href="#" class="hover:text-gray-300">Business</a>
<div class="dropdown relative">
<button class="flex items-center">
About <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div class="dropdown-menu absolute hidden bg-white text-black mt-2 py-2 w-64 rounded shadow-lg z-10">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">About us</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Our offerings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">How Uber works</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Sustainability</a>
</div>
</div>
</nav>
</div>
<div class="flex items-center space-x-6">
<div class="hidden lg:flex items-center">
<i class="fas fa-globe mr-2"></i>
<span>EN</span>
</div>
<a href="#" class="hidden lg:block hover:text-gray-300">Help</a>
<a href="#" class="hidden lg:block hover:text-gray-300">Log in</a>
<button class="bg-black text-white border border-white px-4 py-2 rounded hover:bg-gray-800 transition">
Sign up
</button>
<button class="lg:hidden text-2xl" id="menu-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobile-menu fixed inset-y-0 right-0 w-64 bg-white text-black overflow-y-auto z-50 p-4" id="mobile-menu">
<div class="flex justify-between items-center mb-8">
<a href="#" class="text-2xl font-bold">Uber</a>
<button id="menu-close" class="text-2xl">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div class="border-b pb-4">
<a href="#" class="block py-2 font-medium">Ride</a>
<div class="pl-4 mt-2 space-y-2">
<a href="#" class="block py-1">Request a ride</a>
<a href="#" class="block py-1">Reserve a ride</a>
</div>
</div>
<div class="border-b pb-4">
<a href="#" class="block py-2 font-medium">Drive</a>
<div class="pl-4 mt-2 space-y-2">
<a href="#" class="block py-1">Drive with Uber</a>
<a href="#" class="block py-1">Deliver with Uber</a>
</div>
</div>
<a href="#" class="block py-2 font-medium border-b pb-4">Business</a>
<div class="border-b pb-4">
<a href="#" class="block py-2 font-medium">About</a>
<div class="pl-4 mt-2 space-y-2">
<a href="#" class="block py-1">About us</a>
<a href="#" class="block py-1">Our offerings</a>
</div>
</div>
<div class="flex items-center py-2">
<i class="fas fa-globe mr-2"></i>
<span>English</span>
</div>
<a href="#" class="block py-2">Help</a>
<a href="#" class="block py-2">Log in</a>
<button class="w-full bg-black text-white px-4 py-3 rounded font-medium mt-4">
Sign up
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero-bg text-white py-16 md:py-24">
<div class="container mx-auto px-4">
<div class="max-w-xl">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Go anywhere with Uber</h1>
<div class="bg-white rounded-lg p-4 mb-6">
<div class="flex items-center mb-4">
<i class="fas fa-circle-dot text-green-500 mr-3"></i>
<input type="text" placeholder="Pickup location" class="w-full bg-transparent border-b border-gray-200 pb-2 input-focus text-black">
</div>
<div class="flex items-center mb-4">
<i class="fas fa-map-marker-alt text-red-500 mr-3"></i>
<input type="text" placeholder="Dropoff location" class="w-full bg-transparent border-b border-gray-200 pb-2 input-focus text-black">
</div>
<div class="flex justify-between">
<div class="flex items-center">
<i class="far fa-calendar text-gray-500 mr-3"></i>
<span class="text-gray-700">Now</span>
</div>
<button class="bg-black text-white px-4 py-2 rounded">
See prices
</button>
</div>
</div>
<p class="text-sm">
<a href="#" class="underline">Log in to see your recent activity</a>
</p>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-2xl font-bold mb-8">Suggestions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="service-card bg-white rounded-lg p-6 shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-car text-blue-500 text-xl"></i>
</div>
<h3 class="font-bold">Ride</h3>
</div>
<p class="text-gray-600 mb-4">Go anywhere with Uber. Request a ride, hop in, and go.</p>
<a href="#" class="text-blue-500 font-medium flex items-center">
Details <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white rounded-lg p-6 shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
<i class="far fa-clock text-purple-500 text-xl"></i>
</div>
<h3 class="font-bold">Reserve</h3>
</div>
<p class="text-gray-600 mb-4">Reserve your ride in advance so you can relax on the day of your trip.</p>
<a href="#" class="text-blue-500 font-medium flex items-center">
Details <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white rounded-lg p-6 shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-key text-green-500 text-xl"></i>
</div>
<h3 class="font-bold">Rental Cars</h3>
</div>
<p class="text-gray-600 mb-4">Your perfect rental car is a few clicks away.</p>
<a href="#" class="text-blue-500 font-medium flex items-center">
Details <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white rounded-lg p-6 shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-utensils text-red-500 text-xl"></i>
</div>
<h3 class="font-bold">Food</h3>
</div>
<p class="text-gray-600 mb-4">Order delivery from local restaurants with Uber Eats.</p>
<a href="#" class="text-blue-500 font-medium flex items-center">
Details <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Reserve Section -->
<section class="py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<h2 class="text-3xl font-bold mb-6">Plan for later</h2>
<h3 class="text-xl font-semibold mb-4">Get your ride right with Uber Reserve</h3>
<div class="bg-gray-100 rounded-lg p-4 mb-6">
<div class="flex items-center mb-4">
<i class="far fa-calendar text-gray-500 mr-3"></i>
<span class="text-gray-700">Choose date and time</span>
</div>
<div class="flex justify-between">
<div class="flex items-center">
<i class="far fa-clock text-gray-500 mr-3"></i>
<span class="text-gray-700">Now</span>
</div>
<button class="bg-black text-white px-4 py-2 rounded">
See prices
</button>
</div>
</div>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium">Choose your exact pickup time</h4>
<p class="text-gray-600 text-sm">Up to 90 days in advance.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium">Extra wait time included</h4>
<p class="text-gray-600 text-sm">To meet your ride.</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium">Cancel at no charge</h4>
<p class="text-gray-600 text-sm">Up to 60 minutes in advance.</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<img src="https://www.uber-assets.com/image/upload/f_auto,q_auto:eco,c_fill,h_552,w_552/v1730197725/assets/0f/48c7ba-da13-4fdc-b54c-42878042f513/original/Airport-Fall.png"
alt="Uber Reserve" class="rounded-lg w-full">
</div>
</div>
</div>
</section>
<!-- Drive Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<img src="https://www.uber-assets.com/image/upload/f_auto,q_auto:eco,c_fill,h_552,w_552/v1684855112/assets/96/4dd3d1-94e7-481e-b28c-08d59353b9e0/original/earner-illustra.png"
alt="Drive with Uber" class="rounded-lg w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">Drive when you want, make what you need</h2>
<p class="text-lg mb-6">Make money on your schedule with deliveries or rides—or both. You can use your own car or choose a rental through Uber.</p>
<button class="bg-black text-white px-6 py-3 rounded font-medium mb-4">
Get started
</button>
<p class="text-sm">
<a href="#" class="underline">Already have an account? Sign in</a>
</p>
</div>
</div>
</div>
</section>
<!-- Business Section -->
<section class="py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<h2 class="text-3xl font-bold mb-6">The Uber you know, reimagined for business</h2>
<p class="text-lg mb-6">Uber for Business is a platform for managing global rides and meals, and local deliveries, for companies of any size.</p>
<div class="flex space-x-4">
<button class="bg-black text-white px-6 py-3 rounded font-medium">
Get started
</button>
<button class="border border-black px-6 py-3 rounded font-medium">
Our solutions
</button>
</div>
</div>
<div class="lg:w-1/2">
<img src="https://www.uber-assets.com/image/upload/f_auto,q_auto:eco,c_fill,h_552,w_552/v1684887108/assets/76/baf1ea-385a-408c-846b-59211086196c/original/u4b-square.png"
alt="Uber for Business" class="rounded-lg w-full">
</div>
</div>
</div>
</section>
<!-- Fleet Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
<img src="https://www.uber-assets.com/image/upload/f_auto,q_auto:eco,c_fill,h_552,w_552/v1696243819/assets/18/34e6fd-33e3-4c95-ad7a-f484a8c812d7/original/fleet-management.jpg"
alt="Fleet management" class="rounded-lg w-full">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">Make money by renting out your car</h2>
<p class="text-lg mb-6">Connect with thousands of drivers and earn more per week with Uber's free fleet management tools.</p>
<button class="bg-black text-white px-6 py-3 rounded font-medium">
Get started
</button>
</div>
</div>
</div>
</section>
<!-- App Section -->
<section class="py-12 bg-black text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">It's easier in the apps</h2>
<div class="flex flex-col md:flex-row justify-center items-center space-y-8 md:space-y-0 md:space-x-8">
<div class="text-center">
<div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-car text-black text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Download the Uber app</h3>
<div class="flex flex-col space-y-2">
<a href="#" class="flex items-center justify-center bg-gray-800 px-4 py-2 rounded">
<i class="fab fa-apple mr-2"></i> App Store
</a>
<a href="#" class="flex items-center justify-center bg-gray-800 px-4 py-2 rounded">
<i class="fab fa-google-play mr-2"></i> Google Play
</a>
</div>
</div>
<div class="text-center">
<div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-steering-wheel text-black text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Download the Driver app</h3>
<div class="flex flex-col space-y-2">
<a href="#" class="flex items-center justify-center bg-gray-800 px-4 py-2 rounded">
<i class="fab fa-apple mr-2"></i> App Store
</a>
<a href="#" class="flex items-center justify-center bg-gray-800 px-4 py-2 rounded">
<i class="fab fa-google-play mr-2"></i> Google Play
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-100 text-gray-700 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="font-bold text-lg mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:underline">About us</a></li>
<li><a href="#" class="hover:underline">Our offerings</a></li>
<li><a href="#" class="hover:underline">Newsroom</a></li>
<li><a href="#" class="hover:underline">Investors</a></li>
<li><a href="#" class="hover:underline">Blog</a></li>
<li><a href="#" class="hover:underline">Careers</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:underline">Ride</a></li>
<li><a href="#" class="hover:underline">Drive</a></li>
<li><a href="#" class="hover:underline">Eat</a></li>
<li><a href="#" class="hover:underline">Uber for Business</a></li>
<li><a href="#" class="hover:underline">Uber Freight</a></li>
<li><a href="#" class="hover:underline">Gift cards</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4">Global citizenship</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:underline">Safety</a></li>
<li><a href="#" class="hover:underline">Sustainability</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4">Travel</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:underline">Reserve</a></li>
<li><a href="#" class="hover:underline">Airports</a></li>
<li><a href="#" class="hover:underline">Cities</a></li>
</ul>
</div>
</div>
<div class="flex justify-between items-center border-t border-gray-300 pt-8">
<div class="flex space-x-4">
<a href="#" class="text-2xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-2xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-2xl"><i class="fab fa-youtube"></i></a>
<a href="#" class="text-2xl"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-2xl"><i class="fab fa-instagram"></i></a>
</div>
<div>
<div class="flex items-center">
<i class="fas fa-globe mr-2"></i>
<span>English</span>
</div>
</div>
</div>
<div class="mt-8 text-sm">
<p>© 2025 Uber Technologies Inc.</p>
<div class="flex flex-wrap gap-4 mt-2">
<a href="#" class="hover:underline">Privacy</a>
<a href="#" class="hover:underline">Accessibility</a>
<a href="#" class="hover:underline">Terms</a>
</div>
</div>
</div>
</footer>
<!-- Bottom Navigation (Mobile) -->
<div class="lg:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-40">
<div class="flex justify-around py-3">
<a href="#" class="flex flex-col items-center text-xs">
<i class="fas fa-car text-xl mb-1"></i>
<span>Ride</span>
</a>
<a href="#" class="flex flex-col items-center text-xs">
<i class="fas fa-steering-wheel text-xl mb-1"></i>
<span>Drive</span>
</a>
<a href="#" class="flex flex-col items-center text-xs">
<i class="fas fa-utensils text-xl mb-1"></i>
<span>Eats</span>
</a>
<a href="#" class="flex flex-col items-center text-xs">
<i class="fas fa-briefcase text-xl mb-1"></i>
<span>Business</span>
</a>
</div>
</div>
<script>
// Mobile menu toggle
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.add('open');
document.body.style.overflow = 'hidden';
});
menuClose.addEventListener('click', () => {
mobileMenu.classList.remove('open');
document.body.style.overflow = '';
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!mobileMenu.contains(e.target) && e.target !== menuToggle) {
mobileMenu.classList.remove('open');
document.body.style.overflow = '';
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=imsarfaraz/hhh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>