Stats
Component #1
The powerful and flexible theme for all kinds of businesses
Whether you're creating a subscription service, an on-demand marketplace, an e-commerce store, or a portfolio showcase, Front's unmatched functionality help you create the best possible product for your users.
300
+
Build a professional website with corporate and SaaS based components.
70
+
Take advantage of more than 70 pages designed with mobile-first in mind.
95
%
of our customers rated 5-star our themes over 5 years.
20
+
We continually deploy improvements to Front, which handles more than 3.5k users.
<!-- Features Section -->
<div class="container space-2">
<div class="row justify-content-lg-between">
<div class="col-lg-5 order-lg-2 pl-lg-0">
<div class="bg-img-hero h-100 min-h-450rem rounded" style="background-image: url(../../assets/img/900x900/img19.jpg);"></div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="pt-8 pb-lg-8">
<!-- Title -->
<div class="mb-5 mb-md-7">
<h2 class="mb-3">The powerful and flexible theme for all kinds of businesses</h2>
<p>Whether you're creating a subscription service, an on-demand marketplace, an e-commerce store, or a portfolio showcase, Front's unmatched functionality help you create the best possible product for your users.</p>
</div>
<!-- End Title -->
<div class="row">
<div class="col-6 mb-3 mb-md-5">
<div class="pr-lg-4">
<span class="js-counter h2 text-primary">300</span>
<span class="h2 text-primary">+</span>
<p>Build a professional website with corporate and SaaS based components.</p>
</div>
</div>
<div class="col-6 mb-3 mb-md-5">
<div class="pr-lg-4">
<span class="js-counter h2 text-primary">70</span>
<span class="h2 text-primary">+</span>
<p>Take advantage of more than 70 pages designed with mobile-first in mind.</p>
</div>
</div>
<div class="col-6">
<div class="pr-lg-4">
<span class="js-counter h2 text-primary">95</span>
<span class="h2 text-primary">%</span>
<p>of our customers rated 5-star our themes over 5 years.</p>
</div>
</div>
<div class="col-6">
<div class="pr-lg-4">
<span class="js-counter h2 text-primary">20</span>
<span class="h2 text-primary">+</span>
<p>We continually deploy improvements to Front, which handles more than 3.5k users.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-counter/dist/hs-counter.min.js"></script>
<script src="../../assets/vendor/appear.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of counter
$('.js-counter').each(function() {
var counter = new HSCounter($(this)).init();
});
});
</script>
Component #2
4.83 out of 5 starts from 53 reviews
Over 500 support questions have been closed
3,700 Front copies have been purchased
<!-- Stats Section -->
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="text-center px-md-3 px-lg-7">
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 71.7 64" width="71" height="64">
<path fill="#FFC107" d="M36.8,14.6L42,25.3c0,0.2,0.2,0.2,0.3,0.3L54,27.2c0.3,0,0.5,0.5,0.3,0.8l-8.5,8.2c-0.2,0.2-0.2,0.3-0.2,0.5
l2,11.7c0,0.3-0.3,0.7-0.7,0.5l-10.5-5.6c-0.2,0-0.3,0-0.5,0l-10.5,5.6c-0.3,0.2-0.8-0.2-0.7-0.5l2-11.7c0-0.2,0-0.3-0.2-0.5
L18,28.1c-0.3-0.3-0.2-0.8,0.3-0.8L30,25.6c0.2,0,0.3-0.2,0.3-0.3l5.3-10.7C36.1,14.2,36.6,14.2,36.8,14.6z"/>
<path opacity=".25" fill="#FFC107" d="M56,5.9l1.5,2.8c0,0,0,0,0.2,0l3.1,0.5c0.2,0,0.2,0.2,0,0.2l-2.3,2.3c0,0,0,0,0,0.2l0.5,3.1
c0,0.2-0.2,0.2-0.2,0.2L56,13.6h-0.2L53,15.1c-0.2,0-0.2,0-0.2-0.2l0.5-3.1v-0.2l-2.3-2.3V9.2l3.1-0.5c0,0,0,0,0.2,0l1.5-2.8
C55.8,5.7,55.8,5.7,56,5.9z"/>
<path opacity=".25" fill="#FFC107" d="M12.3,0.3l1.3,2.8c0,0,0,0,0.2,0l3,0.5c0.2,0,0.2,0.2,0,0.2l-2.1,2.1c0,0,0,0,0,0.2l0.5,3
c0,0.2-0.2,0.2-0.2,0.2l-2.6-1.5c0,0,0,0-0.2,0L9.5,9.2c-0.2,0-0.2,0-0.2-0.2l0.5-3c0,0,0,0,0-0.2L7.5,3.7V3.6l3-0.5c0,0,0,0,0.2,0
l1.3-2.8C12.1,0.3,12.3,0.3,12.3,0.3z"/>
<path opacity=".25" fill="#FFC107" d="M13.9,49.9l1.5,2.8c0,0,0,0,0.2,0l3.1,0.5c0.2,0,0.2,0.2,0,0.2l-2.3,2.3c0,0,0,0,0,0.2l0.5,3.1
c0,0.2-0.2,0.2-0.2,0.2l-2.8-1.5h-0.2L11,59.1c-0.2,0-0.2,0-0.2-0.2l0.5-3.1v-0.2L9,53.4v-0.2l3.1-0.5c0,0,0,0,0.2,0l1.3-2.8
C13.8,49.8,13.9,49.8,13.9,49.9z"/>
<path opacity=".25" fill="#FFC107" d="M60.8,53.5l1.6,3.1c0,0,0,0,0.2,0l3.5,0.5c0.2,0,0.2,0.2,0,0.3l-2.5,2.5c0,0,0,0,0,0.2l0.7,3.5
c0,0.2-0.2,0.2-0.2,0.2l-3.1-1.6h-0.2l-3.1,1.6c-0.2,0-0.2,0-0.2-0.2l0.7-3.5v-0.2l-2.5-2.5c-0.2-0.2,0-0.2,0-0.3l3.5-0.5h0.2
l1.6-3.1C60.4,53.4,60.6,53.4,60.8,53.5z"/>
</svg>
</figure>
<p class="mb-0"><span class="text-dark font-weight-bold">4.83 out of 5 starts</span> from 53 reviews</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="text-center column-divider-md column-divider-20deg px-md-3 px-lg-7">
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 71.7 64" width="71" height="64">
<defs>
<circle id="SVGID_1_" cx="50.9" cy="43.1" r="18.9"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_"/>
</clipPath>
<g transform="matrix(1 0 0 1 0 1.907349e-06)" style="clip-path:url(#SVGID_2_);">
<image width="100" height="100" xlink:href="../../assets/img/100x100/img10.jpg" transform="matrix(0.36 0 0 0.36 32.8571 25.1429)"></image>
</g>
<use xlink:href="#SVGID_1_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
<defs>
<circle id="SVGID_3_" cx="34.6" cy="20.9" r="18.9"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_"/>
</clipPath>
<g style="clip-path:url(#SVGID_4_);">
<image width="100" height="100" xlink:href="../../assets/img/100x100/img3.jpg" transform="matrix(0.36 0 0 0.36 16.5714 2.8571)"></image>
</g>
<use xlink:href="#SVGID_3_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
<defs>
<circle id="SVGID_5_" cx="20.9" cy="43.1" r="18.9"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_"/>
</clipPath>
<g style="clip-path:url(#SVGID_6_);">
<image width="100" height="100" xlink:href="../../assets/img/100x100/img2.jpg" transform="matrix(0.3771 0 0 0.3771 2 24.2857)"></image>
</g>
<use xlink:href="#SVGID_5_" fill="none" stroke="#FFFFFF" stroke-width="4"/>
</svg>
</figure>
<p class=" mb-0">Over <span class="text-dark font-weight-bold">500</span> support questions have been closed</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4">
<!-- Stats -->
<div class="text-center column-divider-md column-divider-20deg px-md-3 px-lg-7">
<figure class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="71" height="64" viewBox="0 0 71.7 64">
<path fill="none" stroke="#21325b" stroke-width="2" d="M47.9,1.3H20.1c-2,0-3.5,1.5-3.5,3.5v51.4c0,2,1.5,3.5,3.5,3.5h36.5c2,0,3.5-1.5,3.5-3.5v-8.6V21.2v-7.5
L47.9,1.3z"/>
<path fill="#21325b" d="M49.1,14.7c-1.1,0-1.8-0.9-1.8-1.8V2L60,14.7H49.1z"/>
<line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="21" x2="28" y2="21"/>
<line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="27.9" x2="28" y2="27.9"/>
<line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="34.8" x2="28" y2="34.8"/>
<line fill="none" stroke="#21325b" stroke-width="2" stroke-linecap="round" x1="48.2" y1="42" x2="28" y2="42"/>
<path opacity=".2" fill="#21325b" d="M17.1,56V10.2c0-1.4-1.1-2.5-2.5-2.5h-0.5c-1.4,0-2.5,1.1-2.5,2.5v51.1c0,1.4,1.1,2.5,2.5,2.5h2.9h34.7
c1.4,0,2.5-1.1,2.5-2.5v-0.5c0-1.4-1.1-2.5-2.5-2.5H19.5C18.1,58.4,17.1,57.4,17.1,56z"/>
</svg>
</figure>
<p class="mb-0"><span class="text-dark font-weight-bold">3,700</span> Front copies have been purchased</p>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<!-- End Stats Section -->
Component #3
<!-- Stats Progress 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">
<h2>The most effective way to track your revenues</h2>
</div>
<!-- End Title -->
<div class="row mb-7">
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="stats-progress position-relative d-flex align-items-center justify-content-center">
<!-- Pie Circle -->
<div class="js-circle text-center"
data-hs-circles-options='{
"value": 47,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["#f8fafd", "#00c9a7"],
"radius": 100,
"width": 8,
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": "10",
"textClass": "stats-progress-info",
"textFontSize": 24,
"textFontWeight": 500,
"textColor": "#00c9a7",
"secondaryText": "Fast-paced, detail-oriented plugins",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"dividerSpace": "10"
}'></div>
<!-- End Pie Circle -->
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="stats-progress position-relative d-flex align-items-center justify-content-center">
<!-- Pie Circle -->
<div class="js-circle text-center"
data-hs-circles-options='{
"value": 85,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["#f8fafd", "#ffc107"],
"radius": 100,
"width": 8,
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": "10",
"isHideValue": true,
"additionalText": "4.84",
"additionalTextType": "prefix",
"textClass": "stats-progress-info",
"textFontSize": 24,
"textFontWeight": 500,
"textColor": "#ffc107",
"secondaryText": "rated on GetBootstrap",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"dividerSpace": "10"
}'></div>
<!-- End Pie Circle -->
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="stats-progress position-relative d-flex align-items-center justify-content-center">
<!-- Pie Circle -->
<div class="js-circle text-center"
data-hs-circles-options='{
"value": 6,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["#f8fafd", "#de4437"],
"radius": 100,
"width": 8,
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": "10",
"textClass": "stats-progress-info",
"textFontSize": 24,
"textFontWeight": 500,
"textColor": "#de4437",
"secondaryText": "months of free support to do your best work",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"dividerSpace": "10"
}'></div>
<!-- End Pie Circle -->
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="stats-progress position-relative d-flex align-items-center justify-content-center">
<!-- Pie Circle -->
<div class="js-circle text-center"
data-hs-circles-options='{
"value": 45,
"maxValue": 100,
"duration": 2000,
"isViewportInit": true,
"colors": ["#f8fafd", "#377dff"],
"radius": 100,
"width": 8,
"fgStrokeLinecap": "round",
"fgStrokeMiterlimit": "10",
"additionalText": "k+",
"textClass": "stats-progress-info",
"textFontSize": 24,
"textFontWeight": 500,
"textColor": "#377dff",
"secondaryText": "users - from new startups to public companies",
"secondaryTextColor": "#77838f",
"secondaryTextFontSize": "13",
"secondaryTextFontWeight": "400",
"dividerSpace": "10"
}'></div>
<!-- End Pie Circle -->
</div>
</div>
</div>
<!-- Info -->
<div class="text-center">
<div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
Prefer to start with the Trial version? <a class="d-block d-sm-inline-block font-weight-bold ml-sm-3" href="#">Go here <span class="fas fa-angle-right fa-sm ml-1"></span></a>
</div>
</div>
<!-- End Info -->
</div>
<!-- End Stats Progress Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/circles/circles.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.circles.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of circles
$('.js-circle').each(function () {
var circle = $.HSCore.components.HSCircles.init($(this));
});
});
</script>
Component #4
2M+
Actions automated monthly
$55M+
Ad budgets managed monthly
37K+
Clients around the world
<!-- Stats Section -->
<div class="container space-2">
<div class="w-lg-80 mx-lg-auto">
<div class="row">
<div class="col-sm-4 mb-3 mb-sm-0">
<div class="text-center">
<span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">2M+</span>
<p>Actions automated monthly</p>
</div>
</div>
<div class="col-sm-4 mb-3 mb-sm-0">
<div class="text-center">
<span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">$55M+</span>
<p>Ad budgets managed monthly</p>
</div>
</div>
<div class="col-sm-4">
<div class="text-center">
<span class="d-block font-size-5 font-size-md-down-3 text-dark font-weight-bold">37K+</span>
<p>Clients around the world</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Stats Section -->
Component #5
<!-- Stats Section -->
<div class="bg-light rounded mx-3 mx-md-8">
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Stats -->
<a class="d-block text-center px-md-3" href="#">
<img class="clients mb-3" src="../../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
<span class="d-block h2">4.84 / 5</span>
<p class="text-body">based on more than 49 real user reviews on Bootstrap Themes</p>
</a>
<!-- End Stats -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Stats -->
<a class="d-block text-center column-divider-md column-divider-20deg px-md-3" href="#">
<img class="clients mb-3" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
<span class="d-block h2">$25,000</span>
<p class="text-body">at your company's disposal after accepting your application</p>
</a>
<!-- End Stats -->
</div>
<div class="col-md-4">
<!-- Stats -->
<a class="d-block text-center column-divider-md column-divider-20deg px-md-3" href="#">
<img class="clients mb-3" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
<span class="d-block h2">40,000+</span>
<p class="text-body">business owners use Front across all over the world</p>
</a>
<!-- End Stats -->
</div>
</div>
</div>
</div>
<!-- End Stats Section -->