Responsive Footer Design with HTML and CSS (Free Code)

Responsive Footer Design with HTML and CSS

If you want to make a Responsive Footer Design then this tutorial will help you completely. Earlier I shared many more types of CSS Footer Design tutorials with you. The design we have created here is absolutely simple and responsive. 

If you know basic HTML and CSS then you can easily create this Responsive Footer Design HTML CSS. Footer is a significant element in any website. We see different types of footers on different websites. Some websites use simple footers and some websites use footers with a lot of information.

Responsive Footer Design

Below I have a video that will help you to know how it works. In this video, you will get the complete tutorial. Although I have shared the step-by-step tutorial below.





Hopefully, the video above has helped you get its live preview and complete tutorial. However, I have given the full source code below the article. You can download those codes directly.

Responsive Footer greatly enhances the quality of any website. You can use this footer in the case of a personal blog site or general business website. Simply put, this is a simple footer design tutorial made with HTML and CSS only.

How to Create Responsive Footer Design

This footer design, made up of a heading, some text, social icons, some menu items, and footer credits will undoubtedly catch your eye. It is fully responsive so it can adapt to any device.

1. HTML code of Footer Design

First I put all the HTML codes together. Added all the information required for this Responsive Footer Design using the following HTML code. 

First, the basic structure of the footer was created. Then the headings and some paragraphs were added. Then there are the five social icons. Social icons are followed by some menu items and finally footer credits.

<!--Basic structure of footer-->
<footer>

<!--The main area of the footer -->
<div class="footer-content">

   <h3>Ground Tutorial</h3>
   <p>Ground Tutorial is a blog website where you will find great tutorials on web design and development. Here each tutorial is beautifully described step by step with the required source code.</p>
  
<!--Footer's social icon-->
   <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>

 <!-- Footer's menu item-->
   <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>
        <li><a href="">Articles</a></li>
      </ul>
   </div>

</div>

<!--Copyright Area-->
<div class="footer-bottom">
    <p>Design By - <a href="#">Ground Tutorial</a>  </p>
</div>

</footer>

2: Basic design of footer section

The basic design of Simple Footer CSS has been done with the help of the following CSS. I used black color in the background.

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

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



.footer-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

Basic design of footer section

3: Design the title and description

The headings and titles have been designed using the following CSS. As you can see above, a heading has been used here and some paragraphs have been used. The following codes have been used to design them.

.footer-content h3{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;
}
.footer-content p{
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
    color: #cacdd2;
}

Design the title and description

4: Design the social icon of Footer Design

Now I have used the following codes to design the icons on social media. I have used five social icons in the above HTML. 

The following CSS has been used to design those icons. A white border is used around each icon and the color of the icons is white.

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


I have used the following codes to design the icons in this simple Footer Design. Here font-size: 1.1rem is used to increase the size of the icon and hover color is used in it.

.socials a i{
    font-size: 1.1rem;
    width: 20px;
    transition: color .4s ease;
}

.socials a:hover i{
    color: aqua;
}

Design the social icon of Footer Design

5. Design the Footer menu item

I designed the menu bar using the following CSS codes. If you watch the demo, you will understand that there are some menus in this Responsive Footer section. 

I have used five menu items in this menu bar. The following codes have been used to design it.

.footer-menu{
  margin-bottom: 20px;
}
.footer-menu ul{
  display: flex;
}
.footer-menu ul li{
padding-right: 10px;
display: block;
}

The following CSS is used to design each menu item. A white border has been used around the menu item.

.footer-menu ul li a{
  color: #cfd2d6;
  border: 1.3px solid white;
  padding: 6px 15px;
  border-radius: 50px;
  text-decoration: none;
}
.footer-menu ul li a:hover{
  color: #27bcda;
}

Design the Footer menu item

6. Credit section of Responsive Footer

Now is the time to design footer credits. I have added footer credit required to code in HTML code. Now the following CSS has been used to design that footer credit section.

.footer-bottom{
    background: #000;
    width: 100vw;
    padding: 20px;
    text-align: center;
}
.footer-bottom p{
    text-align: center;
    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;
}

Credit section of Responsive Footer

7. Make Footer Design Responsive

Above we have created the CSS footer section. Now some little CSS has been used to make it responsive.

@media (max-width:500px) {
.footer-menu ul{
  display: inline;
}
.footer-menu ul li{
  margin-bottom: 20px;
}
}

Make Footer Design Responsive

I hope the above codes and tutorials have helped you to know how I created this Responsive Footer Design using HTML and CSS. Earlier I shared with you a variety of simple footer design tutorials. 

Be sure to comment on how this design works. Use the button below if you want the source code of the CSS footer section.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more