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.

0 +

Build a professional website with corporate and SaaS based components.

0 +

Take advantage of more than 70 pages designed with mobile-first in mind.

0 %

of our customers rated 5-star our themes over 5 years.

0 +

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 -->
Copy
<!-- 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>
Copy

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 -->
Copy

Component #3

The most effective way to track your revenues

0
Fast-paced, detail-oriented plugins
4.84
rated on GetBootstrap
0
months of free support to do your best work
0k+
users - from new startups to public companies
Prefer to start with the Trial version? Go here 
<!-- 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 -->
Copy
<!-- 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>
Copy

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 -->
Copy

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 -->
Copy