From a25f9aaf3af1929f4d1a5a3f870c3fdd67de45eb Mon Sep 17 00:00:00 2001
From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com>
Date: Thu, 7 Sep 2023 19:50:30 +0530
Subject: [PATCH] Testimonial section added HTML,CSS,JS

---
 index.css  | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++--
 index.js   | 40 +++++++++++++++++++++++-
 3 files changed, 211 insertions(+), 4 deletions(-)

diff --git a/index.css b/index.css
index bdadef5..b761465 100644
--- a/index.css
+++ b/index.css
@@ -35,9 +35,99 @@
 } */
 
 
+.hero{
+    background: rgb(160, 54, 54);
+    height: 60vh;
+    width: 100%;
+    position: relative;
+}
+
+.hero h2{
+    text-align: center;
+    padding-top: 40px;
+    font-size: 42px;
+}
+
+.slide-row{
+    display: flex;
+    width: 3200px;
+    transition: 0.5s;
+}
+
+.slide-col{
+    width: 800px;
+    height: 400px;
+    position: relative;
+}
+
+.text {
+    background: #ebb291;
+    width: 520px;
+    height: 270px;
+    position: absolute;
+    left: 0;    
+    top: 8rem;
+    transform: translateY(-50%);
+    border-radius: 10px;
+    color: #000000;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.text p{
+    font-size: 20px;
+    line-height: 25px;
+}
+
+.text h4{
+    margin: 35px 0 5px;
+    color: rgb(198, 6, 121);
+}
+
+.hero .container{
+    width: 800px;
+    height: 400px;
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    transform: translate(-35%,-50%);
+}
+
+.indicator{
+    position: relative;
+    left: 75%;
+    transform: translateX(-50%);
+    bottom: -300px;
+    z-index: 2;
+}
+
+.indicator .btn{
+    display: inline-block;
+    height: 15px;
+    width: 15px;
+    background: white !important;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.indicator .active{
+    width: 45px;
+}
+
+.testimonial{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+
+.nav-item.product-li{
+    position: relative !important;
+}
+
 .dropdown-menu.product {
     position: absolute !important;
-    left: 190px !important;
+    /* left: 350px !important; */
 }
 
 #product-nav{
diff --git a/index.html b/index.html
index 193d1ff..a5de082 100644
--- a/index.html
+++ b/index.html
@@ -50,9 +50,9 @@ <h5 class="offcanvas-title" id="#offcanvasLabel" >E-Smart</h5>
               </a></li>
               
               <li class="nav-item"><a class="nav-link" href="./index.html">Home</a></li>
-              <li class="nav-item " id="product-nav" data-bs-toggle="dropdown" aria-expanded="false"><a class="nav-link p-0 " id="navbarDropdown-1" >
+              <li class="nav-item product-li" id="product-nav" ><a class="nav-link p-0  " data-bs-toggle="dropdown"  id="navbarDropdown-1" role="button"  aria-expanded="false">
                 Product
-                <ul class="dropdown-menu product px-5 mt-0 pt-0" aria-labelledby="navbarDropdown" >
+                <ul class="dropdown-menu product dropdown-menu-start px-5 mt-2 " aria-labelledby="navbarDropdown" >
                   <li><a class="dropdown-item" href="#">Smartphones</a></li>
                   <li><a class="dropdown-item" href="#">Laptops</a></li>
                   <li><a class="dropdown-item" href="#">Televisions</a></li>
@@ -460,6 +460,85 @@ <h2 class="fw-normal">Heading</h2>
   <section class="Testimonial" id="testimonial" >
 
 
+    <div class="hero" >
+      <h2>Testimonial</h2>
+      <div class="container" >
+        <div class="indicator">
+          <span class="btn active" ></span>
+          <span class="btn " ></span>
+          <span class="btn " ></span>
+          <span class="btn " ></span>
+        </div>
+          <div class="testimonial" >
+            <div class="slide-row" id="slide">
+              <div class="slide-col" >
+                <div class="text" >
+                  <p>
+                    As a tech enthusiast, I always look for the latest and greatest electronic items.
+                    I recently discovered e-smart's e-commerce website, and I was blown away by their
+                    special feature that predicts the future price. This feature helped me make an informed 
+                    decision about my purchase and ensured that I got the best deal possible.
+                  </p>
+                  <h4>NAME-1</h4>
+
+                </div>
+              </div>
+
+              <div class="slide-col" >
+                <div class="text" >
+                  <p>
+                    I highly recommend e-smart for anyone looking to purchase electronic items.
+                    Their special feature that predicts the future price and shows the past, present,
+                    and future prices is a game-changer in the e-commerce industry, and it helped me
+                    make an informed decision about my purchase.
+                  </p>
+                  <h4>NAME-2</h4>
+
+                </div>
+              </div>
+
+              <div class="slide-col" >
+                <div class="text" >
+                  <p>
+                    I have been a loyal customer of e-smart's e-commerce website for several years now, and 
+                    I have always been impressed by their special feature that predicts the future price. 
+                    This feature has helped me make informed decisions about my purchases and saved me a lot of money.
+                  </p>
+                  <h4>NAME-3</h4>
+
+                </div>
+              </div>
+
+              <div class="slide-col" >
+                <div class="text" >
+                  <p>
+                    As a satisfied customer, I highly recommend e-smart to anyone looking for high-quality electronic 
+                    items at the best prices. It helped me make an informed decision about my purchase.
+                  </p>
+                  <h4>NAME-4</h4>
+
+                </div>
+              </div>
+
+            </div>
+          </div>
+        
+      </div>
+
+    </div>
+
+
+    <!--  -->
+
+
+    <!--  -->
+
+    
+    <!--   -->
+
+
+    <!--  -->
+
 
   </section>
 
diff --git a/index.js b/index.js
index af80b7b..9fca1af 100644
--- a/index.js
+++ b/index.js
@@ -6,4 +6,42 @@
 //     location.href="http://127.0.0.1:3000/project/E-smart/login.html";
 //     window.location="http://127.0.0.1:3000/project/E-smart/login.html";
 
-// });
\ No newline at end of file
+// });
+
+
+var btnTestimonial =document.querySelectorAll(".indicator .btn");
+var slide =document.getElementById("slide");
+
+
+btnTestimonial[0].onclick=function(){
+    slide.style.transform =" translateX(0px)";
+    for(i=0;i<4;i++){
+        btnTestimonial[i].classList.remove("active");
+    }
+    this.classList.add("active");
+}
+
+btnTestimonial[1].onclick=function(){
+    slide.style.transform =" translateX(-800px)";
+    for(i=0;i<4;i++){
+        btnTestimonial[i].classList.remove("active");
+    }
+    this.classList.add("active");
+}
+
+btnTestimonial[2].onclick=function(){
+    slide.style.transform =" translateX(-1600px)";
+    for(i=0;i<4;i++){
+        btnTestimonial[i].classList.remove("active");
+    }
+    this.classList.add("active");
+}
+
+btnTestimonial[3].onclick=function(){
+    slide.style.transform =" translateX(-2400px)";
+    for(i=0;i<4;i++){
+        btnTestimonial[i].classList.remove("active");
+    }
+    this.classList.add("active");
+}
+