From de4e27c5fd2b4d7f24cf0050cfeb1bbf8d49405c Mon Sep 17 00:00:00 2001
From: Soni Dhruv <dhruvrsoni04@gmail.com>
Date: Sun, 16 Jun 2024 10:32:17 +0530
Subject: [PATCH] added global review card

---
 index.html | 175 ++++++++++++++++++++++++++++++++++-------------------
 style.css  |  99 ++++++++++++++++++++++++++++++
 2 files changed, 212 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index e636b44a..ef3fef1d 100644
--- a/index.html
+++ b/index.html
@@ -314,84 +314,135 @@ <h3>Juices</h3>
         </div>
     </section>
 
-    <section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170"
-        data-aos-easing="ease-in-out">
+    <section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <h2 class="tagline pt-5"> Our Happy Clients </h2>
         <p class="description">
             At Foodie, we pride ourselves on delivering delicious meals & exceptional service. Don't just take our word
             for it - hear what our satisfied customers have to say!
         </p>
-        <div id="testimonials" class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-inner">
-                <div class="carousel-item active">
-                    <div class="img-box my-5">
-                        <img src="Images/testimonials/client1.jpg" alt="">
-                    </div>
-                    <div class="carousel-caption">
-                        <h3 class="overview">Matt Gilbert</h3>
-                        <p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and
-                            delivered right on time. My go-to for all my meals!</p>
-                        <div class="star-rating">
-                            <ul class="list-inline d-flex justify-content-center">
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
-                            </ul>
+        <div class="row" style="padding: 20px;">
+            <!-- Global Review Card -->
+            <div class="col-md-4">
+                <div class="global-review-card">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Reviews And Ratings</h5>
+                            <div class="rating"  style="margin-top: 10px;">
+                                <span class="rating-value">4.2</span>
+                                <div class="" style="margin-left: 20px;">
+                                    <span class="stars">
+                                        <i class="fa-solid fa-star"></i>
+                                        <i class="fa-solid fa-star"></i>
+                                        <i class="fa-solid fa-star"></i>
+                                        <i class="fa-solid fa-star"></i>
+                                        <i class="fa-regular fa-star"></i>
+                                    </span>
+                                    <p class="rating-count">Based on 456 Ratings</p>
+                                </div>
+                            </div>
+
+                            <hr>
+                            <div class="text-rating">
+                                <p>Reliability</p>
+                                 <p>4.5</p></div>
+                            <div class="progress mb-2">
+                                <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="4.5" aria-valuemin="0" aria-valuemax="5"></div>
+                            </div>
+                            <div class="text-rating">
+                                <p>Payout Rating</p>
+                                 <p>4.8</p></div>
+                            <div class="progress mb-2">
+                                <div class="progress-bar" role="progressbar" style="width: 96%" aria-valuenow="4.8" aria-valuemin="0" aria-valuemax="5"></div>
+                            </div>
+                            <div class="text-rating">
+                                <p>Positive Solution</p>
+                                 <p>4.5</p></div>
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="4.5" aria-valuemin="0" aria-valuemax="5"></div>
+                            </div>
                         </div>
+
+                        <p class="summery" style="margin-left: 20px; color: rgb(95, 95, 255);">Show summery</p>
                     </div>
                 </div>
