modified banner images.

assets/css/style.css

@@ -8401,4 +8401,29 @@ Pavigation styling
 
 .cs_hero.cs_style_2 .cs_animated_text .cs_text_light {
   display: none;
+}
+
+.cs_category.cs_style_1 .cs_category_btn {
+  background: #07070778;
+}
+
+.about-section {
+  background-image: url(../img/saree/sareebg.avif);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.pure-kanchi-section a img {
+  transition: transform 1.5s ease;
+  /* transform-origin: center center; */
+  width: 100%;
+  height: auto;
+}
+
+.pure-kanchi-section a {
+  overflow: hidden;
+}
+
+.pure-kanchi-section a:hover img {
+  transform: scale(1.1);
 }

index.html

@@ -96,90 +96,62 @@
   </header>
   <div class="cs_height_80 cs_height_lg_80"></div>
   <!-- End header -->
+
+  <!-- banner section starts -->
+  <!-- banner section starts -->
   <!-- Start hero -->
   <section class="container-fluid">
     <div class="cs_slider position-relative">
       <div class="cs_slider_container" data-autoplay="1" data-loop="1" data-speed="700" data-center="0"
         data-slides-per-view="1" data-fade-slide="1">
-        <div class="cs_slider_wrapper slick-initialized slick-slider">
-          <div class="slick-list draggable">
-            <div class="slick-track" style="opacity: 1; width: 4182px;">
-              <div class="slick-slide" data-slick-index="0" aria-hidden="true"
-                style="width: 1394px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 700ms ease 0s;">
-                <div>
-                  <div class="slick_slide_in" style="width: 100%; display: inline-block;">
-                    <div class="cs_hero cs_style_2 position-relative">
-                      <div class="cs_hero_left">
-                        <div class="cs_hero_text">
-                          <h4 class="cs_hero_title_mini cs_fs_28">Up to 50% Off</h4>
-                          <h1 class="cs_hero_title cs_fs_67 cs_bold">Elegant men collection in summer season</h1>
-                          <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
-                        </div>
-                      </div>
-                      <div class="cs_hero_right">
-                        <div class="cs_hero_thumb"><img src="assets/img/saree/saree1.jpg" alt="Thumb"></div>
-                        <div class="cs_animated_text position-absolute">
-                          <img src="assets/img/logo.png" alt="Text Image">
-                          <span class="cs_text_light cs_accent_bg"></span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+        <div class="cs_slider_wrapper">
+          <div class="slick_slide_in">
+            <div class="cs_hero cs_style_2 position-relative">
+              <div class="cs_hero_left">
+                <div class="cs_hero_text">
+                  <h4 class="cs_hero_title_mini cs_fs_28">Up to 50% Off</h4>
+                  <h1 class="cs_hero_title cs_fs_67 cs_bold">Timeless Elegance, Pure Kanchi Silk.</h1>
+                  <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
                 </div>
               </div>
-              <div class="slick-slide" data-slick-index="1" aria-hidden="true"
-                style="width: 1394px; position: relative; left: -1394px; top: 0px; z-index: 998; opacity: 0; transition: opacity 700ms ease 0s;">
-                <div>
-                  <div class="slick_slide_in" style="width: 100%; display: inline-block;">
-                    <div class="cs_hero cs_style_2 position-relative">
-                      <div class="cs_hero_left">
-                        <div class="cs_hero_text">
-                          <h4 class="cs_hero_title_mini cs_fs_28">Up to 20% Off</h4>
-                          <h1 class="cs_hero_title cs_fs_67 cs_bold">Elegant woman collection in summer</h1>
-                          <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
-                        </div>
-                      </div>
-                      <div class="cs_hero_right">
-                        <div class="cs_hero_thumb"><img src="assets/img/saree/saree1.jpg" alt="Thumb"></div>
-                        <div class="cs_animated_text position-absolute">
-                          <img src="assets/img/logo.png" alt="Text Image">
-                          <span class="cs_text_light cs_accent_bg"></span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+              <div class="cs_hero_right">
+                <div class="cs_hero_thumb"><img src="assets/img/saree/slide-1.jpeg" alt="Thumb"></div>
+              </div>
+            </div>
+          </div>
+          <div class="slick_slide_in">
+            <div class="cs_hero cs_style_2 position-relative">
+              <div class="cs_hero_left">
+                <div class="cs_hero_text">
+                  <h4 class="cs_hero_title_mini cs_fs_28">Up to 20% Off</h4>
+                  <h1 class="cs_hero_title cs_fs_67 cs_bold">Experience Luxury, Embrace Tradition.</h1>
+                  <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
                 </div>
               </div>
-              <div class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false"
-                style="width: 1394px; position: relative; left: -2788px; top: 0px; z-index: 999; opacity: 1;">
-                <div>
-                  <div class="slick_slide_in" style="width: 100%; display: inline-block;">
-                    <div class="cs_hero cs_style_2 position-relative">
-                      <div class="cs_hero_left">
-                        <div class="cs_hero_text">
-                          <h4 class="cs_hero_title_mini cs_fs_28">Up to 10% Off</h4>
-                          <h1 class="cs_hero_title cs_fs_67 cs_bold">Children collection in winter season</h1>
-                          <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
-                        </div>
-                      </div>
-                      <div class="cs_hero_right">
-                        <div class="cs_hero_thumb"><img src="assets/img/saree/saree1.jpg" alt="Thumb"></div>
-                        <div class="cs_animated_text position-absolute">
-                          <img src="assets/img/logo.png" alt="Text Image">
-                          <span class="cs_text_light cs_accent_bg"></span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+              <div class="cs_hero_right">
+                <div class="cs_hero_thumb"><img src="assets/img/saree/slide-2.jpeg" alt="Thumb"></div>
+              </div>
+            </div>
+          </div>
+          <div class="slick_slide_in">
+            <div class="cs_hero cs_style_2 position-relative">
+              <div class="cs_hero_left">
+                <div class="cs_hero_text">
+                  <h4 class="cs_hero_title_mini cs_fs_28">Up to 10% Off</h4>
+                  <h1 class="cs_hero_title cs_fs_67 cs_bold">Indulge in Silk, Define Sophistication.</h1>
+                  <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">See Collection</a>
                 </div>
               </div>
+              <div class="cs_hero_right">
+                <div class="cs_hero_thumb"><img src="assets/img/saree/slide-13.jpeg" alt="Thumb"></div>
+              </div>
             </div>
           </div>
         </div>
         <!-- <div class="cs_pagingInfo cs_style_1">iifn</div> -->
       </div>
       <div class="cs_slides_numbers" style="display: block;">
-        <span class="active">03</span><span class="cs_slide_seperator"> / </span><span class="cs_total_slide">03</span>
+        <span class="active">01</span><span class="cs_slide_seperator"> / </span><span class="cs_total_slide"></span>
       </div>
     </div>
   </section>
@@ -741,52 +713,95 @@
     <div class="cs_height_134 cs_height_lg_80"></div>
   </section>
   <!-- End Featured Items -->
-  <div class="row cs_gap_y_24">
-    <div class="col-sm-6">
-      <div class="cs_category cs_style_1">
-        <a href="#" class="cs_category_thumb position-relative">
-          <img src="assets/img/saree/saree11.jpg" alt="Category Image" class="w-100">
-          <span class="cs_category_btn">
-            <span>Soft Silk Sarees</span>
-            <span><i class="fa-solid fa-arrow-right"></i></span>
-          </span>
-        </a>
+  <!-- start features section -->
+  <section>
+    <div class="container my-5 py-md-5">
+      <div class="row">
+        <div class="col-md-6 pe-0 text-end">
+          <img src="./assets/img/history.jpg" alt="" class="img-fluid rounded-start-5">
+        </div>
+        <div class="col-md-6 d-flex flex-column justify-content-center px-5" style="
+    background: #665f5d;
+">
+          <h2>The History of Silk Weaving and Sarees in India</h2>
+          <p class="text-light">The history of silk weaving and sarees in India dates back thousands of years, woven
+            intricately into the
+            cultural fabric of the nation. Silk, known as "Resham" in Hindi, has been a symbol of luxury, elegance, and
+            tradition. The evolution of sarees and silk weaving in India is a tale of craftsmanship, heritage, and
+            artistic
+            expression.</p>
+          <div>
+            <a href="#" class="cs_btn cs_style_1 cs_fs_16 cs_medium">Read More</a>
+          </div>
+        </div>
       </div>
     </div>
-    <div class="col-sm-6">
-      <div class="cs_category cs_style_1">
-        <a href="#" class="cs_category_thumb position-relative">
-          <img src="assets/img/saree/saree12.jpg" alt="Category Image" class="w-100">
-          <span class="cs_category_btn">
-            <span>Silk Sarees</span>
-            <span><i class="fa-solid fa-arrow-right"></i></span>
-          </span>
-        </a>
+  </section>
+  <!-- start features section -->
+  <section>
+    <div class="text-center mb-4">
+      <h2 class="text-center">Explore our latest<span class="cs_card_title cs_bold text-center text-warning"> PURE
+          KANCHI
+        </span>collection</h2>
+      <div class="d-flex justify-content-center">
+        <h5 class="w-75 text-center mx-md-5 px-md-5 fw-normal">Elevate your style with the unparalleled grace and
+          sophistication of our PURE KANCHI collection, meticulously curated to adorn you with unmatched beauty and
+          grace. Explore the epitome of opulence and refinement, and immerse yourself in the legacy of Kanchipuram silk
+          with our latest collection.</h5>
       </div>
+
     </div>
-    <div class="col-sm-6">
-      <div class="cs_category cs_style_1">
-        <a href="#" class="cs_category_thumb position-relative">
-          <img src="assets/img/saree/saree13.jpg" alt="Category Image" class="w-100">
-          <span class="cs_category_btn">
-            <span>Designer Silk Sarees</span>
-            <span><i class="fa-solid fa-arrow-right"></i></span>
-          </span>
-        </a>
+    <div class="row cs_gap_y_24 pure-kanchi-section">
+      <div class="col-sm-3">
+        <div class="cs_category cs_style_1">
+          <a href="#" class="cs_category_thumb position-relative">
+            <img src="assets/img/saree/purekanchi/royal-affair/IMG-20240220-WA0061.jpg" alt="Category Image"
+              class="w-100">
+            <span class="cs_category_btn">
+              <span>Royal Affair</span>
+              <span><i class="fa-solid fa-arrow-right"></i></span>
+            </span>
+          </a>
+        </div>
       </div>
-    </div>
-    <div class="col-sm-6">
-      <div class="cs_category cs_style_1">
-        <a href="#" class="cs_category_thumb position-relative">
-          <img src="assets/img/saree/saree14.jpg" alt="Category Image" class="w-100">
-          <span class="cs_category_btn">
-            <span>Art Silk Sarees</span>
-            <span><i class="fa-solid fa-arrow-right"></i></span>
-          </span>
-        </a>
+      <div class="col-sm-3">
+        <div class="cs_category cs_style_1">
+          <a href="#" class="cs_category_thumb position-relative">
+            <img src="assets/img/saree/purekanchi/goddess-in-making/traditional-weaving/IMG-20240220-WA0105.jpg"
+              alt="Category Image" class="w-100">
+            <span class="cs_category_btn">
+              <span>Traditional Weaving</span>
+              <span><i class="fa-solid fa-arrow-right"></i></span>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div class="col-sm-3">
+        <div class="cs_category cs_style_1">
+          <a href="#" class="cs_category_thumb position-relative">
+            <img src="assets/img/saree/purekanchi/bridal-collection/contemporary-bride/IMG-20240220-WA0030.jpg"
+              alt="Category Image" class="w-100">
+            <span class="cs_category_btn">
+              <span>Contemporary bride</span>
+              <span><i class="fa-solid fa-arrow-right"></i></span>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div class="col-sm-3">
+        <div class="cs_category cs_style_1">
+          <a href="#" class="cs_category_thumb position-relative">
+            <img src="assets/img/saree/purekanchi/border-less/IMG-20240220-WA0174.jpg" alt="Category Image"
+              class="w-100">
+            <span class="cs_category_btn">
+              <span>Border Less</span>
+              <span><i class="fa-solid fa-arrow-right"></i></span>
+            </span>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
+  </section>
   <!-- Start banner -->
   <section class="d-none">
     <div class="cs_banner cs_style_1 container-fluid cs_bg_filed position-relative mt-5"
@@ -961,8 +976,8 @@
   </section>
   <!-- End new items -->
   <!-- Start testimonial -->
-  <section class="cs_gray_bg" id="about">
-    <div class="cs_height_120 cs_height_lg_70"></div>
+  <section class="cs_gray_bg about-section" id="about">
+    <div class="cs_height_50 cs_height_lg_30"></div>
     <div class="container">
       <h2 class="cs_section_title cs_fs_50 cs_bold mb-0 text-center">About</h2>
     </div>
@@ -974,12 +989,26 @@
         <div class="container">
           <div class="cs_slider_wrapper">
             <div class="slick_slide_in">
-              <div class="cs_testimonial cs_style_1 text-center">
+              <div class="cs_testimonial cs_style_1 text-center text-dark">
                 <blockquote class="cs_testimonial_text cs_fs_21 cs_semibold">What A Saree is a tribute to Weavers and
                   the weaving community across the nation where we honour the hardwork that goes into weaving and pledge
                   to give the rightful share of that to the weaver, in addition we give the personalized touch and a
-                  sense of belongingness to every hand woven saree with the name of the weaver who made it for you.
+                  sense of belongingness to every hand woven saree with the name of the weaver who made it for you.
                 </blockquote>
+                <div class="d-flex justify-content-center">
+                  <blockquote class="cs_fs_21 cs_semibold cs_testimonial_text mx-5 w-75">
+                    Here we work with the weavers on the ground, listen to their stories, past, understand their pain
+                    and
+                    work together for a better future for them.
+                  </blockquote>
+                </div>
+                <blockquote class="cs_testimonial_text cs_fs_21 cs_semibold">
+                  Every Woman is a queen and deserves to experience the royalty of a Queen and we at WhatASaree ensures
+                  that every woman gets to drape the original, pure and authentic Kanjivaram Silk Sarees by divine
+                  threads directly sourced from the weavers exclusively for you all... Keep sharing your love and
+                  positivity to preserve our Old Age Indian culture and traditions.
+                </blockquote>
+
                 <div class="cs_testimonial_user d-none">
                   <div class="cs_avatar_thumb">
                     <img src="assets/img/user.png" alt="Avatar">
@@ -1014,7 +1043,7 @@
       </div>
       <div class="cs_pagination cs_style_2 cs_hide_desktop"></div>
     </div>
-    <div class="cs_height_135 cs_height_lg_80"></div>
+    <div class="cs_height_80 cs_height_lg_80"></div>
   </section>
   <!-- End testimonial -->
   <!-- Start partners -->