Merge pull request #24 from KavyaBS123/master

added review section with hovering effect
07sumit1002 · Jun 21, 2024 · 21df5b6 · 21df5b6
2 parents e2e488f + 2ae0514
commit 21df5b6
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 2 deletions.
diff --git a/download.jpeg b/download.jpeg
diff --git a/images (1).jpeg b/images (1).jpeg
diff --git a/images.jpeg b/images.jpeg
diff --git a/index.html b/index.html
@@ -161,7 +161,43 @@ <h2>Rs.850 | Rs.850 <span>/day</span></h2>
                 </div>
             </div>
         </section>
-        <!-- About -->
+
+        <section id="testimonials">
+            <div class="container">
+              <h2>Words from Our Clients <span>Inspiring Testimonials of Satisfaction</span></h2>
+              <div class="reviews">
+                <div class="review">
+                  <div class="review-content">
+                    <p>Using Cab Rental has made my life so much easier. The service is top-notch and always reliable.</p>
+                    <p class="review-author">- Alex</p>
+                  </div>
+                  <div class="review-image">
+                    <img src="images (1).jpeg" alt="Alex">
+                  </div>
+                </div>
+                <div class="review">
+                  <div class="review-content">
+                    <p>The best cab rental service I’ve ever used! The drivers are friendly and always on time.</p>
+                    <p class="review-author">- Jordan</p>
+                  </div>
+                  <div class="review-image">
+                    <img src="download.jpeg" alt="Jordan">
+                  </div>
+                </div>
+                <div class="review">
+                  <div class="review-content">
+                    <p>Excellent service! The booking process is seamless, and the cabs are always clean and comfortable.</p>
+                    <p class="review-author">- Taylor</p>
+                  </div>
+                  <div class="review-image">
+                    <img src="images.jpeg" alt="Taylor">
+                  </div>
+                </div>
+              </div>
+              <button class="view-all">View All</button>
+            </div>
+          </section>
+            <!-- About -->
         <section class="about" id="about">
             <div class="heading">
                 <span>About Us</span>

diff --git a/style.css b/style.css
@@ -525,7 +525,119 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-}
+}#testimonials {
+    padding: 50px 0;
+    background-color: #fff;
+    text-align: center;
+  }
+
+  #testimonials .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  #testimonials h2 {
+    font-size: 2.5em;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  #testimonials h2 span {
+    color: #f74c4c;
+  }
+
+  .reviews {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .review {
+    background-color: #f0f0f0;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 350px;
+    overflow: hidden;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+
+  .review:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  }
+
+  .review-content {
+    padding: 20px;
+    background-color: #fff;
+    text-align: center;
+  }
+
+  .review-content p {
+    margin: 0 0 10px;
+    font-size: 1em;
+    color: #666;
+  }
+
+  .review-content .review-author {
+    color: #333;
+    font-weight: bold;
+  }
+
+  .review-image {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+  }
+
+  .review-image img {
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+  }
+
+  .view-all {
+    background-color: #f74c4c;
+    color: #fff;
+    border: none;
+    padding: 15px 30px;
+    margin-top: 10px;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .view-all:hover {
+    background-color: #d94343;
+  }
+
+  @media (max-width: 768px) {
+    .reviews {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .review {
+      width: 80%;
+      max-width: none;
+    }
+
+    .review-content {
+      padding: 15px;
+    }
+
+    .review-image img {
+      width: 60px;
+      height: 60px;
+    }
+  }
+
 
 footer {
     background-color: #e6e7e9;