Skip to content

Commit

Permalink
review page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AkshatPandey-2004
AkshatPandey-2004 committed Jul 11, 2024
1 parent 8b61046 commit 3f49791
Show file tree
Hide file tree
Showing 3 changed files with 249 additions and 18 deletions.
Empty file added review .css
View file
Empty file.
261 changes: 248 additions & 13 deletions review.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<title>Cabshare</title>
<!-- Link to CSS -->
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
/>
</head>
<body></body>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cabrental Reviews</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}

.nav-items {
flex-grow: 1;
text-align: center;
}

.nav-items a {
margin: 0 1rem;
transition: color 0.3s ease;
}

.nav-items a:hover {
color: #6d28d9;
}

.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.logo {
height: 40px;
width: auto;
}

.text-lg {
padding-left: 10px;
}

.bg-gradient-to-r {
background: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
}

.rating-star {
color: #fbbf24;
}
</style>
</head>

<body class="bg-gray-100 font-sans leading-normal tracking-normal">

<!-- Navbar -->
<nav class="bg-white shadow-md">
<div class="container mx-auto px-4 nav-container">
<div class="flex items-center">
<img src="img/logo.png" alt="Logo" class="logo">
<div class="text-lg font-bold text-purple-800">
Cabrental
</div>
</div>
<div class="nav-items">
<a href="index.html" class="text-gray-800 hover:text-purple-800">Home</a>
<a href="ride.html" class="text-gray-800 hover:text-purple-800">Ride</a>
<a href="serv.html" class="text-gray-800 hover:text-purple-800">Service</a>
<a href="about.html" class="text-gray-800 hover:text-purple-800">About</a>
<a href="review.html" class="text-gray-800 hover:text-purple-800">Reviews</a>
<a href="contactus.html" class="text-gray-800 hover:text-purple-800">Contact</a>
</div>
<div>
<button class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600" onclick="window.location.href='login.html'">Login</button>
</div>
</div>
</nav>

<!-- Hero Section -->
<section class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-20">
<div class="container mx-auto text-center">
<h1 class="text-4xl font-bold mb-2">Cabrental Reviews</h1>
<p class="text-lg mb-6">Read what our customers have to say about our car rental service!</p>
<button id="reviewButton" class="bg-white text-purple-800 px-4 py-2 rounded shadow hover:bg-gray-200">Leave a Review</button>
</div>
</section>

<!-- Reviews Section -->
<section class="container mx-auto px-4 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Review Cards -->
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/images (1).jpeg" alt="User Avatar">
<div>
<p class="text-xl font-bold">John Doe</p>
<p class="text-gray-600">March 25, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">The car rental service was excellent! The car was in perfect condition, and the process was smooth and hassle-free.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/images (2).jpeg" alt="User Avatar">
<div>
<p class="text-xl font-bold">Jane Smith</p>
<p class="text-gray-600">April 10, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">Great service and friendly staff! I will definitely rent a car from Cabrental again in the future.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span>☆</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/istockphoto-1158014305-612x612.jpg" alt="User Avatar">
<div>
<p class="text-xl font-bold">Mark Wilson</p>
<p class="text-gray-600">May 5, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">I had an amazing experience with Cabrental. The car was clean and the booking process was seamless.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/images (4).jpeg" alt="User Avatar">
<div>
<p class="text-xl font-bold">Alice Johnson</p>
<p class="text-gray-600">June 14, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">I love the convenience of renting a car from Cabrental. Their service is always reliable and efficient.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/download.jpeg" alt="User Avatar">
<div>
<p class="text-xl font-bold">Chris Brown</p>
<p class="text-gray-600">July 20, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">Cabrental has been my go-to car rental service for years. They always provide top-notch service and quality cars.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg card">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="./images/images.jpeg" alt="User Avatar">
<div>
<p class="text-xl font-bold">Emily Davis</p>
<p class="text-gray-600">August 15, 2024</p>
</div>
</div>
<p class="text-gray-800 mb-4">The customer service at Cabrental is outstanding! They go above and beyond to ensure a great experience.</p>
<div class="text-yellow-500">
<span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span>☆</span>
</div>
</div>
</div>
</section>

<!-- Review Form Modal -->
<div id="reviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white rounded-lg p-6 w-full max-w-lg">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">Leave a Review</h2>
<button id="closeModal" class="text-gray-600 hover:text-gray-900">&times;</button>
</div>
<form>
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" id="name" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
</div>
<div class="mb-4">
<label for="rating" class="block text-sm font-medium text-gray-700">Rating</label>
<select id="rating" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
<option value="5">★★★★★ - 5 Stars</option>
<option value="4">★★★★☆ - 4 Stars</option>
<option value="3">★★★☆☆ - 3 Stars</option>
<option value="2">★★☆☆☆ - 2 Stars</option>
<option value="1">★☆☆☆☆ - 1 Star</option>
</select>
</div>
<div class="mb-4">
<label for="review" class="block text-sm font-medium text-gray-700">Review</label>
<textarea id="review" class="mt-1 p-2 border border-gray-300 rounded-md w-full" rows="4" required></textarea>
</div>
<div class="flex justify-end">
<button type="button" class="bg-gray-500 text-white px-4 py-2 rounded shadow hover:bg-gray-600 mr-2"
id="cancelButton">Cancel</button>
<button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600">Submit</button>
</div>
</form>
</div>
</div>
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto text-center">
<p class="mb-2">© 2024 Cabrental. All rights reserved.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="hover:text-purple-500">Privacy Policy</a>
<a href="#" class="hover:text-purple-500">Terms of Service</a>
<a href="contactus.html" class="hover:text-purple-500">Contact Us</a>
</div>
</div>
</footer>

<script>
// JavaScript to handle modal functionality
document.getElementById('reviewButton').addEventListener('click', function () {
document.getElementById('reviewModal').classList.remove('hidden');
});

document.getElementById('closeModal').addEventListener('click', function () {
document.getElementById('reviewModal').classList.add('hidden');
});

document.getElementById('cancelButton').addEventListener('click', function () {
document.getElementById('reviewModal').classList.add('hidden');
});

// Optionally, handle form submission here
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
// Process form data and close modal
document.getElementById('reviewModal').classList.add('hidden');
alert('Thank you for your review!');
});
</script>
</body>

</html>
6 changes: 1 addition & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,11 +185,7 @@ header nav .nav-right .header-btn > div input {
.header-btn .sign-up:hover{
background: rgb(211, 10, 10);
}*/
=======
width: 60px;
border-radius: 10px;
/* This creates 10px rounded corners */
}


.navbar {
display: flex;
Expand Down

0 comments on commit 3f49791

Please sign in to comment.