From ce55e37dffe559456e52e93a9fceb8c89d2da9f6 Mon Sep 17 00:00:00 2001
From: sau-mili <146661411+sau-mili@users.noreply.github.com>
Date: Sat, 10 Aug 2024 18:26:34 +0530
Subject: [PATCH] Testimonial Cards improved

---
 assets/css/test-style.css | 53 +++++++++++++++++++++++++++++++-
 index.html                | 64 +++++++++++++++++++++++++++++++--------
 2 files changed, 104 insertions(+), 13 deletions(-)

diff --git a/assets/css/test-style.css b/assets/css/test-style.css
index 0f87edd48..9a4b97031 100644
--- a/assets/css/test-style.css
+++ b/assets/css/test-style.css
@@ -48,19 +48,64 @@
   width: 330px;
   background-color: var(--seashell);
   height: 350px;
+  
+}
+
+.item-testimonial{
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 }
 
 .image-content {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  
+
+}
+.bio{
+  font-size: 12px;
+  margin: 15px 25px;
+  font-style: italic;
+  color:rgb(77, 33, 33);
+}
 
+body.dark-mode .bio{
+  color:aliceblue;
 }
 
 .image-content {
   padding: 25px 0;
 }
+.rows-icons{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap:15px !important;
+  width: 50%;
+}
+
+.fa-linkedin-in{
+  color:dodgerblue;
+}
+.fa-github-alt{
+  color:rgb(42, 0, 80);
+}
 
+.fa-instagram{
+  color:crimson;
+}
+
+body.dark-mode .fa-linkedin-in{
+  color:rgb(170, 218, 255);
+}
+
+body.dark-mode .fa-github-alt{
+  color:rgb(209, 184, 255);
+}
+body.dark-mode .fa-instagram{
+  color:rgb(253, 190, 217);
+}
 .card-image {
   height: 150px;
   width: 150px;
@@ -68,6 +113,7 @@
   background: #ffffff;
 }
 
+
 .card-image .card-img {
   height: 100%;
   width: 100%;
@@ -75,7 +121,12 @@
   border-radius: 50%;
   border: 4px solid hsl(357, 37%, 62%);
 }
-
+.flip-card-front{
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+}
+body.dark-mode .flip-card-front{
+  background: linear-gradient(black, #4f1919);
+}
 .flip-card-back {
   background-color: transparent !important;
   color: var(--old-rose) !important;
diff --git a/index.html b/index.html
index ccca5545c..614c42f39 100644
--- a/index.html
+++ b/index.html
@@ -3139,6 +3139,12 @@ <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
                   <img src="./assets/images/testimonials-4.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">Sonal K</h2>
+                <div class="bio">"I'm an avid reader who loves getting lost in the pages of a good book, always seeking new stories and perspectives."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
               </div>
 
               <div class="rating">
@@ -3171,6 +3177,12 @@ <h2 style="font-size: 20px;">Sonal K</h2>
                   <img src="./assets/images/testimonials-2.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">Prem Sampath</h2>
+                <div class="bio">"I'm passionate about reading, exploring new worlds & ideas through books, whether it's fiction or non-fiction."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
               </div>
 
               <div class="rating">
@@ -3202,15 +3214,22 @@ <h2 style="font-size: 20px;">Prem Sampath</h2>
                   <img src="./assets/images/testimonials-3.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">Aron Loes</h2>
-              </div>
-
-              <div class="rating">
+                <div class="bio">"Books are my escape; I relish the adventure of exploring new worlds and perspectives with every page I turn."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
+                <div class="rating">
                 <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>
           <div class="flip-card-back backs">
@@ -3234,15 +3253,22 @@ <h2 style="font-size: 20px;">Aron Loes</h2>
                   <img src="./assets/images/testimonials-1.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">B.Sharmila</h2>
-              </div>
-
-              <div class="rating">
+                <div class="bio">"I’m a book lover who enjoys immersing myself in different genres, always on the lookout for the next great story or thought-provoking read."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
+                <div class="rating">
                 <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>
           <div class="flip-card-back backs">
@@ -3265,15 +3291,22 @@ <h2 style="font-size: 20px;">B.Sharmila</h2>
                   <img src="./assets/images/testimonials-5.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">Jane Doe</h2>
-              </div>
-
-              <div class="rating">
+                <div class="bio">"Reading is my passion—I’m always seeking out the next compelling book to fuel my love for storytelling and knowledge."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
+                <div class="rating">
                 <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>
           <div class="flip-card-back backs">
@@ -3297,15 +3330,22 @@ <h2 style="font-size: 20px;">Jane Doe</h2>
                   <img src="./assets/images/testimonials-6.jpg" alt="" class="card-img">
                 </div>
                 <h2 style="font-size: 20px;">Maya Verma</h2>
-              </div>
-
-              <div class="rating">
+                <div class="bio">"I thrive on the thrill of reading, embracing every opportunity to delve into captivating narratives and diverse viewpoints."</div>
+                <div class="rows-icons">
+                  <i class="fa-brands fa-linkedin-in"></i>
+                  <i class="fa-brands fa-github-alt"></i>
+                  <i class="fa-brands fa-instagram"></i>
+                </div>
+                <div class="rating">
                 <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>
           <div class="flip-card-back backs">