Stats #1

This chart uses the showArea option to draw line, dots but also an area shape.

For more detailed charts information, see Charts page.

Revenue

Total: 12 389 00 venue

<!-- Stats -->
<div class="card border-0 shadow-sm">
  <div class="card-body p-6">
    <!-- Header -->
    <header class="d-flex justify-content-between align-items-center text-muted mb-4">
      <h3 class="h6 font-weight-semi-bold mb-0">Revenue</h3>
      <small>Total: <strong class="font-size-1">12 389 00</strong> venue</small>
    </header>
    <!-- End Header -->

    <!-- Chart -->
    <div class="js-area-chart u-area-chart mb-4"
         data-height="16rem"
         data-mobile-height="16rem"
         data-offset-x="30"
         data-offset-y="0"
         data-postfix="m"
         data-is-show-area="true"
         data-is-show-line="false"
         data-is-show-point="true"
         data-is-full-width="true"

         data-is-stack-bars="true"
         data-is-show-axis-x="false"
         data-is-show-axis-y="true"
         data-is-show-tooltips="true"
         data-tooltip-description-position="center"
         data-tooltip-custom-class="u-area-chart__tooltip"

         data-align-text-axis-x="center"
         data-fill-opacity=".8"
         data-fill-colors='["#ffc107", "#377dff"]'
         data-stroke-width=".0625rem"
         data-stroke-color="#f0f4f7"
         data-stroke-dash-array="0"
         data-text-size-x=".75rem"
         data-text-color-x="#77838f"
         data-text-offset-top-x="10"

         data-text-size-y=".75rem"
         data-text-color-y="#77838f"
         data-points-colors='["#ffc107", "#377dff"]'
         data-series='[[
            {"meta": "Orders", "value": 2000},
            {"meta": "Orders", "value": 6000},
            {"meta": "Orders", "value": 5500},
            {"meta": "Orders", "value": 7000},
            {"meta": "Orders", "value": 6000},
            {"meta": "Orders", "value": 7500}
          ], [
            {"meta": "Visits", "value": 3000},
            {"meta": "Visits", "value": 5000},
            {"meta": "Visits", "value": 4000},
            {"meta": "Visits", "value": 7000},
            {"meta": "Visits", "value": 6500},
            {"meta": "Visits", "value": 7000}
         ]]'
         data-labels='["Jan", "Feb", "Apr", "May", "Jun", "Jul"]'></div>
    <!-- End Chart -->

    <!-- Footer -->
    <footer class="d-flex justify-content-start align-items-center text-muted">
      <small class="d-inline-block mr-4">
        <span class="fas fa-circle text-primary mr-1"></span>
        Visitors
      </small>
      <small class="d-inline-block mr-4">
        <span class="fas fa-circle text-warning mr-1"></span>
        Orders
      </small>
      <div class="ml-auto">
        <a class="btn btn-xs text-right btn-soft-primary transition-3d-hover" href="#">Details</a>
      </div>
    </footer>
    <!-- End Footer -->
  </div>
</div>
<!-- End Stats -->

<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
<link rel="stylesheet" href="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
<script src="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.chartist-area-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of charts
    $.HSCore.components.HSAreaChart.init('.js-area-chart');
  });
</script>

Stats #2

22 February, 2018

35, 298 USD

1.3649%

Goal: $70,000

Duration: 1 week

22 February, 2018

27, 092 LP

-4.812%

Goal: $12,500

Duration: 1 month

22 February, 2018

7, 233 EURO

-8.4%

Goal: $45,500

Duration: 3 weeks

