Testimonials - with Carousel
Add these testimonial style examples that check off all of the best practices for attracting new customers with help from your happy customers.
Carousel #1
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Maria Muszynska
If you can design one thing you can design everything with Front. Just believe it.
Alex Pottorf
Github
<!-- Testimonials Section -->
<div class="bg-img-hero-bottom" style="background-image: url(../../assets/img/1920x800/img11.jpg);">
<div class="container">
<div class="row justify-content-md-end">
<div class="col-md-6 col-lg-5 col-xl-4 space-top-3 mb-n9">
<!-- Testimonials -->
<div class="card border-0 bg-primary text-white shadow-primary-lg">
<div class="card-body p-7">
<div class="js-slick-carousel u-slick"
data-pagi-classes="text-right u-slick__pagination u-slick__pagination--white mt-2 mb-0">
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="h6 font-weight-normal text-lh-md mb-4">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small text-white-70">Google</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="h6 font-weight-normal text-lh-md mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small text-white-70">Github</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #2
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Maria Muszynska
If you can design one thing you can design everything with Front. Just believe it.
Alex Pottorf
Github
<!-- Testimonials Section -->
<div class="bg-img-hero" style="background-image: url(../../assets/img/1920x800/img12.jpg);">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-4 space-2">
<!-- Testimonials -->
<div class="card shadow-sm">
<div class="card-body p-7">
<div class="js-slick-carousel u-slick" data-pagi-classes="text-right u-slick__pagination mt-2 mb-0">
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-primary" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="h6 font-weight-normal text-lh-md mb-4">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small">Google</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-primary" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="h6 font-weight-normal text-lh-md mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #3
James Austin
Slack Inc.
The template is really nice and offers quite a large set of options. Thank you!
Charlotte Moore
Google Inc.
If you can design one thing you can design everything. Just believe it.
<!-- Testimonials -->
<div class="js-slick-carousel u-slick"
data-adaptive-height="true"
data-autoplay="true"
data-speed="5000"
data-vertical="true"
data-vertical-swiping="true">
<div class="js-slide">
<!-- Avatar -->
<div class="card border-0 rounded-top-left-pill rounded-right-pill mb-1">
<div class="card-body py-3 px-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">James Austin</h2>
<p class="small mb-0">Slack Inc.</p>
</div>
</div>
</div>
</div>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="card border-0 bg-primary text-white rounded-bottom-left-pill rounded-right-pill">
<div class="card-body p-4">
<div class="media">
<!-- SVG Quote -->
<figure class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<div class="media-body">
<blockquote class="mb-0">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
</div>
</div>
</div>
</div>
<!-- End Testimonials Content -->
</div>
<div class="js-slide">
<!-- Avatar -->
<div class="card border-0 rounded-top-left-pill rounded-right-pill mb-1">
<div class="card-body py-3 px-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">Charlotte Moore</h2>
<p class="small mb-0">Google Inc.</p>
</div>
</div>
</div>
</div>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="card border-0 bg-primary text-white rounded-bottom-left-pill rounded-right-pill">
<div class="card-body p-4">
<div class="media">
<!-- SVG Quote -->
<figure class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<div class="media-body">
<blockquote class="mb-0">If you can design one thing you can design everything. Just believe it.</blockquote>
</div>
</div>
</div>
</div>
<!-- End Testimonials Content -->
</div>
</div>
<!-- End Testimonials -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #4
<!-- Testimonials -->
<div class="container space-2">
<!-- SVG Quote -->
<figure class="text-center mb-5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-primary" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Testimonials Carousel Main -->
<div id="testimonialsNavMain" class="js-slick-carousel u-slick u-slick--transform-off mb-4"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-fade="true"
data-nav-for="#testimonialsNavPagination">
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 mb-5">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
<h4 class="h6 text-muted">Maria Muszynska, Google</h4>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 mb-5">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
<h4 class="h6 text-muted">James Austin, Slack</h4>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 mb-5">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
<h4 class="h6 text-muted">Charlotte Moore, Amazon</h4>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Carousel Main -->
<!-- Testimonials Carousel Pagination -->
<div id="testimonialsNavPagination" class="js-slick-carousel u-slick u-slick--pagination-modern u-slick--transform-off mx-auto"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-focus-on-select="true"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-nav-for="#testimonialsNavMain">
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Testimonials Carousel Pagination -->
</div>
<!-- End Testimonials -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #5
<div class="gradient-half-primary-v1 space-2">
<!-- SVG Quote -->
<figure class="mb-5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Testimonials Carousel Main -->
<div id="testimonialsNavMainExample1" class="js-slick-carousel u-slick mb-4"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-fade="true"
data-nav-for="#testimonialsNavPaginationExample1">
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h5 text-white font-weight-normal mb-4">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
<h1 class="h6 text-white-70">Maria Muszynska, Google</h1>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h5 text-white font-weight-normal mb-4">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
<h2 class="h6 text-white-70">James Austin, Slack</h2>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h5 text-white font-weight-normal mb-4">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
<h3 class="h6 text-white-70">Charlotte Moore, Amazon</h3>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Carousel Main -->
<!-- Testimonials Carousel Pagination -->
<div id="testimonialsNavPaginationExample1" class="js-slick-carousel u-slick u-slick--transform-off u-slick--pagination-modern mx-auto"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="3"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#testimonialsNavMainExample1">
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Testimonials Carousel Pagination -->
</div>
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #6
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Maria Muszynska
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Massalha Shady
Apple
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Mark McManus
Microsoft
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Alex Pottorf
Github
<!-- Testimonials Section -->
<div class="bg-light">
<div class="container space-2">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick-zoom u-slick--gutters-3"
data-slides-show="3"
data-center-mode="true"
data-autoplay="true"
data-speed="5000"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide my-4">
<!-- Testimonials -->
<div class="u-slick-zoom__slide text-center">
<div class="card border-0 shadow-sm">
<div class="card-body p-7">
<p class="mb-0">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="position-relative z-index-2 mt-n5 mb-3">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small">Google</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide my-4">
<!-- Testimonials -->
<div class="u-slick-zoom__slide text-center">
<div class="card border-0 shadow-sm">
<div class="card-body p-7">
<p class="mb-0">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="position-relative z-index-2 mt-n5 mb-3">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
<h4 class="h6 mb-0">Massalha Shady</h4>
<p class="small">Apple</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide my-4">
<!-- Testimonials -->
<div class="u-slick-zoom__slide text-center">
<div class="card border-0 shadow-sm">
<div class="card-body p-7">
<p class="mb-0">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="position-relative z-index-2 mt-n5 mb-3">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
<h4 class="h6 mb-0">Mark McManus</h4>
<p class="small">Microsoft</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide my-4">
<!-- Testimonials -->
<div class="u-slick-zoom__slide text-center">
<div class="card border-0 shadow-sm">
<div class="card-body p-7">
<p class="mb-0">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="position-relative z-index-2 mt-n5 mb-3">
<div class="u-avatar mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
</div>
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #7
Satisfied customers on Front
Casy Williams
NERC CIP Consultant
Elon Fisher
Consultant
Linda Spears
Business Analyst
Chris Johnson
Firewall Engineer
<!-- Testimonials -->
<div id="SVGbgElements5" class="svg-preloader position-relative gradient-half-primary-v1">
<div class="container position-relative z-index-2 space-2 space-md-3">
<!-- Title -->
<div class="text-center mb-4">
<!-- SVG Quote -->
<figure class="mx-auto mb-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<h2 class="text-white font-weight-medium">Satisfied customers on Front</h2>
</div>
<!-- End Title -->
<!-- Slick Carousel - Testimonials Main Nav -->
<div id="testimonialsNavMainExample2" class="js-slick-carousel u-slick text-center w-lg-75 mx-lg-auto mb-7"
data-adaptive-height="true"
data-infinite="true"
data-fade="true"
data-nav-for="#testimonialsNavPaginationExample3">
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead text-white-70 text-lh-md">
I followed a link for a job on Front and uploaded my resume. About two hours later, I received an email from an employer looking for someone with my skills. In a week's time and four interviews later I have a fantastic new job! Thanks Front!</blockquote>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead text-white-70 text-lh-md">
I had my resume public on Front for only two days and I got flooded with interviews from serious competitive employers that resulted in me choosing between very tempting offers. Don't waste your time. Go Front. It's real!</blockquote>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead text-white-70 text-lh-md">
I found my current Job on Front. I applied and got a reply from the company within one day. Hired within the week. No other job site has as many tech jobs as Front.</blockquote>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead text-white-70 text-lh-md">
I uploaded my resume on Front and within that week had several emails and calls about opportunities from recruiters. I decided to pursue an opportunity with HP and started working there that same month. Excellent site!</blockquote>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel - Testimonials Main Nav -->
<!-- Slick Carousel - Testimonials Pagination Nav -->
<div id="testimonialsNavPaginationExample3" class="js-slick-carousel u-slick u-slick--gutters-3 u-slick--pagination-interactive"
data-infinite="true"
data-slides-show="3"
data-center-mode="true"
data-focus-on-select="true"
data-nav-for="#testimonialsNavMainExample2"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide rounded-pill p-2">
<!-- Authors -->
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 u-slick--pagination-interactive__title mb-0">Casy Williams</h4>
<p class="small u-slick--pagination-interactive__text mb-0">NERC CIP Consultant</p>
</div>
</div>
<!-- End Authors -->
</div>
<div class="js-slide rounded-pill p-2">
<!-- Authors -->
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 u-slick--pagination-interactive__title mb-0">Elon Fisher</h4>
<p class="small u-slick--pagination-interactive__text mb-0">Consultant</p>
</div>
</div>
<!-- End Authors -->
</div>
<div class="js-slide rounded-pill p-2">
<!-- Authors -->
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 u-slick--pagination-interactive__title mb-0">Linda Spears</h4>
<p class="small u-slick--pagination-interactive__text mb-0">Business Analyst</p>
</div>
</div>
<!-- End Authors -->
</div>
<div class="js-slide rounded-pill p-2">
<!-- Authors -->
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 u-slick--pagination-interactive__title mb-0">Chris Johnson</h4>
<p class="small u-slick--pagination-interactive__text mb-0">Firewall Engineer</p>
</div>
</div>
<!-- End Authors -->
</div>
</div>
<!-- End Slick Carousel - Testimonials Pagination Nav -->
</div>
<!-- SVG Background Element -->
<figure class="position-absolute top-0 right-0 w-100 h-100">
<img class="js-svg-injector" src="../../assets/svg/components/bg-elements-5.svg" alt="SVG"
data-parent="#SVGbgElements5">
</figure>
<!-- End SVG Background Element -->
</div>
<!-- End Testimonials -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #8
What Front users say about us.
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Maria Muszynska
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Massalha Shady
Apple
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Mark McManus
Microsoft
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Alex Pottorf
Github
<!-- Testimonials Section -->
<div id="SVGdoubleEllipseTopRight" class="svg-preloader position-relative bg-light">
<div class="container space-2 position-relative z-index-2">
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<div class="pr-lg-4">
<!-- SVG Quote -->
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-gray-300" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<h2 class="font-weight-normal mb-4">What Front users say about us.</h2>
<!-- Review -->
<div class="d-flex align-items-center">
<ul class="list-inline mr-3 mb-0">
<li class="list-inline-item text-warning">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</li>
</ul>
<span class="text-secondary">Review</span>
</div>
<!-- End Review -->
</div>
</div>
<div class="col-lg-8">
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-slides-show="2"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-center-mode="true"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide my-4">
<!-- Testimonial -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-6">
<p>The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="media ml-6">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small">Google</p>
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="js-slide my-4">
<!-- Testimonial -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-6">
<p>The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="media ml-6">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Massalha Shady</h4>
<p class="small">Apple</p>
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="js-slide my-4">
<!-- Testimonial -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-6">
<p>The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="media ml-6">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<p class="small">Microsoft</p>
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="js-slide my-4">
<!-- Testimonial -->
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-6">
<p>The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</p>
</div>
</div>
<div class="media ml-6">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
</div>
<!-- End Testimonial -->
</div>
</div>
</div>
</div>
</div>
<!-- SVG Bottom Right Shapes -->
<div class="position-absolute top-0 right-0 w-75 w-md-60 w-lg-35">
<figure class="ie-double-ellipse-top-right">
<img class="js-svg-injector" src="../../assets/svg/components/double-ellipse-top-right.svg" alt="Image Description"
data-parent="#SVGdoubleEllipseTopRight">
</figure>
</div>
<!-- End SVG Bottom Right Shapes -->
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>