Statistic Counter

index.html

<section id="statistic" class="statistic-section one-page-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-xs-12 col-md-3">
                    <div class="counter">
                        <i class="fa fa-coffee fa-2x stats-icon"></i>
                        <h2 class="timer count-title count-number">999</h2>
                        <div class="stats-line-black"></div>
                        <p class="stats-text">Coffee Cups</p>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3">
                    <div class="counter">
                        <i class="fa fa-code fa-2x stats-icon"></i>
                        <h2 class="timer count-title count-number">10000
                        </h2>
                        <div class="stats-line-black"></div>
                        <p class="stats-text">Line Code</p>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3">
                    <div class="counter">
                        <i class="fa fa-clock-o fa-2x stats-icon"></i>
                        <h2 class="timer count-title count-number">6</h2>
                        <div class="stats-line-black"></div>
                        <p class="stats-text">Years Experience</p>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3">
                    <div class="counter">
                        <i class="fa fa-laptop fa-2x stats-icon"></i>
                        <h2 class="timer count-title count-number">12</h2>
                        <div class="stats-line-black"></div>
                        <p class="stats-text">Project</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

script.js

 $(document).ready(function($) {
        $('.count-number').counterUp({
            delay: 10,
            time: 1000
        });
 });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

statistic-counter.markdown

Statistic Counter

Simple Statistic Counter to show interesting stats on your Website.

A Pen by Valentierra on CodePen.

License.

style.css

.statistic-section {
     padding-top: 70px;
     padding-bottom: 70px;
     background: #00c6ff;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
     background: linear-gradient(to right, #0072ff, #00c6ff); 
}

.count-title {
    font-size: 50px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
	  text-align: center;
	  font-weight: bold;
    color: #fff;
}

.stats-text {
    font-size: 15px;
    font-weight: normal;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center;
	  color: #fff;
	  text-transform: uppercase;
	  font-weight: bold;
}

.stats-line-black {
	margin: 12px auto 0;
    width: 55px;
    height: 2px;
    background-color: #fff;
}
.stats-icon {
	  font-size: 35px;
	  margin: 0 auto;
    float: none;
    display: table;
    color: #fff;
}

@media (max-width: 992px) {
	.counter {
		margin-bottom: 40px;
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />