Footer design in Html and CSS with source code

Responsive Footer

Footer is one of the most important components of the website and it is present at the bottom of the website. In the last post, we created a beautiful header and footer for the website. So, let’s build it.

It is located at the bottom of the website. Footer is used for many purposes. It may contain links to different pages. So, that’s why it’s a very useful section of any website.

This footer is also created using Html and CSS only. It has four sections. Every section of this footer has different content of the footer. So, you can redirect to any section or page using these links.

web view 4
Web View

This logo represented a website or company. Then on the right side of the footer, it has the heading “Social media links”. Below this heading, it has different links to different social media accounts like Facebook, Instagram, Twitter, etc.

Below this, it has a line, and then it has a text “@Copyright………..”. It is very simple to create this type of footer and we are gonna create it using Html and CSS. So, let’s start it.

You might like it:

For the development of the footer, we will be using the below steps. By using these steps, anyone can create this type of footer template design for the website.

Download an IDE/code editor:

The code editor is a basic need. It has multiple advantages in coding. So, download a relevant code editor for web base coding languages.

Source code of Html:

Html is a markup language used for creating web pages and the footer is the part of the web section. So, we are creating it using this language and it will help us to create the skeleton of the footer. Its code is written below. In IDE first, create a file with an extension of .html and then save the file

Source code of CSS:

CSS is also a markup language and it is used for designing web pages. First, create a file of CSS with the extension of .css, and this copy-paste this code into your file.

Your footer will be opened in your browser in front of you. If you are facing any error in creating the footer then download the source code from the below button. This file has all the code files and you will get this responsive footer.


This footer has the icons of social media platforms. The email subscribes button, logo, button, heading, and text as well. Now add the details of location, phone, and email as well. Also, present them along with icons. 

Tip: Fontawesome for importing icons

If you have any type of query then don’t forget to ask.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x