<div class="card-deck d-block d-lg-flex card-lg-gutters-3">
  <!-- Charts -->
  <div class="card border-0 shadow-sm mb-5 mb-lg-0">
    <header class="card-header p-6">
      <!-- Info -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <small class="d-block text-muted">22 February, 2018</small>
        <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
          <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
        </a>
      </div>
      <!-- End Info -->

      <!-- Statistics -->
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="United States Flag">
        </div>
        <div class="media-body">
          <h3 class="h6 mb-0">35, 298 USD</h3>
          <a class="small text-success" href="#">
            1.3649%
            <span class="fas fa-angle-up ml-2"></span>
          </a>
        </div>
      </div>
      <!-- End Statistics -->
    </header>

    <div class="card-body p-6">
      <!-- Goal -->
      <div class="row mb-7">
        <div class="col-6">
          <h4 class="small text-muted">
            Goal: <strong class="text-secondary">$70,000</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-6">
          <h4 class="small text-muted">
            Duration: <strong class="text-secondary">1 week</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <!-- End Goal -->

      <!-- Chart -->
      <div class="js-bar-chart"
           data-series='[
             [10,8,5,7,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8]
           ]'
           data-is-show-axis-x="false"
           data-is-show-axis-y="false"
           data-height="62px"
           data-high="10"
           data-low="0"
           data-distance="5"
           data-stroke-width="6"
           data-stroke-color="#19a0ff"></div>
      <!-- Chart -->
    </div>
  </div>
  <!-- End Charts -->

  <!-- Charts -->
  <div class="card border-0 shadow-sm mb-5 mb-lg-0">
    <header class="card-header p-6">
      <!-- Info -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <small class="d-block text-muted">22 February, 2018</small>
        <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
          <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
        </a>
      </div>
      <!-- End Info -->

      <!-- Statistics -->
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United States Flag">
        </div>
        <div class="media-body">
          <h3 class="h6 mb-0">27, 092 LP</h3>
          <a class="small text-danger" href="#">
            -4.812%
            <span class="fas fa-angle-down ml-2"></span>
          </a>
        </div>
      </div>
      <!-- End Statistics -->
    </header>

    <div class="card-body p-6">
      <!-- Goal -->
      <div class="row mb-7">
        <div class="col-6">
          <h4 class="small text-muted">
            Goal: <strong class="text-secondary">$12,500</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 12%;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-6">
          <h4 class="small text-muted">
            Duration: <strong class="text-secondary">1 month</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <!-- End Goal -->

      <!-- Chart -->
      <div class="js-bar-chart"
           data-series='[
             [3,5,5,7,6,1,10,1,8,5,7,2,6,10,6,6,4,10,8,5,7,2,6,10,6,6,10,1,8]
           ]'
           data-is-show-axis-x="false"
           data-is-show-axis-y="false"
           data-height="62px"
           data-high="10"
           data-low="0"
           data-distance="5"
           data-stroke-width="6"
           data-stroke-color="#ec5245"></div>
      <!-- Chart -->
    </div>
  </div>
  <!-- End Charts -->

  <!-- Charts -->
  <div class="card border-0 shadow-sm">
    <header class="card-header p-6">
      <!-- Info -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <small class="d-block text-muted">22 February, 2018</small>
        <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
          <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
        </a>
      </div>
      <!-- End Info -->

      <!-- Statistics -->
      <div class="media align-items-center">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="United States Flag">
        </div>
        <div class="media-body">
          <h3 class="h6 mb-0">7, 233 EURO</h3>
          <a class="small text-danger" href="#">
            -8.4%
            <span class="fas fa-angle-down ml-2"></span>
          </a>
        </div>
      </div>
      <!-- End Statistics -->
    </header>

    <div class="card-body p-6">
      <!-- Goal -->
      <div class="row mb-7">
        <div class="col-6">
          <h4 class="small text-muted">
            Goal: <strong class="text-secondary">$45,500</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        <div class="col-6">
          <h4 class="small text-muted">
            Duration: <strong class="text-secondary">3 weeks</strong>
          </h4>
          <div class="js-hr-progress progress" style="height: 6px;">
            <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <!-- End Goal -->

      <!-- Chart -->
      <div class="js-bar-chart"
           data-series='[
             [2,3,5,7,4,6,5,6,8,7,7,6,6,10,6,6,10,7,8,5,7,6,3,10,6,6,1,3,1]
           ]'
           data-is-show-axis-x="false"
           data-is-show-axis-y="false"
           data-height="62px"
           data-high="10"
           data-low="0"
           data-distance="5"
           data-stroke-width="6"
           data-stroke-color="#fdd14e"></div>
      <!-- Chart -->
    </div>
  </div>
  <!-- End Charts -->
</div>

<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
<link rel="stylesheet" href="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
<script src="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.progress-bar.js"></script>
<script src="../../assets/js/components/hs.chartist-bar-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of horizontal progress bars
    var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
      direction: 'horizontal',
      indicatorSelector: '.js-hr-progress-bar'
    });

    // initialization of chartist bar charts
    $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
  });
