Skip to content

Commit

Permalink
Testimonial section added HTML,CSS,JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rajput-xv
Rajput-xv committed Sep 7, 2023
1 parent 76b81fc commit a25f9aa
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 4 deletions.
92 changes: 91 additions & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
83 changes: 81 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
40 changes: 39 additions & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

// });
// });


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");
}

0 comments on commit a25f9aa

Please sign in to comment.