Footer HTML Template
Wrap up any site with multi-column navigation, contact info, and social links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Footer Template</title>
<style>
body { margin: 0; font-family: 'Inter', sans-serif; background: #0b1120; color: #e2e8f0; }
footer { padding: 4rem 1.5rem 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
h3 { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.2em; color: #94a3b8; margin-bottom: 1rem; }
ul { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
a { color: inherit; text-decoration: none; }
.bottom { border-top: 1px solid rgba(148,163,184,0.2); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: #94a3b8; }
.social { display: flex; gap: 0.75rem; }
.social a { width: 36px; height: 36px; border-radius: 50%; background: #1e293b; display: grid; place-items: center; }
</style>
</head>
<body>
<footer>
<div class="grid">
<section>
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
</ul>
</section>
<section>
<h3>Resources</h3>
<ul>
<li><a href="#">Docs</a></li>
<li><a href="#">API Reference</a></li>
<li><a href="#">Community</a></li>
</ul>
</section>
<section>
<h3>Support</h3>
<ul>
<li><a href="#">Status</a></li>
<li><a href="#">Live chat</a></li>
<li><a href="#">[email protected]</a></li>
</ul>
</section>
<section>
<h3>Visit</h3>
<p>214 Atlantic Ave<br />Brooklyn, NY 11201</p>
</section>
</div>
<div class="bottom">
<span>© 2024 Lumen Studio. Crafted in NYC.</span>
<div class="social">
<a href="#">in</a>
<a href="#">tw</a>
<a href="#">ig</a>
</div>
</div>
</footer>
</body>
</html>