mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 17:17:01 +00:00
added 41 footer and 4 header with one of theme being uncomplete
This commit is contained in:
merajjahir
192
public/componets/footer/39_footer.html
Normal file
192
public/componets/footer/39_footer.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<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">
|
||||
<title>Footer 37</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- footer 39 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 39</div>
|
||||
</section>
|
||||
<footer class="bg-gray-900 text-gray-200">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="-mx-4 flex flex-wrap justify-between">
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Contact</h2>
|
||||
<ul class="mb-6">
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://maps.google.com" target="_blank" rel="noopener noreferrer" class="hover:text-yellow-500">
|
||||
Tailwindow Street, California, USA
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:info@tailwindow.com" class="hover:text-yellow-500">info@tailwindow.com</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="tel:+18245946369" class="hover:text-yellow-500">+1 8245 946 369</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Latest Posts</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/121/40" alt="article 1">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
How to use TailwindCSS with Vuejs and Laravel Mix
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">July 17, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/122/40" alt="article 2">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
5 Tips to Make Responsive Website
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">June 06, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/123/40" alt="article 3">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
What Is Flex And When to Use It?
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">May 28, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/124/40" alt="article 4">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
How TailwindCSS Can Help Your Productivity?
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">March 15, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/125/40" alt="article 4">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
Getting Started With HTML and CSS
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">February 14, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Send Us Message</h2>
|
||||
|
||||
<form>
|
||||
<div class="mb-2">
|
||||
<label for="email" class="text-xs text-gray-200">Email</label>
|
||||
<input id="email" type="email" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="john@example.com">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="message" class="text-xs text-gray-200">Message</label>
|
||||
<textarea id="message" cols="30" rows="3" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="I have something in mind"></textarea>
|
||||
</div>
|
||||
<button class="rounded-sm py-2 px-4 text-gray-100 bg-gray-600 hover:bg-gray-700 focus:outline-none">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="-mx-4 py-4 flex flex-wrap justify-between items-center">
|
||||
<div class="px-4 w-full text-center sm:w-auto">
|
||||
<a href="/" class="inline-flex">
|
||||
<svg class="w-40" version="1.1" viewBox="0 0 3368 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0 -75)">
|
||||
<g transform="translate(0 75)">
|
||||
<rect width="512" height="512" rx="128" fill="#3D5AFE"></rect>
|
||||
<rect x="149" y="176" width="220" height="220" fill="#fff"></rect>
|
||||
<circle cx="259" cy="156" r="40" fill="#fff"></circle>
|
||||
<circle cx="369" cy="286" r="40" fill="#2962FF"></circle>
|
||||
</g>
|
||||
<text fill="white" font-family="Nunito-Bold, Nunito" font-size="512" font-weight="bold">
|
||||
<tspan x="654" y="518">Tailwindow</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-4 w-full text-center sm:w-auto sm:text-left">
|
||||
Copyright © 2020
|
||||
<script>new Date().getFullYear() > 2020 && document.write("- " + new Date().getFullYear())</script>- 2022
|
||||
Tailwindow. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer 39 end -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
95
public/componets/footer/40_footer.html
Normal file
95
public/componets/footer/40_footer.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<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">
|
||||
<title>Footer 37</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- footer 40 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 40</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white dark:bg-gray-800 w-full py-8">
|
||||
<div class="max-w-screen-xl mx-auto px-4">
|
||||
<ul class="max-w-screen-md mx-auto text-lg font-light flex flex-wrap justify-between">
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-8 flex max-w-xs mx-auto items-center justify-between">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
|
||||
<div class=" relative ">
|
||||
<input type="text" id=""form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
|
||||
</div>
|
||||
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="text-center text-gray-500 dark:text-gray-200 pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
copyright by exaple
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- footer 40 end -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
161
public/componets/footer/41_footer.html
Normal file
161
public/componets/footer/41_footer.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<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">
|
||||
<title>Footer 37</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- footer 41 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 41</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
|
||||
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8 text-gray-400 dark:text-gray-300">
|
||||
<ul class="text-lg font-light pb-8 flex flex-wrap justify-center">
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Components
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Elements
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Commerces
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Navigation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Contacts
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Customization
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Themes
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Plugins
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-8 flex border-t border-gray-200 max-w-xs mx-auto items-center justify-between">
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
|
||||
<div class=" relative ">
|
||||
<input type="text" id=""form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
|
||||
</div>
|
||||
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
copyright by example
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- footer 41 end -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -3706,9 +3706,411 @@
|
||||
</section>
|
||||
<!-- footer 38 end -->
|
||||
|
||||
<!-- footer 39 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 39</div>
|
||||
</section>
|
||||
<footer class="bg-gray-900 text-gray-200">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="-mx-4 flex flex-wrap justify-between">
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Contact</h2>
|
||||
<ul class="mb-6">
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="http://maps.google.com" target="_blank" rel="noopener noreferrer" class="hover:text-yellow-500">
|
||||
Tailwindow Street, California, USA
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:info@tailwindow.com" class="hover:text-yellow-500">info@tailwindow.com</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center mb-2">
|
||||
<div class="text-yellow-500 mr-4">
|
||||
<svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<a href="tel:+18245946369" class="hover:text-yellow-500">+1 8245 946 369</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="inline-flex w-8 h-8 rounded-sm bg-gray-600 hover:bg-gray-700 items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Latest Posts</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/121/40" alt="article 1">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
How to use TailwindCSS with Vuejs and Laravel Mix
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">July 17, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/122/40" alt="article 2">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
5 Tips to Make Responsive Website
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">June 06, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/123/40" alt="article 3">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
What Is Flex And When to Use It?
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">May 28, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/124/40" alt="article 4">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
How TailwindCSS Can Help Your Productivity?
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">March 15, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex mb-2 hover:text-yellow-500">
|
||||
<img class="rounded-sm" src="https://picsum.photos/id/125/40" alt="article 4">
|
||||
<div class="ml-3 overflow-hidden">
|
||||
<h3 class="font-semibold truncate">
|
||||
Getting Started With HTML and CSS
|
||||
</h3>
|
||||
<span class="text-xs text-gray-500 block">February 14, 2020</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="px-4 w-full md:w-1/3 my-4">
|
||||
<h2 class="text-xl mb-6">Send Us Message</h2>
|
||||
|
||||
<form>
|
||||
<div class="mb-2">
|
||||
<label for="email" class="text-xs text-gray-200">Email</label>
|
||||
<input id="email" type="email" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="john@example.com">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="message" class="text-xs text-gray-200">Message</label>
|
||||
<textarea id="message" cols="30" rows="3" class="block w-full border border-gray-400 rounded-sm py-1 px-4 text-gray-700 text-md focus:outline-none focus:border-gray-500" placeholder="I have something in mind"></textarea>
|
||||
</div>
|
||||
<button class="rounded-sm py-2 px-4 text-gray-100 bg-gray-600 hover:bg-gray-700 focus:outline-none">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="-mx-4 py-4 flex flex-wrap justify-between items-center">
|
||||
<div class="px-4 w-full text-center sm:w-auto">
|
||||
<a href="/" class="inline-flex">
|
||||
<svg class="w-40" version="1.1" viewBox="0 0 3368 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0 -75)">
|
||||
<g transform="translate(0 75)">
|
||||
<rect width="512" height="512" rx="128" fill="#3D5AFE"></rect>
|
||||
<rect x="149" y="176" width="220" height="220" fill="#fff"></rect>
|
||||
<circle cx="259" cy="156" r="40" fill="#fff"></circle>
|
||||
<circle cx="369" cy="286" r="40" fill="#2962FF"></circle>
|
||||
</g>
|
||||
<text fill="white" font-family="Nunito-Bold, Nunito" font-size="512" font-weight="bold">
|
||||
<tspan x="654" y="518">Tailwindow</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-4 w-full text-center sm:w-auto sm:text-left">
|
||||
Copyright © 2020
|
||||
<script>new Date().getFullYear() > 2020 && document.write("- " + new Date().getFullYear())</script>- 2022
|
||||
Tailwindow. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer 39 end -->
|
||||
|
||||
<!-- footer 40 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 40</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white dark:bg-gray-800 w-full py-8">
|
||||
<div class="max-w-screen-xl mx-auto px-4">
|
||||
<ul class="max-w-screen-md mx-auto text-lg font-light flex flex-wrap justify-between">
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li class="my-2">
|
||||
<a class="text-gray-400 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white transition-colors duration-200" href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-8 flex max-w-xs mx-auto items-center justify-between">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
|
||||
<div class=" relative ">
|
||||
<input type="text" id=""form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
|
||||
</div>
|
||||
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="text-center text-gray-500 dark:text-gray-200 pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
copyright by exaple
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- footer 40 end -->
|
||||
|
||||
|
||||
<!-- footer 41 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 41</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
|
||||
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8 text-gray-400 dark:text-gray-300">
|
||||
<ul class="text-lg font-light pb-8 flex flex-wrap justify-center">
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Components
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Elements
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Commerces
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Navigation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Contacts
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-1/2 md:w-1/3 lg:w-1/3">
|
||||
<div class="text-center">
|
||||
<h2 class="text-gray-500 dark:text-gray-200 text-md uppercase mb-4">
|
||||
Customization
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Themes
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
Plugins
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 hover:text-gray-800 dark:hover:text-white transition-colors duration-200">
|
||||
<a href="#">
|
||||
LinkedIn
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-8 flex border-t border-gray-200 max-w-xs mx-auto items-center justify-between">
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792">
|
||||
<path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<svg width="20" height="20" fill="currentColor" class="text-xl hover:text-gray-800 dark:hover:text-white transition-colors duration-200" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1551 1476q15-6 26-3t11 17.5-15 33.5q-13 16-44 43.5t-95.5 68-141 74-188 58-229.5 24.5q-119 0-238-31t-209-76.5-172.5-104-132.5-105-84-87.5q-8-9-10-16.5t1-12 8-7 11.5-2 11.5 4.5q192 117 300 166 389 176 799 90 190-40 391-135zm207-115q11 16 2.5 69.5t-28.5 102.5q-34 83-85 124-17 14-26 9t0-24q21-45 44.5-121.5t6.5-98.5q-5-7-15.5-11.5t-27-6-29.5-2.5-35 0-31.5 2-31 3-22.5 2q-6 1-13 1.5t-11 1-8.5 1-7 .5h-10l-3-.5-2-1.5-1.5-3q-6-16 47-40t103-30q46-7 108-1t76 24zm-394-443q0 31 13.5 64t32 58 37.5 46 33 32l13 11-227 224q-40-37-79-75.5t-58-58.5l-19-20q-11-11-25-33-38 59-97.5 102.5t-127.5 63.5-140 23-137.5-21-117.5-65.5-83-113-31-162.5q0-84 28-154t72-116.5 106.5-83 122.5-57 130-34.5 119.5-18.5 99.5-6.5v-127q0-65-21-97-34-53-121-53-6 0-16.5 1t-40.5 12-56 29.5-56 59.5-48 96l-294-27q0-60 22-119t67-113 108-95 151.5-65.5 190.5-24.5q100 0 181 25t129.5 61.5 81 83 45 86 12.5 73.5v589zm-672 21q0 86 70 133 66 44 139 22 84-25 114-123 14-45 14-101v-162q-59 2-111 12t-106.5 33.5-87 71-32.5 114.5z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
<form class="flex flex-col md:flex-row w-3/4 md:w-full max-w-sm md:space-x-3 space-y-3 md:space-y-0 justify-center">
|
||||
<div class=" relative ">
|
||||
<input type="text" id=""form-subscribe-Subscribe" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Email"/>
|
||||
</div>
|
||||
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
|
||||
copyright by example
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- footer 41 end -->
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
95
public/componets/navs_headers/1_header.html
Normal file
95
public/componets/navs_headers/1_header.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!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">
|
||||
<title>footer 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 1 start -->
|
||||
|
||||
<section class="section_divider" id="header_1">
|
||||
<div>Header 1</div>
|
||||
</section>
|
||||
|
||||
<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||
<a href="#" class="flex">
|
||||
<svg class="mr-3 h-10" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
|
||||
<span class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white">FlowBite</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
|
||||
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
|
||||
|
||||
<div id="dropdownNavbar" class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="py-1" aria-labelledby="dropdownLargeButton">
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Earnings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 1 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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
87
public/componets/navs_headers/2_header.html
Normal file
87
public/componets/navs_headers/2_header.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!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">
|
||||
<title>footer 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 2</div>
|
||||
</section>
|
||||
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
|
||||
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
||||
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
||||
|
||||
<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Home</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Features</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Pricing</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Blog</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- header 2 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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
66
public/componets/navs_headers/3_header.html
Normal file
66
public/componets/navs_headers/3_header.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!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">
|
||||
<title>footer 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 3</div>
|
||||
</section>
|
||||
<header class="text-gray-600 dark:bg-gray-800 body-font">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
|
||||
</svg>
|
||||
<span class="ml-3 text-xl dark:text-gray-400">Tailblocks</span>
|
||||
</a>
|
||||
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">First Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Second Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Third Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Fourth Link</a>
|
||||
</nav>
|
||||
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- header 3 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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
122
public/componets/navs_headers/4_header.html
Normal file
122
public/componets/navs_headers/4_header.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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">
|
||||
<title>Header 4</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- header 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 4</div>
|
||||
</section>
|
||||
<div class="min-h-screen bg-gray-100 min-w-screen">
|
||||
<!-- Header Logo Center -->
|
||||
<header class="w-full text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row">
|
||||
|
||||
<nav class="flex flex-wrap items-center text-base lg:w-2/5 md:ml-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<a
|
||||
class="flex items-center order-first mb-4 font-medium text-gray-900 lg:order-none lg:w-1/5 title-font lg:items-center lg:justify-center md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<div class="inline-flex items-center h-full ml-5 lg:w-2/5 lg:justify-end lg:ml-0">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Center -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex flex-wrap items-center dark:text-gray-300 justify-center pl-24 text-base md:ml-auto md:mr-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full dark:text-gray-200">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Right -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex items-center dark:text-gray-300 justify-center text-base md:ml-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full pl-6 ml-6 border-l border-gray-200 dark:text-gray-300">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Left -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex flex-wrap items-center dark:text-gray-300 justify-center pl-6 ml-6 text-base border-l border-gray-200 md:mr-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full dark:text-gray-300">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- header 4 end -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
public/componets/navs_headers/5_header.html
Normal file
0
public/componets/navs_headers/5_header.html
Normal file
381
public/componets/navs_headers/header.html
Normal file
381
public/componets/navs_headers/header.html
Normal file
@@ -0,0 +1,381 @@
|
||||
<!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">
|
||||
<title>footer 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 1 start -->
|
||||
|
||||
<section class="section_divider" id="header_1">
|
||||
<div>Header 1</div>
|
||||
</section>
|
||||
|
||||
<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||
<a href="#" class="flex">
|
||||
<svg class="mr-3 h-10" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
|
||||
<span class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white">FlowBite</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
|
||||
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
|
||||
|
||||
<div id="dropdownNavbar" class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="py-1" aria-labelledby="dropdownLargeButton">
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Earnings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 1 end -->
|
||||
|
||||
<!-- header 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 2</div>
|
||||
</section>
|
||||
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
|
||||
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
||||
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
||||
|
||||
<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Home</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Features</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Pricing</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Blog</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- header 2 end -->
|
||||
|
||||
<!-- header 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 3</div>
|
||||
</section>
|
||||
<header class="text-gray-600 dark:bg-gray-800 body-font">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
|
||||
</svg>
|
||||
<span class="ml-3 text-xl dark:text-gray-400">Tailblocks</span>
|
||||
</a>
|
||||
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">First Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Second Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Third Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Fourth Link</a>
|
||||
</nav>
|
||||
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- header 3 end -->
|
||||
|
||||
<!-- header 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 4</div>
|
||||
</section>
|
||||
<div class=" bg-gray-100 min-w-screen">
|
||||
<!-- Header Logo Center -->
|
||||
<header class="w-full text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row">
|
||||
|
||||
<nav class="flex flex-wrap items-center text-base lg:w-2/5 md:ml-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<a
|
||||
class="flex items-center order-first mb-4 font-medium text-gray-900 lg:order-none lg:w-1/5 title-font lg:items-center lg:justify-center md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<div class="inline-flex items-center h-full ml-5 lg:w-2/5 lg:justify-end lg:ml-0">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Center -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex flex-wrap items-center dark:text-gray-300 justify-center pl-24 text-base md:ml-auto md:mr-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full dark:text-gray-200">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Right -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex items-center dark:text-gray-300 justify-center text-base md:ml-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full pl-6 ml-6 border-l border-gray-200 dark:text-gray-300">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Header Menu Left -->
|
||||
<header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
|
||||
<div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
|
||||
<a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<nav class="flex flex-wrap items-center dark:text-gray-300 justify-center pl-6 ml-6 text-base border-l border-gray-200 md:mr-auto">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
|
||||
<a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
|
||||
</nav>
|
||||
<div class="items-center h-full dark:text-gray-300">
|
||||
<a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Login</a>
|
||||
<a href="#_"
|
||||
class="px-4 py-2 text-xs font-bold text-white uppercase transition-all duration-150 bg-teal-500 rounded shadow outline-none active:bg-teal-600 hover:shadow-md focus:outline-none ease">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- header 4 end -->
|
||||
|
||||
|
||||
<!-- header 5 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Header 5</div>
|
||||
</section>
|
||||
<header class="sticky top-0 bg-white shadow">
|
||||
<div class="flex items-center justify-between p-4 mx-auto max-w-7xl">
|
||||
<p>Logo</p>
|
||||
<button class="btn btn-light">Contact Us</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- header 5 end -->
|
||||
|
||||
<!-- header 6 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Header 6</div>
|
||||
</section>
|
||||
<header class="z-30 w-full px-2 py-4 bg-white sm:px-4">
|
||||
<div class="flex items-center justify-between mx-auto max-w-7xl">
|
||||
<a href="/" title="Kutty Home Page" class="flex items-center">
|
||||
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
||||
<path
|
||||
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
||||
fill="#1A202C"
|
||||
/>
|
||||
<path
|
||||
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
||||
fill="#9E58E9"
|
||||
/>
|
||||
<path
|
||||
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
||||
fill="#7629C8"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Kutty</span>
|
||||
</a>
|
||||
<div class="flex items-center space-x-1">
|
||||
<div class="hidden space-x-1 md:inline-flex">
|
||||
<a href="#f" class="btn rounded-lg font-semibold hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition">Features</a>
|
||||
<a href="#" class="btn btn-sm btn-link">Pricing</a>
|
||||
<a href="#" class="btn btn-sm btn-link">Blog</a>
|
||||
<a href="#" class="btn btn-sm btn-link">Company</a>
|
||||
<a href="#" class="btn btn-sm btn-link">Sign in</a>
|
||||
</div>
|
||||
<a href="#" class="btn btn-sm btn-primary">Get Started</a>
|
||||
<div class="inline-flex md:hidden" x-data="{ open: false }">
|
||||
<button class="flex-none px-2 btn btn-link btn-sm" @click="open = true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
<span class="sr-only">Open Menu</span>
|
||||
</button>
|
||||
<div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
|
||||
<button class="self-end flex-none px-2 ml-2 btn btn-link btn-icon" @click="open = false">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
<span class="sr-only">Close Menu</span>
|
||||
</button>
|
||||
<a href="#" class="w-full font-semibold hover:bg-gray-600">Features</a>
|
||||
<a href="#" class="w-full btn btn-link">Pricing</a>
|
||||
<a href="#" class="w-full btn btn-link">Blog</a>
|
||||
<a href="#" class="w-full btn btn-link">Company</a>
|
||||
<a href="#" class="w-full btn btn-link">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- header 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');
|
||||
|
||||
}
|
||||
})
|
||||
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
Block a user