Elements
These modular elements can be readily used and customized across pages and in different blocks.
Counter <> show code
<!-- With image background -->
<div class="countUp counter1 bg-image row justify-content-center" style="background-image: url('assets/img/bg-counter.jpg');">
<div class="col-12">
<div class="d-md-flex d-block justify-content-md-between">
<div class="d-md-flex d-block count-single-block">
<div class="icon">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
</div>
<div class="count_block">
<div class="counter">642</div>
<p class="count-text">Completed Projects</p>
</div>
</div>
<div class="d-md-flex d-block count-single-block">
...
</div>
<div class="d-md-flex d-block count-single-block">
...
</div>
<div class="d-md-flex d-block count-single-block">
...
</div>
</div>
</div>
</div>
<!-- Custom style 2 -->
<div class="countUp counter2 bg-sand px-4 pb-4">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="info text-center info-count info-boxed">
<div class="icon icon-circle">
<i class="fa fa-check-square-o" aria-hidden="true"></i>
</div>
<div class="count_block">
<div class="counter">642</div>
<p class="count-text">Completed Projects</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="info text-center info-count info-boxed">
...
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="info text-center info-count info-boxed">
...
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="info text-center info-count info-boxed">
...
</div>
</div>
</div>
</div>
how to use
- Just Copy the code. Don't remove the classnames. Use your own class for customization
Example 1:
642
Completed Projects
246
Employeers
3456
Coffee Cups
431
Happy Clients
Example 2:
642
Completed Projects
246
Employeers
3456
Coffee Cups
431
Happy Clients