<!-- Default style -->
        <div class="count-down">
            <div class="fun-text">
                <span class="counter">25</span><span>+</span>
                <p>Years of Experience</p>
            </div>

            <div class="fun-text">
                <span class="counter">700</span><span>+</span>
                <p>Happy Customers</p>
            </div>

            <div class="fun-text">
                <span class="counter">50</span><span>+</span>
                <p>our Expert staffs</p>
            </div>
        </div>

        <!-- Color background -->
        <div class="count-down colored-bg bg-primary text-center">
            ...
        </div>

        <!-- Image Background -->
        <div class="count-down bg-image shadow text-center" style="background-image: url('.../..');">
            ...
        </div>
    
                            

How to use

This counter up is designed using Counter-Up jquery plugin. You can find the whole documentation of how to use it in the website. Here are some instructions for the example design as shown:

• Use a class or id as a hook to javascript as the following example

      
          $('.counter').counterUp({
              delay : 10,
              time : 3000
          });
                                   
                                      

• For the basic style just use any class .count-down
• Wrap the .counter into .fun-text
• .colored-bg used for color background
• .bg-image used for image background and use .shadow for the overlay on the image