Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
Compact & Simple footers (#41)
Browse files Browse the repository at this point in the history
* Footer: contentHeavy

* Compact & Simple footers

* make social icons clickable on hover (using btn)

---------

Co-authored-by: Willian Pinheiro <[email protected]>
  • Loading branch information
StrawHatHacker and willpinha authored Jan 16, 2024
1 parent c9387f4 commit d18488d
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 4 deletions.
25 changes: 25 additions & 0 deletions src/examples/footer/compact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<footer class="flex flex-col sm:flex-row gap-8 justify-between p-10 bg-base-200">

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

<!-- Socials -->
<nav class="flex gap-4">
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-twitter text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-facebook text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-youtube text-2xl"></i>
</a>
</nav>
</footer>
16 changes: 12 additions & 4 deletions src/examples/footer/contentHeavy.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,18 @@ <h3 class="text-lg footer-title">Company</h3>

<!-- 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>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-twitter text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-facebook text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-youtube text-2xl"></i>
</a>
</nav>
</aside>
</footer>
40 changes: 40 additions & 0 deletions src/examples/footer/simple.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<footer class="text-base-content ">
<div class="footer footer-center p-10 bg-base-200">

<!-- Socials -->
<nav class="grid grid-flow-col gap-6">
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-github text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-twitter text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-facebook text-2xl"></i>
</a>
<a class="btn btn-ghost btn-sm btn-circle">
<i class="fa-brands fa-youtube text-2xl"></i>
</a>
</nav>

<!-- Links -->
<nav>
<div class="flex flex-wrap justify-center gap-y-2 gap-x-6 text-lg">
<a class="link link-hover">Contact us</a>
<a class="link link-hover">Services</a>
<a class="link link-hover">Privacy Policy</a>
<a class="link link-hover">Terms & Conditions</a>
<a class="link link-hover">Career</a>
</div>
</nav>
</div>

<!-- Brand -->
<aside class="bg-base-300 py-4 px-8 w-full flex gap-2 flex-wrap justify-between items-center text-sm">
<p class="text-xl">
<span class="fa-brands fa-superpowers mr-2 text-primary"></span>
<span>Company</span>
</p>
<p>Copyright © 2024 - All rights reserved</p>
</aside>
</footer>

0 comments on commit d18488d

Please sign in to comment.