Left Headers.

8 Blocks

HEADERS are important to your web pages. In fact, they're vital. They serve your readers and search engines, meaning they're significant to Search Engine Optimisation (SEO).


        <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto md:flex-row lg:px-28">
                <div
                    class="flex flex-col w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 xl:mr-20 md:pr-24 md:items-start md:mb-0 ">
                    <h2 class="mb-1 text-xs font-medium tracking-widest text-blue-500black title-font">Your tagline</h2>
                    <h1 class="mb-8 text-2xl font-bold tracking-tighter text-left text-black lg:text-5xl title-font">
                        Medium length display headline to convert.
                    </h1>
                    <div class="flex flex-wrap -mx-4 -mt-4 -mb-10 sm:-m-4 ">
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8                           5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 1
                                </h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 1</h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.</p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-5/6 lg:max-w-lg md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                  

wickedtemplates

Spring Offer is live! 50% discount on all products. Use the Code wicked50

Tired of designing?

Don't lose precious days designing the landing page and testing a site. Instead, integrate one with your favourite framework.


        <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto md:flex-row lg:px-28">
                <div
                    class="flex flex-col items-start w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 xl:mr-20 md:pr-24 md:mb-0 ">
                    <h1 class="mb-8 text-2xl font-black tracking-tighter text-black md:text-5xl title-font">
                        Medium length display headline.
                    </h1>
                    <p class="mb-8 text-base leading-relaxed text-left text-gray-600 ">
                        Deploy your mvp in minutes, not days. WT offers you a a wide selection swapable sections for
                        your landing page.
                    </p>
                    <div class="flex flex-col w-full gap-2 md:justify-start md:flex-row">
                        <input
                            class="flex-grow w-full px-4 py-2 mb-4 text-base text-black transition duration-1000 ease-in-out transform bg-gray-200 rounded-lg lg:w-auto focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2"
                            placeholder="Your Email" type="email">
                        <button
                            class="flex items-center w-full px-6 py-2 font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg lg:w-auto hover:bg-gray-900 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">
                            Action
                        </button>
                    </div>
                    <p class="w-full mt-2 mb-8 text-sm text-left text-gray-600">
                        I got 99 problems and blocks ain't one.
                    </p>
                </div>
                <div class="w-full lg:w-5/6 lg:max-w-lg md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                  

        <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto lg:px-20 lg:py-24 md:flex-row">
                <div class="flex flex-col items-center w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0 lg:text-center">
                    <h2 class="mb-1 text-xs font-medium tracking-widest text-black title-font">Your tagline</h2>
                    <h1 class="mb-8 text-2xl font-bold tracking-tighter text-center text-black lg:text-left lg:text-5xl title-font">
                        Longer medium length display headline to convert.
                    </h1>
                    <div class="flex flex-wrap -mx-4 -mt-4 -mb-10 sm:-m-4 ">
                        <div class="flex flex-col items-center p-4 mb-6 text-center md:w-1/2 md:mb-0 lg:text-left lg:items-start">
                            <div class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8                           5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 1
                                </h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="flex flex-col items-center p-4 mb-6 text-center md:w-1/2 md:mb-0 lg:text-left lg:items-start">
                            <div class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 1</h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.</p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                                    

        <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto md:flex-row lg:px-28">
                <div
                    class="flex flex-col items-start w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 xl:mr-10 md:pr-12 md:mb-0 ">
                    <h1 class="mb-8 text-2xl font-bold tracking-tighter text-left text-black lg:text-2xl title-font">
                        A pretty long length display headline ready to convert visitors into users.
                    </h1>
                    <p class="mb-8 text-base leading-relaxed text-left text-gray-700">
                        Deploy your mvp in minutes, not days. WT offers you a a wide selection swapable sections for
                        your landing page.You
                        are going to have fun building it, I did.
                    </p>
                    <div class="flex flex-wrap w-full mt-2 -mx-4 text-left ">
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0)">
                                    <path d="M16 32.076L30 24.065V8.05701L16 16.067V32.076Z" fill="#000001" />
                                    <path d="M19 24.5556V27L25 23.4444V21L19 24.5556Z" fill="white" />
                                    <path d="M16 0.076004L2 8.057V24.065L16 32.076V16.067L30 8.057L16 0.076004Z"
                                        fill="url(#paint0_linear)" />
                                </g>
                                <defs>
                                    <linearGradient id="paint0_linear" x1="2.18" y1="23.255" x2="30.041" y2="8.782"
                                        gradientUnits="userSpaceOnUse">
                                        <stop offset="0.043" stop-color="#FF8618" />
                                        <stop offset="0.382" stop-color="#FF246E" />
                                        <stop offset="0.989" stop-color="#AF1DF5" />
                                    </linearGradient>
                                    <clipPath id="clip0">
                                        <rect width="32" height="32" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="16" cy="16" r="14" fill="#FF3366" />
                                <path
                                    d="M11.3594 10.8594C12.3259 10.8594 13.1094 10.0759 13.1094 9.10938C13.1094 8.14288 12.3259 7.35938 11.3594 7.35938C10.3929 7.35938 9.60938 8.14288 9.60938 9.10938C9.60938 10.0759 10.3929 10.8594 11.3594 10.8594Z"
                                    fill="white" />
                                <path
                                    d="M7.70312 12.3594L7.09375 14.5938H9.09375C8.69271 16.224 7.85312 19.6531 7.70312 20.3281C7.51562 21.1719 7.48433 23.5781 10.0156 23.5781C11.7824 23.5781 12.9093 22.4368 13.5379 21.5048L13.0625 23.4062H15.9062L17.3906 17.3981C17.6016 16.3984 18.0981 14.4688 19.8906 14.4688C22.0225 14.4688 21.2404 16.9933 20.8571 18.2305C20.8415 18.2809 20.8266 18.3291 20.8125 18.375C20.525 19.3125 20.2188 20.4062 20.2188 21.1562C20.2188 22 20.6094 23.5781 22.7969 23.5781C24.9844 23.5781 25.9167 21.4115 26.1094 20.3281L25 19.875C24.9219 20.4531 24.2188 21.7031 23.5625 21.7031C22.6641 21.7031 23.1154 20.1885 23.597 18.5721C23.8106 17.8551 24.0302 17.1181 24.1406 16.4844C24.4198 14.8821 24.1406 12.1562 21.3594 12.1562C19.632 12.1562 18.2756 13.6955 17.6303 14.7641L18.1719 12.3594H13.8438L13.25 14.5938H15.2656C15.2656 14.5938 14.0695 19.4683 13.9922 19.6211C13.1797 21.2266 11.9508 21.7655 11.0312 21.7031C10.2938 21.6531 10.3802 20.7656 10.5156 20.3281L12.5156 12.3594H7.70312Z"
                                    fill="white" />
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M16 16C16 13.7909 17.7909 12 20 12C22.2091 12 24 13.7909 24 16C24 18.2091 22.2091 20 20 20C17.7909 20 16 18.2091 16 16Z"
                                    fill="#1ABCFE" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 24C8 21.7909 9.79086 20 12 20H16V24C16 26.2091 14.2091 28 12 28C9.79086 28 8 26.2091 8 24Z"
                                    fill="#0ACF83" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M16 4V12H20C22.2091 12 24 10.2091 24 8C24 5.79086 22.2091 4 20 4H16Z"
                                    fill="#FF7262" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 8C8 10.2091 9.79086 12 12 12H16V4H12C9.79086 4 8 5.79086 8 8Z"
                                    fill="#F24E1E" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 16C8 18.2091 9.79086 20 12 20H16V12H12C9.79086 12 8 13.7909 8 16Z"
                                    fill="#A259FF" />
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M5.58991 11C2.5245 11 -0.0510283 13.5306 0.000767908 16.5905C0.0516066 19.5934 2.54027 22 5.59027 22C6.8999 22 8.10608 21.5563 9.06016 20.812C10.0143 21.5562 11.2205 22 12.5302 22C13.8398 22 15.046 21.5563 16.0001 20.812C16.9542 21.5562 18.1604 22 19.4701 22C20.7798 22 21.986 21.5563 22.94 20.812C23.8942 21.5562 25.1004 22 26.4101 22C29.4597 22 31.9484 19.5938 31.9992 16.5905C32.051 13.5304 29.4754 11 26.4099 11C25.1111 11 23.9003 11.4542 22.94 12.2104C21.9795 11.4542 20.7686 11 19.4698 11C18.171 11 16.9603 11.4542 15.9999 12.2104C15.0396 11.4542 13.8288 11 12.53 11C11.2312 11 10.0204 11.4542 9.06004 12.2105C8.09965 11.4542 6.88874 11 5.58991 11ZM12.5302 20.7518C11.5705 20.7518 10.6833 20.4441 9.96546 19.9232C10.7071 19.0067 11.1581 17.8512 11.1794 16.5905C11.2016 15.2766 10.7395 14.0604 9.96228 13.1002C10.686 12.5665 11.578 12.2482 12.53 12.2482C13.4821 12.2482 14.374 12.5665 15.0977 13.1001C14.3204 14.0604 13.8582 15.2768 13.8803 16.5906C13.9018 17.8512 14.3529 19.0068 15.0947 19.9233C14.3769 20.4442 13.4898 20.7518 12.5302 20.7518ZM9.91349 16.5697C9.92973 15.6102 9.60767 14.7149 9.06006 13.9908C8.51245 14.7149 8.19039 15.6102 8.20663 16.5697C8.22228 17.4943 8.5373 18.3464 9.06013 19.0368C9.58286 18.3464 9.89783 17.4944 9.91349 16.5697ZM6.94071 16.5905C6.91847 15.2766 7.38057 14.0604 8.15783 13.1002C7.43411 12.5665 6.54203 12.2482 5.58991 12.2482C3.2229 12.2482 1.22685 14.2162 1.26669 16.5697C1.30595 18.8891 3.2289 20.7518 5.59027 20.7518C6.54983 20.7518 7.43703 20.4442 8.15483 19.9232C7.41304 19.0067 6.96205 17.8512 6.94071 16.5905ZM18.1193 16.5905C18.1416 15.2766 17.6795 14.0604 16.9022 13.1001C17.6258 12.5665 18.5178 12.2482 19.4698 12.2482C20.4219 12.2482 21.314 12.5665 22.0378 13.1002C21.2605 14.0604 20.7984 15.2766 20.8206 16.5905C20.8419 17.8512 21.2929 19.0067 22.0347 19.9232C21.3169 20.4442 20.4297 20.7518 19.4701 20.7518C18.5105 20.7518 17.6233 20.4441 16.9054 19.9232C17.6471 19.0067 18.098 17.8512 18.1193 16.5905ZM22.0865 16.5697C22.0703 15.6102 22.3924 14.7148 22.94 13.9907C23.4877 14.7148 23.8097 15.6102 23.7934 16.5697C23.7777 17.4944 23.4627 18.3464 22.94 19.0368C22.4172 18.3464 22.1022 17.4943 22.0865 16.5697ZM26.4101 20.7518C25.4504 20.7518 24.5632 20.4441 23.8453 19.9232C24.587 19.0068 25.0379 17.8513 25.0593 16.5906C25.0817 15.2765 24.6196 14.0603 23.8423 13.1001C24.5659 12.5665 25.4579 12.2482 26.4099 12.2482C28.7771 12.2482 30.7732 14.216 30.7333 16.5697C30.694 18.8895 28.7711 20.7518 26.4101 20.7518ZM16.8534 16.599C16.8696 15.6395 16.5476 14.7442 15.9999 14.0201C15.4523 14.7442 15.1303 15.6395 15.1465 16.599C15.1622 17.5236 15.4772 18.3757 16 19.0661C16.5227 18.3757 16.8377 17.5237 16.8534 16.599Z"
                                    fill="black" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                       

       <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto md:flex-row lg:px-28">
                <div
                    class="flex flex-col items-start w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 xl:mr-10 md:pr-12 md:mb-0 ">
                    <h1 class="mb-8 text-2xl font-bold tracking-tighter text-left text-black lg:text-2xl title-font">
                        A pretty long length display headline ready to convert visitors into users.
                    </h1>
                    <p class="mb-8 text-base leading-relaxed text-left text-gray-700">
                        Deploy your mvp in minutes, not days. WT offers you a a wide selection swapable sections for
                        your landing page.You
                        are going to have fun building it, I did.
                    </p>
                    <div class="flex flex-wrap w-full mt-2 -mx-4 text-left ">
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0)">
                                    <path d="M16 32.076L30 24.065V8.05701L16 16.067V32.076Z" fill="#000001" />
                                    <path d="M19 24.5556V27L25 23.4444V21L19 24.5556Z" fill="white" />
                                    <path d="M16 0.076004L2 8.057V24.065L16 32.076V16.067L30 8.057L16 0.076004Z"
                                        fill="url(#paint0_linear)" />
                                </g>
                                <defs>
                                    <linearGradient id="paint0_linear" x1="2.18" y1="23.255" x2="30.041" y2="8.782"
                                        gradientUnits="userSpaceOnUse">
                                        <stop offset="0.043" stop-color="#FF8618" />
                                        <stop offset="0.382" stop-color="#FF246E" />
                                        <stop offset="0.989" stop-color="#AF1DF5" />
                                    </linearGradient>
                                    <clipPath id="clip0">
                                        <rect width="32" height="32" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <circle cx="16" cy="16" r="14" fill="#FF3366" />
                                <path
                                    d="M11.3594 10.8594C12.3259 10.8594 13.1094 10.0759 13.1094 9.10938C13.1094 8.14288 12.3259 7.35938 11.3594 7.35938C10.3929 7.35938 9.60938 8.14288 9.60938 9.10938C9.60938 10.0759 10.3929 10.8594 11.3594 10.8594Z"
                                    fill="white" />
                                <path
                                    d="M7.70312 12.3594L7.09375 14.5938H9.09375C8.69271 16.224 7.85312 19.6531 7.70312 20.3281C7.51562 21.1719 7.48433 23.5781 10.0156 23.5781C11.7824 23.5781 12.9093 22.4368 13.5379 21.5048L13.0625 23.4062H15.9062L17.3906 17.3981C17.6016 16.3984 18.0981 14.4688 19.8906 14.4688C22.0225 14.4688 21.2404 16.9933 20.8571 18.2305C20.8415 18.2809 20.8266 18.3291 20.8125 18.375C20.525 19.3125 20.2188 20.4062 20.2188 21.1562C20.2188 22 20.6094 23.5781 22.7969 23.5781C24.9844 23.5781 25.9167 21.4115 26.1094 20.3281L25 19.875C24.9219 20.4531 24.2188 21.7031 23.5625 21.7031C22.6641 21.7031 23.1154 20.1885 23.597 18.5721C23.8106 17.8551 24.0302 17.1181 24.1406 16.4844C24.4198 14.8821 24.1406 12.1562 21.3594 12.1562C19.632 12.1562 18.2756 13.6955 17.6303 14.7641L18.1719 12.3594H13.8438L13.25 14.5938H15.2656C15.2656 14.5938 14.0695 19.4683 13.9922 19.6211C13.1797 21.2266 11.9508 21.7655 11.0312 21.7031C10.2938 21.6531 10.3802 20.7656 10.5156 20.3281L12.5156 12.3594H7.70312Z"
                                    fill="white" />
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M16 16C16 13.7909 17.7909 12 20 12C22.2091 12 24 13.7909 24 16C24 18.2091 22.2091 20 20 20C17.7909 20 16 18.2091 16 16Z"
                                    fill="#1ABCFE" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 24C8 21.7909 9.79086 20 12 20H16V24C16 26.2091 14.2091 28 12 28C9.79086 28 8 26.2091 8 24Z"
                                    fill="#0ACF83" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M16 4V12H20C22.2091 12 24 10.2091 24 8C24 5.79086 22.2091 4 20 4H16Z"
                                    fill="#FF7262" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 8C8 10.2091 9.79086 12 12 12H16V4H12C9.79086 4 8 5.79086 8 8Z"
                                    fill="#F24E1E" />
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8 16C8 18.2091 9.79086 20 12 20H16V12H12C9.79086 12 8 13.7909 8 16Z"
                                    fill="#A259FF" />
                            </svg>
                        </div>
                        <div class="w-1/4 p-4 mt-4 sm:w-1/4">
                            <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M5.58991 11C2.5245 11 -0.0510283 13.5306 0.000767908 16.5905C0.0516066 19.5934 2.54027 22 5.59027 22C6.8999 22 8.10608 21.5563 9.06016 20.812C10.0143 21.5562 11.2205 22 12.5302 22C13.8398 22 15.046 21.5563 16.0001 20.812C16.9542 21.5562 18.1604 22 19.4701 22C20.7798 22 21.986 21.5563 22.94 20.812C23.8942 21.5562 25.1004 22 26.4101 22C29.4597 22 31.9484 19.5938 31.9992 16.5905C32.051 13.5304 29.4754 11 26.4099 11C25.1111 11 23.9003 11.4542 22.94 12.2104C21.9795 11.4542 20.7686 11 19.4698 11C18.171 11 16.9603 11.4542 15.9999 12.2104C15.0396 11.4542 13.8288 11 12.53 11C11.2312 11 10.0204 11.4542 9.06004 12.2105C8.09965 11.4542 6.88874 11 5.58991 11ZM12.5302 20.7518C11.5705 20.7518 10.6833 20.4441 9.96546 19.9232C10.7071 19.0067 11.1581 17.8512 11.1794 16.5905C11.2016 15.2766 10.7395 14.0604 9.96228 13.1002C10.686 12.5665 11.578 12.2482 12.53 12.2482C13.4821 12.2482 14.374 12.5665 15.0977 13.1001C14.3204 14.0604 13.8582 15.2768 13.8803 16.5906C13.9018 17.8512 14.3529 19.0068 15.0947 19.9233C14.3769 20.4442 13.4898 20.7518 12.5302 20.7518ZM9.91349 16.5697C9.92973 15.6102 9.60767 14.7149 9.06006 13.9908C8.51245 14.7149 8.19039 15.6102 8.20663 16.5697C8.22228 17.4943 8.5373 18.3464 9.06013 19.0368C9.58286 18.3464 9.89783 17.4944 9.91349 16.5697ZM6.94071 16.5905C6.91847 15.2766 7.38057 14.0604 8.15783 13.1002C7.43411 12.5665 6.54203 12.2482 5.58991 12.2482C3.2229 12.2482 1.22685 14.2162 1.26669 16.5697C1.30595 18.8891 3.2289 20.7518 5.59027 20.7518C6.54983 20.7518 7.43703 20.4442 8.15483 19.9232C7.41304 19.0067 6.96205 17.8512 6.94071 16.5905ZM18.1193 16.5905C18.1416 15.2766 17.6795 14.0604 16.9022 13.1001C17.6258 12.5665 18.5178 12.2482 19.4698 12.2482C20.4219 12.2482 21.314 12.5665 22.0378 13.1002C21.2605 14.0604 20.7984 15.2766 20.8206 16.5905C20.8419 17.8512 21.2929 19.0067 22.0347 19.9232C21.3169 20.4442 20.4297 20.7518 19.4701 20.7518C18.5105 20.7518 17.6233 20.4441 16.9054 19.9232C17.6471 19.0067 18.098 17.8512 18.1193 16.5905ZM22.0865 16.5697C22.0703 15.6102 22.3924 14.7148 22.94 13.9907C23.4877 14.7148 23.8097 15.6102 23.7934 16.5697C23.7777 17.4944 23.4627 18.3464 22.94 19.0368C22.4172 18.3464 22.1022 17.4943 22.0865 16.5697ZM26.4101 20.7518C25.4504 20.7518 24.5632 20.4441 23.8453 19.9232C24.587 19.0068 25.0379 17.8513 25.0593 16.5906C25.0817 15.2765 24.6196 14.0603 23.8423 13.1001C24.5659 12.5665 25.4579 12.2482 26.4099 12.2482C28.7771 12.2482 30.7732 14.216 30.7333 16.5697C30.694 18.8895 28.7711 20.7518 26.4101 20.7518ZM16.8534 16.599C16.8696 15.6395 16.5476 14.7442 15.9999 14.0201C15.4523 14.7442 15.1303 15.6395 15.1465 16.599C15.1622 17.5236 15.4772 18.3757 16 19.0661C16.5227 18.3757 16.8377 17.5237 16.8534 16.599Z"
                                    fill="black" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                                  

        <section class="text-gray-700 body-font">
            <div class="container flex flex-col items-center px-5 py-16 mx-auto md:flex-row lg:px-28">
                <div
                    class="flex flex-col items-start w-full pt-0 mb-16 text-left lg:flex-grow md:w-1/2 xl:mr-10 md:pr-12 md:mb-0 ">
                    <div class="flex flex-wrap -mx-4 -mt-4 -mb-10 sm:-m-4 ">
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8 5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 1
                                </h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 2
                                </h2>
                                <p class="text-base leading-relaxed">
                                    Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                                <a href="#"
                                    class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                    Learn More
                                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        width="20" height="20" fill="currentColor">
                                        <path fill="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8 5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 3</h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                            </div>
                        </div>
                        <div class="flex flex-col items-start p-4 mb-6 text-left md:w-1/2 md:mb-0">
                            <div
                                class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-black bg-gray-200 rounded-full">
                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
                                    height="18" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
                                </svg>
                            </div>
                            <div class="flex-grow">
                                <h2 class="mb-3 text-lg font-medium tracking-tighter text-gray-700 title-font">
                                    Information 4
                                </h2>
                                <p class="text-base leading-relaxed">Explain 2 great feature here. Information about the
                                    feature.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
                    <img class="object-cover object-center rounded-lg " alt="hero"
                        src="https://dummyimage.com/720x600/F3F4F7/8693ac">
                </div>
            </div>
        </section>
                                    

        <section class="flex flex-col items-center h-screen md:flex-row ">
            <div class="hidden w-full h-screen bg-gray-200 bg-left-bottom bg-cover lg:block md:w-1/3 xl:w-1/3">
                <!--- image will be full height and occupy the whole with of this div.-->
                <img src="https://dummyimage.com/600x1024/F3F4F7/8693ac" alt="" class="object-cover w-full h-full ">
            </div>
            <div class="flex w-full h-screen px-6 bg-white md:max-w-md lg:max-w-full md:w-1/2 xl:w-1/2 lg:px-16 xl:px-12 items-left justify-left">
                <div class="w-full h-100">
                    <a class="inline-flex items-center w-48 mt-32 mb-20 font-medium text-gray-900 title-font md:mb-16 md:mt-32">
                        <div class="w-2 h-2 p-2 mr-2 rounded-full bg-gradient-to-tr from-cyan-400 to-lightBlue-500">
                        </div>
                        <h2
                            class="font-semibold tracking-tighter text-gray-500 transition duration-1000 ease-in-out transform lg:text-md text-bold lg:mr-8">
                            Wicked Blocks
                        </h2>
                    </a>
                    <h1 class="mb-8 text-2xl font-bold tracking-tighter text-center text-black lg:text-left lg:text-5xl title-font">
                        Medium length display headline.
                    </h1>
                    <p class="mb-8 text-base leading-relaxed text-left text-gray-900 lg:text-1xl">
                        Tailwind CSS templates
                        with a wicked design.
                        Professionally designed and 100% responsive static templates for startups and personal use.
                    </p>
                    <div class="flex">
                        <button class="flex items-center px-6 py-2 mt-auto font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-800 hover:to-black focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">
                            Action
                        </button>
                        <p class="mt-2 text-sm text-center text-gray-600 md:ml-6 md:mt-0 sm:text-left">
                            It will take you to candy shop.
                            <br class="hidden lg:block">
                            <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                                Learn More
                                <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    width="20" height="20" fill="currentColor">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path
                                        d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                                </svg>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </section>