<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 ==========================================================*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.