I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.
Testimonials
Add these testimonial style examples that check off all of the best practices for attracting new customers with help from your happy customers.
Testimonials #1
HTML:
<!-- Testimonials Section -->
<div class="gradient-overlay-half-primary-v1">
<div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
<div class="container space-2 space-3--lg">
<div class="w-lg-75 mx-lg-auto">
<!-- SVG Quote -->
<figure class="mx-auto mb-4" style="width: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#ffffff" 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 -->
<!-- Slick Carousel - Testimonials -->
<div id="testimonialsNavMain" class="js-slick-carousel u-slick space-2-bottom"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-nav-for="#testimonialsNavThumb">
<div class="js-slide">
<blockquote class="h3 text-white text-center">Just wow! The template is really nice and offers quite a large set of options.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">Space brings so many benefits to any team that does anything following a process.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">Space is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="js-slide">
<blockquote class="h3 text-white text-center">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
</div>
<!-- End Slick Carousel - Testimonials -->
</div>
<!-- Slick Carousel - Clients -->
<div id="testimonialsNavThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-classic"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-center-mode="true"
data-slides-show="6"
data-is-thumbs="true"
data-focus-on-select="true"
data-nav-for="#testimonialsNavMain"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/amazon-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/google-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/hubspot-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/slack-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/airbnb-white.png" alt="Image Description">
</div>
<div class="js-slide pt-5">
<img class="u-clients" src="../assets/img/clients/spotify-white.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Clients -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #2
We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Maria Muszynska
Space brings so many benefits to any team that does anything following a process.
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
One simple subscription gives you access to all our tools, plus so much more.
Alex Pottorf
Github
HTML:
<div class="container space-2 space-3--lg">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-fade="true"
data-arrows-classes="u-slick__arrow u-slick__arrow-pos--bottom-minus-7 u-slick__arrow-centered--x"
data-arrow-left-classes="fa fa-long-arrow-alt-left u-slick__arrow-inner ml-n5"
data-arrow-right-classes="fa fa-long-arrow-alt-right u-slick__arrow-inner ml-5">
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="small">Google</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">Space brings so many benefits to any team that does anything following a process.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<h4 class="h6 mb-0">Massalha Shady</h4>
<p class="small">Apple</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">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>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<h4 class="h6 mb-0">Mark McManus</h4>
<p class="small">Microsoft</p>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<div class="mb-4">
<blockquote class="h5 text-secondary">One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-2 mx-auto" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #3
We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.
Mark McManus
Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Alex Pottorf
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Charlotte Moore
One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Ella Brown
Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.
Markus Brown
HTML:
<!-- Testimonials -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="card-mb card-sm-columns card-sm-2-count card-lg-3-count">
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muzynska</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Charlotte Moore</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Ella Brown</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
<!-- Testimonials -->
<article class="card rounded mb-3">
<div class="card-body p-5">
<blockquote class="text-secondary">Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
</div>
<div class="card-footer px-5">
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img15.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Markus Brown</h4>
<ul class="list-inline mb-0">
<li class="list-inline-item text-warning font-size-13">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</li>
</ul>
</div>
</div>
</div>
</article>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials -->
Testimonials #4
Maria Muszynska
"The template is really nice and offers quite a large set of options."
Alex Pottorf
"It's beautiful and the coding is done quickly and seamlessly."
HTML:
<div class="row justify-content-lg-between">
<div class="col-md-5 mb-5 mb-md-0">
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p class="text-muted">"The template is really nice and offers quite a large set of options."</p>
</div>
</div>
<!-- End Review -->
</div>
<div class="col-md-5">
<!-- Review -->
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<p class="text-muted">"It's beautiful and the coding is done quickly and seamlessly."</p>
</div>
</div>
<!-- End Review -->
</div>
</div>
Testimonials #5
Maria Muzynska
"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Markus Brown
"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."
HTML:
<!-- Testimonials Section -->
<div class="container space-2 space-3--lg">
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-5 mb-7 mb-md-0">
<!-- Testimonials -->
<div class="text-center px-lg-4">
<div class="mb-2">
<img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<h4 class="h6">Maria Muzynska</h4>
</div>
<blockquote class="text-secondary mb-0">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
</div>
<!-- End Testimonials -->
</div>
<div class="col-md-6 col-lg-5">
<!-- Testimonials -->
<div class="text-center px-lg-4">
<div class="mb-2">
<img class="u-avatar rounded-circle mx-auto mb-2" src="../assets/img/100x100/img15.jpg" alt="Image Description">
<h4 class="h6">Markus Brown</h4>
</div>
<blockquote class="text-secondary mb-0">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
Testimonials #6
I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.
Maria Muzynska
reacted on TwitterWe are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.
Mark McManus
reacted on FacebookOne simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process.
Alex Pottorf
reacted on TwitterHTML:
<!-- Testimonials Section -->
<div class="bg-gray-100">
<div class="container space-2 space-3--lg">
<div class="card-deck d-block d-lg-flex">
<!-- Testimonials -->
<div class="card card-frame mb-5 mb-lg-0">
<div class="card-body p-5">
<blockquote class="text-secondary mb-0">I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly.</blockquote>
</div>
<div class="card-footer">
<div class="media align-items-end">
<div class="position-relative mr-4">
<img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
<span class="fab fa-twitter"></span>
</span>
</div>
<div class="media-body">
<h4 class="h6 mb-0">Maria Muzynska</h4>
<span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Twitter</a></span>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card card-frame mb-5 mb-lg-0">
<div class="card-body p-5">
<blockquote class="text-secondary mb-0">We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more.</blockquote>
</div>
<div class="card-footer">
<div class="media align-items-end">
<div class="position-relative mr-4">
<img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
<span class="fab fa-facebook-f"></span>
</span>
</div>
<div class="media-body">
<h4 class="h6 mb-0">Mark McManus</h4>
<span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Facebook</a></span>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card card-frame">
<div class="card-body p-5">
<blockquote class="text-secondary mb-0">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process.</blockquote>
</div>
<div class="card-footer">
<div class="media align-items-end">
<div class="position-relative mr-4">
<img class="u-md-avatar rounded-circle" src="../assets/img/100x100/img15.jpg" alt="Image Description">
<span class="badge badge-sm badge-primary badge-icon badge-pos badge-pos--bottom-right-minus-1 rounded-circle">
<span class="fab fa-twitter"></span>
</span>
</div>
<div class="media-body">
<h4 class="h6 mb-0">Alex Pottorf</h4>
<span class="d-block text-muted font-size-14 font-weight-normal">reacted on <a href="#">Twitter</a></span>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
Testimonials #7
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.
Maria Muszynska
Senior Front-end developer at Google
HTML:
<!-- Testimonials Section -->
<div class="container">
<div class="w-md-80 w-lg-60 text-center mx-auto">
<!-- SVG Quote -->
<figure class="mx-auto mb-4" style="width: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#e3e6f0" 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="mb-5">
<blockquote class="h5 text-secondary">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services.</blockquote>
</div>
<img class="u-md-avatar rounded-circle mb-3 mx-auto" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<p>Senior Front-end developer at Google</p>
</div>
</div>
<!-- End Testimonials Section -->
Testimonials #8
" It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services. "
Charlotte Moore
Front-end developer at Google
HTML:
<!-- Testimonials -->
<div class="position-relative">
<div class="w-90 w-sm-75 w-md-100 w-lg-75 pt-md-5 mx-auto">
<img class="img-fluid w-100" src="../assets/img/500x330/img21.jpg" alt="Image Description">
<div class="bg-white shadow p-5">
<blockquote class="text-secondary mb-5">" It's beautiful and the coding is done quickly and seamlessly. I love Space! I love the ease of use, I love the fact that I have total creative freedom. We are incredibly impressed with Space and how well it supports its customers with amazing products and services. "</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img2.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Charlotte Moore</h4>
<p class="mb-0">Front-end developer at Google</p>
</div>
</div>
</div>
</div>
<!-- SVG Shape -->
<div class="w-100 h-100 content-centered z-index-minus-1">
<img class="img-fluid" src="../assets/svg/shapes/shape1.svg" alt="SVG Shape">
</div>
<!-- End SVG Shape -->
</div>
<!-- End Testimonials -->
Testimonials #9
HTML:
<!-- Testimonials Section -->
<div class="container">
<div class="bg-purple shadow-lg rounded p-5 p-md-9">
<div class="position-relative">
<div class="position-absolute-top-left-0--md">
<!-- SVG Quote -->
<figure style="width: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#ffffff" 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>
<div class="pl-md-9 space-1-top">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick pl-md-4"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-fade="true"
data-pagi-classes="u-slick__pagination u-slick__pagination--white justify-content-end mt-4 mb-0">
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="h4 text-white font-weight-light mb-5">Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
<h3 class="h6 text-white mb-0">Mark McManus</h3>
<span class="d-block text-white-50">Associate Director in Spotify</span>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="h4 text-white font-weight-light mb-5">One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
<h4 class="h6 text-white mb-0">Charlotte Moore</h4>
<span class="d-block text-white-50">RISC Programme Director of GitHub</span>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="h4 text-white font-weight-light mb-5">Just Wow! Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results.</blockquote>
<h4 class="h6 text-white mb-0">Markus Brown</h4>
<span class="d-block text-white-50">Director at Slack</span>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #10
"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Maria Muszynska
Senior developer at Google"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."
Mark McManus
Software engineer at Slack"One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results."
Ella Brown
Head of IT department at AppleHTML:
<!-- Slick Carousel - Testimonials -->
<div class="js-slick-carousel u-slick"
data-fade="true"
data-autoplay="true"
data-speed="7500"
data-pagi-classes="u-slick__pagination justify-content-start mt-7">
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Maria Muszynska</h3>
<span class="text-secondary">Senior developer at <a href="#">Google</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"We are incredibly impressed with Space and how well it supports its customers with amazing products and services. One simple subscription gives you access to all our tools, plus so much more."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img4.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Mark McManus</h3>
<span class="text-secondary">Software engineer at <a href="#">Slack</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<blockquote class="lead mb-5">"One simple subscription gives you access to all our tools, plus so much more. Space brings so many benefits to any team that does anything following a process. It is the easiest way for teams to build cool things work—and get results."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img14.jpg" alt="Image Description">
<div class="media-body">
<h3 class="h6 mb-0">Ella Brown</h3>
<span class="text-secondary">Head of IT department at <a href="#">Apple</a></span>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel - Testimonials -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #11
"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."
Maria Muszynska
Senior developer at Google
HTML:
<!-- Testimonials Section -->
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse", animation_duration: "200"}'>
<div class="container">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 order-md-2 mb-5 mb-md-0">
<div class="pl-md-4">
<!-- Review -->
<blockquote class="lead mb-5">"I love Space! I love the ease of use, I love the fact that I have total creative freedom. The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly."</blockquote>
<div class="media">
<img class="u-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
<div class="media-body">
<h4 class="h6 mb-0">Maria Muszynska</h4>
<span class="text-secondary">Senior developer at <a href="#">Google</a></span>
</div>
</div>
<!-- End Review -->
</div>
</div>
<div class="col-md-6 order-md-1">
<!-- Image -->
<div data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"4", mid:"0", final:"-4"}]'>
<img class="img-fluid border rounded shadow-sm" src="../assets/img/753x470/img5.jpg" alt="Image Description">
</div>
<!-- End Image -->
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
</script>
Testimonials #12
Testimonials
What people say about us
We put at your disposal a wide range of services that can solve the logistics needs of your company, regardless of the size and sector to which it belongs.
I have been doing business with Space Shipping for a couple of years. We send an antifreeze type solution to China for various construction projects.
Maria Muszynska
We look forward to continue working with Space Shipping for our freight forwarding and customs brokerage needs in the future.
Massalha Shady
I have found the Space Shipping rates are always competitive, but it is their service that adds the extra value for me in every way.
Mark McManus
My experience with Space Shipping has been of good service and compliance. They are always checking status and following up all our shipments.
Alex Pottorf
HTML:
<!-- Testimonials Section -->
<div class="bg-light">
<div class="container space-2 space-3--md">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<span class="u-label u-label--sm u-label--purple mb-3">Testimonials</span>
<h2>What people say about us</h2>
<p>We put at your disposal a wide range of services that can solve the logistics needs of your company, regardless of the size and sector to which it belongs.</p>
</div>
<!-- End Title -->
<!-- Clients -->
<div class="text-center mx-auto mb-5">
<div class="d-inline-flex justify-content-center">
<div class="mx-4">
<img class="u-clients" src="../assets/img/clients/airbnb.png" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/img/clients/google.png" alt="Image Description">
</div>
<div class="mx-4">
<img class="u-clients" src="../assets/img/clients/slack.png" alt="Image Description">
</div>
</div>
</div>
<!-- End Clients -->
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3"
data-slides-show="3"
data-autoplay="true"
data-speed="5000"
data-pagi-classes="text-center u-slick__pagination mt-3 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-xs">
<div class="card-body p-5">
<div class="mb-4">
<p class="mb-0">I have been doing business with Space Shipping for a couple of years. We send an antifreeze type solution to China for various construction projects.</p>
</div>
<div class="u-sm-avatar mx-auto mb-2">
<img class="img-fluid rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<h4 class="h6 mb-0">Maria Muszynska</h4>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-xs">
<div class="card-body p-5">
<div class="mb-4">
<p class="mb-0">We look forward to continue working with Space Shipping for our freight forwarding and customs brokerage needs in the future.</p>
</div>
<div class="u-sm-avatar mx-auto mb-2">
<img class="img-fluid rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<h4 class="h6 mb-0">Massalha Shady</h4>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-xs">
<div class="card-body p-5">
<div class="mb-4">
<p class="mb-0">I have found the Space Shipping rates are always competitive, but it is their service that adds the extra value for me in every way.</p>
</div>
<div class="u-sm-avatar mx-auto mb-2">
<img class="img-fluid rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<h4 class="h6 mb-0">Mark McManus</h4>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-xs">
<div class="card-body p-5">
<div class="mb-4">
<p class="mb-0">My experience with Space Shipping has been of good service and compliance. They are always checking status and following up all our shipments.</p>
</div>
<div class="u-sm-avatar mx-auto mb-2">
<img class="img-fluid rounded-circle" src="../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<h4 class="h6 mb-0">Alex Pottorf</h4>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #13
HTML:
<!-- Testimonials Section -->
<div class="bg-light" style="background-image: url(../assets/svg/shapes/shape4.svg);">
<div class="boxed-layout__section container space-2 space-3--lg">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick w-md-75 w-lg-50 mx-auto"
data-infinite="true"
data-autoplay="true"
data-speed="5000"
data-arrows-classes="d-none d-md-inline-block u-slick__arrow u-slick__arrow--shadowed u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-inner u-slick__arrow-inner--left ml-n5"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-inner u-slick__arrow-inner--right mr-n5"
data-pagi-classes="d-md-none text-center u-slick__pagination mt-3"
data-fade="true">
<!-- Slide -->
<div class="js-slide py-3 px-3 px-sm-5">
<div class="card border-0 shadow-sm p-5 p-sm-7">
<span class="fas fa-heart text-primary fa-2x mb-3"></span>
<span class="d-block text-secondary text-uppercase mb-3">Brian Jochel </span>
<h3 class="h5">
<a href="#" class="font-weight-medium">Great lunch buffet</a>
</h3>
<div class="mb-4">
<p>Family and I have eaten here several times. Love the food, the best place in town! Thank you to the Chef and the cooks that prepare the delicious food.</p>
</div>
<a href="#" class="text-right">
See More
<span class="fas fa-angle-right ml-1"></span>
</a>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="js-slide py-3 px-3 px-sm-5">
<div class="card border-0 shadow-sm p-5 p-sm-7">
<span class="fas fa-heart text-primary fa-2x mb-3"></span>
<span class="d-block text-secondary text-uppercase mb-3">Jocelyn Caron</span>
<h3 class="h5">
<a href="#" class="font-weight-medium">Fantastic food</a>
</h3>
<div class="mb-4">
<p>Fantastic food..ask for medium spicy and not spicy if you do not intend to spend on dessert..which too btw was delicious..must go..this place is better than any other Indian food I have had in this area.</p>
</div>
<a href="#" class="text-right">
See More
<span class="fas fa-angle-right ml-1"></span>
</a>
</div>
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="js-slide py-3 px-3 px-sm-5">
<div class="card border-0 shadow-sm p-5 p-sm-7">
<span class="fas fa-heart text-primary fa-2x mb-3"></span>
<span class="d-block text-secondary text-uppercase mb-3">Oliver Patterson</span>
<h3 class="h5">
<a href="#" class="font-weight-medium">Good to heave a lunch with family</a>
</h3>
<div class="mb-4">
<p>The four of us had a wonderful time dining on delicious southern cuisine at LL Dents that satisfied our soul. Just as soul music touches deep into your emotions, so to does Dents food. And oh Lord that Peach Cobbler was smoking!!!</p>
</div>
<a href="#" class="text-right">
See More
<span class="fas fa-angle-right ml-1"></span>
</a>
</div>
</div>
<!-- End Slide -->
</div>
<!-- End Slick Carousel -->
</div>
</div>
<!-- End Testimonials Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #14
Testimonials
Hear what people say about our hotel
This hotel really gave me a new experience and I definitely would recommend it to my colleagues. This hotel really gave me a new experience and I definitely would recommend it to my colleagues.
Julia Thompson
Founder of Houstax
There is no doubt that I'll revisit this hotel again in another occasion. Everything in here is really worth it, especially the service is main thing.
Maria Bogut
Assistant Manager at Hiflix
Great location, really pleasant and clean rooms, but the thing that makes this such a good place to stay are the staff.
Mark Turner
Shoes Designer at Ditex
This hotel really gave me a new experience and I definitely would recommend it to my colleagues.
Kate Righton
Founder of Homix
HTML:
<!-- Testimonials -->
<div class="container space-2 space-3-top--lg">
<!-- Title -->
<div class="w-md-80 w-lg-60 mx-md-auto text-md-center mb-6">
<h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-3">Testimonials</h6>
<h2 class="mb-0">Hear what people say about our hotel</h2>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--equal-height u-slick--gutters-3"
data-slides-show="3"
data-autoplay="false"
data-speed="5000"
data-pagi-classes="text-center u-slick__pagination mt-6 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card border-0 shadow-xs h-100">
<span class="u-icon u-icon--md shadow-sm bg-white rounded-circle mx-auto mt-n5 z-index-0">
<i class="svg-icon svg-icon-xs text-primary u-icon__inner z-index-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<polygon fill="#000000" points="11 7 9 13 11 13 11 18 6 18 6 13 8 7"></polygon>
<polygon fill="#000000" opacity="0.3" points="19 7 17 13 19 13 19 18 14 18 14 13 16 7"></polygon>
</g>
</svg>
</i>
</span>
<div class="card-body text-md-center px-3 pt-5 pb-0 bg-white mt-n5 z-index-2">
<div class="d-flex flex-column justify-content-between align-items-stretch h-100">
<div class="text-muted font-italic mb-3">This hotel really gave me a new experience and I definitely would recommend it to my colleagues. This hotel really gave me a new experience and I definitely would recommend it to my colleagues.</div>
<div class="mt-auto mb-4">
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
</div>
</div>
</div>
<div class="card-footer border-light px-3">
<div class="media align-items-end">
<div class="media-body">
<h4 class="h6 mb-0">Julia Thompson</h4>
<small class="d-block text-muted">Founder of Houstax</small>
</div>
<div class="position-relative ml-4">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card border-0 shadow-xs h-100">
<span class="u-icon u-icon--md shadow-sm bg-white rounded-circle mx-auto mt-n5 z-index-0">
<i class="svg-icon svg-icon-xs text-primary u-icon__inner z-index-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<polygon fill="#000000" points="11 7 9 13 11 13 11 18 6 18 6 13 8 7"></polygon>
<polygon fill="#000000" opacity="0.3" points="19 7 17 13 19 13 19 18 14 18 14 13 16 7"></polygon>
</g>
</svg>
</i>
</span>
<div class="card-body text-md-center px-3 pt-5 pb-0 bg-white mt-n5 z-index-2">
<div class="d-flex flex-column justify-content-between align-items-stretch h-100">
<div class="text-muted font-italic mb-3">There is no doubt that I'll revisit this hotel again in another occasion. Everything in here is really worth it, especially the service is main thing.</div>
<div class="mt-auto mb-4">
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
</div>
</div>
</div>
<div class="card-footer border-light px-3">
<div class="media align-items-end">
<div class="media-body">
<h4 class="h6 mb-0">Maria Bogut</h4>
<small class="d-block text-muted">Assistant Manager at Hiflix</small>
</div>
<div class="position-relative ml-4">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card border-0 shadow-xs h-100">
<span class="u-icon u-icon--md shadow-sm bg-white rounded-circle mx-auto mt-n5 z-index-0">
<i class="svg-icon svg-icon-xs text-primary u-icon__inner z-index-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<polygon fill="#000000" points="11 7 9 13 11 13 11 18 6 18 6 13 8 7"></polygon>
<polygon fill="#000000" opacity="0.3" points="19 7 17 13 19 13 19 18 14 18 14 13 16 7"></polygon>
</g>
</svg>
</i>
</span>
<div class="card-body text-md-center px-3 pt-5 pb-0 bg-white mt-n5 z-index-2">
<div class="d-flex flex-column justify-content-between align-items-stretch h-100">
<div class="text-muted font-italic mb-3">Great location, really pleasant and clean rooms, but the thing that makes this such a good place to stay are the staff.</div>
<div class="mt-auto mb-4">
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
</div>
</div>
</div>
<div class="card-footer border-light px-3">
<div class="media align-items-end">
<div class="media-body">
<h4 class="h6 mb-0">Mark Turner</h4>
<small class="d-block text-muted">Shoes Designer at Ditex</small>
</div>
<div class="position-relative ml-4">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide pt-6 pb-3 ie-d-block">
<!-- Testimonials -->
<div class="card border-0 shadow-xs h-100">
<span class="u-icon u-icon--md shadow-sm bg-white rounded-circle mx-auto mt-n5 z-index-0">
<i class="svg-icon svg-icon-xs text-primary u-icon__inner z-index-3">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<polygon fill="#000000" points="11 7 9 13 11 13 11 18 6 18 6 13 8 7"></polygon>
<polygon fill="#000000" opacity="0.3" points="19 7 17 13 19 13 19 18 14 18 14 13 16 7"></polygon>
</g>
</svg>
</i>
</span>
<div class="card-body text-md-center px-3 pt-5 pb-0 bg-white mt-n5 z-index-2">
<div class="d-flex flex-column justify-content-between align-items-stretch h-100">
<div class="text-muted font-italic mb-3">This hotel really gave me a new experience and I definitely would recommend it to my colleagues.</div>
<div class="mt-auto mb-4">
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
<i class="svg-icon svg-icon-xs text-primary">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z" fill="#000000"></path>
</g>
</svg>
</i>
</div>
</div>
</div>
<div class="card-footer border-light px-3">
<div class="media align-items-end">
<div class="media-body">
<h4 class="h6 mb-0">Kate Righton</h4>
<small class="d-block text-muted">Founder of Homix</small>
</div>
<div class="position-relative ml-4">
<img class="u-sm-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
<!-- End Testimonials -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>
Testimonials #15
HTML:
<!-- Stories -->
<div id="sliderSyncingNav2" class="js-slick-carousel u-slick u-slick--rounded mb-2"
data-infinite="true"
data-arrows-classes="d-none d-md-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle shadow"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner bg-white text-dark left-0 ml-md-n9"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner bg-white text-dark right-0 mr-md-n9"
data-nav-for="#sliderSyncingThumb2">
<div class="js-slide bg-img-hero bg-img-hero-center gradient-overlay-half-black-v1" style="background-image: url(../assets/img/demo/real-estate/ss-author-1.jpg);">
<div class="w-md-80 w-lg-50 text-white space-2 px-9">
<h3 class="h2 text-lh-xs mb-4">Move to new place become<br class="d-none d-inline-block"> more easy than ever</h3>
<p class="text-white-70 mb-4">It's been my fifth experience to move from one place to another and so tired of it. But with Space, you'll experienced a different thing!</p>
<a class="js-fancybox text-white" href="javascript:;"
data-src="//youtube.com/embed/Z7UarHJj_s8"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Tropical Experiences with Space">
Watch testimonial
<i class="u-icon u-icon--sm u-icon--white-soft rounded-circle ml-2">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</a>
</div>
</div>
<div class="js-slide bg-img-hero bg-img-hero-center gradient-overlay-half-black-v1" style="background-image: url(../assets/img/demo/real-estate/ss-author-2.jpg);">
<div class="w-md-80 w-lg-50 text-white space-2 px-9">
<h3 class="h2 text-lh-xs mb-4">Move to new place become<br class="d-none d-inline-block"> more easy than ever</h3>
<p class="text-white-70 mb-4">It's been my fifth experience to move from one place to another and so tired of it. But with Space, you'll experienced a different thing!</p>
<a class="js-fancybox text-white" href="javascript:;"
data-src="//youtube.com/embed/Z7UarHJj_s8"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Tropical Experiences with Space">
Watch testimonial
<i class="u-icon u-icon--sm u-icon--white-soft rounded-circle ml-2">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</a>
</div>
</div>
<div class="js-slide bg-img-hero bg-img-hero-center gradient-overlay-half-black-v1" style="background-image: url(../assets/img/demo/real-estate/ss-author-3.jpg);">
<div class="w-md-80 w-lg-50 text-white space-2 px-9">
<h3 class="h2 text-lh-xs mb-4">Move to new place become<br class="d-none d-inline-block"> more easy than ever</h3>
<p class="text-white-70 mb-4">It's been my fifth experience to move from one place to another and so tired of it. But with Space, you'll experienced a different thing!</p>
<a class="js-fancybox text-white" href="javascript:;"
data-src="//youtube.com/embed/Z7UarHJj_s8"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Tropical Experiences with Space">
Watch testimonial
<i class="u-icon u-icon--sm u-icon--white-soft rounded-circle ml-2">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</a>
</div>
</div>
<div class="js-slide bg-img-hero bg-img-hero-center gradient-overlay-half-black-v1" style="background-image: url(../assets/img/demo/real-estate/ss-author-4.jpg);">
<div class="w-md-80 w-lg-50 text-white space-2 px-9">
<h3 class="h2 text-lh-xs mb-4">Move to new place become<br class="d-none d-inline-block"> more easy than ever</h3>
<p class="text-white-70 mb-4">It's been my fifth experience to move from one place to another and so tired of it. But with Space, you'll experienced a different thing!</p>
<a class="js-fancybox text-white" href="javascript:;"
data-src="//youtube.com/embed/Z7UarHJj_s8"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Tropical Experiences with Space">
Watch testimonial
<i class="u-icon u-icon--sm u-icon--white-soft rounded-circle ml-2">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</a>
</div>
</div>
<div class="js-slide bg-img-hero bg-img-hero-center gradient-overlay-half-black-v1" style="background-image: url(../assets/img/demo/real-estate/ss-author-5.jpg);">
<div class="w-md-80 w-lg-50 text-white space-2 px-9">
<h3 class="h2 text-lh-xs mb-4">Move to new place become<br class="d-none d-inline-block"> more easy than ever</h3>
<p class="text-white-70 mb-4">It's been my fifth experience to move from one place to another and so tired of it. But with Space, you'll experienced a different thing!</p>
<a class="js-fancybox text-white" href="javascript:;"
data-src="//youtube.com/embed/Z7UarHJj_s8"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Tropical Experiences with Space">
Watch testimonial
<i class="u-icon u-icon--sm u-icon--white-soft rounded-circle ml-2">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</a>
</div>
</div>
</div>
<!-- End Stories -->
<!-- Stories.Authors -->
<div id="sliderSyncingThumb2" class="js-slick-carousel u-slick u-slick--gutters-2 u-slick--video w-50 w-lg-30 mx-auto"
data-infinite="true"
data-slides-show="3"
data-is-thumbs="true"
data-center-mode="true"
data-nav-for="#sliderSyncingNav2">
<div class="js-slide rounded overflow-hidden">
<img class="img-fluid" src="../assets/img/demo/real-estate/ss-author-1__.jpg" alt="Image Description">
<i class="u-icon u-icon--sm u-icon--dark-soft rounded-circle u-slick--video__player">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</div>
<div class="js-slide rounded overflow-hidden">
<img class="img-fluid" src="../assets/img/demo/real-estate/ss-author-2__.jpg" alt="Image Description">
<i class="u-icon u-icon--sm u-icon--dark-soft rounded-circle u-slick--video__player">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</div>
<div class="js-slide rounded overflow-hidden">
<img class="img-fluid" src="../assets/img/demo/real-estate/ss-author-3__.jpg" alt="Image Description">
<i class="u-icon u-icon--sm u-icon--dark-soft rounded-circle u-slick--video__player">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</div>
<div class="js-slide rounded overflow-hidden">
<img class="img-fluid" src="../assets/img/demo/real-estate/ss-author-4__.jpg" alt="Image Description">
<i class="u-icon u-icon--sm u-icon--dark-soft rounded-circle u-slick--video__player">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</div>
<div class="js-slide rounded overflow-hidden">
<img class="img-fluid" src="../assets/img/demo/real-estate/ss-author-5__.jpg" alt="Image Description">
<i class="u-icon u-icon--sm u-icon--dark-soft rounded-circle u-slick--video__player">
<i class="u-icon__inner svg-icon svg-icon-xs text-white">
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Stockholm-icons-/-Media-/-Play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bound" x="0" y="0" width="24" height="24"></rect>
<path d="M9.82866499,18.2771971 L16.5693679,12.3976203 C16.7774696,12.2161036 16.7990211,11.9002555 16.6175044,11.6921539 C16.6029128,11.6754252 16.5872233,11.6596867 16.5705402,11.6450431 L9.82983723,5.72838979 C9.62230202,5.54622572 9.30638833,5.56679309 9.12422426,5.7743283 C9.04415337,5.86555116 9,5.98278612 9,6.10416552 L9,17.9003957 C9,18.1765381 9.22385763,18.4003957 9.5,18.4003957 C9.62084305,18.4003957 9.73759731,18.3566309 9.82866499,18.2771971 Z" id="Path-10" fill="#000000"></path>
</g>
</svg>
</i>
</i>
</div>
</div>
<!-- End Stories.Authors -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<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>