mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 16:27:01 +00:00
added 38 footer
This commit is contained in:
merajjahir
959
dist/tailshape.css
vendored
959
dist/tailshape.css
vendored
File diff suppressed because it is too large
Load Diff
300
public/componets/footer/37_footer.html
Normal file
300
public/componets/footer/37_footer.html
Normal file
@@ -0,0 +1,300 @@
|
||||
<!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>
|
||||
86
public/componets/footer/38_footer.html
Normal file
86
public/componets/footer/38_footer.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!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 38 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 38</div>
|
||||
</section>
|
||||
<!-- component -->
|
||||
<section class="">
|
||||
<div class=" bg-grey-400 dark:bg-gray-800 p-8">
|
||||
<div class="sm:flex mb-4">
|
||||
<div class="sm:w-1/4 h-auto">
|
||||
<div class="text-orange-500 mb-2">Orange</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-orange-500 text-grey-400">One</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Two</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Three</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Four</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Five</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Six</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Seven</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Eight</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
|
||||
<div class="text-blue-700 mb-2">Blue</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-blue-700 text-grey-400">One</li>
|
||||
<li class="hover:text-blue-700 text-grey-400">Two</li>
|
||||
<li class="hover:text-blue-700 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-blue-400 mb-2 mt-4">Blue-light</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-blue-400 text-grey-400">One</li>
|
||||
<li class="hover:text-blue-400 text-grey-400">Two</li>
|
||||
<li class="hover:text-blue-400 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
|
||||
<div class="text-green-700 mb-2">Green-dark</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-green-700 text-grey-400">One</li>
|
||||
<li class="hover:text-green-700 text-grey-400">Two</li>
|
||||
<li class="hover:text-green-700 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-green-400 mb-2 mt-4">Green-light</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-green-400 text-grey-darker">One</li>
|
||||
<li class="hover:text-green-400 text-grey-darker">Two</li>
|
||||
<li class="hover:text-green-400 text-grey-darker">Three</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="sm:w-1/2 sm:mt-0 mt-8 h-auto">
|
||||
<div class="text-red-light mb-2 font-bold underline dark:text-gray-400 hover:text-cyan-300">Newsletter</div>
|
||||
<p class="text-grey-darker leading-normal text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, consectetur. </p>
|
||||
<div class="mt-4 flex">
|
||||
<input type="text" class="p-2 border border-grey-light round text-grey-dark text-sm h-auto" placeholder="Your email address">
|
||||
<button class="bg-orange-500 text-gray-300 font-semibold rounded-sm h-auto text-xs p-3">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- footer 38 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -3201,9 +3201,15 @@
|
||||
</h5>
|
||||
<div class="mt-6 lg:mb-0 mb-6">
|
||||
<button class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-twitter"></i></button><button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-facebook-square"></i></button><button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-dribbble"></i></button><button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</button>
|
||||
<button class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
<button class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2" type="button">
|
||||
<i class="fab fa-github"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -3345,10 +3351,363 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- footer 36 end -->
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
|
||||
<!-- footer 38 start -->
|
||||
<section class="section_divider">
|
||||
<div>Footer 38</div>
|
||||
</section>
|
||||
<!-- component -->
|
||||
<section class="">
|
||||
<div class=" bg-grey-400 dark:bg-gray-800 p-8">
|
||||
<div class="sm:flex mb-4">
|
||||
<div class="sm:w-1/4 h-auto">
|
||||
<div class="text-orange-500 mb-2">Orange</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-orange-500 text-grey-400">One</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Two</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Three</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Four</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Five</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Six</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Seven</li>
|
||||
<li class="hover:text-orange-500 text-grey-400">Eight</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
|
||||
<div class="text-blue-700 mb-2">Blue</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-blue-700 text-grey-400">One</li>
|
||||
<li class="hover:text-blue-700 text-grey-400">Two</li>
|
||||
<li class="hover:text-blue-700 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-blue-400 mb-2 mt-4">Blue-light</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-blue-400 text-grey-400">One</li>
|
||||
<li class="hover:text-blue-400 text-grey-400">Two</li>
|
||||
<li class="hover:text-blue-400 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="sm:w-1/4 h-auto sm:mt-0 mt-8">
|
||||
<div class="text-green-700 mb-2">Green-dark</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-green-700 text-grey-400">One</li>
|
||||
<li class="hover:text-green-700 text-grey-400">Two</li>
|
||||
<li class="hover:text-green-700 text-grey-400">Three</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-green-400 mb-2 mt-4">Green-light</div>
|
||||
<ul class="list-reset leading-normal">
|
||||
<li class="hover:text-green-400 text-grey-darker">One</li>
|
||||
<li class="hover:text-green-400 text-grey-darker">Two</li>
|
||||
<li class="hover:text-green-400 text-grey-darker">Three</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="sm:w-1/2 sm:mt-0 mt-8 h-auto">
|
||||
<div class="text-red-light mb-2 font-bold underline dark:text-gray-400 hover:text-cyan-300">Newsletter</div>
|
||||
<p class="text-grey-darker leading-normal text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, consectetur. </p>
|
||||
<div class="mt-4 flex">
|
||||
<input type="text" class="p-2 border border-grey-light round text-grey-dark text-sm h-auto" placeholder="Your email address">
|
||||
<button class="bg-orange-500 text-gray-300 font-semibold rounded-sm h-auto text-xs p-3">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- footer 38 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
Reference in New Issue
Block a user