</script>

Stats #3

<div class="container space-2">
  <div class="row">
    <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
      <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
             data-circles-text-class="u-stats-progress__info"
             data-circles-value="25"
             data-circles-max-value="100"
             data-circles-bg-color="#f8fafd"
             data-circles-fg-color="#ffc107"
             data-circles-fg-stroke-linecap="round"
             data-circles-fg-stroke-miterlimit="10"
             data-circles-radius="100"
             data-circles-stroke-width="8"
             data-circles-additional-text="Top "
             data-circles-additional-text-type="prefix"
             data-circles-duration="2000"
             data-circles-scroll-animate="true"
             data-circles-color="#ffc107"
             data-circles-font-size="24"
             data-circles-font-weight="500"
             data-circles-secondary-text="One of the world's top research companies"
             data-circles-secondary-color="#77838f"
             data-circles-secondary-font-size="13"
             data-circles-secondary-font-weight="400"
             data-circles-divider-space="10"></div>
        <!-- End Pie Circle -->
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
      <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
             data-circles-text-class="u-stats-progress__info"
             data-circles-value="90"
             data-circles-max-value="100"
             data-circles-bg-color="#f8fafd"
             data-circles-fg-color="#377dff"
             data-circles-fg-stroke-linecap="round"
             data-circles-fg-stroke-miterlimit="10"
             data-circles-radius="100"
             data-circles-stroke-width="8"
             data-circles-additional-text="%"
             data-circles-duration="2000"
             data-circles-scroll-animate="true"
             data-circles-color="#377dff"
             data-circles-font-size="24"
             data-circles-font-weight="500"
             data-circles-secondary-text="of our research is ranked at world standard or above"
             data-circles-secondary-color="#77838f"
             data-circles-secondary-font-size="13"
             data-circles-secondary-font-weight="400"
             data-circles-divider-space="10"></div>
        <!-- End Pie Circle -->
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
      <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
             data-circles-text-class="u-stats-progress__info"
             data-circles-value="70"
             data-circles-max-value="100"
             data-circles-bg-color="#f8fafd"
             data-circles-fg-color="#de4437"
             data-circles-fg-stroke-linecap="round"
             data-circles-fg-stroke-miterlimit="10"
             data-circles-radius="100"
             data-circles-stroke-width="8"
             data-circles-additional-text="+"
             data-circles-duration="2000"
             data-circles-scroll-animate="true"
             data-circles-color="#de4437"
             data-circles-font-size="24"
             data-circles-font-weight="500"
             data-circles-secondary-text="research centres"
             data-circles-secondary-color="#77838f"
             data-circles-secondary-font-size="13"
             data-circles-secondary-font-weight="400"
             data-circles-divider-space="10"></div>
        <!-- End Pie Circle -->
      </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
      <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
             data-circles-text-class="u-stats-progress__info"
             data-circles-is-hide-value="true"
             data-circles-value="40"
             data-circles-max-value="100"
             data-circles-bg-color="#f8fafd"
             data-circles-fg-color="#00c9a7"
             data-circles-fg-stroke-linecap="round"
             data-circles-fg-stroke-miterlimit="10"
             data-circles-radius="100"
             data-circles-stroke-width="8"
             data-circles-additional-text="Tripling"
             data-circles-additional-text-type="prefix"
             data-circles-duration="2000"
             data-circles-scroll-animate="true"
             data-circles-color="#00c9a7"
             data-circles-font-size="24"
             data-circles-font-weight="500"
             data-circles-secondary-text="our investment in research"
             data-circles-secondary-color="#77838f"
             data-circles-secondary-font-size="13"
             data-circles-secondary-font-weight="400"
             data-circles-divider-space="10"></div>
        <!-- End Pie Circle -->
      </div>
    </div>
  </div>
</div>

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/circles/circles.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.chart-pie.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chart pies
    var items = $.HSCore.components.HSChartPie.init('.js-pie');
  });
</script>

25

Top rated
agency companies

$19

Historical earnings
per click

50%

Average
registration rate

