title

Heading Sections


Heading Sections style 1
title

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 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 items-center justify-center">
                          <!-- content -->
                          <div class="max-w-full w-full lg:w-7/12 px-4">
                            <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 ltr:rounded-l-md rtl:rounded-r-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 -mr-px">
                                    <button class="flex items-center py-3 px-5 -ml-1 ltr:rounded-r-md rtl:rounded-l-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
title

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 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 items-center justify-center">
                          <!-- content -->
                          <div class="max-w-full w-full lg:w-7/12 px-4">
                            <nav aria-label="breadcrumb">
                              <ol class="flex flex-wrap justify-center 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
title
avatar

Ari Budin

Writter and Programmer

  • 177 Articles
  • 88 Comments
                  
                    <!-- 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 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 items-center justify-center">
                          <!-- content -->
                          <div class="max-w-full w-full md:w-8/12 lg:w-1/2 px-4">
                            <!-- profile start -->
                            <div class="bg-white dark:bg-gray-800 mt-4 p-4 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 rounded-full w-24 h-24" src="src/img-min/avatar/avatar.png" alt="avatar">
                              </div>
                              <div class="p-4">
                                <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 rounded-full bg-gray-100 text-blue-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 rounded-full bg-gray-100 text-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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
title
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 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 items-center justify-center">
                          <!-- content -->
                          <div class="max-w-full w-full lg:w-7/12 px-4">
                            <nav aria-label="breadcrumb">
                              <ol class="flex flex-wrap justify-center 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-blue-700 border-blue-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 -->