Counter Sections
Counter Sections style 1
1500+
Customers
250+
Company
520+
Running Project
450+
Complete Project
<!-- start counters -->
<div id="counters" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-black-600 jarallax">
<!-- background parallax -->
<img class="jarallax-img" src="src/img-min/bg/bg3.jpg" alt="title">
<div class="absolute top-0 left-0 w-full h-full opacity-90 bg-blue-700" style="z-index:-1;"></div>
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4 text-center uppercase">
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow relative mb-6">
<div class="text-4xl mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">1500<span>+</span></span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Customers</small>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow relative mb-6">
<div class="text-4xl mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">250<span>+</span></span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Company</small>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow relative mb-6">
<div class="text-4xl mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">520<span>+</span></span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Running Project</small>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow relative mb-6">
<div class="text-4xl mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">450<span>+</span></span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Complete Project</small>
</div>
</div>
</div>
</div>
</div><!-- end counters -->
Counter Sections style 2
1200
Customers
700
Company
20
Awards
450
Project
<!-- Counter start -->
<div id="counter" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4 text-center uppercase">
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 bg-white dark:bg-gray-800 shadow rounded relative mb-6">
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-person text-blue-700 mb-1 ltr:mr-4 rtl:ml-4 inline-block" 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="ltr:text-left rtl:text-right">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">1200</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Customers</small>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 bg-white dark:bg-gray-800 shadow rounded relative mb-6">
<!-- icons -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-briefcase text-blue-700 mb-1 ltr:mr-4 rtl:ml-4 inline-block" 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="ltr:text-left rtl:text-right">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">700</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Company</small>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 bg-white dark:bg-gray-800 shadow rounded relative mb-6">
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-award text-blue-700 mb-1 ltr:mr-4 rtl:ml-4 inline-block" 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="ltr:text-left rtl:text-right">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">20</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Awards</small>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 bg-white dark:bg-gray-800 shadow rounded relative mb-6">
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-file-earmark-check text-blue-700 mb-1 ltr:mr-4 rtl:ml-4 inline-block" 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="ltr:text-left rtl:text-right">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">450</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Project</small>
</div>
</div>
</div>
</div>
</div>
</div><!-- end counter -->
Counter Sections style 3
7+
Years of Experience
7890+
Websites developed
1200+
Clients served
17
Team Members
<div class="py-20 bg-gray-100 border-b border-gray-200 dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700"></div>
<!-- counters start -->
<div class="relative -mt-32 lg:-mt-24 overflow-hidden">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="mb-12 bg-blue-700 rounded-xl shadow">
<div class="flex flex-wrap flex-row -mx-4 pt-12">
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="pb-12">
<div class="text-center">
<p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">7</span>+</p>
<p class="text-lg leading-normal font-normal text-gray-200 mb-0">Years of Experience</p>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="pb-12">
<div class="text-center">
<p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">7890</span>+</p>
<p class="text-lg leading-normal font-normal text-gray-200 mb-0">Websites developed</p>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="pb-12">
<div class="text-center">
<p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">1200</span>+</p>
<p class="text-lg leading-normal font-normal text-gray-200 mb-0">Clients served</p>
</div>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="pb-12">
<div class="text-center">
<p class="text-3xl leading-normal font-semibold text-gray-100 mb-1"><span class="counter">17</span></p>
<p class="text-lg leading-normal font-normal text-gray-200 mb-0">Team Members</p>
</div>
</div>
</div>
</div><!-- .row -->
</div>
</div>
</div>
<!-- end counters -->
Counter Sections style 4
1200
Customers
700
Company
20
Awards
450
Project
<!-- counters start -->
<div id="counter" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4 text-center uppercase">
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 relative mb-6">
<!-- text -->
<div class="text-center">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">1200</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Customers</small>
</div>
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-person text-blue-700 mb-1 ltr:ml-4 rtl:mr-4 inline-block" 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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 relative mb-6">
<!-- text -->
<div class="text-center">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">700</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Company</small>
</div>
<!-- icons -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-briefcase text-blue-700 mb-1 ltr:ml-4 rtl:mr-4 inline-block" 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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 relative mb-6">
<!-- text -->
<div class="text-center">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">20</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Awards</small>
</div>
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-award text-blue-700 mb-1 ltr:ml-4 rtl:mr-4 inline-block" 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="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="flex items-center justify-center p-6 relative mb-6">
<!-- text -->
<div class="text-center">
<div class="text-3xl leading-normal font-semibold mb-1 text-blue-700 dark:text-gray-200">
<span class="counter">450</span>
</div>
<small class="block uppercase text-blue-700 dark:text-gray-200">Project</small>
</div>
<!-- icon -->
<div class="text-center">
<!-- svg icons -->
<svg class="bi bi-file-earmark-check text-blue-700 mb-1 ltr:ml-4 rtl:mr-4 inline-block" 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 counters -->
Counter Sections style 5
5,596,756 $
AD Spend
456,959,000
Impression
3,469,000
Click
350,078
Conversion
<!-- counters start -->
<div id="counter" class="relative pt-10 pb-6 md:pt-14 md:pb-10 bg-blue-700">
<div class="container xl:max-w-6xl mx-auto px-4">
<div class="flex flex-wrap flex-row -mx-4 text-center uppercase">
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 relative mb-6">
<div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
<span class="counter">5,596,756</span> <span>$</span>
</div>
<span class="block uppercase text-gray-100">AD Spend</span>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 relative mb-6">
<div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
<span class="counter">456,959,000</span>
</div>
<span class="block uppercase text-gray-100">Impression</span>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 relative mb-6">
<div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
<span class="counter">3,469,000</span>
</div>
<span class="block uppercase text-gray-100">Click</span>
</div>
</div>
<div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 lg:w-1/4">
<div class="p-6 relative mb-6">
<div class="text-2xl leading-normal font-semibold text-gray-100 mb-1">
<span class="counter">350,078</span>
</div>
<span class="block uppercase text-gray-100">Conversion</span>
</div>
</div>
</div>
</div>
</div><!-- end counter -->