<!-- Stats Section -->
<div class="container space-2">
  <div class="row justify-content-center">
    <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
      <!-- Stats -->
      <div class="text-center">
        <div class="position-relative">
          <div class="u-indicator-dots">
            <h4 class="display-4 text-primary mb-0">25</h4>
          </div>
        </div>
        <p class="mb-0">Top rated<br>agency companies</p>
      </div>
      <!-- End Stats -->
    </div>

    <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
      <!-- Stats -->
      <div class="text-center">
        <div class="position-relative">
          <div class="u-indicator-dots">
            <h4 class="display-4 text-primary mb-0">$19</h4>
          </div>
        </div>
        <p class="mb-0">Historical earnings<br>per click</p>
      </div>
      <!-- End Stats -->
    </div>

    <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
      <!-- Stats -->
      <div class="text-center">
        <div class="position-relative">
          <h4 class="display-4 text-primary mb-0">50%</h4>
        </div>
        <p class="mb-0">Average<br>registration rate</p>
      </div>
    </div>
  </div>
  <!-- End Stats -->
</div>
<!-- End Stats Section -->

Stats #5

Result
HTML

2M

2 million daily active users

7k

Over 7k open job positions

10M

Over 10 million stories shared

<!-- Stats Section -->
<div class="container space-2">
  <div class="row justify-content-md-between">
    <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-7 mb-lg-0">
      <!-- Figures -->
      <div class="text-center">
        <h3 class="display-2 text-primary font-weight-semi-bold">2M</h3>
        <p>2 million daily active users</p>
      </div>
      <!-- End Figures -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-0">
      <!-- Figures -->
      <div class="text-center">
        <h3 class="display-2 text-primary font-weight-semi-bold">7k</h3>
        <p>Over 7k open job positions</p>
      </div>
      <!-- End Figures -->
    </div>

    <div class="col-sm-6 col-lg-4">
      <!-- Figures -->
      <div class="text-center">
        <h3 class="display-2 text-primary font-weight-semi-bold">10M</h3>
        <p>Over 10 million stories shared</p>
      </div>
      <!-- End Figures -->
    </div>
  </div>
</div>
<!-- End Stats Section -->

Stats #6

Result
HTML

$45.99

Available balance

$1.32

Reward balance

$0.00

Pending balance

<!-- Stats -->
<div class="card-deck d-block d-lg-flex card-lg-gutters-3 mb-6">
  <!-- Card -->
  <div class="card mb-3 mb-lg-0">
    <div class="card-body p-5">
      <div class="media align-items-center">
        <span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mr-4">
          <span class="fas fa-dollar-sign btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <span class="d-block font-size-3">$45.99</span>
          <h2 class="h6 text-secondary font-weight-normal mb-0">Available balance</h2>
        </div>
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card mb-3 mb-lg-0">
    <div class="card-body p-5">
      <div class="media align-items-center">
        <span class="btn btn-lg btn-icon btn-soft-success rounded-circle mr-4">
          <span class="fas fa-coins btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <span class="d-block font-size-3">$1.32</span>
          <h3 class="h6 text-secondary font-weight-normal mb-0">Reward balance</h3>
        </div>
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card">
    <div class="card-body p-5">
      <div class="media align-items-center">
        <span class="btn btn-lg btn-icon btn-soft-warning rounded-circle mr-4">
          <span class="fas fa-exchange-alt btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <span class="d-block font-size-3">$0.00</span>
          <h3 class="h6 text-secondary font-weight-normal mb-0">Pending balance</h3>
        </div>
      </div>
    </div>
  </div>
  <!-- End Card -->
</div>
<!-- End Stats -->

Stats #7

Deposits

$ 50,102

Deposit: $1,050

+2.1% ($122)

Goal: $100k

Duration: 6 months

