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 #11
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 my-3">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-sm">
<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 my-3">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-sm">
<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 my-3">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-sm">
<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 my-3">
<!-- Testimonials -->
<div class="card text-center border-0 shadow-sm">
<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 #11
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>