Counters
Counter Style 1
<div class="bg-img parallax primary-overlay p-5" data-overlay-dark="8" data-background="img/bg/bg-03.jpg">
<div class="row z-index-1 position-relative">
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="counter-style-01 one">
<i class="ti-eraser text-white mb-3 mb-lg-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">Car washed daily</p>
<h3 class="text-white mb-0 h1 countup">500</h3>
</div>
</div>
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="counter-style-01 two">
<i class="ti-user text-white mb-3 mb-lg-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">Customers</p>
<h3 class="text-white mb-0 h1 countup">7500</h3>
</div>
</div>
<div class="col-md-4">
<div class="counter-style-01 three">
<i class="ti-settings text-white mb-3 mb-lg-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">Serviced daily</p>
<h3 class="text-white mb-0 h1 countup">80</h3>
</div>
</div>
</div>
</div>
Counter Style 2
2250
Happy clients
580
Consultations
800
Roofs repaired
<div class="bg-primary md mx-xl-5 p-4 p-lg-5">
<div class="row">
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="p-3 p-xl-4 bg-white border-radius-4">
<div class="media">
<div class="align-self-center">
<i class="ti-face-smile fs-1 text-primary"></i>
</div>
<div class="media-body ps-4">
<h3 class="countup h1 mb-1">2250</h3>
<p class="mb-0 fs-6 text-muted font-weight-600">Happy clients</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="p-3 p-xl-4 bg-white border-radius-4">
<div class="media">
<div class="align-self-center">
<i class="ti-announcement fs-1 text-primary"></i>
</div>
<div class="media-body ps-4">
<h3 class="countup h1 mb-1">580</h3>
<p class="mb-0 fs-6 text-muted font-weight-600">Consultations</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 p-xl-4 bg-white border-radius-4">
<div class="media">
<div class="align-self-center">
<i class="ti-layers fs-1 text-primary"></i>
</div>
<div class="media-body ps-4">
<h3 class="countup h1 mb-1">800</h3>
<p class="mb-0 fs-6 text-muted font-weight-600">Roofs repaired</p>
</div>
</div>
</div>
</div>
</div>
</div>
Counter Style 3
900
Delivered courier
350
Company awards
1978
Satisfied clients
<div class="bg-primary p-5">
<div class="row">
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0 text-center text-md-start">
<div class="counter-style-02">
<h4 class="text-white h1 mb-0"><span class="countup">900</span></h4>
<div class="borders-bottom border-width-2 opacity3 border-color-white mx-auto my-3 w-10"></div>
<p class="text-white mb-0 fs-5">Delivered courier</p>
</div>
</div>
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0 counter-center">
<div class="counter-style-02">
<h4 class="text-white h1 mb-0"><span class="countup">350</span></h4>
<div class="borders-bottom border-width-2 opacity3 border-color-white mx-auto my-3 w-10"></div>
<p class="text-white mb-0 fs-5">Company awards</p>
</div>
</div>
<div class="col-md-4 counter-center">
<div class="counter-style-02">
<h4 class="text-white h1 mb-0"><span class="countup">1978</span></h4>
<div class="borders-bottom border-width-2 opacity3 border-color-white mx-auto my-3 w-10"></div>
<p class="text-white mb-0 fs-5">Satisfied clients</p>
</div>
</div>
</div>
</div>
Counter Style 4
<div class="bg-img parallax primary-overlay p-5" data-overlay-dark="9" data-background="img/bg/bg-04.jpg">
<div class="row z-index-1 position-relative">
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="counter-style-03">
<i class="ti-eraser text-white mb-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">Types of Croper</p>
<div class="seprator-border">
<div class="vertical-border"></div>
</div>
<h3 class="text-white mb-0 h1 lh-1"><span class="countup">90</span></h3>
</div>
</div>
<div class="col-md-4 mb-1-9 mb-sm-2-2 mb-md-0">
<div class="counter-style-03">
<i class="ti-user text-white mb-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">happy customer</p>
<div class="seprator-border">
<div class="vertical-border"></div>
</div>
<h3 class="text-white mb-0 h1 lh-1"><span class="countup">1500</span></h3>
</div>
</div>
<div class="col-md-4">
<div class="counter-style-03">
<i class="ti-world text-white mb-4 fs-1 d-block"></i>
<p class="text-white fs-5 mb-3">Our branches</p>
<div class="seprator-border">
<div class="vertical-border"></div>
</div>
<h3 class="text-white mb-0 h1 lh-1"><span class="countup">40</span></h3>
</div>
</div>
</div>
</div>