:root {
color-scheme: dark;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: #0a0a0a;
color: #e2e8f0;
display: flex;
flex-direction: column;
}
.page-content {
flex: 1;
display: grid;
place-items: center;
padding: 4rem 1.5rem;
color: rgba(255, 255, 255, 0.2);
font-size: 0.875rem;
}
.site-footer {
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 3rem 0 1.5rem;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: start;
}
.footer-logo {
font-size: 1.1rem;
font-weight: 700;
color: #f8fafc;
text-decoration: none;
letter-spacing: -0.02em;
}
.footer-tagline {
margin-top: 0.75rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.3);
max-width: 240px;
line-height: 1.65;
}
.footer-nav {
display: flex;
gap: 3rem;
}
.footer-group {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.footer-group-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 0.25rem;
}
.footer-link {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
transition: color 0.15s;
}
.footer-link:hover {
color: rgba(255, 255, 255, 0.85);
}
.footer-bottom {
max-width: 1280px;
margin: 2rem auto 0;
padding: 1.25rem 1.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-copy {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 640px) {
.footer-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-nav {
flex-direction: column;
gap: 2rem;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Site Footer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page-content">
<p>Page content goes here</p>
</main>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-brand">
<a href="/" class="footer-logo">Brand</a>
<p class="footer-tagline">Building the web, one component at a time.</p>
</div>
<nav class="footer-nav">
<div class="footer-group">
<p class="footer-group-label">Product</p>
<a href="/library" class="footer-link">Library</a>
<a href="/showcase" class="footer-link">Showcase</a>
<a href="/lab" class="footer-link">Lab</a>
</div>
<div class="footer-group">
<p class="footer-group-label">Developers</p>
<a href="/docs" class="footer-link">Docs</a>
<a href="/changelog" class="footer-link">Changelog</a>
<a href="https://github.com" class="footer-link" target="_blank" rel="noopener">GitHub</a>
</div>
</nav>
</div>
<div class="footer-bottom">
<p class="footer-copy">MIT License · Built with ♡</p>
</div>
</footer>
</body>
</html>