<!-- Stats -->
<div class="card mb-7 mb-lg-0">
  <div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
    <!-- Title & Settings -->
    <div class="d-flex justify-content-between align-items-center">
      <h4 class="h6 mb-0">Deposits</h4>

      <!-- Settings Dropdown -->
      <div class="position-relative">
        <a id="depositSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
           aria-controls="depositSettingsDropdown"
           aria-haspopup="true"
           aria-expanded="false"
           data-unfold-event="click"
           data-unfold-target="#depositSettingsDropdown"
           data-unfold-type="css-animation"
           data-unfold-duration="300"
           data-unfold-delay="300"
           data-unfold-hide-on-scroll="true"
           data-unfold-animation-in="slideInUp"
           data-unfold-animation-out="fadeOut">
          <span class="fas fa-ellipsis-h btn-icon__inner"></span>
        </a>

        <div id="depositSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="depositSettingsDropdownInvoker" style="min-width: 190px;">
          <a class="dropdown-item" href="#">
            <small class="fas fa-cogs dropdown-item-icon"></small>
            Settings
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
            Download
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-archive dropdown-item-icon"></small>
            Archive
          </a>
        </div>
      </div>
      <!-- End Settings Dropdown -->
    </div>
    <!-- End Title & Settings -->

    <hr class="mt-3 mb-4">

    <!-- Deposit Info -->
    <div class="row mb-5">
      <div class="col-sm-6 mb-4 mb-sm-0">
        <span class="align-top">$</span>
        <span class="font-size-3 font-weight-medium text-lh-sm">50,102</span>
        <div class="mb-1">
          <span class="text-secondary font-size-1">Deposit:</span>
          <span class="font-weight-medium font-size-1">$1,050</span>
        </div>
        <div>
          <span class="text-primary font-weight-medium text-lh-sm">
            <span class="fas fa-arrow-up text-success small"></span>
            +2.1% ($122)
          </span>
        </div>
      </div>

      <div class="col-sm-6 align-self-end">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
           data-circles-text-class="content-centered-y"
           data-circles-value="54"
           data-circles-max-value="100"
           data-circles-bg-color="rgba(0, 201, 167, 0.1)"
           data-circles-fg-color="#00c9a7"
           data-circles-radius="50"
           data-circles-stroke-width="4"
           data-circles-additional-text="%"
           data-circles-duration="2000"
           data-circles-scroll-animate="true"
           data-circles-color="#00c9a7"
           data-circles-font-size="24"></div>
        <!-- End Pie Circle -->
      </div>
    </div>

    <button type="button" class="btn btn-block btn-sm btn-primary transition-3d-hover">Add Funds</button>
    <!-- End Deposit Info -->
  </div>

  <div class="card-footer p-5">
    <!-- Progress Info -->
    <div class="row align-items-center">
      <div class="col-6 u-ver-divider">
        <label class="small text-muted">Goal:</label>
        <small class="font-weight-medium">$100k</small>
        <div class="js-hr-progress progress" style="height: 4px;">
          <div class="js-hr-progress-bar progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

      <div class="col-6">
        <label class="small text-muted">Duration:</label>
        <small class="font-weight-medium">6 months</small>
        <div class="js-hr-progress progress" style="height: 4px;">
          <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <!-- End Progress Info -->
  </div>
</div>
<!-- End Stats -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/circles/circles.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.chart-pie.js"></script>
<script src="../../assets/js/components/hs.progress-bar.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

    // initialization of chart pies
    var items = $.HSCore.components.HSChartPie.init('.js-pie');

    // initialization of horizontal progress bars
    var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
      direction: 'horizontal',
      indicatorSelector: '.js-hr-progress-bar'
    });
  });
</script>

Stats #8

Balance

Available: $45.99

Pending: $0.00

May

Jun

Jul

Aug

