Simple Responsive Footer Design using HTML and CSS

2

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.

Simple Responsive Footer Design using HTML and CSS

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. 

Below I have given a video that will help you to know how CSS footer design works. At the end of the article, I have given the download link which you can use to download the complete source code.

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;
}

body{
    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.

<footer>

</footer>

footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111;
    height: auto;
    width: 100vw;
    padding-top: 40px;
    color: #fff;
}
Basic structure of Responsive Footer Design

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 -->
</div>


.footer-content{
    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;
}
Add all the information in HTML Footer Design

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;
}
Added a description

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>
 </ul>


.socials{
    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;
}
Responsive Footer Design using HTML and CSS

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 -->
</div>


.footer-bottom{
    background: #000;
    width: 100vw;
    padding: 20px;
    padding-bottom: 40px;
    text-align: center;
}
Create a copyright section in Responsive Footer Design

<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{
  color:#44bae8;
  font-size: 16px;
  text-decoration: none;
}
.footer-bottom span{
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;
}
Simple Responsive Footer Design

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>
 </ul>
</div>


.footer-menu{
  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;
}
Create a footer menu bar

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;
}
}
Make the footer design responsive using CSS

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.







Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Tried to download but the download link is broken.

    ReplyDelete
    Replies
    1. The download link is working. I think there is something wrong with your device, try another device or try later

      Delete
Post a Comment
To Top