<section class="testimonials-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 testimonials">
<div class="training-title">
<h4 class="aoe-title">Testimonials</h4>
<div class="line"></div>
</div>
<div class="col-center m-auto">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="img-box"><img src="https://www.eharmony.com/dating-advice/wp-content/uploads/images/goodsmile.jpg" alt=""></div>
<h4 class="carousel-title">Amazing Trainer!</h4>
<div class="carousel-line"></div>
<p class="testimonial"><span>"</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. aliquet.</p>
<p class="overview"><b>- Paula Wilson</b></p>
<h6 class="company-name">Nations Trust Bank</h6>
</div>
<div class="item carousel-item">
<div class="img-box"><img src="https://www.eharmony.com/dating-advice/wp-content/uploads/images/goodsmile.jpg" alt=""></div>
<h4 class="carousel-title">Amazing Trainer!</h4>
<div class="carousel-line"></div>
<p class="testimonial"><span>"</span> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. facilisis gravida odio.</p>
<p class="overview"><b>- Antonio Moreno</b></p>
<h6 class="company-name">Nations Trust Bank</h6>
</div>
<div class="item carousel-item">
<div class="img-box"><img src="https://www.eharmony.com/dating-advice/wp-content/uploads/images/goodsmile.jpg" alt=""></div>
<h4 class="carousel-title">Amazing Trainer!</h4>
<div class="carousel-line"></div>
<p class="testimonial"><span>"</span> Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus. </p>
<p class="overview"><b>- Michael Holz</b></p>
<h6 class="company-name">Nations Trust Bank</h6>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev"><span>Prev</span>
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next"><span>Next</span>
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
body{
background: #f1f1f1;
}
.aoe-title{
text-transform: uppercase;
text-align: center;
font-weight: 600;
color: #19b5fe;
}
.line{
width: 75px;
height: 5px;
background-color: #f62459;
margin: auto;
margin-top: 20px;
margin-bottom: 70px;
}
/*=================================================== TESTIMONIALS SECTION ==========================================================*/
.testimonials-section{
padding: 50px 0px 50px 0px;
}
/*-------------------------------------------------------- Carousel ----------------------------------------------------------*/
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
margin: 50px auto;
padding: 0 170px;
}
.carousel .item {
color: #999;
font-size: 14px;
text-align: center;
overflow: hidden;
min-height: 290px;
}
.carousel .item .img-box {
width: 170px;
height: 170px;
margin: 0 auto;
padding: 5px;
border: 1px solid #ddd;
border-radius: 50%;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 30px 0 10px;
color: #555;
}
.carousel-inner {
text-align: center;
}
.carousel-title{
margin: 25px;
color: #333;
}
.carousel-line{
height: 1px;
width: 600px;
background-color: #cecece;
margin: auto;
}
.carousel .overview {
font-size: 12px;
margin-bottom: 5px;
}
.carousel .overview b {
color: #7AA641;
}
.company-name{
color: #555;
}
.carousel .carousel-control {
width: 0px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control i {
font-size: 25px;
line-height: 42px;
position: absolute;
display: inline-block;
color: #000;
}
.carousel .carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 10px;
height: 10px;
margin: 1px 3px;
border-radius: 50%;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.carousel-indicators li.active {
background: #555;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.testimonial span{
font-size: 62px;
position: absolute;
top: 57%;
left: 0;
font-family: 'Emblema One', cursive;
color: #333;
}
.carousel-control-prev span{
position: absolute;
font-size: 14px;
top: 29%;
left: 20px;
color: #89c4f4;
text-shadow: none;
font-weight: bolder;
}
.carousel-control-next span{
position: absolute;
font-size: 14px;
top: 29%;
right: 20px;
color: #89c4f4;
text-shadow: none;
font-weight: bolder;
}
/*-------------------------------------------------------- Carousel ----------------------------------------------------------*/
/*=================================================== END TESTIMONIALS SECTION ==========================================================*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.