<main>
<section>
<div class="testimonial">
<div class="container">
<div class="testimonial__inner">
<div class="testimonial-slider">
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>MANAGER</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>CEO</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>Co-Founder</p>
</div>
</div>
</div>
</div>
</div>
<div class="testimonial-slide">
<div class="testimonial_box">
<div class="testimonial_box-inner">
<div class="testimonial_box-top">
<div class="testimonial_box-icon">
<i class="fas fa-quote-right"></i>
</div>
<div class="testimonial_box-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus optio facilis beatae.</p>
</div>
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>SEO</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.testimonial{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #3d5a80;
color: #3d5a80;
&-slide{
padding:40px 20px;
}
&_box{
&-top{
background-color: #e0fbfc;
padding: 30px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
box-shadow: 5px 5px 20px rgba(152, 193, 217, 0.493);
}
&-icon{
padding: 10px 0;
i{
font-size: 25px;
color: #14213d;
}
}
&-text{
padding: 10px 0;
p{
color: #293241;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
}
&-img{
padding: 20px 0 10px;
display: flex;
justify-content: center;
img{
width: 70px;
height: 70px;
border-radius: 50px;
border: 2px solid #e5e5e5;
}
}
&-name{
padding-top: 10px;
h4{
font-size: 20px;
line-height: 25px;
color: #293241;
margin-bottom: 0;
}
}
&-job{
p{
color: #293241;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 20px;
font-weight: 300;
margin-bottom: 0;
}
}
}
}
View Compiled
$(document).ready(function() {
$('.testimonial-slider').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 600,
draggable: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
dots: false,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
