Testimonials
Component #1 (with parallax)
I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer.
Lewis
— happy customer
3,500+
Leaders use Front to build a startup, ecommerce, portfolio and many more websites.
Read the case studies
<!-- Testimonials Section -->
<div class="bg-light rounded mx-3 mx-md-11">
<div class="container space-1 space-md-2">
<div class="card bg-transparent shadow-none">
<div class="row">
<div class="col-lg-3 d-none d-lg-block">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-light" data-options='{direction: "reverse"}' style="overflow: visible;">
<div data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"4", mid:"0", final:"-4"}]'>
<img class="img-fluid rounded shadow-lg" src="../../assets/img/400x500/img31.jpg" alt="Image Description">
<!-- SVG Shapes -->
<figure class="max-w-15rem w-100 position-absolute bottom-0 left-0 z-index-n1">
<div class="mb-n7 ml-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-5.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Shapes -->
</div>
</div>
</div>
<div class="col-lg-9">
<!-- Card Body -->
<div class="card-body h-100 rounded p-0 p-md-4">
<!-- SVG Quote -->
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 8 8">
<path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<div class="row">
<div class="col-lg-8 mb-3 mb-lg-0">
<div class="pr-lg-5">
<blockquote class="h3 font-weight-normal mb-4">I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer.</blockquote>
<div class="media">
<div class="avatar avatar-xs avatar-circle d-lg-none mr-2">
<img class="avatar-img" src="../../assets/img/100x100/img19.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="text-dark font-weight-bold">Lewis</span>
<span class="font-size-1">— happy customer</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 column-divider-lg">
<hr class="d-lg-none">
<div class="pl-lg-5">
<span class="h1 text-primary">3,500+</span>
<p class="font-size-1">Leaders use Front to build a startup, ecommerce, portfolio and many more websites.</p>
<a class="font-size-1 text-nowrap" href="#">Read the case studies <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
</div>
<!-- End Card Body -->
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Component #2
With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.
Christina Kray
Social Media Executive, Airbnb
<!-- Testimonials Section -->
<div class="overflow-hidden">
<div class="container space-bottom-2">
<div class="position-relative">
<div class="bg-light text-center rounded p-4 p-md-7">
<div class="mb-4">
<img class="max-w-11rem max-w-md-13rem mx-auto" src="../../assets/svg/clients-logo/airbnb-original.svg" alt="SVG Logo">
</div>
<!-- Blockquote -->
<div class="w-md-80 w-lg-50 mx-md-auto mb-6">
<blockquote class="lead text-dark">With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.</blockquote>
</div>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="w-lg-50 mx-lg-auto">
<h4 class="mb-0">Christina Kray</h4>
<small>Social Media Executive, Airbnb</small>
</div>
<!-- End Reviewer -->
</div>
<!-- SVG Element -->
<figure class="max-w-15rem w-100 position-absolute bottom-0 left-0">
<div class="mb-n7 ml-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Element -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #3
Case study
"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."
Luisa
Head of IT department
<!-- Testimonials Section -->
<div class="overflow-hidden space-2">
<div class="position-relative bg-navy text-center rounded mx-3 mx-md-11">
<div class="container space-1 space-md-2 space-lg-3 position-relative z-index-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-7">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Case study</span>
<img class="max-w-15rem" src="../../assets/svg/clients-logo/uber-white.svg" alt="SVG Logo">
</div>
<!-- End Title -->
<!-- Blockquote -->
<div class="w-md-75 mx-md-auto mb-6">
<blockquote class="h3 text-white font-weight-normal text-lh-lg">"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."</blockquote>
</div>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="w-lg-50 mx-lg-auto">
<div class="avatar avatar-circle mb-3">
<img class="avatar-img" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<h4 class="text-white mb-0">Luisa</h4>
<span class="d-block text-white-70">Head of IT department</span>
</div>
<!-- End Reviewer -->
<!-- SVG Quote -->
<figure class="position-absolute bottom-0 right-0 left-0 z-index-n1 mb-11">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25rem" height="25rem"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#fff" opacity=".025" 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 -->
<!-- SVG Shapes -->
<figure class="position-absolute top-0 left-0 mt-10 ml-10">
<img src="../../assets/svg/components/abstract-shapes-11.svg" alt="SVG">
</figure>
<figure class="max-w-15rem w-100 position-absolute bottom-0 right-0">
<div class="mb-n7 mr-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-4.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Shapes -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #4
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Tom Lowry
CEO
<!-- Testimonials Section -->
<div class="overflow-hidden">
<div class="container space-2 space-lg-3">
<div class="row justify-content-lg-between align-items-md-center">
<div class="col-md-6 order-md-2 mb-11 mb-md-0">
<div class="position-relative">
<img class="img-fluid rounded" src="../../assets/img/900x900/img5.jpg" alt="Image Description">
<!-- SVG Elements -->
<figure class="max-w-19rem w-100 position-absolute top-0 left-0 z-index-n1">
<div class="mt-n7 ml-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
</div>
</figure>
<figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1">
<div class="mb-n7 mr-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Elements -->
</div>
</div>
<div class="col-md-6 col-lg-5 order-md-1">
<img class="max-w-15rem mb-4" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
<div class="mb-6">
<blockquote class="font-size-2 text-dark text-lh-lg">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<h4 class="h3 mb-0">Tom Lowry</h4>
<p class="small">CEO</p>
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #5
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!
Charlotte Moore
Director Business Planning, Amazon
<!-- Testimonials Section -->
<div class="container space-2">
<!-- SVG Quote -->
<figure class="mx-auto text-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#bdc5d1" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Blockquote -->
<div class="w-md-75 text-center mx-md-auto mb-6">
<blockquote class="h3 text-lh-lg">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="mb-0">Charlotte Moore</h4>
<small class="text-muted">Director Business Planning, Amazon</small>
</div>
</div>
<!-- End Reviewer -->
</div>
<!-- End Testimonials Section -->
Component #6
Front worklfow is loved by users worldwide
With Front Pay, you can check out across the web and in apps without having to enter any payment information.
Christina Kray
Business ManagerFrom boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.
Massalha Shady
CEO at SlackI love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.
Mark McManus
Front Pay user
<!-- Testimonials Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 mb-5 mb-md-9">
<h2 class="h1">Front worklfow is loved by users worldwide</h2>
</div>
<!-- End Title -->
<!-- Testimonials Section -->
<div class="row">
<!-- Testimonials -->
<div class="col-md-6 col-lg-4 mb-3 mb-md-5 mb-lg-0">
<div class="card h-100">
<div class="card-body">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Christina Kray</h4>
<small class="d-block text-body">Business Manager</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="col-md-6 col-lg-4 mb-3 mb-md-5 mb-lg-0">
<div class="card h-100">
<div class="card-body">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Massalha Shady</h4>
<small class="d-block text-body">CEO at Slack</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="col-md-6 col-lg-4">
<div class="card h-100">
<div class="card-body">
<ul class="list-inline text-warning">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="text-dark mb-0">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Mark McManus</h4>
<small class="d-block text-body">Front Pay user</small>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Section -->
Component #7
Loved by business and individuals across the globe.
With Front Pay, you can check out across the web and in apps without having to enter any payment information.
Christina Kray
Business ManagerFrom boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.
Massalha Shady
CEO at SlackI love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.
Mark McManus
Front Pay user
<!-- Testimonials Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 mb-5 mb-md-9">
<h2>Loved by business and individuals across the globe.</h2>
</div>
<!-- End Title -->
<!-- Testimonials -->
<div class="card-deck d-block d-lg-flex card-lg-gutters-2">
<!-- Testimonials -->
<div class="card shadow-none bg-transparent">
<div class="card-body">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="mb-0">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-1">Christina Kray</h4>
<small class="d-block text-body">Business Manager</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card bg-primary text-white shadow-primary-lg">
<div class="card-body">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="text-white mb-0">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
</div>
</div>
<div class="card-footer border-0 bg-primary text-white pt-0 px-5 pb-5">
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="text-white mb-1">Massalha Shady</h4>
<small class="d-block text-light">CEO at Slack</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="card shadow-none bg-transparent">
<div class="card-body">
<ul class="list-inline text-warning small">
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
<li class="list-inline-item mx-0">
<i class="fas fa-star"></i>
</li>
</ul>
<div class="mb-auto">
<p class="mb-0">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
</div>
</div>
<div class="card-footer border-0 bg-transparent pt-0 px-5 pb-5">
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-1">Mark McManus</h4>
<small class="d-block text-body">Front Pay user</small>
</div>
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<!-- End Testimonials -->
</div>
<!-- End Testimonials Section -->
Component #8
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!
- Victoria,
Product designer
<!-- Testimonials Section -->
<div class="container space-2">
<div class="w-lg-65 text-center mx-auto">
<div class="avatar avatar-lg avatar-circle mx-auto mb-5">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<blockquote class="text-dark font-size-2 font-weight-bold text-lh-lg">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
<div class="mt-5">
<span class="text-dark font-weight-bold">- Victoria,</span>
Product designer
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #9
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Christina Kray
Head of IT department
<!-- Testimonials -->
<div class="bg-light">
<div class="container space-1 space-md-2">
<div class="w-lg-75 mx-lg-auto">
<!-- SVG Quote -->
<figure class="mx-auto text-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Blockquote -->
<div class="text-center mb-5">
<blockquote class="h2 font-weight-normal">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>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="w-lg-50 text-center mx-lg-auto">
<h4 class="mb-0">Christina Kray</h4>
<small class="text-muted">Head of IT department</small>
</div>
<!-- End Reviewer -->
</div>
</div>
</div>
<!-- Testimonials -->
Component #10
Our daily routines would not merely serve purposes of utility or quick-fixes, but involve an exploration of our creative and spiritual lives.Bryan Chung Co-Founder
<!-- Testimonials Section -->
<div class="container space-2 text-center">
<div class="w-md-80 w-lg-50 position-relative mx-md-auto">
<blockquote class="lead text-dark font-weight-bold text-lh-lg mb-6">Our daily routines would not merely serve purposes of utility or quick-fixes, but involve an exploration of our creative and spiritual lives.</blockquote>
<span class="d-block h4 mb-0">Bryan Chung</span>
<small>Co-Founder</small>
<figure class="position-absolute top-0 left-0 z-index-n1 mt-n10 ml-n10">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#e7eaf3" opacity=".3" 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>
</div>
</div>
<!-- End Testimonials Section -->
Component #11
"I love Front! I love the ease of use, I love the fact that I have total creative freedom..." - Adrian Teh
<div class="container">
<blockquote class="bg-soft-primary border-0 rounded text-center text-dark font-size-2 font-weight-bold text-lh-lg p-5 my-5">
"I love Front! I love the ease of use, I love the fact that I have total creative freedom..."
<span class="d-block text-muted font-size-1 mt-2">- Adrian Teh</span>
</blockquote>
</div>
Component #12
4.8
"The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. I really enjoyed and now I work as a front-end developer."
Christina Kray
Satisfied user
<!-- Testimonials Section -->
<div class="overflow-hidden space-2">
<div class="position-relative bg-light text-center rounded z-index-2 mx-3 mx-md-11">
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-6">
<div class="mb-3">
<div class="position-relative max-w-13rem mx-auto mb-2">
<img class="img-fluid" src="../../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
<span class="position-absolute top-0 right-0 left-0 z-index-2 text-white font-size-2 font-weight-bold mt-2">4.8</span>
</div>
<span>37,500+ reviews</span>
</div>
</div>
<!-- End Title -->
<!-- Blockquote -->
<div class="w-md-80 mx-md-auto mb-6">
<blockquote class="font-size-2 text-dark">"The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. I really enjoyed and now I work as a front-end developer."</blockquote>
</div>
<!-- End Blockquote -->
<!-- Reviewer -->
<div class="w-lg-50 mx-lg-auto">
<div class="avatar avatar-circle mb-3">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<h5 class="mb-0">Christina Kray</h5>
<small>Satisfied user</small>
</div>
<!-- End Reviewer -->
</div>
<!-- SVG Shapes -->
<figure class="position-absolute top-0 left-0 mt-10 ml-10">
<img src="../../assets/svg/components/abstract-shapes-11.svg" alt="SVG">
</figure>
<figure class="max-w-15rem w-100 position-absolute bottom-0 right-0">
<div class="mb-n7 mr-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Shapes -->
</div>
</div>
<!-- End Testimonials Section -->
Component #13 (with slider)
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Christina Kray
Head of IT department at GoogleIt's beautiful and the coding is done quickly and seamlessly. Keep it up!
James Austin
CEO of Slack
<!-- Testimonials Section -->
<div class="container space-2 space-lg-3">
<div class="w-md-80 w-lg-60 mx-md-auto">
<!-- Quote -->
<figure class="mx-auto text-center mb-5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#bdc5d1" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End Quote -->
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"fade": true,
"autoplay": true,
"autoplaySpeed": 7000,
"dots": true,
"dotsClass": "slick-pagination mt-7"
}'>
<!-- Testimonial -->
<div class="js-slide">
<div class="text-center mb-5">
<blockquote class="h3 text-lh-lg">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
</div>
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="mb-0">Christina Kray</h4>
<small class="text-muted">Head of IT department at Google</small>
</div>
</div>
</div>
<!-- End Testimonial -->
<!-- Testimonial -->
<div class="js-slide">
<div class="text-center mb-5">
<blockquote class="h3 text-lh-lg">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
</div>
<div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
<div class="avatar avatar-circle">
<img class="avatar-img" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="ml-3">
<h4 class="mb-0">James Austin</h4>
<small class="text-muted">CEO of Slack</small>
</div>
</div>
</div>
<!-- End Testimonial -->
</div>
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #14 (with slider)
The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!
Christina Kray
If you can design one thing you can design everything with Front. Just believe it.
Alex Pottorf
Github
<!-- Testimonials Section -->
<div class="clearfix space-bottom-1 px-3 px-md-5">
<div class="bg-img-hero rounded" style="background-image: url(../../assets/img/1920x800/img4.jpg);">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-4 space-2">
<div class="card">
<div class="card-body p-5">
<div class="js-slick-carousel slick"
data-hs-slick-carousel-options='{
"fade": true,
"dots": true,
"dotsClass": "slick-pagination mt-5"
}'>
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="text-dark text-lh-lg mb-4">The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Christina Kray</h4>
<p class="small">Google</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
<!-- Testimonials -->
<div class="js-slide">
<!-- SVG Quote -->
<figure class="mb-4">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Text -->
<blockquote class="text-dark text-lh-lg mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>
<!-- End Text -->
<!-- Author -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="mb-0">Alex Pottorf</h4>
<p class="small">Github</p>
</div>
</div>
<!-- End Author -->
</div>
<!-- End Testimonials -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #15 (with slider)
Front partners
<!-- Form -->
<div class="d-flex align-items-center position-relative vh-lg-100">
<div class="col-lg-5 col-xl-4 d-none d-lg-flex align-items-center bg-navy vh-lg-100 px-0" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);">
<div class="w-100 p-5">
<!-- SVG Quote -->
<figure class="text-center mb-5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path fill="#fff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<!-- Testimonials Carousel Main -->
<div id="testimonialsNavMain" class="js-slick-carousel slick mb-4"
data-hs-slick-carousel-options='{
"autoplay": true,
"autoplaySpeed": 5000,
"fade": true,
"infinite": true,
"asNavFor": "#testimonialsNavPagination"
}'>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 text-white font-weight-normal mb-4">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
<span class="d-block text-white-70">Christina Kray, Google</span>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 text-white font-weight-normal mb-4">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
<span class="d-block text-white-70">James Austin, Slack</span>
</div>
<!-- End Testimonials -->
</div>
<div class="js-slide">
<!-- Testimonials -->
<div class="w-md-80 w-lg-60 text-center mx-auto">
<blockquote class="h3 text-white font-weight-normal mb-4">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
<span class="d-block text-white-70">Charlotte Moore, Amazon</span>
</div>
<!-- End Testimonials -->
</div>
</div>
<!-- End Testimonials Carousel Main -->
<!-- Testimonials Carousel Pagination -->
<div id="testimonialsNavPagination" class="js-slick-carousel slick slick-transform-off slick-pagination-modern mx-auto"
data-hs-slick-carousel-options='{
"infinite": true,
"slidesToShow": 3,
"centerMode": true,
"isThumbs": true,
"asNavFor": "#testimonialsNavMain"
}'>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
</div>
<div class="js-slide">
<div class="avatar avatar-circle mx-auto">
<img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Testimonials Carousel Pagination -->
<!-- Clients -->
<div class="position-absolute right-0 bottom-0 left-0 text-center p-5">
<span class="d-block text-white-70 mb-3">Front partners</span>
<div class="d-flex justify-content-center">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
<img class="max-w-10rem mx-auto" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
</div>
</div>
<!-- End Clients -->
</div>
</div>
</div>
<!-- End Form -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>
Component #16
Success stories
See how Front is helping teams get organized and work smarter
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.
Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).
Visitors can build a form or survey before signing up, but in order to save and share it.
<!-- Features Section -->
<div class="bg-navy rounded mx-3 mx-xl-10" style="background-image: url(../../assets/svg/components/abstract-shapes-20.svg);">
<div class="container-xl container-fluid space-1 space-md-2 px-4 px-md-8 px-lg-10">
<div class="px-3">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Success stories</span>
<h2 class="text-white">See how Front is helping teams get organized and work smarter</h2>
</div>
<!-- End Title -->
<!-- Slick Carousel -->
<div class="js-slick-carousel slick slick-equal-height ie-slick-equal-height slick-gutters-3"
data-hs-slick-carousel-options='{
"prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-n2\"></span>",
"nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-n2\"></span>",
"slidesToShow": 3,
"infinite": true,
"dots": true,
"dotsClass": "slick-pagination slick-pagination-white d-none mt-5",
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]
}'>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img7.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/airbnb-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img6.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/slack-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img14.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/paypal-original.svg" alt="Logo">
</div>
<p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img12.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Logo">
</div>
<p class="mb-0">Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="js-slide mb-4">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../../assets/img/480x320/img27.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Logo">
</div>
<p class="mb-0">Visitors can build a form or survey before signing up, but in order to save and share it.</p>
</div>
<div class="card-footer border-0 pt-0">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
</div>
</div>
<!-- End Features Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
</script>
Component #17
Success stories
See how Front is helping teams get organized and work smarter
Amazon launched their enterprise platform and built a powerful user experience.
Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.
Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.
<!-- Stories Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Success stories</span>
<h2>See how Front is helping teams get organized and work smarter</h2>
</div>
<!-- End Title -->
<div class="row">
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../assets/img/480x320/img13.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
</div>
<p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
</div>
<div class="card-footer">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../assets/img/480x320/img17.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
</div>
<p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
</div>
<div class="card-footer">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
<div class="col-sm-6 col-md-4 mb-5">
<!-- Card Info -->
<div class="card h-100">
<img class="card-img-top" src="../assets/img/480x320/img16.jpg" alt="Image Description">
<div class="card-body">
<div class="max-w-13rem w-100 mb-3">
<img class="img-fluid" src="../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
</div>
<p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
</div>
<div class="card-footer">
<a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card Info -->
</div>
</div>
</div>
<!-- End Stories Section -->