Hello, I am kunaal very glad you are here. Today we will make a responsive testimonials section using only HTML, CSS and JAVASCRIPT no library.
Testimonial sections are very important in personal portfolio's these days. Purpose of Testimonial are to showcase what your client think about you? and What your client says about you?
So today we are making a Testimonial Slider. Which have a very modern design. Our testimonial contain our client image and their words + it also contain rating in term of stars. You can see the its demo in the video below or you can watch the tutorial.
Video Tutorial
Let's Code This
To follow this article download images from here
So in order to code this design we need 3 files - HTML, CSS and JS files. And we don't need any other library for this.
So let's make an index.html file remember to give .html as its extension. And write (or copy/paste) these.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Testimonial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="card">
<div class="card-thumb">
<img src="img/img-1.jpeg" class="client-img" alt="">
<span class="client-name">client one</span>
</div>
<div class="card-body">
<p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
<div class="rating">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-no-fill.png" class="star" alt="">
</div>
</div>
</div>
<div class="card">
<div class="card-thumb">
<img src="img/img-2.jpeg" class="client-img" alt="">
<span class="client-name">client two</span>
</div>
<div class="card-body">
<p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
<div class="rating">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-no-fill.png" class="star" alt="">
</div>
</div>
</div>
<div class="card">
<div class="card-thumb">
<img src="img/img-3.jpeg" class="client-img" alt="">
<span class="client-name">client three</span>
</div>
<div class="card-body">
<p class="review">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, nam. Fugiat, ut provident. Nulla quibusdam labore ea est consequatur sequi fuga iusto laudantium, earum doloremque?</p>
<div class="rating">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-fill.png" class="star" alt="">
<img src="img/star-no-fill.png" class="star" alt="">
</div>
</div>
</div>
</div>
<div class="indicators">
<button class="active"></button>
<button></button>
<button></button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
This was our HTML structure no we need a CSS file to style our element. Create a style.css file and paste this in on it.
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Roboto:wght@400&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'dosis';
color: #080808;
background: linear-gradient(110deg, #fc6a6a 0%, #ffc69d 100%);
}
.container{
position: relative;
width: 800px;
min-width: 350px;
min-height: 250px;
padding-bottom: 40px;
overflow: hidden;
}
.wrapper{
width: 300%;
/* 300% 'caz we have 3 cards */
min-height: 100%;
display: flex;
justify-content: space-between;
transition: 1s;
}
.card{
width: 800px;
min-height: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0 10px;
}
.card-thumb{
width: 70%;
height: 250px;
overflow: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: relative;
}
.client-img{
width: 100%;
height: 100%;
object-fit: cover;
}
.client-name{
position: absolute;
bottom: 10px;
right: 10px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
padding: 5px 20px;
background: #fff;
text-transform: capitalize;
font-size: 14px;
}
.card-body{
width: 120%;
min-height: 100%;
height: auto;
margin-left: 20px;
position: relative;
padding-bottom: 50px;
}
.review{
font-size: 20px;
line-height: 30px;
margin-top: 30px;
}
.rating{
position: absolute;
bottom: 10px;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.star{
width: 25px;
margin-right: 5px;
}
.indicators{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.indicators button{
background: none;
border: none;
outline: none;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
margin-left: 5px;
transition: .5s;
}
button.active{
width: 40px;
border-radius: 50px;
background: #fff;
}
@media (max-width: 800px){
.container{
width: 50%;
margin: auto;
}
.card{
flex-direction: column;
}
.card-thumb{
width: 100%;
border-radius: 10px;
}
.card-body{
width: 100%;
min-height: auto;
margin-left: 0;
}
}
we are almost done now we need a JAVASCRIPT file to make the slider work. Create app.js file and paste this on it.
const wrapper = document.querySelector('.wrapper');
const indicators = [...document.querySelectorAll('.indicators button')];
let currentTestimonial = 0; // Default 0
indicators.forEach((item, i) => {
item.addEventListener('click', () => {
indicators[currentTestimonial].classList.remove('active');
wrapper.style.marginLeft = `-${100 * i}%`;
item.classList.add('active');
currentTestimonial = i;
})
})
We are done. Our Testimonial is done and its responsive also.
Thank you for reading If you like the article show your support by following me. And if you have any doubts feel free to ask me in comments.
Have a nice day.
You may like reading this.
🔥Awesome 3d navbar you have never seen it before 🔥🔥
🔥🔥backend for login form. Easy to make fully working form
3.Awesome animation 🔥🔥 you have never seen it before
4.Awesome header design you have never seen it before
Source Code, Follow me on Instagram, Subscribe my youtube channel
Top comments (0)