<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<div class="owl-carousel testimonial-carousel">
  <!--   Start Testimonials -->

  <!--   Testimonial 1 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Habitasse lobortis cum malesuada nullam cras odio venenatis nisl at turpis sem in porta consequat massa a mus massa nascetur elit vestibulum a.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/21.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 2 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Aenean a neque ipsum. In viverra mauris nibh, nec dapibus nibh imperdiet at. Nulla urna odio, aliquam tincidunt posuere quis, placerat nec sem.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/65.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 3 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Donec in quam eget arcu convallis maximus. In hac habitasse platea dictumst. Etiam commodo faucibus vestibulum. Aliquam vitae consectetur velit.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/96.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 4 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Phasellus malesuada arcu sed justo dapibus bibendum. Mauris cursus, dui sit amet vehicula fermentum, mauris ante lobortis mi, eget accumsan nibh est ut lorem.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/72.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 5 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Phasellus vestibulum felis sed malesuada consequat. Integer sed mollis nunc. Vivamus mauris ligula, iaculis vel sem sit amet, vehicula elementum nulla.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/85.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   End Testimonials -->
</div>

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #49474f
}

.testimonial-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}

.testimonials-wrapper {
  width: 95%;
  max-width: 500px;
  margin: 0 auto
}

.testimonials-wrapper h4 {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  position: relative;
  padding: 30px;
  color: #000;
  border-radius: 5px;
  background: #fff;
  box-shadow: 5px 5px 5px 0 rgba(23, 23, 25, .3)
}

.testimonials-blob,
.testimonials-img {
  border-radius: 100%
}

.testimonials-img {
  position: relative;
  left: 50%;
  overflow: hidden!important;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  margin-left: -50px;
  box-shadow: 0 0 0 5px #171719;
  transition: all ease-out .5s;
  transform: translateY(-30%);
  filter: brightness(2)
}

.testimonial-carousel .active .testimonials-img {
  transform: translateY(0);
  filter: brightness(1)
}

.testimonials-person-info {
  text-align: center;
  color: #fff
}

.testimonials-blob {
  position: relative;
  left: 80%;
  width: 3px;
  height: 3px;
  transform: rotate(45deg)
}

@keyframes anim {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff
  }
  50% {
    box-shadow: 0 15px 0 0 #fff, 0 0 0 0 #fff
  }
  100% {
    opacity: 1;
    background: #fff;
    box-shadow: 0 15px 0 4px #fff, 0 35px 0 6px #fff
  }
}

.testimonial-carousel .active .testimonials-blob {
  transform-origin: 50% 50%;
  animation: anim linear .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}

.testimonial-carousel {
  overflow: hidden;
  cursor: grab
}

.testimonial-carousel:active {
  cursor: grabbing
}

.testimonial-carousel .owl-item {
  overflow: hidden;
  transition: all ease-out .3s;
  transform: scale(.7);
  opacity: 0
}

.testimonial-carousel .owl-item.active {
  transform: scale(1);
  opacity: 1
}

.testimonial-carousel .owl-next,
.testimonial-carousel .owl-prev {
  font-size: 13px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  padding: 0 10px;
  transition: all ease-out .25s;
  transform: translateY(-100%);
  opacity: 1;
  color: #fff;
  border-radius: 3px;
  background: #171719
}

.testimonial-carousel .owl-next:hover,
.testimonial-carousel .owl-prev:hover {
  color: #fff;
  background: #615e6b
}

.testimonial-carousel .owl-prev {
  left: 0
}

.testimonial-carousel .owl-next {
  right: 0
}

.testimonial-carousel .owl-next.disabled,
.testimonial-carousel .owl-prev.disabled {
  opacity: 0
}

// A Testimonials slider for a 
// friend's (fb.com/computer.doctor.xanthi/) 
// website i am developing

// Made with awesome -> Owl Carousel 2:
// https://github.com/OwlCarousel2/OwlCarousel2

$(function() {
  $('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    responsive: {
      0: {
        items: 1,
      },
      750: {
        items: 2,
      }
    }
  });
});