<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="testimonials-wrap">
<div class="container">
<div class="heading-section">
<span class="sub-heading">Testimonials</span>
<h2>Happy Clients & Feedbacks</h2>
</div>
<div class="carousel-testimonial owl-carousel">
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/82.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Mark Huff</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/83.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Rodel Golez</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/84.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Ken Bosh</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/85.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Racky Henderson</p>
<span class="position">Father</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/86.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Henry Dee</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/87.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Mark Huff</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/88.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Rodel Golez</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/89.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Ken Bosh</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/90.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Racky Henderson</p>
<span class="position">Father</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/91.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Henry Dee</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-box d-flex">
<div class="user-img" style="background-image: url(https://randomuser.me/api/portraits/men/92.jpg)">
</div>
<div class="text pl-4">
<span class="quote"><i class="fa fa-quote-left"></i></span>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Mark Huff</p>
<span class="position">Businesswoman</span>
</div>
</div>
</div>
</div>
</div>
</div>
.testimonials-wrap {
padding: 40px 0;
}
.heading-section {
text-align: center;
}
.sub-heading {
font-family: 'Lato', sans-serif;
font-size: 12px;
display: block;
font-weight: 600;
color: #2e9ca1;
text-transform: uppercase;
letter-spacing: 2px;
}
.heading-section h2 {
font-size: 28px;
font-weight: 600;
padding-top: 10px;
padding-bottom: 15px;
}
.testimonial-box {
display: block;
position: relative;
padding: 30px 20px;
background: #fff;
border: 1px solid rgba(0,0,0,.03);
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}
.user-img {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
min-width: 80px;
background-size: 100%;
}
.carousel-testimonial .item {
padding: 30px 10px;
}
.quote {
position: absolute;
top: -23px;
color: #2e9da1;
font-size: 27px;
}
.name {
margin-bottom: 0;
line-height: 14px;
font-size: 17px;
font-weight: 500;
}
.position {
color: #adadad;
font-size: 14px;
}
.carousel-testimonial .owl-nav {
text-align: center;
}
.carousel-testimonial .owl-nav button.owl-next,
.carousel-testimonial .owl-nav button.owl-prev {
padding: 0 12px !important;
}
.carousel-testimonial .owl-nav button {
outline: none;
padding: 0;
}
.carousel-testimonial .owl-nav button.owl-next span,
.carousel-testimonial .owl-nav button.owl-prev span {
display: block;
font-size: 40px;
width: 25px;
height: 25px;
vertical-align: 0px;
line-height: 16px;
}
.carousel-testimonial .owl-nav button.owl-next.disabled,
.carousel-testimonial .owl-nav button.owl-prev.disabled {
opacity: 0.5;
}
$('.carousel-testimonial').owlCarousel({
loop:true,
margin:0,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:true,
loop:false
}
}
})
