Testimonials Before After Block

Testimonials bootstrap 4 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      @import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.testimonial7 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
}

.testimonial7 h1,
.testimonial7 h2,
.testimonial7 h3,
.testimonial7 h4,
.testimonial7 h5,
.testimonial7 h6 {
  color: #3e4555;
}

.testimonial7 .font-weight-medium {
  font-weight: 500;
}

.testimonial7.bg-light {
  background-color: #f4f8fa !important;
}

.testimonial7 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}

.testimonial7 {
  background: #188ef4;
  background: -moz-linear-gradient(left, #188ef4 0%, #188ef4 48%, #f4f8fa 48%, #f4f8fa 100%);
  background: -webkit-linear-gradient(left, #188ef4 0%, #188ef4 51%, #f4f8fa 48%, #f4f8fa 100%);
  background: -webkit-gradient(linear, left top, right top, from(#188ef4), color-stop(48%, #188ef4), color-stop(48%, #f4f8fa), to(#f4f8fa));
  background: -webkit-linear-gradient(left, #188ef4 0%, #188ef4 48%, #f4f8fa 48%, #f4f8fa 100%);
  background: -o-linear-gradient(left, #188ef4 0%, #188ef4 48%, #f4f8fa 48%, #f4f8fa 100%);
  background: linear-gradient(to right, #188ef4 0%, #188ef4 48%, #f4f8fa 48%, #f4f8fa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$info', endColorstr='$light', GradientType=1);
}

.testimonial7 .testi7 .title {
  margin-top: 80px;
}

.testimonial7 .testi7 .owl-nav {
  float: right;
}

.testimonial7 .testi7 .owl-nav [class*='owl-'] {
  background: transparent;
  color: #8d97ad;
  font-size: 34px;
}

.testimonial7 .testi7 .owl-nav [class*='owl-']:hover {
  color: #263238;
}

@media (max-width: 767px) {
  .testimonial7 {
    background: -moz-linear-gradient(top, #188ef4 0%, #188ef4 51%, #f4f8fa 51%, #f4f8fa 100%);
    background: -webkit-linear-gradient(top, #188ef4 0%, #188ef4 51%, #f4f8fa 51%, #f4f8fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#188ef4), color-stop(51%, #188ef4), color-stop(51%, #f4f8fa), to(#f4f8fa));
    background: -o-linear-gradient(top, #188ef4 0%, #188ef4 51%, #f4f8fa 51%, #f4f8fa 100%);
    background: linear-gradient(to bottom, #188ef4 0%, #188ef4 51%, #f4f8fa 51%, #f4f8fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$info', endColorstr='$light', GradientType=1);
  }
}      
                                        
                                    

                                        
                                         $('.testi7').owlCarousel({
    loop: true,
    margin: 30,
    nav: true,
    navText: ['', ''],
    dots: false,
    autoplay: true,
    center: true,
    responsiveClass: true,
    responsive: {
     0: {
      items: 1

     },
     1650: {
      items: 1
     }
    }
   });      
                                        
                                    

Credits

Wrappixel.com

More Bootstrap UI Components

Stunning Hero Section

156 0 hero,BS4

Elegant Header Design

137 0 header,BS4

Simple Contents Section

156 0 contents,BS4

Experience Section with Timeline

158 0 timeline,BS5

Work Process Section

152 0 how it works,BS3

What we offer services

140 0 services,BS3

Saas Style Pricing Block

143 0 pricing,BS4

Clean & Simple Footer

149 0 footer,BS4

Simple Navigation Block

146 0 navigation.BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started