mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 03:57:00 +00:00
300 lines
12 KiB
HTML
300 lines
12 KiB
HTML
<!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 37 start -->
|
|
<section class="section_divider">
|
|
<div>Footer 37</div>
|
|
</section>
|
|
<footer class="pt-16 dark:bg-gray-800">
|
|
<div class="border-t md:px-4 md:pt-10 md:pb-5">
|
|
<div class="flex flex-wrap md:max-w-screen-lg mx-auto">
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
|
|
mattis
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas
|
|
mattis
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Fusce vel sem</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Ut venenatis tellus</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Vestibulum</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Nunc at ipsum</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Ut porta
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Ut porta
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Pellentesque rhoncus</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Aenean</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Curabitur bibendum</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Phasellus non mi</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Duis accumsa</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Curabitur nec enim</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Fusce ut augue</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Praesent elementum
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Praesent elementum
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Mauris mattis nunc</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Nunc viverra risus</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Etiam a libero</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Aenean gravida orci in sem varius
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Aenean gravida orci in sem varius
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Cras id ipsum</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Donec a lorem
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Donec a lorem
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Sed a diam</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Nullam luctus felis</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Sed euismod</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Integer interdum
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Integer interdum
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Dignissim gravida</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Eu mollis elit</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Hendrerit purus id</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Ut luctus dui tincidunt</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Pellentesque at ligula</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
<section
|
|
class="relative text-gray-700 font-light border-b px-4 pb-4 md:py-3 w-full md:border-none md:w-1/4"
|
|
>
|
|
<div class="md:hidden">
|
|
<button
|
|
onclick="toggleFooterSection(event)"
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 focus:outline-none border-t border-white py-4 w-full text-left"
|
|
type="button"
|
|
>
|
|
Quisque
|
|
</button>
|
|
</div>
|
|
<a
|
|
class="uppercase text-xs font-bold tracking-wider text-pink-700 hidden md:block"
|
|
href="#"
|
|
>
|
|
Quisque
|
|
</a>
|
|
<article class="h-0 md:h-auto -mt-4 md:mt-0 overflow-hidden">
|
|
<ul class="my-5 text-sm tracking-wide dark:text-sky-400">
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Finibus nulla eget</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Pellentesque</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Duis efficitur</a>
|
|
</li>
|
|
<li class="my-3 tracking-wide">
|
|
<a href="#">Cras at lacus</a>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-screen-lg mx-auto border-none px-4">
|
|
<section
|
|
class="flex flex-col md:flex-row md:justify-between md:border-solid md:border-t text-gray-700 font-light text-sm pt-4 pb-6 md:pt-5 md:pb-6 w-full"
|
|
>
|
|
<div>
|
|
<p class="leading-8 tracking-wide dark:text-sky-400">
|
|
© Lorem Ipsum Co., 123 Lorem Street, New York, NY
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="leading-8 tracking-wide dark:text-sky-400">Privacy Policy</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
function toggleFooterSection(e) {
|
|
const list = e.target.parentElement.parentElement.querySelector(
|
|
"article"
|
|
);
|
|
if (list.classList.contains("h-0")) {
|
|
list.classList.remove("h-0");
|
|
} else {
|
|
list.classList.add("h-0");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- footer 37 end -->
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |