A well-structured footer is a crucial part of modern web design. It anchors your website, enhances navigation, and provides essential information in a clean and accessible layout. In this guide, you’ll learn how to create a fully responsive footer using only HTML and CSS—no frameworks and no JavaScript required.
Whether you’re a beginner or polishing your frontend skills, this tutorial will help you design a professional-looking footer that adapts to all screen sizes.
Project Introduction
The footer area is typically located at the bottom of a webpage. It often includes elements such as copyright text, navigation links, service listings, brand elements, social media profiles, and contact details.
A responsive footer improves user experience by:
- Offering quick access to essential links
- Keeping visitors engaged
- Enhancing overall site structure
- Presenting organized branding elements
In this tutorial, you’ll learn how to design a visually appealing and responsive footer layout using pure HTML and CSS. Let’s begin!
Step 1: HTML Code
Start by creating an HTML file that contains the main structure of the footer. This includes content sections for services, social media links, quick navigation, and contact information.
Just copy and paste the following HTML code exactly as it is into your file (saved with .html extension):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Footer</title>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/66aa7c98b3.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="footer">
<div class="heading">
<h2>Myritebook<sup>™</sup></h2>
</div>
<div class="content">
<div class="services">
<h4>Services</h4>
<p><a href="#">App development</a></p>
<p><a href="#">Web development</a></p>
<p><a href="#">DevOps</a></p>
<p><a href="#">Web designing</a></p>
</div>
<div class="social-media">
<h4>Social</h4>
<p>
<a href="#"
><i class="fab fa-linkedin"></i> Linkedin</a
>
</p>
<p>
<a href="#"
><i class="fab fa-twitter"></i> Twitter</a
>
</p>
<p>
<a href="https://github.com/myritebook"
><i class="fab fa-github"></i> Github</a
>
</p>
<p>
<a href="https://www.facebook.com/myritebook"
><i class="fab fa-facebook"></i> Facebook</a
>
</p>
<p>
<a href="#"
><i class="fab fa-instagram"></i> Instagram</a
>
</p>
</div>
<div class="links">
<h4>Quick links</h4>
<p><a href="#">Home</a></p>
<p><a href="#">About</a></p>
<p><a href="#">Blogs</a></p>
<p><a href="#">Contact</a></p>
</div>
<div class="details">
<h4 class="address">Address</h4>
<p>
Lorem ipsum dolor sit amet consectetur <br />
adipisicing elit. Cupiditate, qui!
</p>
<h4 class="mobile">Mobile</h4>
<p><a href="#">+91-12345*****</a></p>
<h4 class="mail">Email</h4>
<p><a href="#">admin@myritebook.com</a></p>
</div>
</div>
<footer>
<hr />
© 2024 Myritebook.
</footer>
</div>
</body>
</html>
Step 2: CSS Code
Now create a file named styles.css and paste the styling rules below. These CSS definitions manage the layout, colors, typography, and responsiveness of the footer.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.footer {
background-color: black;
color: #fefefe;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}
.footer .heading {
color: #fefefe;
max-width: 1010px;
width: 90%;
text-transform: uppercase;
margin: 0 auto;
margin-bottom: 3rem;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footer .content {
display: flex;
justify-content: space-evenly;
margin: 1.5rem;
}
.footer .content p {
margin-bottom: 1.3rem;
}
.footer .content a {
text-decoration: none;
color: #fefefe;
}
.footer .content a:hover {
border-bottom: 1px solid #971717;
}
.footer .content h4 {
margin-bottom: 1.3rem;
font-size: 19px;
}
footer {
text-align: center;
margin-bottom: 2rem;
}
footer hr {
margin: 2rem 0;
}
@media (max-width: 767px) {
.footer .content {
display: flex;
flex-direction: column;
font-size: 14px;
}
.footer {
position: unset;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.footer .content,
.footer {
font-size: 14px;
}
}
@media (orientation: landscape) and (max-height: 500px) {
.footer {
position: unset;
}
}
This styling ensures the footer adjusts smoothly across mobile, tablet, and desktop views using media queries.
Preview
Once the HTML and CSS are combined, your footer becomes fully responsive with clean alignment, organized sections, and a modern black-and-white theme.
Conclusion
By following this step-by-step guide, you’ve created a responsive footer design using only HTML and CSS. This layout is simple, professional, and works well on any device. Footer sections are essential for navigation and credibility, so make sure to keep the design clean and easy to understand.
Continue experimenting with colors, icons, and layout adjustments to suit your website’s branding.