Responsive Black footer template in Html and CSS

Dark Black Footer

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 Navigation bar by Filling the text on hover form using HTML and CSS.

If you have gone through any website then you must go through the footer of the website. 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.

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.

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.

You might be interested in it:

Name your Html file as index.html and CSS file style.css and then paste the given code into these files. These extensions are very helpful for browsers to understand the type of the file and execute it properly.


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.


We have a black footer in Html and CSS. It has all the content related to the footer. Now add icons in the footer. Facebook, Instagram, Twitter, Pinterest, etc have icons. Import these icons from fontawesome website. Then use them along with the text.

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.

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