<!-- Stats -->
<div class="card mb-7 mb-lg-0">
  <div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
    <!-- Title & Settings -->
    <div class="d-flex justify-content-between align-items-center">
      <h4 class="h6 mb-0">Balance</h4>

      <!-- Settings Dropdown -->
      <div class="position-relative">
        <a id="balanceSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
           aria-controls="balanceSettingsDropdown"
           aria-haspopup="true"
           aria-expanded="false"
           data-unfold-event="click"
           data-unfold-target="#balanceSettingsDropdown"
           data-unfold-type="css-animation"
           data-unfold-duration="300"
           data-unfold-delay="300"
           data-unfold-hide-on-scroll="true"
           data-unfold-animation-in="slideInUp"
           data-unfold-animation-out="fadeOut">
          <span class="fas fa-ellipsis-h btn-icon__inner"></span>
        </a>

        <div id="balanceSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="balanceSettingsDropdownInvoker" style="min-width: 190px;">
          <a class="dropdown-item" href="#">
            <small class="fas fa-cogs dropdown-item-icon"></small>
            Settings
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
            Download
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-archive dropdown-item-icon"></small>
            Archive
          </a>
        </div>
      </div>
      <!-- End Settings Dropdown -->
    </div>
    <!-- End Title & Settings -->

    <hr class="mt-3 mb-4">

    <!-- Balance Info -->
    <div class="row align-items-center mb-4">
      <div class="col-6 u-ver-divider">
        <label class="d-block small text-muted mb-0">Available:</label>
        <span class="font-weight-medium">$45.99</span>
      </div>

      <div class="col-6">
        <label class="d-block small text-muted mb-0">Pending:</label>
        <span class="font-weight-medium">$0.00</span>
      </div>
    </div>

    <div class="row">
      <div class="col-3">
        <div class="js-vr-progress progress-vertical rounded mb-2">
          <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="text-center">
          <h4 class="small mb-0">May</h4>
        </div>
      </div>
      <div class="col-3">
        <div class="js-vr-progress progress-vertical rounded mb-2">
          <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="text-center">
          <h4 class="small mb-0">Jun</h4>
        </div>
      </div>
      <div class="col-3">
        <div class="js-vr-progress progress-vertical rounded mb-2">
          <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 23%;" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="text-center">
          <h4 class="small mb-0">Jul</h4>
        </div>
      </div>
      <div class="col-3">
        <div class="js-vr-progress progress-vertical rounded mb-2">
          <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 39%;" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="text-center">
          <h4 class="small mb-0">Aug</h4>
        </div>
      </div>
    </div>
    <!-- End Balance Info -->
  </div>
</div>
<!-- End Stats -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/appear.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.progress-bar.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

    // initialization of horizontal progress bars
    var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress', {
      direction: 'vertical',
      indicatorSelector: '.js-vr-progress-bar'
    });
  });
</script>

Stats #9

Referrals

Overall: $ 1,350

Monthly: $425

<!-- Stats -->
<div class="bg-primary shadow-primary-lg rounded pt-4 pb-5 px-5">
  <!-- Title & Settings -->
  <div class="d-flex justify-content-between align-items-center">
    <h4 class="h6 text-white mb-0">Referrals</h4>

    <!-- Settings Dropdown -->
    <div class="position-relative">
      <a id="referralsSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent" href="javascript:;" role="button"
         aria-controls="referralsSettingsDropdown"
         aria-haspopup="true"
         aria-expanded="false"
         data-unfold-event="click"
         data-unfold-target="#referralsSettingsDropdown"
         data-unfold-type="css-animation"
         data-unfold-duration="300"
         data-unfold-delay="300"
         data-unfold-hide-on-scroll="true"
         data-unfold-animation-in="slideInUp"
         data-unfold-animation-out="fadeOut">
        <span class="fas fa-ellipsis-h btn-icon__inner"></span>
      </a>

      <div id="referralsSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="referralsSettingsDropdownInvoker" style="min-width: 190px;">
        <a class="dropdown-item" href="#">
          <small class="fas fa-cogs dropdown-item-icon"></small>
          Settings
        </a>
        <a class="dropdown-item" href="#">
          <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
          Download
        </a>
        <a class="dropdown-item" href="#">
          <small class="fas fa-archive dropdown-item-icon"></small>
          Archive
        </a>
      </div>
    </div>
    <!-- End Settings Dropdown -->
  </div>
  <!-- End Title & Settings -->

  <hr class="opacity-md mt-3 mb-4">

  <!-- Referral Info -->
  <div class="py-2">
    <div class="row">
      <div class="col-6">
        <div class="mb-3">
          <span class="d-block text-white-70 font-size-1">Overall:</span>
          <span class="align-top text-white">$</span>
          <span class="text-white font-size-3 font-weight-medium text-lh-sm">1,350</span>
        </div>
        <span class="text-white-70 font-size-1">Monthly:</span>
        <span class="text-white font-weight-medium font-size-1">$425</span>
      </div>

      <div class="col-6 align-self-end">
        <!-- Pie Circle -->
        <div class="js-pie text-center"
           data-circles-text-class="content-centered-y"
           data-circles-value="54"
           data-circles-max-value="100"
           data-circles-bg-color="rgba(255, 255, 255, 0.1)"
           data-circles-fg-color="#ffffff"
           data-circles-radius="50"
           data-circles-stroke-width="4"
           data-circles-duration="2000"
           data-circles-scroll-animate="true"
           data-circles-color="#ffffff"
           data-circles-font-size="24"></div>
        <!-- End Pie Circle -->
      </div>
    </div>
  </div>
  <!-- End Referral Info -->
</div>
<!-- End Stats -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/circles/circles.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.chart-pie.js"></script>
<script src="../../assets/js/components/hs.progress-bar.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

    // initialization of chart pies
    var items = $.HSCore.components.HSChartPie.init('.js-pie');

    // initialization of horizontal progress bars
    var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
      direction: 'horizontal',
      indicatorSelector: '.js-hr-progress-bar'
    });
  });
</script>

SVG blocks #10

We're coming soon.

Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.

Days

Hours

Mins

Secs

<!-- Hero Section -->
<div class="d-lg-flex">
  <div class="container d-lg-flex align-items-lg-center height-lg-100vh space-bottom-1 space-top-3 space-bottom-lg-3 space-lg-0">
    <div class="row align-items-lg-center w-100 mt-lg-9">
      <!-- SVG Icon -->
      <div class="col-lg-6 mb-7 mb-lg-0">
        <figure id="SVGvirtualReality" class="svg-preloader ie-virtual-reality">
          <img class="js-svg-injector" src="../../assets/svg/illustrations/virtual-reality.svg" alt="Image Description"
               data-parent="#SVGvirtualReality">
        </figure>
      </div>
      <!-- End SVG Icon -->

      <div class="col-lg-6">
        <div class="pl-lg-4">
          <!-- Title -->
          <div class="mb-4">
            <h1 class="text-primary font-weight-normal">We're coming <span class="font-weight-semi-bold">soon</span>.</h1>
            <p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
          </div>
          <!-- End Title -->

          <!-- Countdown -->
          <div class="js-countdown row mb-5"
               data-end-date="2020/11/30"
               data-month-format="%m"
               data-days-format="%D"
               data-hours-format="%H"
               data-minutes-format="%M"
               data-seconds-format="%S">
            <div class="col-3">
              <strong class="js-cd-days h3 text-primary font-weight-semi-bold mb-0"></strong>
              <span class="h5 font-weight-normal mb-0">Days</span>
            </div>
            <div class="col-3">
              <strong class="js-cd-hours h3 text-primary font-weight-semi-bold mb-0"></strong>
              <span class="h5 font-weight-normal mb-0">Hours</span>
            </div>
            <div class="col-3">
              <strong class="js-cd-minutes h3 text-primary font-weight-semi-bold mb-0"></strong>
              <span class="h5 font-weight-normal mb-0">Mins</span>
            </div>
            <div class="col-3">
              <strong class="js-cd-seconds h3 text-primary font-weight-semi-bold mb-0"></strong>
              <span class="h5 font-weight-normal mb-0">Secs</span>
            </div>
          </div>
          <!-- End Countdown -->

          <!-- Input -->
          <form class="js-validate js-form-message js-focus-state">
            <label class="sr-only" for="subscribeSrEmail">Enter your email address</label>
            <div class="input-group">
              <input type="text" class="form-control" name="name" id="subscribeSrEmail" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeEmailButton" required
                     data-msg="Please enter a valid email address."
                     data-error-class="u-has-error"
                     data-success-class="u-has-success">
              <div class="input-group-append">
                <button type="submit" class="btn btn-primary" id="subscribeEmailButton">Subscribe</button>
              </div>
            </div>
          </form>
          <!-- End Input -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Hero Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="../../assets/vendor/jquery.countdown.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.countdown.js"></script>
<script src="../assets/js/components/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');

    // initialization of countdowns
    var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
      yearsElSelector: '.js-cd-years',
      monthElSelector: '.js-cd-month',
      daysElSelector: '.js-cd-days',
      hoursElSelector: '.js-cd-hours',
      minutesElSelector: '.js-cd-minutes',
      secondsElSelector: '.js-cd-seconds'
    });

    // initialization of form validation
    $.HSCore.components.HSValidation.init('.js-validate');
  });
</script>