Hello readers, Today In this article I am going to show you how to create a Responsive Footer Design Using HTML & CSS. This type of Responsive Footer Design is used on the websites for Footer.
You easily create a Responsive Footer Design Using HTML and CSS then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS, then you can understand the following codes. It is designed in a completely modern way. I don’t use JavaScript or any library for creating this program, this is in pure HTML & CSS.
Some Information About This Responsive Footer Design
As you have seen on the given tutorial of this program Footer. There is a full-width section on the bottom with dark Navi-blue color. and top of the footer left side logo and the right side show the social icon. Middle of the footer five-section many topics with hyperlinks like phone numbers, emails.
Watch the video tutorial to create Responsive Footer Design
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Responsive Footer Design step by step completely beautifully. So you can learn how to make these Responsive Footer Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Footer Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Glassmorphism Login Form using Html CSS & JS
- Pricing Card UI Design Using HTML & CSS
- Responsive Image Slider Using HTML and CSS
Responsive Footer Design | Source Codes
You have to create HTML & CSS File For this Footer. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Footer Design</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!---Fontaweosme CDN Link--->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<footer>
<div class="content">
<div class="top">
<div class="logo-details">
<i class="fab fa-slack"></i>
<span class="logo_name">Logo</span>
</div>
<div class="media-icons">
<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>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="link-boxes">
<ul class="box">
<li class="link_name">Company</li>
<li><a href="#">Home</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Get started</a></li>
</ul>
<ul class="box">
<li class="link_name">Services</li>
<li><a href="#">App design</a></li>
<li><a href="#">Web design</a></li>
<li><a href="#">Logo design</a></li>
<li><a href="#">Banner design</a></li>
</ul>
<ul class="box">
<li class="link_name">Account</li>
<li><a href="#">Profile</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">Prefrences</a></li>
<li><a href="#">Purchase</a></li>
</ul>
<ul class="box">
<li class="link_name">Courses</li>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
<ul class="box input-box">
<li class="link_name">Subscribe</li>
<li><input type="text" placeholder="Enter your email"></li>
<li><input type="button" value="Subscribe"></li>
</ul>
</div>
</div>
<div class="bottom-details">
<div class="bottom_text">
<span class="copyright_text">Copyright © 2021 <a href="#">Logo.</a>All rights reserved</span>
<span class="policy_terms">
<a href="#">Privacy policy</a>
<a href="#">Terms & condition</a>
</span>
</div>
</div>
</footer>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #EEECEB;
}
footer{
position: fixed;
background: #140B5C;
width: 100%;
bottom: 0;
left: 0;
}
footer::before{
content: '';
position: absolute;
left: 0;
top: 100px;
height: 1px;
width: 100%;
background: #AFAFB6;
}
footer .content{
max-width: 1250px;
margin: auto;
padding: 30px 40px 40px 40px;
}
footer .content .top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}
.content .top .logo-details{
color: #fff;
font-size: 30px;
}
.content .top .media-icons{
display: flex;
}
.content .top .media-icons a{
height: 40px;
width: 40px;
margin: 0 8px;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 17px;
text-decoration: none;
transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1){
background: #4267B2;
}
.top .media-icons a:nth-child(1):hover{
color: #4267B2;
background: #fff;
}
.top .media-icons a:nth-child(2){
background: #1DA1F2;
}
.top .media-icons a:nth-child(2):hover{
color: #1DA1F2;
background: #fff;
}
.top .media-icons a:nth-child(3){
background: #E1306C;
}
.top .media-icons a:nth-child(3):hover{
color: #E1306C;
background: #fff;
}
.top .media-icons a:nth-child(4){
background: #0077B5;
}
.top .media-icons a:nth-child(4):hover{
color: #0077B5;
background: #fff;
}
.top .media-icons a:nth-child(5){
background: #FF0000;
}
.top .media-icons a:nth-child(5):hover{
color: #FF0000;
background: #fff;
}
footer .content .link-boxes{
width: 100%;
display: flex;
justify-content: space-between;
}
footer .content .link-boxes .box{
width: calc(100% / 5 - 10px);
}
.content .link-boxes .box .link_name{
color: #fff;
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
position: relative;
}
.link-boxes .box .link_name::before{
content: '';
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 35px;
background: #fff;
}
.content .link-boxes .box li{
margin: 6px 0;
list-style: none;
}
.content .link-boxes .box li a{
color: #fff;
font-size: 14px;
font-weight: 400;
text-decoration: none;
opacity: 0.8;
transition: all 0.4s ease
}
.content .link-boxes .box li a:hover{
opacity: 1;
text-decoration: underline;
}
.content .link-boxes .input-box{
margin-right: 55px;
}
.link-boxes .input-box input{
height: 40px;
width: calc(100% + 55px);
outline: none;
border: 2px solid #AFAFB6;
background: #140B5C;
border-radius: 4px;
padding: 0 15px;
font-size: 15px;
color: #fff;
margin-top: 5px;
}
.link-boxes .input-box input::placeholder{
color: #AFAFB6;
font-size: 16px;
}
.link-boxes .input-box input[type="button"]{
background: #fff;
color: #140B5C;
border: none;
font-size: 18px;
font-weight: 500;
margin: 4px 0;
opacity: 0.8;
cursor: pointer;
transition: all 0.4s ease;
}
.input-box input[type="button"]:hover{
opacity: 1;
}
footer .bottom-details{
width: 100%;
background: #0F0844;
}
footer .bottom-details .bottom_text{
max-width: 1250px;
margin: auto;
padding: 20px 40px;
display: flex;
justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a{
font-size: 14px;
font-weight: 300;
color: #fff;
opacity: 0.8;
text-decoration: none;
}
.bottom-details .bottom_text a:hover{
opacity: 1;
text-decoration: underline;
}
.bottom-details .bottom_text a{
margin-right: 10px;
}
@media (max-width: 900px) {
footer .content .link-boxes{
flex-wrap: wrap;
}
footer .content .link-boxes .input-box{
width: 40%;
margin-top: 10px;
}
}
@media (max-width: 700px){
footer{
position: relative;
}
.content .top .logo-details{
font-size: 26px;
}
.content .top .media-icons a{
height: 35px;
width: 35px;
font-size: 14px;
line-height: 35px;
}
footer .content .link-boxes .box{
width: calc(100% / 3 - 10px);
}
footer .content .link-boxes .input-box{
width: 60%;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a{
font-size: 12px;
}
}
@media (max-width: 520px){
footer::before{
top: 145px;
}
footer .content .top{
flex-direction: column;
}
.content .top .media-icons{
margin-top: 16px;
}
footer .content .link-boxes .box{
width: calc(100% / 2 - 10px);
}
footer .content .link-boxes .input-box{
width: 100%;
}
}
now you’ve successfully created this Responsive Footer Design using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
