Simple Footer Using HTML and CSS | Responsive Footer Html CSS
Tags: webdev, javascript, beginners, programming
Published: 2022-05-09 17:35:42

https://www.codewithrandom.com/2022/05/simple-footer-using-html-and-css.html
Learners, In this article we are going to design a section of the webpage that is an interactive, and impressive project which is a Simple footer

HTML SECTION

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.

First, we have a footer that will enclose all other parts of the comment section.
Then we have three columns then we have an hr and below the hr, there is a copyright message and social link.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.

```
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>How to Create Responsive Footer in Html CSS and Bootstrap Create Professional Footer </title>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>   
  <footer class="site-footer">  
   <div class="container">  
    <div class="row">  
     <div class="col-sm-12 col-md-6">  
      <h6>About</h6>  
      <p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>  
     </div>  
     <div class="col-6 col-md-3">  
      <h6>Categories</h6>  
      <ul class="footer-links ">  
       <li><a href="#">Website Design</a></li>  
       <li><a href="#">UI Design</a></li>  
       <li><a href="#">Web Development</a></li>  
       <li><a href="#">Video Editor</a></li>  
       <li><a href="#">Theme Creator</a></li>  
       <li><a href="#">Templates</a></li>  
      </ul>  
     </div>  
     <div class="col-6 col-md-3">  
      <h6>Quick Links</h6>  
      <ul class="footer-links">  
       <li><a href="#">About Us</a></li>  
       <li><a href="#">Contact Us</a></li>  
       <li><a href="#">Contribute</a></li>  
       <li><a href="#">Privacy Policy</a></li>  
       <li><a href="#">Sitemap</a></li>  
      </ul>  
     </div>  
    </div>  
    <hr class="small">  
   </div>  
   <div class="container">  
    <div class="row">  
     <div class="col-md-8 col-sm-6 col-12">  
      <p class="copyright-text">Copyright © 2020 All Rights Reserved by  
       <a href="#"><span class="logo">WBIFY.</span></a>  
      </p>  
     </div>  
     <div class="col-md-4 col-sm-6 col-12">  
      <ul class="social-icons">  
       <li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>  
       <li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>  
       <li><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>  
       <li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>  
      </ul>  
     </div>  
    </div>  
   </div>  
  </footer>  
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>  
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>  
 </body>  
 </html>
```
[read more](https://www.codewithrandom.com/2022/05/simple-footer-using-html-and-css.html)