-                <div class="carousel-item">
-                    <div class="img-box my-5">
-                        <img src="Images/testimonials/client2.jpg" alt="">
-                    </div>
-                    <div class="carousel-caption">
-                        <h3 class="overview">John Doe</h3>
-                        <p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and
-                            the delivery service is incredibly reliable</p>
-                        <div class="star-rating">
-                            <ul class="list-inline d-flex justify-content-center">
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
+            </div>
+            <!-- Carousel -->
+            <div class="col-md-8">
+                <div id="testimonials" class="carousel slide" data-bs-ride="carousel">
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <div class="img-box my-5">
+                                <img src="Images/testimonials/client1.jpg" alt="">
+                            </div>
+                            <div class="carousel-caption">
+                                <h3 class="overview">Matt Gilbert</h3>
+                                <p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and
+                                    delivered right on time. My go-to for all my meals!</p>
+                                <div class="star-rating">
+                                    <ul class="list-inline d-flex justify-content-center">
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
-                <div class="carousel-item">
-                    <div class="img-box my-5">
-                        <img src="Images/testimonials/client3.jpg" alt="">
-                    </div>
-                    <div class="carousel-caption">
-                        <h3 class="overview">Laren Green</h3>
-                        <p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my
-                            dining experience so much more convenient.</p>
-                        <div class="star-rating">
-                            <ul class="list-inline d-flex justify-content-center">
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-solid fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
-                                <li><i class="fa-regular fa-star"></i></li>
-                            </ul>
+                        <div class="carousel-item">
+                            <div class="img-box my-5">
+                                <img src="Images/testimonials/client2.jpg" alt="">
+                            </div>
+                            <div class="carousel-caption">
+                                <h3 class="overview">John Doe</h3>
+                                <p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and
+                                    the delivery service is incredibly reliable</p>
+                                <div class="star-rating">
+                                    <ul class="list-inline d-flex justify-content-center">
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <div class="img-box my-5">
+                                <img src="Images/testimonials/client3.jpg" alt="">
+                            </div>
+                            <div class="carousel-caption">
+                                <h3 class="overview">Laren Green</h3>
+                                <p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my
+                                    dining experience so much more convenient.</p>
+                                <div class="star-rating">
+                                    <ul class="list-inline d-flex justify-content-center">
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-solid fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                        <li><i class="fa-regular fa-star"></i></li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <!-- Carousel controls-->
+                    <button class="carousel-control-prev" data-bs-target="#testimonials" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Previous</span>
+                    </button>
+                    <button class="carousel-control-next" data-bs-target="#testimonials" data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Next</span>
+                    </button>
                 </div>
             </div>
-            <!-- Carousel controls-->
-            <button class="carousel-control-prev" data-bs-target="#testimonials" data-bs-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" data-bs-target="#testimonials" data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-            </button>
         </div>
     </section>
 
+    
+
     <section class="picture-gallery" data-aos="fade-in" data-aos-duration="2000">
         <div class="row g-0">
             <div class="col-3">
diff --git a/style.css b/style.css
index c8e2e686..cc02becb 100644
--- a/style.css
+++ b/style.css
@@ -599,3 +599,102 @@ body{
       transform: rotate(360deg);
   }
 }
+
+.testimonial-section {
+  padding: 2rem;
+  background-color: #f9f9f9;
+}
+
+.testimonial-tagline {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.testimonial-description {
+  text-align: center;
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.global-review-card .card {
+  border: none;
+  background: #ffffff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.global-review-card .card-body {
+  text-align: start;
+}
+
+.rating-value {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.stars {
+  color: #f8ce0b;
+  font-size: 1.5rem;
+}
+
+.rating{
+  display: flex;
+  justify-content: start;
+}
+
+.rating-count {
+  font-size: 0.9rem;
+  color: #888;
+}
+
+.progress {
+  height: 1rem;
+  background: #e9ecef;
+}
+
+.progress-bar {
+  background: #17a2b8;
+  line-height: 1rem;
+  font-size: 0.75rem;
+  text-align: left;
+  padding-left: 0.5rem;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.img-box img {
+  width: 100%;
+  border-radius: 50%;
+}
+
+.overview {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.testimonial-text {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+
+.star-rating .list-inline {
+  padding-left: 0;
+  margin: 0;
+}
+
+.star-rating .list-inline li {
+  color: #f8ce0b;
+  font-size: 1.5rem;
+}
+
+.text-rating{
+  display: flex;
+  justify-content: space-between;
+}
+
+.summery:hover {
+  cursor: pointer;
+}
\ No newline at end of file