<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Add this css in head tag --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> <!--Counter Section--> <section id="counter_two" class="counter_two"> <div class="overlay"> <div class="container"> <div class="row"> <div class="main_counter_two sections text-center"> <div class="col-sm-10 col-sm-offset-1"> <div class="row"> <div class="col-sm-3 col-xs-12"> <div class="single_counter_two_right"> <i class="fa fa-users"></i> <h2 class="statistic-counter_two">3,800</h2> <p>Satisfied Clients</p> </div> </div><!-- End off col-sm-3 --> <div class="col-sm-3 col-xs-12"> <div class="single_counter_two_right"> <i class="fa fa-line-chart"></i> <h2 class="statistic-counter_two">4510</h2> <p>Projects Completed</p> </div> </div><!-- End off col-sm-3 --> <div class="col-sm-3 col-xs-12"> <div class="single_counter_two_right"> <i class="fa fa-heart"></i> <h2 class="statistic-counter_two">2,800</h2> <p>Positive Feedbacks</p> </div> </div><!-- End off col-sm-3 --> <div class="col-sm-3 col-xs-12"> <div class="single_counter_two_right"> <i class="fa fa-gift"></i> <h2 class="statistic-counter_two">5,500</h2> <p>Freebies Released</p> </div> </div> </div><!-- End off col-sm-3 --> </div> </div> </div><!-- End off row --> </div><!-- End off container --> </div><!-- End off overlay --> </section><!-- End off Counter section --> <!-- Here is the section --> <section id="counter" class="counter"> <div class="main_counter_area"> <div class="one-overlay p-y-3"> <div class="container"> <div class="row"> <div class="main_counter_content text-center white-text wow fadeInUp"> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <i class="fa fa-heart m-b-1"></i> <h2 class="statistic-counter">100</h2> <p>Love Our Team</p> </div> </div> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <i class="fa fa-check m-b-1"></i> <h2 class="statistic-counter">400</h2> <p>Check Our</p> </div> </div> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <i class="fa fa-refresh m-b-1"></i> <h2 class="statistic-counter">312</h2> <p>repeat client</p> </div> </div> <div class="col-md-3"> <div class="single_counter p-y-2 m-t-1"> <i class="fa fa-beer m-b-1"></i> <h2 class="statistic-counter">480</h2> <p>Pizzas Ordered</p> </div> </div> </div> </div> </div> </div> </div> </section><!-- End of counter Section --> <!-- Add this script before </body> --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

/*========================================================== counter style one ============================================================*/ body{ font-size:18px; font-weight: 400; } .p-y-2 { padding-top: 28px; padding-bottom: 28px; } .p-y-3 { padding-top: 45px; padding-bottom: 45px; } .m-b-1 { margin-bottom: 18px; } .m-t-1 { margin-top: 18px; } .main_counter_area{ background: url(https://images.pexels.com/photos/196288/pexels-photo-196288.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat top center; background-size: cover; overflow: hidden; } .main_counter_area .main_counter_content .single_counter{ background: rgba(236, 72, 72, 0.5); color: #fff; } .main_counter_area .main_counter_content .single_counter i{ font-size:36px; } /*========================================================== counter style Two ============================================================*/ .sections { padding-top: 85px; padding-bottom: 105px; overflow: hidden; } .overlay { background-color: rgba(97, 22, 204, 0.65); width: 100%; height: 750px; } .counter_two{ background: url(https://images.pexels.com/photos/203541/pexels-photo-203541.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 100% 100%; background-size:cover; height: 380px; overflow: hidden; } .counter_two .main_counter_two .single_counter_two_right{ margin-top:30px; overflow: hidden; display: block; } .counter_two .main_counter_two .single_counter_two_right i{ color:#fefefe; font-size:3.125rem; margin-bottom:40px; line-height: 4rem; display: inline-block; } .counter_two .main_counter_two .single_counter_two_right h2{ color:#fff; margin-bottom:30px; line-height: 0; } .counter_two .main_counter_two .single_counter_two_right p{ color:#fefefe; } /* Landscape phones and portrait tablets */ @media (max-width: 768px) { html { font-size: 80%; } .counter_two { height: auto; } .overlay{ height: auto; } } /*========================================================== counter style three ============================================================*/ #counter_threeup { font-size: 14px; color: #666666; width: 100%; font-weight: 400; } .lightbg { background-color: #f9f9f9; } .sections { padding-top: 100px; padding-bottom: 100px; position: relative; overflow: hidden; } /*For Counterup Section*/ .counter_threeup{ margin-top:20px; display: block; } .counter_threeup .counter_threeup-photo{ width: 22%; height: 100px; float:left; margin-right: 10px; } .counter_threeup .counter_threeup-photo img{ width:100%; margin-top:10px; } .counter_threeup .counter_threeup-content{ padding-top:10px; padding-left:80px; } .counter_threeup .counter_threeup-content h5{ font-family: 'Oswald', sans-serif; font-size:1.571em; } .counter_threeup .counter_threeup-content h6{ font-size:1.286em; font-family: 'Lobster', cursive; } @media (max-width:992px){ .counter_threeup{ margin-bottom:30px; } } @media (max-width:768px){ .counter_threeup .counter_threeup-photo img{ width:50%; height: 60%; } }

$('.statistic-counter_two, .statistic-counter, .count-number').counterUp({ delay: 10, time: 2000 });