Update index.html and style.css

index.html

@@ -44,11 +44,16 @@
     <link rel="stylesheet" href= "cookie-popup.css">
     <link rel="preconnect" href= "https://fonts.googleapis.com" />
     <link rel="preconnect" href= "https://fonts.gstatic.com" crossorigin />
-
+    <link rel="stylesheet" href="testimonial.css" />s
     <link
       href= "https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
       rel= "stylesheet"
     />
+    <link
+    href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
+    rel="stylesheet"
+/>
+
     <link rel="icon" href="/icons/airplane.svg" />
     <link
       rel= "stylesheet"
@@ -2605,45 +2610,41 @@ <h2>Thank You!</h2>
   <section id="testimonials" class="testimonials-section">
     <h2 class="testimonials-heading"  style="color: rgba(255, 255, 248, 0.953)">Testimonials</h2>
 
-    <div class="testimonials-container">
-      <div class="header1 test">
-      <figure class="snip1533">
-        <figcaption>
-          <blockquote>
-            <p>It made solo travel a breeze! I met amazing companions and discovered hidden gems.</p>
-          </blockquote>
-          <h3>Wisteria Ravenclaw</h3>
-          <h4>Traveller</h4>
-        </figcaption>
-      </figure>
+    <div class="section_grid">
+      <div class="section_card">
+          <span><i class="ri-double-quotes-l"></i></span>
+          <h4>Love the Journey</h4>
+          <p>
+            "My trip to Bali was a dream come true, thanks to Wanderlust Travel! From the easy booking process to the incredible recommendations, everything was seamless. The guided tour through Ubud's rice terraces and the sunset at Tanah Lot were unforgettable experiences. I can't wait to plan my next adventure with them!"
+          </p>
+          <img src="OIP (8).jpeg" alt="user">
+          <div class="ratings">★★★★★</div>
+          <h5>Allan Collins</h5>
+          <h6>Traveller</h6>
       </div>
-      <div class="header2 test">
-      <figure class="snip1533">
-
-        <figcaption>
-          <blockquote>
-            <p>Finding the perfect travel group was so easy with Buddy Trail. Unforgettable trips, hassle-free planning!
-            </p>
-          </blockquote>
-          <h3>Ursula Gurnmeister</h3>
-          <h4>Traveller</h4>
-        </figcaption>
-      </figure>
-    </div>
-    <div class="header1 test">
-      <figure class="snip1533">
-
-        <figcaption>
-          <blockquote>
-            <p>I found great travel buddies for my Europe trip! The platform is intuitive and made my adventure even
-              better. </p>
-          </blockquote>
-          <h3>Ingredia Nutrisha</h3>
-          <h4>Traveller</h4>
-        </figcaption>
-      </figure></div>
-    </div>
-  </section>
+      <div class="section_card">
+          <span><i class="ri-double-quotes-l"></i></span>
+          <h4>Excellent</h4>
+          <p>
+            "Exploring the Swiss Alps with Alpine Adventures was the highlight of my year. Their attention to detail and personalized itinerary made the trip perfect. The accommodations were top-notch, and the local guides provided rich insights into Swiss culture. I highly recommend them to anyone looking for an extraordinary travel experience."
+          </p>
+          <img src="OIP (7).jpeg" alt="user">
+          <div class="ratings">★★★★★</div>
+          <h5>Lucas Rodriguez</h5>
+          <h6>Traveller</h6>
+      </div>
+      <div class="section_card">
+          <span><i class="ri-double-quotes-l"></i></span>
+          <h4>Efficient and reliable</h4>
+          <p>
+            "WanderWorld Travel made our family vacation to Japan an absolute delight. They curated a perfect mix of cultural experiences and kid-friendly activities. Visiting the temples in Kyoto and the bustling streets of Tokyo was a magical journey. Their 24/7 customer support was incredibly helpful. Highly recommended for families!"
+          </p>
+          <img src="OIP (5).jpeg" alt="user">
+          <div class="ratings">★★★★★</div>
+          <h5>Isabella Nguyen</h5>
+          <h6>Traveller</h6>
+      </div>
+  </div>
 
   <section id="reviews" class="reviews-section">
     <div class="review">

style.css

@@ -3056,3 +3056,178 @@ body {
   border-radius: 50%; /* Optional: make it circular */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: shadow */
 }
+/* Testimonials */
+:root{
+  --primary-color:#1a365d;
+  --secondary-color:#e8e8e8;
+  --text-dark:#666;
+  --text-light:#ffffff;
+  --white:whitesmoke;
+  --gradient: linear-gradient(135deg, #00467f 0%, #a0c4ff 100%);
+}
+*{
+  padding:0;
+  margin:0;
+  box-sizing: border-box;
+}
+body{
+ font-family: "Poppins",sans-serif; 
+ background-color: var(--secondary-color);
+}
+.section_container{
+  max-width: 1200px;
+  margin: auto;
+  padding: 2rem 1rem;
+  text-align: center;;
+}
+.section_container h2{
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+.section_container h1{
+  position: relative;
+  margin-bottom: 2rem;
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.section_container h1 ::after{
+  position:absolute;
+  content: "";
+  left: 50%;
+  bottom:0;
+  transform: translateX(-50%);
+  height: 2px ;
+  width: 5rem;
+  background-color: var(--primary-color);
+}
+.section_grid{
+ display: grid;
+ grid-template-columns: repeat(3,1fr);
+ gap: 2rem;
+}
+.section_card{
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  padding:5rem 2rem 2rem;
+  background-color: var(--white);
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+  transition: 0.3s;
+  animation: fadeIn 1s ease-in-out 1;
+   background-image: var(--gradient);
+}
+.section_card::before{
+  position: absolute;
+  content:"" ;
+  top:0;
+  left: 0;
+  transform: translate(-50% ,-50%);
+  width: 50%;
+  aspect-ratio: 1;
+  border-radius:100%;
+  background-color: var(--primary-color);
+  z-index: -1;
+  transition: 0.5s;
+}
+
+.section_card span{
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 1rem;
+  font-size: 3rem;
+  color: var(--white);
+}
+
+.section_card h4{
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--primary-color);
+  transition: 0.3s;
+  margin-left: 6rem;
+}
+
+
+.section_card p{
+  margin-bottom: 2rem;
+  color: var(--text-light);
+  transition: 0.3s;
+}
+
+.section_card img{
+  margin-bottom: 1rem;
+  max-width: 100px;
+  border-radius: 100%;
+  border: 2px solid var(--primary-color);
+  transition: 0.3s;
+  margin-left: 12rem;
+}
+
+.section_card h5{
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--primary-color);
+  transition:0.3s;
+  margin-left: 12rem;
+}
+
+.section_card h6{
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--text-light);
+  transition: 0.3s;
+  margin-left: 14rem;
+}
+.section_card:hover::before{
+  width: 480%;
+}
+.ratings {
+  color: #f1c40f;
+  font-size: 1.2rem;
+ margin-left: 14rem;
+}
+
+
+
+
+
+.section_card:hover :is(h4 ,h5){
+  color:var(--white);
+}
+
+.section_card:hover :is(p,h6){
+  color: var(--secondary-color);
+}
+
+.section_card:hover img{
+  border-color:var(--white);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.section_card:hover {
+  animation: float 3s ease-in-out infinite;
+}