<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-shape"></div>
</div>
<div class="testimonial_box-bottom">
<div class="testimonial_box-profile">
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-info">
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>MANAGER</p>
</div>
</div>
</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-shape"></div>
</div>
<div class="testimonial_box-bottom">
<div class="testimonial_box-profile">
<div class="testimonial_box-img">
<img src="https://i.ibb.co/JQ18QKW/asd.jpg" alt="profile">
</div>
<div class="testimonial_box-info">
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>CEO</p>
</div>
</div>
</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-shape"></div>
</div>
<div class="testimonial_box-bottom">
<div class="testimonial_box-profile">
<div class="testimonial_box-img">
<img src="https://i.ibb.co/hKgs8gm/profile.jpg" alt="profile">
</div>
<div class="testimonial_box-info">
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>MANAGER</p>
</div>
</div>
</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-shape"></div>
</div>
<div class="testimonial_box-bottom">
<div class="testimonial_box-profile">
<div class="testimonial_box-img">
<img src="https://i.ibb.co/JQ18QKW/asd.jpg" alt="profile">
</div>
<div class="testimonial_box-info">
<div class="testimonial_box-name">
<h4>John Doe</h4>
</div>
<div class="testimonial_box-job">
<p>CEO</p>
</div>
</div>
</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: #14213d;
color: #14213d;
&-slide{
padding:20px;
}
&_box{
&-top{
background-color: #e5e5e5;
padding: 30px;
border-radius: 15px;
display: flex;
position: relative;
box-shadow: 5px 5px 20px rgba(229, 229, 229, 0.301);
}
&-icon{
margin-top: -12px;
padding-right: 20px;
i{
font-size: 25px;
color: #14213d;
}
}
&-text{
p{
color: #707070;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
}
&-shape{
position: absolute;
bottom: -10px;
left: 50px;
width: 20px;
height: 20px;
background-color: #e5e5e5;
-webkit-transform: rotateZ(50deg);
transform: rotateZ(45deg);
}
&-bottom{
padding-top: 35px;
padding-left: 25px;
}
&-profile{
display: flex;
}
&-img{
display: flex;
justify-content: center;
img{
width: 70px;
height: 70px;
border-radius: 50px;
border: 2px solid #e5e5e5;
}
}
&-info{
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 20px;
}
&-name{
h4{
font-size: 20px;
line-height: 25px;
color: #e5e5e5;
margin-bottom: 0;
}
}
&-job{
p{
color: #e5e5e5;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 20px;
font-weight: 300;
margin-bottom: 0;
}
}
}
}
.slick-dots li button:before{
font-size: 15px;
color: #e5e5e5;
}
View Compiled
$(document).ready(function() {
$('.testimonial-slider').slick({
autoplay: false,
autoplaySpeed: 1000,
speed: 600,
draggable: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
