Merge pull request #60 from KavyaBS123/master

modified contact form

index.html

@@ -46,7 +46,7 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
                 <img src="img/Car Website – [email protected]" alt="">
             </div>
         </div>
-        <div class="form-container">
+        <!-- <div class="form-container">
             <form action="anonimous.php" method="post">
                 <div class="input-box">
                     <span>From <span> MUJ Hostel</span> To</span>
@@ -62,7 +62,48 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
                 </div>
                 <input type="submit" name="submit" id="submit" class="btn">
             </form>
+        </div> -->
+
+        <div class="booking-form">
+            <div class="form-group">
+                <label for="fullName">Full Name</label>
+                <input type="text" id="fullName" placeholder="Your Name">
+            </div>
+            <div class="form-group">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" placeholder="Telephone">
+            </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" placeholder="[email protected]">
+            </div>
+            <div class="form-group">
+                <label for="city">City</label>
+                <select id="city">
+                    <option>Select City</option>
+                    <!-- Add more options here -->
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="vehicle">Vehicle</label>
+                <select id="vehicle">
+                    <option>Select Vehicle</option>
+                    <!-- Add more options here -->
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="pickupDate">Pickup Date</label>
+                <input type="date" id="pickupDate">
+            </div>
+            <div class="form-group">
+                <label for="dropoffDate">Drop-off Date</label>
+                <input type="date" id="dropoffDate">
+            </div>
         </div>
+            <div class="form-group">
+                <button id="bookNow">Book Now</button>
+            </div>
+
     </section>
     <!-- Ride-->
     <section class="ride" id="ride">

script.js

@@ -4,7 +4,10 @@ document
     const testimonialsContainer = document.getElementById(
       "testimonials-container"
     );
-
+    document.getElementById('bookNow').addEventListener('click', function() {
+      alert('Booking confirmed!');
+  });
+
     const newTestimonials = [
       {
         text: "I've used many cab services before, but this one is by far the best. Highly recommended!",

style.css

@@ -160,8 +160,59 @@ header {
   margin-right: 1rem;
   cursor: pointer;
 }
+.booking-form {
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  width: 100%;
+}
 
-.form-container form {
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group label {
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.form-group input,
+.form-group select {
+  padding: 10px;
+  border: 2px solid orangered;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: orangered;
+}
+
+#bookNow {
+  background-color: orangered;
+  color: white;
+  padding: 15px;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+#bookNow:hover {
+  background-color: orangered;
+    transform: scale(1.1);
+
+}
+
+/* .form-container form {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -172,7 +223,7 @@ header {
   background-color: rgb(238, 239, 241);
   padding: 19px;
   border-radius: 0.5rem;
-}
+} */
 
 .input-box {
   flex: 1 1 7rem;