Testimonials with Carousel
Component #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!
Christina Kray
Head of IT department at GoogleIt's beautiful and the coding is done quickly and seamlessly. Keep it up!
James Austin
CEO of Slack
<!-- Testimonials Section -->
<div class="container space-2 space-lg-3">
<div class="w-md-80 w-lg-60 mx-md-auto">
<!-- Quote -->
<figure class="mx-auto text-center mb-5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#bdc5d1" 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 Quote -->
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"fade": true,
"autoplay": true,
"autoplaySpeed": 7000,
"dots": true,
"dotsClass": "slick-pagination mt-7"
}'>
<!-- Testimonial -->
<div class="js-slide">
<div class="text-center mb-5">
<blockquote class="h3 text-lh-lg">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>
</div>
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="mb-0">Christina Kray</h4>
<small class="text-muted">Head of IT department at Google</small>
</div>
</div>
</div>
<!-- End Testimonial -->
<!-- Testimonial -->
<div class="js-slide">
<div class="text-center mb-5">
<blockquote class="h3 text-lh-lg">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
</div>
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="mb-0">James Austin</h4>
<small class="text-muted">CEO of Slack</small>
</div>
</div>
</div>
<!-- End Testimonial -->
</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 Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #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!
Christina Kray
If you can design one thing you can design everything with Front. Just believe it.
Alex Pottorf
Github
<!-- Testimonials Section -->
<div class="clearfix space-bottom-1 px-3 px-md-5">
<div class="bg-img-hero rounded" style="background-image: url(../../assets/img/1920x800/img4.jpg);">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-4 space-2">
<div class="card">
<div class="card-body p-5">
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"fade": true,
"dots": true,
"dotsClass": "slick-pagination mt-5"
}'>
<!-- 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 fill="#377dff" 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="text-dark text-lh-lg 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="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Christina Kray</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 fill="#377dff" 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="text-dark text-lh-lg 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="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
</div>
</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 Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #3
Front partners
<!-- Form -->
<div class="d-flex align-items-center position-relative vh-lg-100">
<div class="col-lg-5 col-xl-4 d-none d-lg-flex align-items-center bg-navy vh-lg-100 px-0" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);">
<div class="w-100 p-5">
<!-- 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 fill="#fff" 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 slick mb-4"
data-hs-slick-carousel-options='{
"autoplay": true,
"autoplaySpeed": 5000,
"fade": true,
"infinite": true,
"asNavFor": "#testimonialsNavPagination"
}'>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 text-white font-weight-normal mb-4">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
<span class="d-block text-white-70">Christina Kray, Google</span>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 text-white font-weight-normal mb-4">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
<span class="d-block text-white-70">James Austin, Slack</span>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 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>
<span class="d-block text-white-70">Charlotte Moore, Amazon</span>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Carousel Main -->
<!-- Testimonials Carousel Pagination -->
<div id="testimonialsNavPagination" class="js-slick-carousel slick slick-transform-off slick-pagination-modern mx-auto"
data-hs-slick-carousel-options='{
"infinite": true,
"slidesToShow": 3,
"centerMode": true,
"isThumbs": true,
"asNavFor": "#testimonialsNavMain"
}'>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Testimonials Carousel Pagination -->
<!-- Clients -->
<div class="position-absolute right-0 bottom-0 left-0 text-center p-5">
<span class="d-block text-white-70 mb-3">Front partners</span>
<div class="d-flex justify-content-center">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
</div>
</div>
<!-- End Clients -->
</div>
</div>
</div>
<!-- End Form -->
<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 Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>