Skip to content

Commit

Permalink
Footer: contentHeavy (#40)
Browse files Browse the repository at this point in the history
  • Loading branch information
StrawHatHacker authored Jan 13, 2024
1 parent b2d754f commit c9387f4
Showing 1 changed file with 67 additions and 0 deletions.
67 changes: 67 additions & 0 deletions src/examples/footer/contentHeavy.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<footer class="p-10 bg-base-200 text-base-content text-base rounded">

<!-- Link grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<nav class="flex flex-col">
<h3 class="text-lg footer-title">Products</h3>
<a class="link link-hover">Potion of AI</a>
<a class="link link-hover">Healing potion</a>
<a class="link link-hover">Potion of money</a>
<a class="link link-hover">Potion of infinite coffee</a>
<a class="link link-hover">Potion bundle</a>
</nav>
<nav>
<div class="flex flex-col">
<h3 class="text-lg footer-title">Features</h3>
<a class="link link-hover">Learn potion history</a>
<a class="link link-hover">Make your own potion</a>
<a class="link link-hover">Experiment on humans</a>
<a class="link link-hover">Mixing chemicals guide</a>
<a class="link link-hover">Bring your own potions</a>
</div>
</nav>
<nav>
<div class="flex flex-col">
<h3 class="text-lg footer-title">Resources</h3>
<a class="link link-hover">Books of magic</a>
<a class="link link-hover">Potion benchmarks</a>
<a class="link link-hover">Potion documentation</a>
<a class="link link-hover">How to avoid explosions</a>
<a class="link link-hover">DOs and DON'Ts of potions</a>
</div>
</nav>
<nav>
<div class="flex flex-col">
<h3 class="text-lg footer-title">Company</h3>
<a class="link link-hover">News</a>
<a class="link link-hover">Careers</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Referrals</a>
<a class="link link-hover">Meet the team</a>
</div>
</nav>
</div>

<div class="divider"></div>

<!-- Bottom bar -->
<aside class="flex flex-col sm:flex-row gap-6 justify-center sm:justify-between items-center">

<!-- Brand -->
<div class="flex items-center gap-2">
<span class="fa-brands fa-superpowers mr-2 text-4xl align-center text-primary"></span>
<div>
<p class="text-2xl">Company</p>
<small>Copyright © 2024 - All rights reserved</small>
</div>
</div>

<!-- Socials -->
<nav class="flex gap-4">
<a class="fa-brands fa-github text-2xl"></a>
<a class="fa-brands fa-twitter text-2xl"></a>
<a class="fa-brands fa-facebook text-2xl"></a>
<a class="fa-brands fa-youtube text-2xl"></a>
</nav>
</aside>
</footer>

0 comments on commit c9387f4

Please sign in to comment.