Simple Responsive Footer Design using HTML and CSS

Responsive Footer Design makes any website much more perfect and beautiful. The footer section plays a big role in user satisfaction and the structure of the website.

In this article, I am going to show you how to create a Responsive Footer Design using only HTML and CSS.

In the meantime, I have shared with you one more type of footer design tutorial using Bootstrap. However, in this case, I did not use any bootstrap, only CSS and HTML are used here. If you are looking for good GRAPHIC DESIGN COMPANY then will be best for you.

There are many types of footer sections, some just basic information, and some social icons. In some cases, there are links, posts, images, and information. If you want to make footers for news, magazines, or other types of sites, then you can see another design made by me.

The design that I have shown in this tutorial is very simple and easy. Will be very suitable for different types of personal websites or business websites. It is a very simple and simple design with a heading, some basic description, social media icons, and a footer credit option.

Responsive Footer Design with HTML CSS

To create a CSS Responsive Footer Design you need to have a basic idea about HTML and CSS. I have explained each step in full detail. Before sharing this tutorial, let me say something about this design (footer HTML CSS).

First I created a section at the bottom of the webpage whose background color I used black. First of all, I have used a heading or title in the section. Then I gave some basic descriptions. Below the description, I have added five social icons.

At the end of it all, I created a footer menu bar that has some menu items and a copyright section. The copyright section helps to give credit to the website and the menu items help to add links to some important pages.

Step 1: Design the web page to create a footer section

To create this footer design I first designed the webpage using CSS code. background helped to add a background color to the web page. I have used font family here which has helped to determine the front of the text used here.

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #fcfcfc;
    font-family: sans-serif;

Step 2: Basic structure of Responsive Footer Design

I have taken the help of HTML and CSS below to create the basic structure of this section. I have created an area using HTML footer tags. Then I designed it with the help of CSS code. Here background color I used black and gave height auto.

The height will help to depend on the amount of content in the height of this photo design. You may be wondering how I put this section at the bottom of the webpage. To put it at the bottom of the web page, I used the value of bottom, top, right, zero, and position: absolute.

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    height: auto;
    width: 100vw;
    padding-top: 40px;
    color: #fff;

Step 3: Add all the information in HTML Footer Design

In this div below, I have added buttons for complete information such as headings, descriptions, and social media.

					<div class=”footer-content”>
    <!–add all information –>
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

1. Created a heading

Using this HTML and CSS below I have created a heading in the footer design. Font-size: 2.1rem has been used to increase the text size of this heading.

					<h3>Foolish Developer</h3>
					.footer-content h3{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;

2. Added a description

Now I have added a description in the footer design using the following codes. Text font-size: 14px and color white used.

					<p>Foolish Developer —  source code.</p>
					.footer-content p{
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
    color: #cacdd2;

3. create some social icons

In this footer section HTML CSS I have added five social media icons. The following HTML and CSS codes have been used to create these social icons.

					<ul class=”socials”>
    <li><a href=”#”><i class=”fa fa-facebook”></i></a></li>
    <li><a href=”#”><i class=”fa fa-twitter”></i></a></li>
    <li><a href=”#”><i class=”fa fa-google-plus”></i></a></li>
    <li><a href=”#”><i class=”fa fa-youtube”></i></a></li>
    <li><a href=”#”><i class=”fa fa-linkedin-square”></i></a></li>
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 3rem 0;
.socials li{
    margin: 0 10px;
.socials a{
    text-decoration: none;
    color: #fff;
    border: 1.1px solid white;
    padding: 5px;
    border-radius: 50%;
.socials a i{
    font-size: 1.1rem;
    width: 20px;
    transition: color .4s ease;
.socials a:hover i{
    color: aqua;

Step 4: Create a copyright section in Responsive Footer Design

The following codes have been used to create a copyright section within this design. If you look at the demo above, you will understand that there is a copyright section where there is a copyright link and some basic menu items.

					<div class=”footer-bottom”>
   <!– add all information –>
    background: #000;
    width: 100vw;
    padding: 20px;
    padding-bottom: 40px;
    text-align: center;
					<p>copyright &copy;2021 <a href=”#”>foolishdeveloper</a>  </p>
					.footer-bottom p{
   float: left;
   font-size: 14px;
   word-spacing: 2px;
   text-transform: capitalize;
.footer-bottom p a{
  font-size: 16px;
  text-decoration: none;
.footer-bottom span{
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;


Step 5: Create a footer menu bar

Now I have created a menu bar in this Responsive Footer section. I took the help of basic HTML and CSS to create it. First I added the menu items with the help of HTML. Then with the help of CSS, I have designed the items in a beautiful way.

					<div class=”footer-menu”>
 <ul class=”f-menu”>
    <li><a href=””>Home</a></li>
    <li><a href=””>About</a></li>
    <li><a href=””>Contact</a></li>
    <li><a href=””>Blog</a></li>
  float: right;
.footer-menu ul{
  display: flex;
.footer-menu ul li{
padding-right: 10px;
display: block;
.footer-menu ul li a{
  color: #cfd2d6;
  text-decoration: none;
.footer-menu ul li a:hover{
  color: #27bcda;

Step 6: Make the footer design responsive using CSS

Now is the time to make this CSS footer design fully responsive. Here I have used @media to make it responsive. 

We just need to change some basics to make it responsive. First I gave a maximum width using @media which means the following codes will work for any display size.

					@media (max-width:500px) {
.footer-menu ul{
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;

Hope you learned from this tutorial how I designed this responsive footer using HTML and CSS. If you want to know better then you can see my already made bootstrap footer design. If there is any problem, you can definitely let me know by commenting.

7 thoughts on “Simple Responsive Footer Design using HTML and CSS”

Leave a Comment