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-lg 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-lg 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-lg 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-lg 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-dark text-center rounded-lg 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-lg" 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-lg 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-lg 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 -->
<!-- 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-lg" 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 -->
<!-- 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-dark 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 -->
<!-- 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-dark rounded-lg 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 -->
<!-- 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 -->
Component #18
With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor.
Christina Kray
Amsterdam, Netherlands
<!-- Testimonials Section -->
<div class="overflow-hidden space-bottom-2 space-bottom-lg-3">
<div class="container">
<div class="row justify-content-center align-items-md-center mb-7">
<div class="col-11 col-md-6 col-lg-4 z-index-2 mb-5 mb-md-0 mr-md-n9">
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- 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 -->
<blockquote class="blockquote mb-4">With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor.</blockquote>
<!-- 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>
<small class="d-block mb-1">Amsterdam, Netherlands</small>
<div class="d-flex">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
</div>
</div>
</div>
<!-- End Author -->
</div>
</div>
<!-- End Card -->
</div>
<div class="col-md-6 mt-n9 mt-md-0">
<img class="img-fluid" src="../assets/img/900x900/img21.jpg" alt="Image Description">
</div>
</div>
<div class="text-center">
<h3>See what other people are saying</h3>
<div class="d-flex justify-content-center align-items-center mb-4">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<span class="h4 ml-2 mb-0">4.85 / 5.0 <small class="text-body">(2,594)</small></span>
</div>
<a class="btn btn-primary px-5" href="#">Read more reviews <i class="fas fa-angle-right ml-1"></i></a>
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #19
Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster.
Anna Lowry
HR Director59%
in budget saved on unconverting ads27%
in time saved on campaign management2.1x
more split tests and experiments
<!-- Testimonials Section -->
<div class="overflow-hidden gradient-x-three-sm-primary rounded-lg mx-md-10">
<div class="container space-2 space-lg-3">
<div class="row justify-content-center align-items-lg-center">
<div class="col-10 col-sm-8 col-lg-5 mb-11 mb-lg-0">
<div class="position-relative">
<img class="img-fluid rounded-lg" src="../assets/img/900x900/img24.jpg" alt="Image Description">
<!-- SVG Elements -->
<figure class="max-w-15rem w-100 position-absolute top-0 left-0 z-index-n1">
<div class="mt-n6 ml-n5">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="100" height="100">
<circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"/>
</svg>
</div>
</figure>
<figure class="max-w-15rem w-100 position-absolute bottom-0 right-0 z-index-n1">
<div class="mb-n6 ml-4">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
<circle fill="none" stroke="#377DFF" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
</svg>
</div>
</figure>
<!-- End SVG Elements -->
</div>
</div>
<div class="col-lg-7">
<div class="pl-lg-6">
<img class="avatar mb-3" src="../assets/svg/brands/capsule.svg" alt="Image Description">
<blockquote class="h2 mb-5">Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster.</blockquote>
<div class="mb-5">
<h5 class="mb-0">Anna Lowry</h5>
<small class="d-block">HR Director</small>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<h2 class="mb-1">59%</h2>
<small class="d-block">in budget saved on unconverting ads</small>
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<h2 class="mb-1">27%</h2>
<small class="d-block">in time saved on campaign management</small>
</div>
<div class="col-sm-6 col-md-4">
<h2 class="mb-1">2.1x</h2>
<small class="d-block">more split tests and experiments</small>
</div>
</div>
<!-- End Row -->
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials Section -->
Component #20
Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.
Reviews
4.5
2,391 reviews
90%
of customers
recommend this company
recommend this company
-
Christina Kray
5.0
on November 12, 2020
Fun place to work at
You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.
-
Brian Ortega
3.0
on October 25, 2020
Capsule is for contracted freelance writers
It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.
-
Maria Williams
5.0
on October 19, 2020
Excellent Company
They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.
-
Alex Walters
4.0
on October 17, 2020
Productive and fun Workplace
I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.
-
Kurtis Blade
5.0
on October 1, 2020
Nice place
I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.
What would you say about your employer?
Help fellow job seekers by sharing your unique experience.
<!-- Reviews Section -->
<div class="container">
<div class="mb-4">
<h3>Reviews</h3>
</div>
<div class="row">
<div class="col-lg-8 mb-7 mb-lg-0">
<div class="row mb-6">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="media align-items-center">
<span class="display-4 text-dark mr-4">4.5</span>
<div class="media-body">
<!-- Rating List -->
<div class="d-flex align-items-center mb-2">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="12">
</div>
<!-- End Rating List -->
<span class="font-size-1">2,391 reviews</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media align-items-center">
<span class="display-4 text-dark mr-4">90%</span>
<div class="media-body">
<span class="font-size-1">of customers<br>recommend this company</span>
</div>
</div>
</div>
</div>
<!-- End Row -->
<!-- Testimonials -->
<ul class="list-unstyled list-lg-article">
<li>
<!-- Media -->
<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">
<h5 class="mb-0">Christina Kray</h5>
<div class="d-flex align-items-center mb-3">
<span class="font-weight-bold text-dark mr-1">5.0</span>
<img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<small class="d-block">on November 12, 2020</small>
</div>
<h5>Fun place to work at</h5>
<blockquote class="blockquote mb-4">You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.</blockquote>
</div>
</div>
<!-- End Media -->
</li>
<li>
<!-- Media -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<h5 class="mb-0">Brian Ortega</h5>
<div class="d-flex align-items-center mb-3">
<span class="font-weight-bold text-dark mr-1">3.0</span>
<img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<small class="d-block">on October 25, 2020</small>
</div>
<h5>Capsule is for contracted freelance writers</h5>
<blockquote class="blockquote mb-4">It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.</blockquote>
</div>
</div>
<!-- End Media -->
</li>
<li>
<!-- Media -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<h5 class="mb-0">Maria Williams</h5>
<div class="d-flex align-items-center mb-3">
<span class="font-weight-bold text-dark mr-1">5.0</span>
<img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<small class="d-block">on October 19, 2020</small>
</div>
<h5>Excellent Company</h5>
<blockquote class="blockquote mb-4">They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.</blockquote>
</div>
</div>
<!-- End Media -->
</li>
<li>
<!-- Media -->
<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">
<h5 class="mb-0">Alex Walters</h5>
<div class="d-flex align-items-center mb-3">
<span class="font-weight-bold text-dark mr-1">4.0</span>
<img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<small class="d-block">on October 17, 2020</small>
</div>
<h5>Productive and fun Workplace</h5>
<blockquote class="blockquote mb-4">I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.</blockquote>
</div>
</div>
<!-- End Media -->
</li>
<li>
<!-- Media -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<h5 class="mb-0">Kurtis Blade</h5>
<div class="d-flex align-items-center mb-3">
<span class="font-weight-bold text-dark mr-1">5.0</span>
<img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
<small class="d-block">on October 1, 2020</small>
</div>
<h5>Nice place</h5>
<blockquote class="blockquote mb-4">I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.</blockquote>
</div>
</div>
<!-- End Media -->
</li>
</ul>
<!-- End Testimonials -->
<a class="btn btn-link" href="#">View all reviews <i class="fas fa-angle-right ml-1"></i></a>
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
</div>
<div class="col-lg-4">
<div id="stickyBlockStartPoint" class="pl-lg-4">
<!-- Card -->
<div class="js-sticky-block card card-bordered"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 20,
"stickyOffsetBottom": 20
}'>
<div class="card-body p-5">
<div class="mb-5">
<h3>What would you say about your employer?</h3>
<p>Help fellow job seekers by sharing your unique experience.</p>
</div>
<a class="btn btn-sm btn-block btn-primary" href="#">Write a review</a>
<img class="card-img-bottom mt-7" src="../assets/svg/illustrations/knowledgebase-community-1.svg" alt="Image Description">
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- Reviews Section -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
$('.js-sticky-block').each(function () {
var stickyBlock = new HSStickyBlock($(this)).init();
});
});
</script>
Component #21
My personal details, like, full name, location, and phone numbers
Christina Kray
What my skills are and what I can offer to them
Brian McManus
If I know how to do certain job functions
Max Walters
<div class="row">
<div class="col-md-6 col-lg-4 mb-5">
<!-- Media -->
<div class="media">
<div class="avatar avatar-sm avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<blockquote class="blockquote">My personal details, like, full name, location, and phone numbers</blockquote>
<footer class="blockquote-footer">Shared on September 9, 2020</footer>
<h6 class="font-weight-normal">Christina Kray</h6>
</div>
</div>
<!-- End Media -->
</div>
<div class="col-md-6 col-lg-4 mb-5">
<!-- Media -->
<div class="media">
<div class="avatar avatar-sm avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<blockquote class="blockquote">What my skills are and what I can offer to them</blockquote>
<footer class="blockquote-footer">Shared on March 24, 2020</footer>
<h6 class="font-weight-normal">Brian McManus</h6>
</div>
</div>
<!-- End Media -->
</div>
<div class="col-md-6 col-lg-4 mb-5">
<!-- Media -->
<div class="media">
<div class="avatar avatar-sm avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<blockquote class="blockquote">If I know how to do certain job functions</blockquote>
<footer class="blockquote-footer">Shared on June 2, 2020</footer>
<h6 class="font-weight-normal">Max Walters</h6>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Row -->