Hello everyone, you can learn how to create a Responsive Footer Design using HTML, CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Responsive Footer Design
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Responsive Footer - Coding Power</title>
</head>
<body>
<footer>
<div class="footer">
<div class="about content">
<h2>About us</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam fuga obcaecati illo tempore nam dolorum, nemo porro. Quos expedita similique itaque facilis atque, quia doloremque.</p>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
<div class="links content">
<h2>Useful Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="links content">
<h2>Our Services</h2>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">App Development</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</div>
<div class="newsletter content">
<h2>Our Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, aperiam.</p>
<form action="#">
<input type="email" placeholder="Email" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</footer>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: #444;
color: white;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer .content{
padding: 10px 20px;
}
.footer .content h2{
font-size: 22px;
margin-bottom: 20px;
position: relative;
}
.footer .content h2::after{
content: "";
position: absolute;
bottom: -6px;
left: 0;
height: 2px;
width: 70px;
background: cornflowerblue;
}
.footer .about{
flex-basis: 35%;
}
.footer .about p{
text-align: justify;
}
.footer .about .social{
width: 100%;
margin-top: 15px;
display: flex;
justify-content: start;
}
.footer .about .social a{
margin-right: 20px;
width: 40px;
height: 40px;
background: cornflowerblue;
line-height: 40px;
text-align: center;
border-radius: 50%;
transition: 0.2s;
}
.footer .about .social a:hover{
background: #222;
}
.footer .about .social a i{
font-size: 21px;
color: white;
}
.footer .links{
flex-basis: 20%;
}
.footer .links ul{
list-style: none;
}
.footer .links ul li{
margin-top: 10px;
}
.footer .links ul li a{
text-decoration: none;
color: rgb(206, 201, 201);
}
.footer .links ul li a:hover{
color: rgb(98, 98, 231);
}
.footer .newsletter{
flex-basis: 25%;
}
.footer .newsletter p{
text-align: justify;
margin: 15px 0;
font-size: 16px;
}
.footer .newsletter input{
width: 100%;
height: 35px;
border: 1px solid gray;
outline: none;
padding-left: 20px;
font-size: 16px;
border-radius: 5px;
margin-bottom: 10px;
}
.footer .newsletter button{
width: 150px;
padding: 5px;
font-size: 18px;
border: 1px solid gray;
background: cornflowerblue;
cursor: pointer;
border-radius: 5px;
}
@media (max-width:950px){
.footer .content{
flex-basis: 50%;
margin-bottom: 20px;
}
}
@media (max-width:590px){
.footer .content{
flex-basis: 100%;
margin-bottom: 20px;
}
.footer .newsletter button{
width: 100%;
}
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
