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>
Top comments (0)