Hello there, today in this article I’ll show you how to make a Completely Responsive Footer Section using only HTML and CSS.
A few years ago, the footer was only used to provide copyright information; however, the footer is now fashionable, and all websites have a large footer section with additional information and social network accounts or icons.
You may have seen a footer on every page you’ve visited because a footer is now required on all websites. The footer is always placed at the bottom of the main page or at the end of the page. The current HTML5 version has a special element for the footer.
<footer></footer>
As you can see in the preview image, we have several footer categories, some social networking icons, and a copyright footer. This footer responds completely to all devices, including mobile phones. When you open it on a computer, these footer categories are aligned horizontally, but when you open it on a tiny device, such as a mobile phone, each footer category is positioned vertically, and it will automatically change its height and width based on the device height and width.
Source Code For Responsive Footer using HTML And CSS :
For this you have to create just two files one is HTML file and other is CSS file.
First Step: Create a index.html file with the extension .html in root folder.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<title>Footer Design | Hassanrao.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="#">>> about us</a></li>
<li><a href="#">>> our services</a></li>
<li><a href="#">>> privacy policy</a></li>
<li><a href="#">>> Our Team</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Get Help</h4>
<ul>
<li><a href="#">>> FAQ</a></li>
<li><a href="#">>> Order Cancelation</a></li>
<li><a href="#">>> Order status</a></li>
<li><a href="#">>> Payment options</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Services</h4>
<ul>
<li><a href="#">>> SEO</a></li>
<li><a href="#">>> Custom Website</a></li>
<li><a href="#">>> WordPress Website</a></li>
<li><a href="#">>> Digital Marketing</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
<div class="copyright-footer">
<p>© <a href="#">yoursite.com</a> 2023, All Right Reserved.</p>
</div>
</body>
</html>
Last Step: Create a file name as style.css in root folder with extension .css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #111111;
padding: 70px 0;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: #222222;
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #333333;
background-color: #ffffff;
}
.copyright-footer{
display:flex;
justify-content: center;
align-items: center;
background-color: #222222;
padding:20px;
color:#999999;
}
.copyright-footer p a{
color:#e91e63;
}
/*responsive*/
@media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
That’s All for this footer design. It is completely responsive for all(Standard) devices. If you want to download source files then click the button below.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)