From b64bc63bd653c5dd61871ba605c9ad933884b598 Mon Sep 17 00:00:00 2001
From: Kajal Mehta <mehtakajal796@gmail.com>
Date: Wed, 23 Oct 2024 14:24:43 +0530
Subject: [PATCH] made customer opinions in slide format

Issue resolved: #639
---
 Html-files/services.html | 261 ++++++++++++++++++++++-----------------
 1 file changed, 149 insertions(+), 112 deletions(-)

diff --git a/Html-files/services.html b/Html-files/services.html
index 720e0c41..bdd69f10 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -457,123 +457,160 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
         </div>
     </div>
         </div>
+<!-- Add Swiper.js CDN for slider functionality -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
-        <section class="service_container">
-
-            
-                <h2 class=section__title 
-                  style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
-                <!-- <div class="main-cards"> -->
-                <div class="testimonal__container">
-                    <div class="testimonal__swiper">
-                        <!-- <div class="column"> -->
-                        <div class="cards">
-                            <article class="testimonal__card">
-                                <img
-                                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww"
-                                    alt class="testimonal__image">
-                                <h2 class="testimonal__title"
-                                    style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Riya
-                                    Jain</h2>
-                                <p class="testimonal__description"
-                                    style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
-                                    Wide selection of items.It's nice website
-                                    for vintage collection lovers.
-                                </p>
-
-                                <div class="testimonal__stars"
-                                    style="color: yellow;">
-                                    <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-solid fa-star-half-stroke"></i>
-                                </div>
-                            </article>
-                        </div>
+<section class="service_container">
+    <h2 class="section__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
+    
+    <div class="swiper-container">
+        <div class="swiper-wrapper">
+            <!-- Testimonial 1 -->
+            <div class="swiper-slide">
+                <article class="testimonial__card">
+                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww" 
+                        width="400px"  height="auto" alt="Photo of Riya Jain" class="testimonial__image">
+                    <h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Riya Jain</h2>
+                    <p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
+                        Wide selection of items. It's a nice website for vintage collection lovers.
+                    </p>
+                    <div class="testimonial__stars" style="color: yellow;">
+                        <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-solid fa-star-half-stroke"></i>
                     </div>
-                    <div class="testimonal__swiper">
-                        <div class="cards">
-                            <article class="testimonal__card">
-                                <img
-                                    src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
-                                    alt class="testimonal__image">
-                                <h2 class="testimonal__title"
-                                    style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Sudhanshu
-                                    Sharma</h2>
-                                <p class="testimonal__description"
-                                    style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
-                                    Must purchase the items in the website. Very Nice, Good Products!
-                                </p>
-
-                                <div class="testimonal__stars"
-                                    style="color: yellow;">
-                                    <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-solid fa-star-half-stroke"></i>
-                                </div>
-                            </article>
-                        </div>
+                </article>
+            </div>
+            
+            <!-- Testimonial 2 -->
+            <div class="swiper-slide">
+                <article class="testimonial__card">
+                    <img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg" 
+                    width="400px"  height="auto" alt="Photo of Sudhanshu Sharma" class="testimonial__image">
+                    <h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Sudhanshu Sharma</h2>
+                    <p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
+                        Must purchase the items on the website. Very nice, good products!
+                    </p>
+                    <div class="testimonial__stars" style="color: yellow;">
+                        <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-solid fa-star-half-stroke"></i>
                     </div>
-                </div>
-                <!-- <div class="main-cards"> -->
-                <div class="testimonal__container upper">
-                    <div class="testimonal__swiper">
-                        <!-- <div class="column-2"> -->
-                        <div class="cards">
-                            <article class="testimonal__card">
-                                <img
-                                    src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
-                                    alt class="testimonal__image">
-                                <h2 class="testimonal__title"
-                                    style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Angel
-                                    Dravid</h2>
-                                <p class="testimonal__description"
-                                    style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
-                                    Good delivery and offers.Good Service.Must
-                                    checkout.
-                                </p>
-
-                                <div class="testimonal__stars"
-                                    style="color: yellow;">
-                                    <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-solid fa-star-half-stroke"></i>
-                                </div>
-                            </article>
-                        </div>
+                </article>
+            </div>
+
+            <!-- Testimonial 3 -->
+            <div class="swiper-slide">
+                <article class="testimonial__card">
+                    <img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg" 
+                    width="400px"  height="auto"   alt="Photo of Angel Dravid" class="testimonial__image">
+                    <h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Angel Dravid</h2>
+                    <p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
+                        Good delivery and offers. Good service. Must checkout.
+                    </p>
+                    <div class="testimonial__stars" style="color: yellow;">
+                        <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-solid fa-star-half-stroke"></i>
                     </div>
-                    <div class="testimonal__swiper">
-                        <div class="cards">
-                            <article class="testimonal__card">
-                                <img
-                                    src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B"
-                                    alt class="testimonal__image">
-                                <h2 class="testimonal__title"
-                                    style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Priya
-                                    Sharma</h2>
-                                <p class="testimonal__description"
-                                    style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
-                                    Nice offer above $5000.The items are very
-                                    delicious.
-                                </p>
-
-                                <div class="testimonal__stars"
-                                    style="color: yellow;">
-                                    <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-solid fa-star-half-stroke"></i>
-                                </div>
-                            </article>
-                        </div>
+                </article>
+            </div>
+
+            <!-- Testimonial 4 -->
+            <div class="swiper-slide">
+                <article class="testimonial__card">
+                    <img src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B" 
+                    width="400px"  height="auto"  alt="Photo of Priya Sharma" class="testimonial__image">
+                    <h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Priya Sharma</h2>
+                    <p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
+                        Nice offer above $5000. The items are very delicious.
+                    </p>
+                    <div class="testimonial__stars" style="color: yellow;">
+                        <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-solid fa-star-half-stroke"></i>
                     </div>
-                </div>
+                </article>
+            </div>
+        </div>
+
+        <!-- Add Swiper navigation buttons -->
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+    </div>
+</section>
+
+<!-- Custom styles to adjust Swiper navigation buttons -->
+<style>
+   
+.testimonial__content {
+    display: flex;
+    align-items: center;
+    gap: 30px; 
+}
+
+
+.testimonial__image {
+    width: 200px; 
+    height: 200px;
+    border-radius: 100%; 
+    object-fit: cover;
+    margin-left: 39rem;
+}
+
+
+.testimonial__title {
+   text-align: center;
+}
+.testimonial__description {
+   text-align: center;
+}
+.testimonial__stars {
+    text-align: center;
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+    top: 105%; 
+    transform: translateY(-50%); 
+    color: black; 
+}
+.swiper-button-prev {
+    left: 400px;
+}
+.swiper-button-next {
+    right: 400px;
+}
+
+.swiper-button-next::after,
+.swiper-button-prev::after {
+    font-size: 40px; 
+}
+</style>
+
+<!-- Swiper.js initialization script -->
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        loop: true,
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+    });
+</script>
+
+
 
             <div class="second_cont" style="font-family: Garamond;">
                 <div class="deals">