Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-19 13:57:01 +00:00
Code Issues Projects Releases Wiki Activity
Files
master
tailShape/public/componets/section/section.html
merajjahir 9fd68f660c added other tempalte parts
2022-03-09 20:14:06 +06:00

903 lines
47 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../../../dist/tailshape.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<title>Section </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- section 1 start -->
<section class="section_divider">
<div>Section 1</div>
</section>
<section class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">
<div class="items-center lg:flex">
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
Hi I am jane , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
</p>
<div class="flex items-center mt-6 -mx-2">
<a class="mx-2" href="#" aria-label="Twitter">
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
</svg>
</a>
<a class="mx-2" href="#" aria-label="Facebook">
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
</svg>
</a>
<a class="mx-2" href="#" aria-label="Linkden">
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
</svg>
</a>
<a class="mx-2" href="#" aria-label="Github">
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
</svg>
</a>
</div>
</div>
<div class="mt-8 lg:mt-0 lg:w-1/2">
<div class="flex items-center justify-center lg:justify-end">
<div class="max-w-lg">
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section 1 end -->
<!-- section 2 start -->
<section class="section_divider">
<div>Section 2</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-8 mx-auto">
<div class="lg:flex lg:-mx-2">
<div class="space-y-3 lg:w-1/5 lg:px-2 lg:space-y-4">
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jackets & Coats</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Hoodies</a>
<a href="#" class="block font-medium text-blue-600 dark:text-blue-500 hover:underline">T-shirts & Vests</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shirts</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Blazers & Suits</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jeans</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Trousers</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shorts</a>
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Underwear</a>
</div>
<div class="mt-6 lg:mt-0 lg:px-2 lg:w-4/5 ">
<div class="flex items-center justify-between text-sm tracking-widest uppercase ">
<p class="text-gray-500 dark:text-gray-300">6 Items</p>
<div class="flex items-center">
<p class="text-gray-500 dark:text-gray-300">Sort</p>
<select class="font-medium text-gray-700 bg-transparent dark:text-gray-500 focus:outline-none">
<option value="#">Recommended</option>
<option value="#">Size</option>
<option value="#">Price</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Printed T-shirt</h4>
<p class="text-blue-500">$12.55</p>
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
<span class="mx-1">Add to cart</span>
</button>
</div>
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1620799139507-2a76f79a2f4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=966&q=80" alt="T-Shirt">
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200"> Slub jersey T-shirt</h4>
<p class="text-blue-500">$18.70</p>
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
<span class="mx-1">Add to cart</span>
</button>
</div>
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320409990-02d834987237?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">T-shirt with a motif</h4>
<p class="text-blue-500">$16.55</p>
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
<span class="mx-1">Add to cart</span>
</button>
</div>
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Art T-shirt</h4>
<p class="text-blue-500">$12.55</p>
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
<span class="mx-1">Add to cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section 2 end -->
<!-- section 3 start -->
<section class="section_divider">
<div>Section 3 </div>
</section>
<section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
<div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
<div class="lg:w-1/2">
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
</div>
<div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
<p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Start Now</a>
</div>
</div>
</div>
</section>
<!-- section 3 end -->
<!-- section 4 start -->
<section class="section_divider">
<div>Section 4 (about me template)</div>
</section>
<section class="bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto ">
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
<div class="max-h-96 md:h-screen">
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>
<div class="flex bg-gray-100 dark:bg-gray-800 p-10">
<div class="mb-auto mt-auto max-w-lg">
<h1 class="text-3xl uppercase dark:text-white dark:font-bold">Brand Name</h1>
<p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
<p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Me</button>
</div>
</div>
</div>
</div>
</section>
<!-- section 4 end -->
<!-- section 5 start -->
<section class="section_divider">
<div>Section 5 ( about 2 ) </div>
</section>
<!-- ====== About Section Start -->
<section class="pt-20 lg:pt-[120px] pb-12 lg:pb-[90px] overflow-hidden dark:bg-gray-800">
<div class="container mx-auto">
<div class="flex flex-wrap justify-between items-center ">
<div class="w-full lg:w-6/12 px-4">
<div class=" flex justify-center ">
<div class="w-full xl:w-1/2 px-3 sm:px-4">
<div class="py-3 sm:py-4">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-1.jpg"
alt=""
class="rounded-2xl w-full"
/>
</div>
<div class="py-3 sm:py-4">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-2.jpg"
alt=""
class="rounded-2xl w-full"
/>
</div>
</div>
<div class="w-full xl:w-1/2 px-3 sm:px-4">
<div class="my-4 relative z-10">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-3.jpg"
alt=""
class="rounded-2xl w-full"
/>
<span class="absolute -right-7 -bottom-7 z-[-1]">
<svg
width="134"
height="106"
viewBox="0 0 134 106"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="1.66667"
cy="104"
r="1.66667"
transform="rotate(-90 1.66667 104)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="104"
r="1.66667"
transform="rotate(-90 16.3333 104)"
fill="#3056D3"
/>
<circle
cx="31"
cy="104"
r="1.66667"
transform="rotate(-90 31 104)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="104"
r="1.66667"
transform="rotate(-90 45.6667 104)"
fill="#3056D3"
/>
<circle
cx="60.3334"
cy="104"
r="1.66667"
transform="rotate(-90 60.3334 104)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="104"
r="1.66667"
transform="rotate(-90 88.6667 104)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="104"
r="1.66667"
transform="rotate(-90 117.667 104)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="104"
r="1.66667"
transform="rotate(-90 74.6667 104)"
fill="#3056D3"
/>
<circle
cx="103"
cy="104"
r="1.66667"
transform="rotate(-90 103 104)"
fill="#3056D3"
/>
<circle
cx="132"
cy="104"
r="1.66667"
transform="rotate(-90 132 104)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 1.66667 89.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="89.3333"
r="1.66667"
transform="rotate(-90 16.3333 89.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="89.3333"
r="1.66667"
transform="rotate(-90 31 89.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 45.6667 89.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="89.3338"
r="1.66667"
transform="rotate(-90 60.3333 89.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 88.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 117.667 89.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 74.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx="103"
cy="89.3338"
r="1.66667"
transform="rotate(-90 103 89.3338)"
fill="#3056D3"
/>
<circle
cx="132"
cy="89.3338"
r="1.66667"
transform="rotate(-90 132 89.3338)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="74.6673"
r="1.66667"
transform="rotate(-90 1.66667 74.6673)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 1.66667 31.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 16.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="31.0003"
r="1.66667"
transform="rotate(-90 16.3333 31.0003)"
fill="#3056D3"
/>
<circle
cx="31"
cy="74.6668"
r="1.66667"
transform="rotate(-90 31 74.6668)"
fill="#3056D3"
/>
<circle
cx="31"
cy="31.0003"
r="1.66667"
transform="rotate(-90 31 31.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 45.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 45.6667 31.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 60.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="30.9998"
r="1.66667"
transform="rotate(-90 60.3333 30.9998)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 88.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 88.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 117.667 74.6668)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 117.667 30.9998)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 74.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 74.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx="103"
cy="74.6668"
r="1.66667"
transform="rotate(-90 103 74.6668)"
fill="#3056D3"
/>
<circle
cx="103"
cy="30.9998"
r="1.66667"
transform="rotate(-90 103 30.9998)"
fill="#3056D3"
/>
<circle
cx="132"
cy="74.6668"
r="1.66667"
transform="rotate(-90 132 74.6668)"
fill="#3056D3"
/>
<circle
cx="132"
cy="30.9998"
r="1.66667"
transform="rotate(-90 132 30.9998)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 1.66667 60.0003)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 1.66667 16.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 16.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 16.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="60.0003"
r="1.66667"
transform="rotate(-90 31 60.0003)"
fill="#3056D3"
/>
<circle
cx="31"
cy="16.3333"
r="1.66667"
transform="rotate(-90 31 16.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 45.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 45.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 60.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 60.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 88.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 88.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 117.667 60.0003)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 117.667 16.3333)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 74.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 74.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="103"
cy="60.0003"
r="1.66667"
transform="rotate(-90 103 60.0003)"
fill="#3056D3"
/>
<circle
cx="103"
cy="16.3333"
r="1.66667"
transform="rotate(-90 103 16.3333)"
fill="#3056D3"
/>
<circle
cx="132"
cy="60.0003"
r="1.66667"
transform="rotate(-90 132 60.0003)"
fill="#3056D3"
/>
<circle
cx="132"
cy="16.3333"
r="1.66667"
transform="rotate(-90 132 16.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 1.66667 45.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 1.66667 1.66683)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="45.3333"
r="1.66667"
transform="rotate(-90 16.3333 45.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 16.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx="31"
cy="45.3333"
r="1.66667"
transform="rotate(-90 31 45.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="1.66683"
r="1.66667"
transform="rotate(-90 31 1.66683)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 45.6667 45.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 45.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="45.3338"
r="1.66667"
transform="rotate(-90 60.3333 45.3338)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 60.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 88.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 88.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 117.667 45.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 117.667 1.66683)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 74.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 74.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="103"
cy="45.3338"
r="1.66667"
transform="rotate(-90 103 45.3338)"
fill="#3056D3"
/>
<circle
cx="103"
cy="1.66683"
r="1.66667"
transform="rotate(-90 103 1.66683)"
fill="#3056D3"
/>
<circle
cx="132"
cy="45.3338"
r="1.66667"
transform="rotate(-90 132 45.3338)"
fill="#3056D3"
/>
<circle
cx="132"
cy="1.66683"
r="1.66667"
transform="rotate(-90 132 1.66683)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
<div class="mt-10 lg:mt-0">
<span class="font-semibold text-lg text-primary mb-2 block dark:text-gray-100">
Why Choose Us
</span>
<h2 class="font-bold text-3xl sm:text-4xl text-dark mb-8 dark:text-cyan-200">
Make your customers happy by giving services.
</h2>
<p class="text-base text-body-color mb-8 dark:text-emerald-100">
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less.
</p>
<p class="text-base text-body-color mb-12 dark:text-emerald-100">
A domain name is one of the first steps to establishing your
brand. Secure a consistent brand image with a domain name that
matches your business.
</p>
<a
href="javascript:void(0)"
class="
py-4
px-10
lg:px-8
xl:px-10
inline-flex
items-center
justify-center
text-center text-white text-base
bg-black
hover:bg-opacity-90
font-normal
rounded-lg
"
>
Get Started
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====== About Section End -->
<!-- section 5 end -->
<!-- section 6 start -->
<!-- section 6 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");
let doc_html_el = document.getElementsByTagName('html')[0];
doc_html_el.addEventListener('keyup',(e)=>{
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
if(e.ctrlKey && e.keyCode =='220'){
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
}
})
doc_html_el.addEventListener('keyup',(e)=>{
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
if(e.ctrlKey && e.keyCode =='191'){
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
}
})
toogler.addEventListener('click',()=>{
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
console.log(doc_html_el.className);
})
</script>
<!-- end of script section -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink