Heading Sections
Heading Sections style 1
How can we help?
Find what you are looking for.
<!-- Heading start -->
<div id="heading" class="relative py-12 jarallax">
<!-- background parallax -->
<img class="jarallax-img" src="src/img-min/bg/bg-planet.jpg" alt="title">
<!-- background overlay -->
<div class="absolute top-0 start-0 w-full h-full opacity-90 bg-primary-700" style="z-index:-1;"></div>
<div class="container xl:max-w-6xl mx-auto pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4 pdskdmsdnjw jkuthslatgh">
<!-- content -->
<div class="max-w-full w-full lg:w-7/12 pyaieolaksj">
<div class="mt-0 pt-6 text-center">
<h1 class="text-2xl md:text-3xl leading-normal mb-2 font-semibold text-white">How can we help?</h1>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-yellow-300 border-yellow-300">
<form id="subscribe" class="relative w-full max-w-full mx-auto mb-4" action="#">
<!-- input group -->
<div class="flex flex-wrap items-stretch w-full relative">
<input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-3 px-5 rounded-s-md text-gray-800 bg-white border border-gray-50 overflow-x-auto focus:outline-none focus:border-gray-50 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="search" required="" placeholder="Type your questions..." aria-label="Type your questions...">
<div class="flex -me-px">
<button class="flex pdskdmsdnjw py-3 px-5 -ms-1 rounded-e-md leading-normal text-gray-800 bg-yellow-300 border border-yellow-300 hover:text-gray-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search inline-block" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg>
</button>
</div>
</div>
</form>
<p class="text-gray-100 mb-6">Find what you are looking for.</p>
</div>
</div><!-- end content -->
</div>
</div>
</div><!-- End heading -->
Heading Sections style 2
About Us
<!-- Heading start -->
<div id="heading" class="relative py-12 jarallax">
<!-- background parallax -->
<img class="jarallax-img" src="src/img-min/bg/bg-planet.jpg" alt="title">
<!-- background overlay -->
<div class="absolute top-0 start-0 w-full h-full opacity-90 bg-primary-700" style="z-index:-1;"></div>
<div class="container xl:max-w-6xl mx-auto pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4 pdskdmsdnjw jkuthslatgh">
<!-- content -->
<div class="max-w-full w-full lg:w-7/12 pyaieolaksj">
<nav aria-label="breadcrumb">
<ol class="flex flex-wrap jkuthslatgh bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-200 hover:text-white">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-200 hover:text-white">
Pages
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</a>
</li>
<li class="hidden md:block text-white" aria-current="page">About Us</li>
</ol>
</nav>
<div class="mt-0 pt-6 text-center">
<h1 class="text-2xl md:text-3xl leading-normal mb-2 font-semibold text-white">About Us</h1>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-yellow-300 border-yellow-300">
</div>
</div><!-- end content -->
</div>
</div>
</div><!-- End heading -->
Heading Sections style 3
<!-- Heading start -->
<div id="hero" class="relative pt-20 pb-8 md:pt-24 md:pb-12 jarallax">
<!-- background parallax -->
<img class="jarallax-img" src="src/img-min/bg/bg-planet.jpg" alt="title">
<!-- background overlay -->
<div class="absolute top-0 start-0 w-full h-full opacity-90 bg-primary-700" style="z-index:-1;"></div>
<div class="container xl:max-w-6xl mx-auto pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4 pdskdmsdnjw jkuthslatgh">
<!-- content -->
<div class="max-w-full w-full md:w-8/12 lg:w-1/2 pyaieolaksj">
<!-- profile start -->
<div class="bg-white dark:bg-gray-800 mt-4 olhksnamska rounded text-center">
<div class="mb-4 -mt-16">
<img class="max-w-full mx-auto bg-gray-100 dark:bg-gray-900 dark:bg-opacity-90 ropjaksldnk w-24 h-24" src="src/img-min/avatar/avatar.png" alt="avatar">
</div>
<div class="olhksnamska">
<h1 class="text-2xl leading-normal mb-1 font-semibold text-gray-800 dark:text-gray-100">Ari Budin</h1>
<p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2 mb-2">Writter and Programmer</p>
<ul class="space-y-2 mb-6">
<li class="inline mx-2"><span class="p-2 ropjaksldnk bg-gray-100 text-primary-700 dark:bg-gray-900 dark:bg-opacity-40 dark:text-gray-200 counter">177</span> Articles</li>
<li class="inline mx-2"> <span class="p-2 ropjaksldnk bg-gray-100 text-primary-700 dark:bg-gray-900 dark:bg-opacity-40 dark:text-gray-200 counter">88</span> Comments</li>
</ul>
<ul class="space-x-3">
<!--facebook-->
<li class="inline-block">
<a class="hover:text-primary-700" target="_blank" href="https://facebook.com" title="Facebook">
<!-- <i class="fab fa-facebook fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path></svg>
</a>
</li>
<!--twitter-->
<li class="inline-block">
<a class="hover:text-primary-700" target="_blank" href="https://twitter.com" title="Twitter">
<!-- <i class="fab fa-twitter fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path></svg>
</a>
</li>
<!--Linkedin-->
<li class="inline-block">
<a class="hover:text-primary-700" target="_blank" href="https://linkedin.com" title="Linkedin">
<!-- <i class="fab fa-linkedin fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path></svg>
</a>
</li>
<!--instagram-->
<li class="inline-block">
<a class="hover:text-primary-700" target="_blank" href="https://instagram.com" title="Instagram">
<!-- <i class="fab fa-instagram fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"></path><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"></path><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"></path></svg>
</a>
</li><!--end instagram-->
<!--youtube-->
<li class="inline-block">
<a class="hover:text-primary-700" target="_blank" href="https://youtube.com" title="Youtube">
<!-- <i class="fab fa-youtube fa-2x"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 512 512"><path fill="currentColor" d="M508.64,148.79c0-45-33.1-81.2-74-81.2C379.24,65,322.74,64,265,64H247c-57.6,0-114.2,1-169.6,3.6-40.8,0-73.9,36.4-73.9,81.4C1,184.59-.06,220.19,0,255.79q-.15,53.4,3.4,106.9c0,45,33.1,81.5,73.9,81.5,58.2,2.7,117.9,3.9,178.6,3.8q91.2.3,178.6-3.8c40.9,0,74-36.5,74-81.5,2.4-35.7,3.5-71.3,3.4-107Q512.24,202.29,508.64,148.79ZM207,353.89V157.39l145,98.2Z"></path></svg>
</a>
</li>
</ul>
</div>
</div>
</div><!-- end content -->
</div>
</div>
</div><!-- End heading -->
Heading Sections style 4
Lifestyle
Simple Tips to Help your Business Growing Up
<!-- Heading start -->
<div id="heading" class="relative py-12 lg:py-16 jarallax">
<!-- background parallax -->
<img class="jarallax-img" src="../src/img-min/bg/bg-planet.jpg" alt="title">
<!-- background overlay -->
<div class="absolute top-0 start-0 w-full h-full opacity-90 bg-primary-700" style="z-index:-1;"></div>
<div class="container xl:max-w-6xl mx-auto pyaieolaksj">
<div class="flex flex-wrap lsdfdfsdafd -mx-4 pdskdmsdnjw jkuthslatgh">
<!-- content -->
<div class="max-w-full w-full lg:w-7/12 pyaieolaksj">
<nav aria-label="breadcrumb">
<ol class="flex flex-wrap jkuthslatgh bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-200 hover:text-white">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-200 hover:text-white">
Category
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</a>
</li>
<li class="hidden md:block text-white" aria-current="page">Business</li>
</ol>
</nav>
<div class="mt-0 pt-6 text-center">
<a href="#" class="text-sm py-1 px-3 bg-yellow-300 text-gray-700 rounded">Lifestyle</a>
<h1 class="text-3xl md:text-4xl leading-normal mt-4 mb-2 font-semibold text-white">Simple Tips to Help your Business Growing Up</h1>
</div>
</div><!-- end content -->
</div>
</div>
</div><!-- End heading -->
Heading Sections style 5
Our Services
Save time managing advertising for your business, contact us and all will covered.
<!-- Heading start -->
<header class="text-center mx-auto mb-12 lg:px-20">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">Our</span> Services</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">Save time managing advertising for your business, contact us and all will covered.</p>
</header><!-- End heading -->