Minimal Footer Template HTML CSS

This footer template HTML CSS tutorial shows you how to build a centered dark footer with a large Bodoni Moda serif brand name, a tagline label, navigation links, circular social icon buttons, and a copyright line. The brand name uses clamp() so it scales from a compact mobile size all the way up to a large display size on bigger screens.

Final output:

1. First, link the Manrope and Bodoni Moda fonts from Google Fonts in the head.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Manrope:wght@200..800&display=swap" rel="stylesheet">

Let’s start with a footer element. Inside it, add a tagline paragraph and the brand name heading.

<footer>
    <p>Independent design practice</p>
    <h2>MORVELINE</h2>
</footer>

Then reset margins, set Manrope as the font family, and style the footer with a deep teal background, a muted sage text color, centered text, and some padding. Use clamp() on the inline padding so it scales with the screen.

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Manrope", sans-serif;
}
footer {
    background-color: hsl(168, 39%, 15%);
    color: hsl(120, 13%, 76%);
    text-align: center;
    padding: 3.5rem clamp(1.75rem, calc(1rem + 2.78vw), 3.5rem);
}

2. Style the tagline paragraph with a small uppercase font and wide letter spacing so it reads as a category label above the brand name. Add a bottom margin to space it away from the heading below.

footer p:first-child {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

Style the brand name heading with the Bodoni Moda serif font at a very large size using clamp() so it scales smoothly with the screen. Set the line height property to 0.9 and a large negative letter spacing to make the display text feel tight and typographically considered. Use a lighter warm cream color so it stands out clearly against the dark teal background.

footer h2 {
    font-family: "Bodoni Moda", serif;
    font-weight: 600;
    font-size: clamp(3rem, calc(1rem + 8.33vw), 8.5rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
    color: hsl(43, 35%, 92%);
}

Output:

3. Add your footer links in a list below the brand name.

<ul class="footer-links">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Style .footer-links. Remove the default list styles and use flexbox with the justify content property set to center to keep the links centered. Style each link with a light font weight and a subtle opacity transition on hover so the interaction feels smooth rather than abrupt.

footer .footer-links {
    padding-left: 0;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
}
footer .footer-links li a {
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
    color: hsl(97, 17%, 85%);
    transition: opacity .3s;
}
footer .footer-links li a:hover {
    opacity: .7;
}

Output:

4. Now add your social media links to the footer.

<ul class="social-links">
    <li><a href="#"><img src="instagram.png" alt=""></a></li>
    <li><a href="#"><img src="linkedin.png" alt=""></a></li>
    <li><a href="#"><img src="x.png" alt=""></a></li>
</ul>

Style .social-links. Remove the default list styles and use flexbox with the justify content property set to center. Style each li as a fixed-size circle with a subtle border so the icon sits inside a pill-shaped container.

Use flexbox with the justify content and align items properties set to center on the li to keep the icon centered inside it. Fix the anchor link size to match the icon, and set the image width to 100% so it fills the link. Add the same opacity transition on hover as the nav links above.

footer .social-links {
    padding-left: 0;
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: .75rem;
    list-style: none;
}
footer .social-links li {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid hsla(97, 17%, 85%, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .social-links li a {
    text-decoration: none;
    width: 1.125rem;
    height: 1.125rem;
    transition: opacity .3s;
}
footer .social-links li a img {
    width: 100%;
}
footer .social-links li a:hover {
    opacity: .7;
}

Lastly, add a copyright paragraph to the footer.

<p class="copyright">© 2026 MORVELINE Studio</p>

Style the .copyright paragraph with a small font size and a top margin to space it away from the social icons above.

footer .copyright {
    font-size: .75rem;
    line-height: 1.3;
    margin-top: 2rem;
}

Output:

Final Output Code for Responsive Footer Template HTML CSS #5:

HTML

<footer>
    <p>Independent design practice</p>
    <h2>MORVELINE</h2>
    <ul class="footer-links">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <ul class="social-links">
        <li><a href="#"><img src="instagram.png" alt=""></a></li>
        <li><a href="#"><img src="linkedin.png" alt=""></a></li>
        <li><a href="#"><img src="x.png" alt=""></a></li>
    </ul>
    <p class="copyright">© 2026 MORVELINE Studio</p>
</footer>

CSS:

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Manrope", sans-serif;
}
footer {
    background-color: hsl(168, 39%, 15%);
    color: hsl(120, 13%, 76%);
    text-align: center;
    padding: 3.5rem clamp(1.75rem, calc(1rem + 2.78vw), 3.5rem);
}
footer p:first-child {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
footer h2 {
    font-family: "Bodoni Moda", serif;
    font-weight: 600;
    font-size: clamp(3rem, calc(1rem + 8.33vw), 8.5rem);
    line-height: 0.9;
    letter-spacing: -0.065em;
    color: hsl(43, 35%, 92%);
}
footer .footer-links {
    padding-left: 0;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
}
footer .footer-links li a {
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
    color: hsl(97, 17%, 85%);
    transition: opacity .3s;
}
footer .footer-links li a:hover {
    opacity: .7;
}
footer .social-links {
    padding-left: 0;
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: .75rem;
    list-style: none;
}
footer .social-links li {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid hsla(97, 17%, 85%, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .social-links li a {
    text-decoration: none;
    width: 1.125rem;
    height: 1.125rem;
    transition: opacity .3s;
}
footer .social-links li a img {
    width: 100%;
}
footer .social-links li a:hover {
    opacity: .7;
}
footer .copyright {
    font-size: .75rem;
    line-height: 1.3;
    margin-top: 2rem;
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.