Skip to main content
title

Counter Sections


1 2 3 4 5

1200
Customers
700
Company
20
Awards
450
Complete Project
                
                  <!-- =========={ COUNTER }==========  -->
                  <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-light">
                    <div class="container">
                      <div class="row text-center text-uppercase">
                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <!-- icons -->
                            <svg class="bi bi-person text-primary mb-1" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="h2 mb-1 text-primary">
                              <span class="counter">1200</span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Customers</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <!-- icons -->
                            <svg class="bi bi-briefcase text-primary mb-1" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                              <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="h2 mb-1 text-primary">
                              <span class="counter">700</span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Company</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <svg class="bi bi-award text-primary mb-1" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                              <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                            </svg>
                            <div class="h2 mb-1 text-primary">
                              <span class="counter">20</span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Awards</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <svg class="bi bi-file-earmark-check text-primary mb-1" width="3rem" height="3rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                              <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="h2 mb-1 text-primary">
                              <span class="counter">450</span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Complete Project</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end counter -->
                
              
1200
Customers
700
Company
20
Awards
450
Project
                
                  <!-- =========={ COUNTER }==========  -->
                  <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-white">
                    <div class="container">
                      <div class="row text-center text-uppercase">
                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 position-relative mb-4">
                            <!-- text -->
                            <div class="text-center">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">1200</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Customers</small>
                            </div>
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-person text-primary mb-1 ms-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 position-relative mb-4">
                            <!-- text -->
                            <div class="text-center">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">700</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Company</small>
                            </div>
                            <!-- icons -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-briefcase text-primary mb-1 ms-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                                <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 position-relative mb-4">
                            <!-- text -->
                            <div class="text-center">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">20</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Awards</small>
                            </div>
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-award text-primary mb-1 ms-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                              </svg>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 position-relative mb-4">
                            <!-- text -->
                            <div class="text-center">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">450</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Project</small>
                            </div>
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-file-earmark-check text-primary mb-1 ms-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                                <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end counter -->
                
              
title
1500+
Customers
250+
Company
520+
Running Project
450+
Complete Project
                
                  <!-- =========={ COUNTER }==========  -->
                  <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-dark jarallax">
                    <!-- background parallax -->
                    <img class="jarallax-img" src="src/img-min/bg/bg-planet.jpg" alt="title">
                    <div class="overlay bg-primary opacity-80 z-index-n1"></div>

                    <div class="container">
                      <div class="row text-center text-uppercase">
                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <div class="display-4 mb-1 text-primary">
                              <span class="counter">1500<span class="small">+</span></span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Customers</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <div class="display-4 mb-1 text-primary">
                              <span class="counter">250<span class="small">+</span></span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Company</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <div class="display-4 mb-1 text-primary">
                              <span class="counter">520<span class="small">+</span></span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Running Project</small>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="p-4 bg-white rounded shadow-sm position-relative mb-4">
                            <div class="display-4 mb-1 text-primary">
                              <span class="counter">450<span class="small">+</span></span>
                            </div>
                            <small class="d-block text-uppercase text-primary">Complete Project</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end counter -->
                
              
1200
Customers
700
Company
20
Awards
450
Project
                
                  <!-- =========={ COUNTER }==========  -->
                  <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-light">
                    <div class="container">
                      <div class="row text-center text-uppercase">
                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 bg-white shadow-sm rounded position-relative mb-4">
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-person text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                            <!-- text -->
                            <div class="text-start">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">1200</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Customers</small>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 bg-white shadow-sm rounded position-relative mb-4">
                            <!-- icons -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-briefcase text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                                <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                            <!-- text -->
                            <div class="text-start">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">700</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Company</small>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 bg-white shadow-sm rounded position-relative mb-4">
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-award text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                              </svg>
                            </div>
                            <!-- text -->
                            <div class="text-start">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">20</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Awards</small>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-3 col-sm-6">
                          <div class="d-flex align-item-center justify-content-center p-4 bg-white shadow-sm rounded position-relative mb-4">
                            <!-- icon -->
                            <div class="text-center">
                              <!-- svg icons -->
                              <svg class="bi bi-file-earmark-check text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                                <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                              </svg>
                            </div>
                            <!-- text -->
                            <div class="text-start">
                              <div class="h2 mb-1 text-primary">
                                <span class="counter">450</span>
                              </div>
                              <small class="d-block text-uppercase text-primary">Project</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end counter -->
                
              
2.5M+
Downloads
250K+
Positive Reviews
1.2M+
Active User
520K+
Pro Users
                
                  <!-- =========={ COUNTER }==========  -->
                  <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-white">
                    <div class="container">
                      <div class="row text-center text-uppercase">
                        <div class="col-6 col-lg-3">
                          <div class="p-4 position-relative mb-4">
                            <div class="display-4 text-primary mb-1">
                              <span class="counter">2.5M</span><span class="small">+</span>
                            </div>
                            <small class="d-block text-uppercase">Downloads</small>
                          </div>
                        </div>

                        <div class="col-6 col-lg-3">
                          <div class="p-4 position-relative mb-4">
                            <div class="display-4 text-primary mb-1">
                              <span class="counter">250K</span><span class="small">+</span>
                            </div>
                            <small class="d-block text-uppercase">Positive Reviews</small>
                          </div>
                        </div>

                        <div class="col-6 col-lg-3">
                          <div class="p-4 position-relative mb-4">
                            <div class="display-4 text-primary mb-1">
                              <span class="counter">1.2M</span><span class="small">+</span>
                            </div>
                            <small class="d-block text-uppercase">Active User</small>
                          </div>
                        </div>

                        <div class="col-6 col-lg-3">
                          <div class="p-4 position-relative mb-4">
                            <div class="display-4 text-primary mb-1">
                              <span class="counter">520K</span><span class="small">+</span>
                            </div>
                            <small class="d-block text-uppercase">Pro Users</small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end counter -->