Progress Sections
Progress Sections style 1
Top Platforms
We use top digital advertising platforms
93%
Google Ads
83%
Facebook Ads
72%
Microsoft Ads
63%
Tiktok Ads
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
More Statistic
<!-- Progress start -->
<div id="progress" class="relative py-20 md:py-24 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto pyaieolaksj">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Top</span> Platforms</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-primary-700 border-primary-700">
<p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">We use top digital advertising platforms</p>
</header><!-- end section header -->
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink w-full max-w-full pyaieolaksj md:w-1/2 mb-6 md:mb-0">
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<!-- Vertical Progress Bar -->
<div class="flex-shrink w-1/4 pyaieolaksj max-w-full text-center">
<div class="flex oskasdadiaa flex-nowrap lokdlssoakl bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
<div class="relative bg-primary-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-semibold">93%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Google Ads</p>
</div>
<!-- Vertical Progress Bar -->
<div class="flex-shrink w-1/4 pyaieolaksj max-w-full text-center">
<div class="flex oskasdadiaa flex-nowrap lokdlssoakl bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
<div class="relative bg-primary-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:83%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-semibold">83%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Facebook Ads</p>
</div>
<!-- Vertical Progress Bar -->
<div class="flex-shrink w-1/4 pyaieolaksj max-w-full text-center">
<div class="flex oskasdadiaa flex-nowrap lokdlssoakl bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
<div class="relative bg-primary-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:72%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-semibold">72%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Microsoft Ads</p>
</div>
<!-- Vertical Progress Bar -->
<div class="flex-shrink w-1/4 pyaieolaksj max-w-full text-center">
<div class="flex oskasdadiaa flex-nowrap lokdlssoakl bg-gray-200 dark:bg-gray-700 h-48 rounded mb-4 overflow-hidden">
<div class="relative bg-primary-700 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s" style="height:63%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-semibold">63%</span></div>
</div>
<p class="text-lg leading-normal mb-2 font-normal text-gray-800">Tiktok Ads</p>
</div>
</div>
</div>
<div class="flex-shrink w-full max-w-full pyaieolaksj md:w-5/12 md:ms-auto">
<p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2 mb-12">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">
More Statistic
<svg class="bi bi-graph-up inline-block ms-2" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1v16H0V0zm1 15h15v1H1v-1z"></path>
<path fill-rule="evenodd" d="M14.39 4.312L10.041 9.75 7 6.707l-3.646 3.647-.708-.708L7 5.293 9.959 8.25l3.65-4.563.781.624z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 3.5a.5.5 0 01.5-.5h4a.5.5 0 01.5.5v4a.5.5 0 01-1 0V4h-3.5a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div><!-- End progress-->
Progress Sections style 2
Hi! I'am Mark Hernandez
I'am a freelance, front designer & web programmer. I serve a variety of website design services to meet your needs. With more than 7 years of experience in the field of website design will make your website become professional and SEO friendly.
-
Date of birth: 1 may 1990
-
Email: support@domain.com
-
Phone: +1-234-456-7890
-
Location: Amphitheatre, Mountain View 3465, USA
HTML
87%
CSS
92%
JS
76%
PHP
79%
<!-- Start progress -->
<div id="progress" 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 pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4">
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2">
<div class="me-2">
<h2 class="text-3xl leading-normal font-bold mb-4"><span class="font-light">Hi! I'am</span> Mark Hernandez</h2>
<p>I'am a freelance, front designer & web programmer. I serve a variety of website design services to meet your needs. With more than 7 years of experience in the field of website design will make your website become professional and SEO friendly.</p>
<ul class="mt-6">
<li class="py-2">
<p>
<!-- <i class="fas fa-calendar me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="80" width="416" height="384" rx="48" ry="48" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:32px"/><path d="M397.82,80H114.18C77.69,80,48,110.15,48,147.2V208H64c0-16,16-32,32-32H416c16,0,32,16,32,32h16V147.2C464,110.15,434.31,80,397.82,80Z"/><circle cx="296" cy="232" r="24"/><circle cx="376" cy="232" r="24"/><circle cx="296" cy="312" r="24"/><circle cx="376" cy="312" r="24"/><circle cx="136" cy="312" r="24"/><circle cx="216" cy="312" r="24"/><circle cx="136" cy="392" r="24"/><circle cx="216" cy="392" r="24"/><circle cx="296" cy="392" r="24"/><line x1="128" y1="48" x2="128" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="384" y1="48" x2="384" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="font-bold">Date of birth:</span> 1 may 1990
</p>
</li>
<li class="py-2">
<p>
<!-- <i class="fas fa-envelope me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="112 160 256 272 400 160" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="font-bold">Email:</span> support@domain.com
</p>
</li>
<li class="py-2">
<p>
<!-- <i class="fas fa-phone fas-rotate-90 me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M451,374c-15.88-16-54.34-39.35-73-48.76C353.7,313,351.7,312,332.6,326.19c-12.74,9.47-21.21,17.93-36.12,14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48,5.41-23.23,14.79-36c13.22-18,12.22-21,.92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9,44,119.9,47,108.83,51.6A160.15,160.15,0,0,0,83,65.37C67,76,58.12,84.83,51.91,98.1s-9,44.38,23.07,102.64,54.57,88.05,101.14,134.49S258.5,406.64,310.85,436c64.76,36.27,89.6,29.2,102.91,23s22.18-15,32.83-31a159.09,159.09,0,0,0,13.8-25.8C465,391.17,468,391.17,451,374Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/></svg>
<span class="font-bold">Phone:</span> +1-234-456-7890
</p>
</li>
<li class="py-2">
<p>
<!-- <i class="fas fa-map-marker-alt me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1 inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M256,48c-79.5,0-144,61.39-144,137,0,87,96,224.87,131.25,272.49a15.77,15.77,0,0,0,25.5,0C304,409.89,400,272.07,400,185,400,109.39,335.5,48,256,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="192" r="48" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="font-bold">Location:</span> Amphitheatre, Mountain View 3465, USA
</p>
</li>
</ul>
</div>
</div>
<div class="flex-shrink max-w-full pyaieolaksj w-full lg:w-1/2 xl:w-5/12 col-xl-5">
<!-- progresss bar -->
<div class="progress-line-trigger">
<div class="my-6">
<h6 class="text-base leading-normal mb-2 text-gray-800">HTML</h6>
<!-- progress -->
<div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
<div class="flex oskasdadiaa jkuthslatgh overflow-hidden text-white text-center whitespace-nowrap bg-primary-700 wow fadeInLeft" data-wow-duration="1s" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">87%</div>
</div>
</div>
<div class="my-6">
<h6 class="text-base leading-normal mb-2 text-gray-800">CSS</h6>
<!-- progress -->
<div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
<div class="flex oskasdadiaa jkuthslatgh overflow-hidden text-white text-center whitespace-nowrap bg-primary-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".1s" role="progressbar" style="width: 92%;" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">92%</div>
</div>
</div>
<div class="my-6">
<h6 class="text-base leading-normal mb-2 text-gray-800">JS</h6>
<!-- progress -->
<div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
<div class="flex oskasdadiaa jkuthslatgh overflow-hidden text-white text-center whitespace-nowrap bg-primary-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".3s" role="progressbar" style="width: 76%;" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">76%</div>
</div>
</div>
<div class="my-6">
<h6 class="text-base leading-normal mb-2 text-gray-800">PHP</h6>
<!-- progress -->
<div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-md mb-4">
<div class="flex oskasdadiaa jkuthslatgh overflow-hidden text-white text-center whitespace-nowrap bg-primary-700 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" style="width: 79%;" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100">79%</div>
</div>
</div>
</div><!-- end progress bar -->
</div>
</div>
</div>
</div><!-- End progress -->