Footer design in Html free download with code


Today, in this lesson we will learn how to create a footer design in Html for free download. A footer is the part of a website that is present at the bottom of the website with some links and social share buttons. In the last lesson, we have Navigation bar in Html code. But, at this moment let us see how to create a responsive footer of the website.

A footer is present at the bottom of the website. It is a necessary part of the website because it shows the ending point of the page. It may contain different links and social share buttons. Subscribe to our email and payment system information.

This footer has a background colour that matches the colour of the font. Then at the top, it has a text to subscribe to the website by entering your email. For email, it has a field and then a submit button to join the website membership for free.

Then it has five headings and all the headings have the same colour, font family and size. At the bottom of every heading, there are also some links present. By clicking on these links you will be redirected to other pages or sections of the website. Every link has a hover effect. It will show hover when you will point to that text.

At the bottom, it has a logo of the website/brand/company. The footer must have social share buttons and this footer also has buttons for social accounts. You will be redirected to social accounts of the website like Facebook, Instagram, Twitter, Youtube and Pinterest. So, let’s see how to create this type of footer for our website using Html and CSS.

You might like it:

We can create it by following the below steps. It will help you to create a responsive footer for your website.

Download an IDE:

Download an IDE on your computer like VS code and sublime text 3 etc.

Source code of Html:

Create a file of Html in your IDE with the extension of .html and save it.

Source code of CSS:

Again create a file of CSS with the extension of .css and save it in your device folder where you have saved the .Html file. CSS is used for designing website pages and the footer is the part of the website, So, we will also design it using CSS.

So, using this method you will be able to create a responsive footer of the website. If you are still facing the same errors then we have a solution for our followers. These files have all the code of the website.


This footer has almost all the text and functionalities that a professional footer have. Now it’s modification and task time. Add the icons and text of phone, email, Facebook, Instagram, and Pinterest along with links in them using <href> tag. Change the green color to a light color.

If you find this footer post helpful then don’t forget to subscribe and share with us. We will bring more and more premium templates for you every day. So, try to stay with us.

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