In this lesson, we will learn how to create the footer of the website using Html and CSS. In the last lecture, we learned how to create a Responsive Header form using HTML and CSS.
What is meant by the Html footer?
If you have gone through any website then you must go through the footer of the website. When you scroll down from top to bottom then you have to go through the footer. Footer is present at the bottom of the website with some quick links. These links may be social media sharing buttons, login/signup buttons, information about the website, etc.
A footer is also a main part of the website. When the visitors scroll down the website then they have to move from different sections of the website and the footer also helps them to move across the website through quick links present at the footer of the website.
You might like it:
How to create a Footer template?
In this program, we are going to learn how to create the footer of the website using HTML and CSS. It’s going to be very unique and simple to understand. We are going to develop it step by step.
This footer is totally responsive across all devices (mobile, tab, and PC/laptop). It is totally made in HTML and CSS and I haven’t used a single line of Javascript for the development of this header section. It contains different quick links, different icons, information about the website and address, etc. If you are interested in this post or want to add this footer code to your project or website then you can copy and download the source code from here. Scroll down to get the source code of this footer section.
How to create the footer of the website?
For creating this footer section you need to create two files in your Html editor (VS code/ sublime etc.). Name your Html file as index.html and CSS file style.css and then paste the given code into these files.
Source code of HTML footer:
<!DOCTYPE html>
<!-- code by FantacyDesign( https://job.fantacydesigns.com ) -->
<html>
<head>
<link rel="stylesheet" href="sttyle.css" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>Footer With Address And Phones</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main"> FD FOOTER DESIGN IN HTML CSS</div>
<footer class="footer-distributed">
<div class="footer-left">
<h3>Fantacy<span>Design</span></h3>
<p class="footer-links">
<a href="#">Home</a>
·
<a href="#">Blog</a>
·
<a href="#">Pricing</a>
·
<a href="#">About</a>
·
<a href="#">Faq</a>
·
<a href="#">Contact</a>
</p>
<p class="footer-company-name">FantacyDesign © 2021</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Califonia </span> US(united State)</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+1 555 000000000</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[email protected]">[email protected]
</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Fantacy Design is a blog for web designers, web develpor & SEO Learner.
</p>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
</div>
</footer>
</body>
</html>
Source code of CSS file of Html footer:
body {
margin: 0;
padding: 0;
}
.main {
max-height: 550px;;
background-color: #262626;
color: white;
font-size: 38pt;
text-align: center;
line-height: 550px;
}
footer{
position: fixed;
bottom: 0;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
.footer-distributed .footer-left{
width: 40%;
}
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
.main {
line-height: normal;
font-size: auto;
}
}
</pre>
Conclusion:
In this way, you can create the footer of the website in HTML and CSS. If you are facing any type of problem in understanding any line of code of HTML and CSS then you can click here for learning all the tags and properties of HTML and CSS.
If you found this article useful then must like it and follow us. Also share it because sharing is caring and comment below if you have any queries.
Thanks for reading this article.
