A footer is an essential part of any website that provides branding, quick links and a way to connect with your users. In this tutorial, we’ll build a responsive footer with multiple sections UI design using HTML and CSS.
The footer includes a brand logo, useful navigation links, a newsletter subscription form and social media icons — all styled with a clean modern look.
HTML Section
We start by writing the HTML markup for the footer. The structure uses a footer element containing a footer wrapper that holds all the key sections for responsive footer with multiple sections:
<main></main>
<footer>
<div class="footer-wrapper">
<div class="brand-logo"><img src="/public/assets/dummy_logo.png" alt="Logo">CodeWebStack</div>
<ul>
<li>
<h3>Build</h3>
</li>
<li><a href="#">Connections</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">API docs</a></li>
<li><a href="#">Guides & tutorials</a></li>
<li><a href="#">Find a Consultant</a></li>
</ul>
<ul>
<li>
<h3>Download</h3>
</li>
<li><a href="#">iOS & Android</a></li>
<li><a href="#">Mac & Windows</a></li>
<li><a href="#">Web Clipper</a></li>
</ul>
<ul>
<li>
<h3>Resources</h3>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Experts</a></li>
<li><a href="#">Report Spam</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>
<div class="connect-with-us">
<h2>Connect with us</h2>
<div class="newsletter">
<form>
<input type="email" id="email-id" placeholder="Enter your Email address">
<button class="submit">Subscribe</button>
</form>
<p>We promise we won't spam instead we'll send you updates before anybody else from time to time</p>
</div>
<ul class="social-media">
<li><a href="#" class="bi bi-youtube"></a></li>
<li><a href="#" class="bi bi-instagram"></a></li>
<li><a href="#" class="bi bi-twitter-x"></a></li>
<li><a href="#" class="bi bi-linkedin"></a></li>
<li><a href="#" class="bi bi-facebook"></a></li>
</ul>
</div>
<div class="flex-c">
<div class="copyright">Copyright © 2024 | <a href="#">Smart UI Studio</a> | All Rights Reserved</div>
<ul class="pages-link">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Terms & Policy</a></li>
</ul>
</div>
</div>
</footer>- Brand Logo – Displays your website or company identity.
- Navigation Lists – Organized under headings.
- Newsletter Subscription – Includes an email input and subscribe button.
- Social Media Links – Uses Bootstrap Icons for platforms like YouTube, Instagram, Twitter, LinkedIn and Facebook.
- Bottom Bar – Contains copyright text and additional page links.
This semantic structure makes the footer easy to understand and accessible. In short, the HTML provides a flexible, grid-based structure that organizes all footer elements neatly.
CSS Section
The CSS styling transforms the responsive footer with multiple sections into a modern, responsive design. Key highlights include:
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
body {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
font-family: 'Baloo Bhai 2';
background: #0a0a0a;
}
main {
flex: 1 0;
}
a {
text-decoration: none;
color: #cecece;
white-space: nowrap;
}
a:hover {
color: #ffffff;
}
ul {
list-style: none;
}
footer {
width: 100%;
background: linear-gradient(#0075d5, #022651);
color: #e8e8e8;
}
.footer-wrapper {
display: grid;
max-width: 1080px;
gap: 15px;
padding: 25px 10px 10px;
grid-template-areas: "brand brand brand brand"
"list1 list2 list3 newsletter"
"bottom bottom bottom bottom";
margin: 0 auto;
grid-template-columns: repeat(3, 1fr) 1.5fr;
}
.brand-logo {
display: flex;
align-items: center;
font-size: 22px;
grid-area: brand;
font-weight: 600;
margin-bottom: 10px;
gap: 10px;
}
.brand-logo img {
height: 30px;
padding: 2px;
border-radius: 50%;
background: #e1e1e1;
}
.connect-with-us {
display: grid;
gap: 8px;
grid-area: newsletter;
grid-template-rows: repeat(3, max-content);
}
.newsletter {
margin-top: 5px;
color: #ffffff63;
}
.newsletter p {
padding: 5px;
font-size: 12px;
line-height: 1.5;
}
form {
display: flex;
gap: 15px;
}
#email-id {
width: 100%;
border: none;
outline: none;
line-height: 2;
color: white;
font-size: 12px;
padding: 5px 15px;
border-radius: 30px;
background: #00000038;
}
#email-id::placeholder {
color: #dcdcdc;
}
.submit {
font-family: 'Baloo Bhai 2';
background-color: #ededed;
border: none;
color: black;
padding: 4px 18px;
font-weight: 600;
border-radius: 20px;
font-size: 12px;
}
.social-media {
display: flex;
gap: 30px;
align-items: center;
padding: 0 10px;
}
.flex-c {
display: flex;
justify-content: space-between;
grid-area: bottom;
padding-top: 10px;
text-align: center;
font-size: 14px;
border-top: 1px solid #ffffff2b;
}
.pages-link {
display: flex;
gap: 15px;
}
@media screen and (max-width:880px) {
.footer-wrapper {
grid-template-areas: "brand brand"
"list1 list2"
"list3 newsletter"
"bottom bottom";
grid-template-columns: 1fr 1.5fr;
padding: 20px;
}
}
@media screen and (max-width:680px) {
.flex-c {
flex-direction: column-reverse;
align-items: center;
gap: 10px;
}
}
@media screen and (max-width:500px) {
.footer-wrapper {
grid-template-areas: "brand brand"
"list1 list2"
"list3 list3"
"newsletter newsletter"
"bottom bottom";
gap: 25px;
grid-template-columns: 1fr auto;
}
}- Layout with CSS Grid
- The
.footer-wrapperuses a grid layout with named grid areas. - On wider screens, it displays in four columns; media queries rearrange the layout for tablets and mobile devices.
- The
- Brand Logo Styling
- The brand section aligns the logo image and text side by side.
- The logo image has a circular background with padding for a professional look.
- Newsletter Form
- Input fields and the subscribe button use rounded styles for a modern UI.
- Placeholder text is light gray, while the button uses a clean contrasting style.
- Responsive Adjustments
- At screen widths below 880px, the footer rearranges into two-column layout.
- At 500px and below, it stacks vertically with larger gaps for readability.
- The bottom bar (
.flex-c) switches from row to column layout on smaller devices.
In short, the CSS ensures that the footer looks clean, balanced and adapts perfectly to different screen sizes.
Wrap-Up
This responsive footer with multiple sections UI design built with HTML and CSS is modern, functional and adapts beautifully across devices. With a brand logo, quick navigation links, a subscription form and social media integration, it’s a complete footer solution for blogs, portfolios or business websites.
You can further enhance it with JavaScript validation for the newsletter or even backend integration for subscriptions.
