From c3edbe836becec7916e0e2074f29ba9cd1c73701 Mon Sep 17 00:00:00 2001
From: Khushi-Nigam <143868952+Khushi-Nigam@users.noreply.github.com>
Date: Sat, 5 Oct 2024 13:49:01 +0530
Subject: [PATCH] Done Changes with responsiveness

---
 index.html | 584 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 511 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index eab373a..37f191a 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,440 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="Contact us/style.css">
     <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>
+    <style>
+        /* Base styles */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #fff;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.logo img {
+  height: 50px;
+}
+
+.navbar {
+  display: flex;
+  gap: 20px;
+  list-style: none;
+}
+
+.navbar li a {
+  text-decoration: none;
+  color: #333;
+  padding: 10px 15px;
+  transition: 0.3s ease;
+}
+
+.navbar li a:hover {
+  color: #007bff;
+}
+
+.header-btn .sign-up {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.header-btn .sign-up:hover {
+  background-color: #0056b3;
+}
+
+/* Hide menu icon initially */
+#menu-icon {
+  display: none;
+}
+
+/* Responsive styles for mobile sidebar */
+@media (max-width: 600px) {
+  .navbar {
+    position: fixed;
+    top: 0;
+    left: -250px;
+    width: 250px;
+    height: 100%;
+    background-color: #fff;
+    flex-direction: column;
+    align-items: start;
+    justify-content: flex-start;
+    padding: 20px;
+    transition: 0.3s;
+    z-index: 1000;
+  }
+
+  .navbar.active {
+    left: 0;
+  }
+
+  .navbar li {
+    width: 100%;
+    margin: 20px 0;
+  }
+
+  .navbar li a {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 10px 15px;
+  }
+
+  #menu-icon {
+    display: block;
+    font-size: 28px;
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+  }
+
+  .close-btn {
+    font-size: 28px;
+    cursor: pointer;
+    margin-left: auto;
+    margin-bottom: 20px;
+  }
+}
+@media only screen and (max-width:600px) {
+    #myimg{
+        display: none;
+    }
+}
+/* General styles */
+.review {
+    padding: 50px 0;
+}
+
+.heading {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+}
+
+.swiper-slide {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    border-radius: 10px;
+    transition: transform 0.3s;
+}
+
+.swiper-slide img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+}
+
+.swiper-slide h3 {
+    font-size: 1.5rem;
+    margin: 10px 0;
+}
+
+.swiper-slide p {
+    font-size: 1rem;
+    color: #777;
+    margin-bottom: 15px;
+}
+
+.stars i {
+    color: #fbc02d;
+}
+
+/* Hover effect */
+.swiper-slide:hover {
+    transform: scale(1.05);
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 1200px) {
+    .swiper-slide {
+        max-width: 80%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .heading {
+        font-size: 2rem;
+    }
+
+    .swiper-slide {
+        max-width: 90%;
+        padding: 15px;
+    }
+
+    .swiper-slide h3 {
+        font-size: 1.3rem;
+    }
+
+    .swiper-slide p {
+        font-size: 0.9rem;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .heading {
+        font-size: 1.8rem;
+    }
+
+    .swiper-slide {
+        max-width: 100%;
+        padding: 10px;
+    }
+
+    .swiper-slide h3 {
+        font-size: 1.2rem;
+    }
+
+    .swiper-slide p {
+        font-size: 0.8rem;
+    }
+}
+
+/* Additional styling for swiper pagination */
+.swiper-pagination {
+    position: relative;
+    bottom: 10px;
+    display: flex;
+    justify-content: center;
+}
+/* General Styles */
+.container_1 {
+    padding: 50px 0;
+}
+
+.accordion__wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+}
+
+.accordion__title {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.accordion {
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #fff;
+}
+
+.accordion__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    cursor: pointer;
+    background-color: #f1f1f1;
+    border-radius: 8px;
+}
+
+.accordion__question {
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.accordion__icon {
+    font-size: 1.5rem;
+    color: #333;
+}
+
+.accordion__content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+    padding: 0 15px;
+}
+
+.accordion__content p {
+    padding: 15px 0;
+    font-size: 1rem;
+    color: #666;
+}
+
+/* Expand accordion on active */
+.accordion.active .accordion__content {
+    max-height: 200px;
+    transition: max-height 0.4s ease-in;
+}
+
+.accordion.active .accordion__icon i {
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 768px) {
+    .accordion__title {
+        font-size: 1.6rem;
+    }
+
+    .accordion__question {
+        font-size: 1.1rem;
+    }
+
+    .accordion__icon {
+        font-size: 1.3rem;
+    }
+
+    .accordion__content p {
+        font-size: 0.95rem;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .accordion__wrapper {
+        padding: 10px;
+    }
+
+    .accordion__title {
+        font-size: 1.4rem;
+    }
+
+    .accordion__question {
+        font-size: 1rem;
+    }
+
+    .accordion__icon {
+        font-size: 1.2rem;
+    }
+
+    .accordion__content p {
+        font-size: 0.9rem;
+    }
+}
+/* General Styles */
+#contact {
+    padding: 50px 0;
+    background-color: #f9f9f9;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.contact-left,
+.contact-right {
+    flex: 1;
+    min-width: 300px;
+    margin: 20px;
+}
+
+.sub-title {
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.social-icon a {
+    margin-right: 15px;
+    font-size: 2rem;
+    color: #333;
+}
+
+.social-icon a:hover {
+    color: #007bff;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+form input,
+form textarea {
+    width: 100%;
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+form button {
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}
+
+#msg {
+    margin-top: 10px;
+    color: green;
+    font-size: 1rem;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 768px) {
+    .row {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .contact-left,
+    .contact-right {
+        max-width: 100%;
+        margin: 0;
+        padding: 20px;
+    }
+
+    .sub-title {
+        font-size: 1.8rem;
+        text-align: center;
+    }
+
+    .social-icon {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .sub-title {
+        font-size: 1.6rem;
+    }
+
+    form input,
+    form textarea {
+        font-size: 0.9rem;
+        padding: 8px;
+    }
+
+    form button {
+        font-size: 0.9rem;
+    }
+}
+
+    </style>
 </head>
 
 <body>
@@ -38,14 +472,15 @@
             <a href="login.html" class="sign-up">Login</a>
         </div>
     </header>
+    
     <!-- Home -->
-    <section class="home" id="home">
-        <div class="text">
-            <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
-            <p>Wherever you're going, there's a carpool that will<br>
+    <section class="home" id="home" >
+        <div class="text text-center" style="background-image: url(img/Car\ Website\ –\ 1@2x.png);">
+            <h1><br>Want to <span>Share</span>  or <span>Rent</span> <br>a cab.</h1>
+            <p>Wherever you're going,there's a carpool that will<br>
                 get you there for less.</p>
             <div class="carweb">
-                <img src="img/Car Website – 1@2x.png" alt="">
+                <img src="img/Car Website – 1@2x.png" alt="" id="myimg">
 
             </div>
         </div>
@@ -294,78 +729,79 @@ <h3>Emma Brown</h3>
 
      </section> -->
 
-    <section class="review" id="review">
-
-        <h1 class="heading"> Customer Reviews </h1>
-
-        <div class="swiper review-slider" data-aos="zoom-in">
-
-            <div class="swiper-wrapper">
-
-                <div class="swiper-slide slide">
-                    <img src="img/pic-1.png" alt="">
-                    <h3>Noah Lee</h3>
-                    <p>I recently used Cabrental for a weekend trip and was thoroughly impressed. The booking process was seamless, and the website was intuitive and easy to navigate. The car was clean and in excellent condition, and the pick-up and drop-off process was quick and hassle-free. The customer service was exceptional—friendly and helpful staff made the experience even better. Highly recommended!</p>
-                    <div class="stars">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star-half-alt"></i>
+     <section class="review" id="review">
+        <div class="row">
+            <h1 class="heading"> Customer Reviews </h1>
+    
+            <div class="swiper review-slider" data-aos="zoom-in">
+    
+                <div class="swiper-wrapper">
+    
+                    <div class="swiper-slide slide">
+                        <img src="img/pic-1.png" alt="">
+                        <h3>Noah Lee</h3>
+                        <p>I recently used Cabrental for a weekend trip and was thoroughly impressed. The booking process was seamless, and the website was intuitive and easy to navigate. The car was clean and in excellent condition, and the pick-up and drop-off process was quick and hassle-free. The customer service was exceptional—friendly and helpful staff made the experience even better. Highly recommended!</p>
+                        <div class="stars">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star-half-alt"></i>
+                        </div>
                     </div>
-                </div>
-
-                <div class="swiper-slide slide">
-                    <img src="img/pic-2.png" alt="">
-                    <h3>Sophia Rossi</h3>
-                    <p>I recently used Cabrental for a weekend getaway, and I couldn't be happier with the experience. The website is user-friendly, and I found the perfect car within minutes.</p>
-                    <div class="stars">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
+    
+                    <div class="swiper-slide slide">
+                        <img src="img/pic-2.png" alt="">
+                        <h3>Sophia Rossi</h3>
+                        <p>I recently used Cabrental for a weekend getaway, and I couldn't be happier with the experience. The website is user-friendly, and I found the perfect car within minutes.</p>
+                        <div class="stars">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
                     </div>
-                </div>
-
-                <div class="swiper-slide slide">
-                    <img src="img/pic-3.png" alt="">
-                    <h3>Olivia Davis</h3>
-                    <p>The booking process was straightforward, and I received a confirmation email immediately. When I arrived at the pick-up location, the staff was friendly and efficient. The car was clean, well-maintained, and exactly as described on the website.</p>
-                    <div class="stars">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star-full-alt"></i>
+    
+                    <div class="swiper-slide slide">
+                        <img src="img/pic-3.png" alt="">
+                        <h3>Olivia Davis</h3>
+                        <p>The booking process was straightforward, and I received a confirmation email immediately. When I arrived at the pick-up location, the staff was friendly and efficient. The car was clean, well-maintained, and exactly as described on the website.</p>
+                        <div class="stars">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star-full-alt"></i>
+                        </div>
                     </div>
-                </div>
-
-                <div class="swiper-slide slide">
-                    <img src="img/pic-4.png" alt="">
-                    <h3>Emma Brown</h3>
-                    <p>Returning the car was just as easy, and there were no hidden fees or unexpected charges. I will definitely be using Cabrental again for my future trips. Highly recommended!</p>
-                    <div class="stars">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
+    
+                    <div class="swiper-slide slide">
+                        <img src="img/pic-4.png" alt="">
+                        <h3>Emma Brown</h3>
+                        <p>Returning the car was just as easy, and there were no hidden fees or unexpected charges. I will definitely be using Cabrental again for my future trips. Highly recommended!</p>
+                        <div class="stars">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
                     </div>
+    
                 </div>
-
+    
+                <div class="swiper-pagination"></div>
+    
             </div>
-
-            <div class="swiper-pagination"></div>
-
         </div>
-
     </section>
+    
 
     <section class="faq" id="faq">
         <div class="container_1">
             <div class="accordion__wrapper">
-                <h1 class="accordian__title">Frequently Asked Question</h1>
+                <h1 class="accordion__title">Frequently Asked Questions</h1>
                 <br>
                 <div class="accordion">
                     <div class="accordion__header">
@@ -378,10 +814,10 @@ <h2 class="accordion__question">How do I book a cab?</h2>
                         <p class="accordion__answer">To book a cab, select your location, travel date, and departure time on the homepage, then follow the steps to complete your booking.</p>
                     </div>
                 </div>
-
+        
                 <div class="accordion">
                     <div class="accordion__header">
-                        <h2 class="accordion__question"> What services do you offer?</h2>
+                        <h2 class="accordion__question">What services do you offer?</h2>
                         <span class="accordion__icon">
                             <i id="accordion-icon" class="ri-add-line"></i>
                         </span>
@@ -390,7 +826,7 @@ <h2 class="accordion__question"> What services do you offer?</h2>
                         <p class="accordion__answer">We offer cab sharing and rental services for various locations with a range of vehicles to choose from.</p>
                     </div>
                 </div>
-
+        
                 <div class="accordion">
                     <div class="accordion__header">
                         <h2 class="accordion__question">How much does it cost to rent a cab?</h2>
@@ -402,7 +838,7 @@ <h2 class="accordion__question">How much does it cost to rent a cab?</h2>
                         <p class="accordion__answer">Rental costs vary depending on the vehicle and rental duration. Prices start at Rs.850 per day.</p>
                     </div>
                 </div>
-
+        
                 <div class="accordion">
                     <div class="accordion__header">
                         <h2 class="accordion__question">How do I contact customer support?</h2>
@@ -414,6 +850,7 @@ <h2 class="accordion__question">How do I contact customer support?</h2>
                         <p class="accordion__answer">For assistance, you can call our support line at 000-080-000-000 or use the contact form on our website.</p>
                     </div>
                 </div>
+        
                 <div class="accordion">
                     <div class="accordion__header">
                         <h2 class="accordion__question">Are there any hidden fees?</h2>
@@ -427,7 +864,7 @@ <h2 class="accordion__question">Are there any hidden fees?</h2>
                 </div>
             </div>
         </div>
-    </section>
+        
 
 
     <section class="contact us" id="contact us">
@@ -437,14 +874,12 @@ <h2 class="accordion__question">Are there any hidden fees?</h2>
                 <div class="row">
                     <div class="contact-left">
                         <h1 class="sub-title">Contact Me</h1>
-
                         <div class="social-icon">
                             <a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
                             <a href="#" target="_blank"><i class="fa-brands fa-twitter-square"></i></a>
                             <a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                             <a href="#" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
                         </div>
-
                     </div>
                     <div class="contact-right">
                         <form name="submit-to-google-sheet">
@@ -457,7 +892,8 @@ <h1 class="sub-title">Contact Me</h1>
                     </div>
                 </div>
             </div>
-
+        </div>
+        
 
     </section>
 
@@ -611,6 +1047,8 @@ <h2>Words from Our Clients <span class="highlight">Inspiring Testimonials of Sat
             });
         };
     </script>
+
+      
 </body>