Footer design using Html and CSS with source code

footer design

Hello everyone, today we will create the footer design using Html and CSS. In the last session, we covered Design an email newsletter in Html and CSS that how to create the header of the website in Html and CSS. But, now our goal is to develop the footer of the website in Html and CSS.

As you can see in the image we have created an awesome footer for our website in Html and CSS only without using a single line of javascript. It has a background that is a solid color. It has a logo on the left side and you can replace it according to your website. Then it has a credit to the website creator developer or owner with the year of creation.

On the right side of the footer, it has a newsletter that is used for collecting the emails of the users. If you want to know how to create it beautifully then visit how to create a newsletter of the website. You can completely learn it.  Then it has a description that how to follow our website. Then it has an input field for entering the email into the newsletter. After entering the email into the field you can hit the submit button.

It will send the email to the database. This button has a hover effect. It changes its color after hovering at this button. It has round corners which are achieved by using the radius property in CSS. You can also create it for your website and you have to follow me for creating it. So, let’s get started.

You might like it:

Footer design is easy to develop. Follow the below steps for its development.

Recommended IDE’s are:


Sublime text 3

Source code of Html:

The HTML code is given below

Source code of CSS:

The source code is given below

In this way, you can create your footer for your website using these steps.

Download source code:

Many people are unable to connect the files with each other. So, for those people, we have created a .zip file. In this file, we have all the content of the footer. So, download and enjoy it.


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.

You can also follow 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