Skip to content

Commit

Permalink
added footer
Browse files Browse the repository at this point in the history
  • Loading branch information
besoeasy authored Dec 5, 2023
1 parent d3246e0 commit 579e36e
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 0 deletions.
43 changes: 43 additions & 0 deletions components/footer/footbl1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<footer class="py-20">
<div class="container mx-auto px-4">
<div class="flex flex-wrap items-center justify-between">
<div class="mb-6 w-full lg:mb-0 lg:w-1/5">
<a class="text-2xl leading-none text-gray-600" href="#">
<img class="h-8" src="https://shuffle.dev/mockup-assets/logos/shuffle-ux.svg" alt="" width="auto" />
</a>
</div>
<div class="w-full lg:w-auto">
<ul class="flex flex-wrap items-center space-x-8">
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">About</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Company</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Services</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Testimonials</a></li>
</ul>
</div>
</div>
</div>
<div class="mb-8 mt-16 border-b border-gray-50"></div>
<div class="container mx-auto px-4">
<div class="flex flex-wrap items-center justify-between">
<p class="order-last mt-4 w-full text-sm text-gray-400 lg:order-first lg:mt-0 lg:w-auto">All rights reserved © Wireframes Corporation 2020</p>
<div class="order-first lg:order-last">
<a class="mr-8 inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/facebook.svg" alt="" />
</a>
<a class="mr-8 inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/twitter.svg" alt="" />
</a>
<a class="mr-8 inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/github.svg" alt="" />
</a>
<a class="mr-8 inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/instagram.svg" alt="" />
</a>
<a class="inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/linkedin.svg" alt="" />
</a>
</div>
</div>
</div>
</footer>

35 changes: 35 additions & 0 deletions components/footer/footbl2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<footer class="py-20">
<div class="container mx-auto px-4 text-center">
<a class="mx-auto inline-block text-2xl leading-none text-gray-600" href="#">
<img class="h-8" src="https://shuffle.dev/mockup-assets/logos/shuffle-ux.svg" alt="" width="auto" />
</a>
<ul class="my-6 flex flex-wrap items-center justify-center space-x-8">
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">About</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Company</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Services</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Testimonials</a></li>
</ul>
<div>
<a class="mr-2 inline-block lg:mr-10" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/facebook.svg" />
</a>
<a class="mr-2 inline-block lg:mr-10" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/twitter.svg" />
</a>
<a class="mr-2 inline-block lg:mr-10" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/github.svg" />
</a>
<a class="mr-2 inline-block lg:mr-10" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/instagram.svg" />
</a>
<a class="inline-block" href="#">
<img src="https://shuffle.dev/mockup-assets/socials/linkedin.svg" />
</a>
</div>
</div>
<div class="mb-8 mt-12 border-b border-gray-50"></div>
<div class="container mx-auto px-4">
<p class="text-center text-sm text-gray-400">All rights reserved © Wireframes Corporation 2020</p>
</div>
</footer>

23 changes: 23 additions & 0 deletions components/footer/footbl3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<section class="py-20">
<div class="container mx-auto px-4">
<div class="-mx-4 flex flex-wrap items-center justify-between">
<div class="mb-4 w-full px-4 lg:mb-0 lg:w-1/2">
<a class="text-2xl leading-none text-gray-600" href="#">
<img class="h-8" src="https://shuffle.dev/mockup-assets/logos/shuffle-ux.svg" alt="" width="auto" />
</a>
<p class="mt-3 hidden text-sm text-gray-400 lg:block">All rights reserved © Wireframes Corporation 2020</p>
</div>
<div class="flex w-full flex-wrap items-center px-4 lg:w-1/2 lg:justify-end">
<ul class="mb-4 inline-flex w-full flex-wrap lg:mb-0 lg:mr-12 lg:w-auto">
<li class="mb-2 mr-6 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">About</a></li>
<li class="mb-2 mr-6 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Company</a></li>
<li class="mb-2 mr-6 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Services</a></li>
<li class="mb-2 md:mb-0"><a class="text-sm text-gray-900 hover:text-gray-700" href="#">Testimonials</a></li>
</ul>
<a class="inline-block rounded bg-gray-500 px-6 py-2 text-sm font-bold leading-loose text-white transition duration-200 hover:bg-gray-600" href="#">Get in Touch</a>
</div>
</div>
<p class="mt-6 text-sm text-gray-400 lg:hidden">All rights reserved © Wireframes Corporation 2020</p>
</div>
</section>

73 changes: 73 additions & 0 deletions components/footer/footbl4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<footer class="py-20">
<div class="container mx-auto px-4">
<div class="-mx-4 mb-8 flex flex-wrap lg:mb-16">
<div class="mb-12 w-full px-4 lg:mb-0 lg:w-1/3">
<a class="text-2xl leading-none text-gray-600" href="#">
<img class="h-8" src="https://shuffle.dev/mockup-assets/logos/shuffle-ux.svg" alt="" width="auto" />
</a>
<p class="mb-6 mt-5 max-w-xs leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<a class="mr-8 inline-block h-6" href="#">
<img class="mx-auto" src="https://shuffle.dev/mockup-assets/socials/facebook.svg" />
</a>
<a class="mr-8 inline-block h-6" href="#">
<img class="mx-auto" src="https://shuffle.dev/mockup-assets/socials/github.svg" />
</a>
<a class="mr-8 inline-block h-6" href="#">
<img class="mx-auto" src="https://shuffle.dev/mockup-assets/socials/instagram.svg" />
</a>
<a class="mr-8 inline-block h-6" href="#">
<img class="mx-auto" src="https://shuffle.dev/mockup-assets/socials/linkedin.svg" />
</a>
<a class="inline-block h-6" href="#">
<img class="mx-auto" src="https://shuffle.dev/mockup-assets/socials/twitter.svg" />
</a>
</div>
</div>
<div class="w-full px-4 lg:w-2/3">
<div class="flex flex-wrap justify-between">
<div class="mb-8 w-1/2 lg:mb-0 lg:w-1/4">
<h3 class="font-heading mb-6 text-lg font-bold">Company</h3>
<ul class="text-sm">
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Careers</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Press</a></li>
<li><a class="text-gray-500 hover:text-gray-600" href="#">Blog</a></li>
</ul>
</div>
<div class="mb-8 w-1/2 lg:mb-0 lg:w-1/4">
<h3 class="font-heading mb-6 text-lg font-bold">Pages</h3>
<ul class="text-sm">
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Login</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Register</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Add list</a></li>
<li><a class="text-gray-500 hover:text-gray-600" href="#">Contact</a></li>
</ul>
</div>
<div class="mb-8 w-1/2 lg:mb-0 lg:w-1/4">
<h3 class="font-heading mb-6 text-lg font-bold">Legal</h3>
<ul class="text-sm">
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Terms</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Team</a></li>
<li><a class="text-gray-500 hover:text-gray-600" href="#">Privacy</a></li>
</ul>
</div>
<div class="w-1/2 lg:w-1/4">
<h3 class="font-heading mb-6 text-lg font-bold">Resources</h3>
<ul class="text-sm">
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Blog</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Service</a></li>
<li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Product</a></li>
<li><a class="text-gray-500 hover:text-gray-600" href="#">Pricing</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-50 pt-8">
<p class="text-sm text-gray-400 lg:text-center">All rights reserved © Wireframes Corporation 2020</p>
</div>
</div>
</footer>

0 comments on commit 579e36e

Please sign in to comment.