Build a Footer with the help of HTML and CSS

Introduction Footer Using HTML and CSS

Here we are going to make a footer with the help of HTML and CSS. In this, there will be some contact information and some details, like those in every footer of websites. This is very useful as you can use it in your website as a footer. You have already seen this type of footer on many websites; this is the most usable project on almost every website.

Let’s start making this project together with the help of HTML and CSS by doing simple code that everyone can understand without any problem. If anyone has problems, they can message us through their contact details.

Footer with the help of HTML

First, we will generate the layout of the Footer in HTML CSS. This involves creating a parent div which will contain other HTML elements that make up the Footer Content. Within this parent div only, we will create 4 to 5 child divs to arrange. The various areas will contain relevant footer information. For instance, one part will consist of company information containing. The links such as ‘about us,’ ‘our services’, and ‘privacy statement.’ Below is important footer information that many users will find useful while using the site.

Adding Helpful Sections

Then, we will add yet another section of “get help”. Where users will be able to find links such as “FAQ,” “shipping,” and “returns.” Another section, “online shop,” will present links to a number of products including ‘watches’, ‘bags’, and ‘shoes’. Which will allow a visitor to get to the online store sections directly.

Social Media and Contact Information

Also, we will incorporate Follow Us which is a place where the website icons of Facebook, Twitter, Instagram, and Linked In will be placed to enhance the connection. These icons will be designed to be more engaging and attractive than the previous boring block ones.

After this, we will be formatting the Footer HTML After having created the structure of the Footer Information. This is done to make it more responsive. Aligning the layout with a flex box for the footer to fit any display width. All sections of the footer will be responsive, meaning that on small screens every section will be stacked on the top, making space.

Understanding the Footer in HTML

If you want to know, what a footer means in HTML? It is an HTML Footer section that is located at the bottom of any website and includes links, contacts, and social network buttons. The most convenient way to make a functional and structured footer is Footer using HTML and CSS. Learning this method will enable you to create professional footers for any website. Therefore making the site more user-friendly and more professional.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Footer Design</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>

  <footer class="footer">
     <div class="container">
      <div class="row">
        <div class="footer-col">
          <h4>company</h4>
          <ul>
            <li><a href="#">about us</a></li>
            <li><a href="#">our services</a></li>
            <li><a href="#">privacy policy</a></li>
            <li><a href="#">affiliate program</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>get help</h4>
          <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">shipping</a></li>
            <li><a href="#">returns</a></li>
            <li><a href="#">order status</a></li>
            <li><a href="#">payment options</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>online shop</h4>
          <ul>
            <li><a href="#">watch</a></li>
            <li><a href="#">bag</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">dress</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>follow us</h4>
          <div class="social-links">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>
     </div>
  </footer>

</body>
</html>

CSS of Footer with the help of HTML

Following the development of the Footer en HTML that has been postulated before, it is now the appropriate time to style the footer with CSS through an external style sheet linked to the HTML footer. First, let’s make the background color black, #24262b, which will make the footer seem more stylish and minimalist. Then, we will arrange all the Footer content into one row using the display: flex property, so the various parts are well aligned in the browser viewport. This approach is very useful to get a responsive footer that can be developed using HTML and CSS.

Structuring the Footer Sections

In our Footer HTML sections, there are several sections for the Footer content making good use of the class known as footer-col. Next, we will apply the font of Poppins font to the text and set the correct size, color, and spacing to make the text more and more friendly. In the Footer Section, there will be other Footer Information. It will also consist of navigation and information like contact details, etc.

Enhancing with Hover Effects

To bring a more engaging feel, we will give a nice hover effect for the social media icons placed in the footer section. The said icons will be able to toggle between the given default. Hover states and this will all happen without interruption making it easy to use. Similarly, the links in the footer area will be under the hover effect. Where the color will change and they will slide to the left for users’ apparent benefit.

This design is also modified for mobile devices. By using the media query on the Footer Information, the columns created will collapse to fit the screen vertically, well suited for phones or tablets. If you have ever thought about what footer means in HTML. Then let me tell you that it is some information that is placed at the bottom of a certain webpage, and it can also contain links.

Final Thoughts on Footer Design

This project lets you discover how to design an HTML CSS professional and clickable HTML Footer. After completing this tutorial, you will get to know the necessary steps to design the footers required for every website and add functionality and style to it.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  max-width: 1170px;
  margin:auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
ul{
  list-style: none;
}
.footer{
  background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}
.footer-col h4::before{
  content: '';
  position: absolute;
  left:0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}
.footer-col ul li:not(:last-child){
  margin-bottom: 10px;
}
.footer-col ul li a{
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}
.footer-col ul li a:hover{
  color: #ffffff;
  padding-left: 8px;
}
.footer-col .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin:0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
  color: #24262b;
  background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

Last, we created the footer content in HTML and CSS using simple codes. One after the other to make them easy to understand. A footer is a section of any webpage, which is crucial in development. So practicing and learning about it will improve your learning in web development. This project is meant to help create a footer in HTML and then apply the necessary CSS styles to have a neat layout. It is a basic project that will help you understand how to design a footer from scratch using HTML and CSS.

Conclusion of Footer Using HTML and CSS

The Footer Information often comprises links to the company profiles, phone, address, email, copyright notices, etc. Knowing how to organize this part of your page is important to increase the usability of your website. Amateurs always ask themselves, what is a Footer HTML? In its simplest definition, the footer is a part of the webpage placed at the bottom of the webpage. That usually includes additional information as well as links.

What you get from the exercise of creating a Footer HTML. Styling with CSS is an understanding of the ways to enhance the users’ experiences on the site. An effective footer enhances the thought that the visitors are at the bottom of a page but provides them with other links and information they may be interested in.

This tutorial explains how to design a basic yet flexible footer to enhance and upgrade your website. They tell it from top to bottom about the Footer HTML, including the use of footer, div, as well as a. You can apply CSS to style the footer and to change color, padding, and position as you want to have your website.

What you will be able to do at the end of this project is to design your Footer in HTML CSS. Incorporate it on any webpage. As either a beginner or even an intermediate artist, I believe this is the perfect project that will teach as well as help one practice. To download the source code, all you have to do is, click on the button below.