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-offset-5"
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>