Merge pull request #649 from Anou25/main

Modified the customer opinion section
khushi-joshi-05 · May 30, 2024 · d95856e · d95856e
2 parents cb2684a + 1f4d88b
commit d95856e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/Css-files/services.css b/Css-files/services.css
@@ -5,6 +5,35 @@
       color: rgb(138, 37, 37);
 
 }
+.section__title {
+    font-size: 4em;
+        font-weight: bold;
+        background: linear-gradient(90deg, rgb(138, 37, 37), rgb(237, 116, 116), rgb(138, 37, 37));
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: gradient-animation 3s infinite;
+}
+.section__title:hover {
+    border-bottom: 3px solid rgb(138, 37, 37);
+        /* Add bottom border on hover */
+        border-top: 3px solid rgb(138, 37, 37);
+        width: 50%;
+        margin-left: 370px;
+}
+
+ @keyframes gradient-animation {
+     0% {
+         background-position: 0% 50%;
+     }
+
+     50% {
+         background-position: 100% 50%;
+     }
+
+     100% {
+         background-position: 0% 50%;
+     }
+ }
 .head_container_service{
     height: fit-content;
 }
@@ -32,18 +61,30 @@
     color: white;
     transform: translateX(10px);
 }
+
 .testimonalsection{
     padding-top: 20px;
 }
+.fa-star, .fa-star-half-stroke {
+    color: goldenrod;
+}
 .testimonal__container{
     flex-wrap: wrap;
     justify-content: center;
 }
+.testimonal__title {
+    color: rgb(138, 37, 37);
+}
 .testimonal__card {
     position: relative;
     background-color: transparent;
     border-radius: 5px;
     margin: 0;
+
+}
+
+.testimonal__image:hover {
+    transform: translateY(10px);
 }
 .testimonal__swiper {
     background-color: white;
@@ -55,6 +96,9 @@
     width: 330px;
 
 }
+.testimonal__swiper:hover {
+    border-radius: 50%;
+}
 .testimonal__swiper > div {
     background-color: rgb(138, 37, 37);
     height: 33%;
@@ -63,7 +107,7 @@
 }
 .testimonal__swiper:hover > div {
     height: 200%;
-    border-radius: 0;
+    border-radius: 20%;
 }
 .testimonal__swiper * {
     transition: 0.3s ease-in-out;

diff --git a/Html-files/services.html b/Html-files/services.html
@@ -90,16 +90,17 @@ <h3>Meal Delivery Subscription</h3>
     <section class="service_container">
 
         <section class="testimonalsection" id="testimonal">
+
             <h2 class=section__title>
-                Customer Opinion
+                CUSTOMER  OPINION
             </h2>
-
+            
             <div class="testimonal__container">
                 <div class="testimonal__swiper">
                     <div>
                         <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">
+                                alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
                             <h2 class="testimonal__title">Riya Jain</h2>
                             <p class="testimonal__description">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem
@@ -121,7 +122,7 @@ <h2 class="testimonal__title">Riya Jain</h2>
                     <div>
                         <article class="testimonal__card">
                             <img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
-                                alt="" class="testimonal__image">
+                                alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
                             <h2 class="testimonal__title">Sudhanshu Sharma</h2>
                             <p class="testimonal__description">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem
@@ -143,7 +144,7 @@ <h2 class="testimonal__title">Sudhanshu Sharma</h2>
                     <div>
                         <article class="testimonal__card">
                             <img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg" alt=""
-                                class="testimonal__image">
+                                class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
                             <h2 class="testimonal__title">Angel Dravid</h2>
                             <p class="testimonal__description">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem
@@ -165,7 +166,7 @@ <h2 class="testimonal__title">Angel Dravid</h2>
                     <div>
                         <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">
+                                alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
                             <h2 class="testimonal__title">Priya Sharma</h2>
                             <p class="testimonal__description">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem