Statistic
Great flexibility with the usage of SVG and responsive design, the stats blocks are advanced features to present the stats of your business.
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
<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>
Stats #4
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
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
$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
<!-- 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
<!-- 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
<!-- 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>