In this lesson, we will learn how to create the footer of the website using Html and CSS. In the last lecture, we learned how to create a Navigation bar by Filling the text on hover form using HTML and CSS.
What is meant by the Html footer?
If you have gone through any website then you must go through the footer of the website. Footer is present at the bottom of the website with some quick links. These links may be social media sharing buttons, login/signup buttons information about the website, etc.
A footer is also a main part of the website. When the visitors scroll down the website then they have to move from different sections of the website and the footer also helps them to move across the website through quick links present at the footer of the website.
How to create a Footer template?
In this program, we are going to learn how to create the footer of the website using HTML and CSS. It’s going to be very unique and simple to understand.
This footer is totally responsive across all devices (mobile, tab, and PC/laptop). It is totally made in HTML and CSS and I haven’t used a single line of JavaScript for the development of this header section. It contains different quick links, different icons, information about the website and address, etc. If you are interested in this post or want to add this footer code to your project or website then you can copy and download the source code from here. Scroll down to get the source code of this footer section.
You might be interested in it:
How to create the footer of the website?
Name your Html file as index.html and CSS file style.css and then paste the given code into these files. These extensions are very helpful for browsers to understand the type of the file and execute it properly.
Source code of HTML footer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Footer Template</title> <!-- Google Fonts Cdn --> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet"> <!-- Font Awesome Cdn --> <script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script> <!-- Bootstrap Cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Main Css --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Footer section Begin --> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="footer-about"> <div class="footer-logo"> <a href="#"><img src="img/footer-logo.png" alt=""></a> </div> <p>The Customer is at the heart of our unique bussiness model, which include design.</p> <a href="#"><img src="img/payment.png" alt=""></a> </div> </div> <div class="col-lg-2 offset-lg-1 col-md-3 col-sm-6"> <div class="footer-widget"> <h6>Shopping</h6> <ul> <li><a href="#">Clothing Store</a></li> <li><a href="#">Trending Shoes</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Sale</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-3 col-sm-6"> <div class="footer-widget"> <h6>Links</h6> <ul> <li><a href="#">Contact Us</a></li> <li><a href="#">Payment Methods</a></li> <li><a href="#">Delivary</a></li> <li><a href="#">Return & Exchanges</a></li> </ul> </div> </div> <div class="col-lg-3 offset-lg-1 col-md-6 col-sm-6"> <div class="footer-widget"> <h6>NewsLetter</h6> <div class="footer-newslatter"> <p>Be the first to know about new arrivals, look books, sales & promos!</p> <form action="#"> <input type="text" placeholder="Your Email"> <button type="submit"><span><i class="fa fa-envelope" arial-hidden="true"></i></span></button> </form> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center"> <div class="footer-copyright-text"> <p>Copyright © 2021 All rights reserved | This template is made with <i class="fa fa-heart-o" arial-hidden="true"></i> by <a href="#">FantacyDesigns</a></p> </div> </div> </div> </div> </footer> <!-- Bootstrap Js Cdn --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html> |
Source code of CSS file of Html footer:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/* FantacyDesigns */ html, body{ height: 100%; font-family: "Nunito Sans" , sans-serif; -webkit-font-smoothing: antialiased; } p{ font-size: 15px; font-family: "Nunito Sans" , sans-serif ; color: #3d3d3d; font-weight: 400; line-height: 25px; margin: 0 0 15px 0; } img{ max-width: 100%; } a{ text-decoration: none; } ul{ padding-left: 0; } input:focus{ outline: none; } a:hover, a:focus{ text-decoration: none; outline: none; color: #ffffff; } .footer{ background: #111111; padding-top: 70px; } .footer-about{ margin-bottom: 30px; } .footer-about .footer-logo{ margin-bottom: 30px; } .footer-about p{ color: #b7b7b7; margin-bottom: 30px; } .footer-widget{ margin-bottom: 30px; } .footer-widget h6{ color: #ffffff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } .footer-widget ul li{ line-height: 36px; list-style: none; } .footer-widget ul li a{ color: #b7b7b7; font-size: 15px; } .footer-widget ul li a:hover{ color: #e53637; } .footer-widget .footer-newslatter p{ color: #b7b7b7; } .footer-widget .footer-newslatter form{ position: relative; } .footer-widget .footer-newslatter form input{ width: 100%; font-size: 15px; color: #ffffff; background: transparent; border: none; padding: 15px 0; border-bottom: 2px solid #ffffff; } .footer-widget .footer-newslatter form input::placeholder{ color: #b7b7b7; } .footer-widget .footer-newslatter form button{ color: #b7b7b7; font-size: 16px; position: absolute; right: 5px; top: 0; height: 100%; background: transparent; border: none; } .footer-copyright-text{ border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; margin-top: 40px; } .footer-copyright-text p{ color: #b7b7b7; margin-bottom: 0; } .footer-copyright-text p i{ color: #e53637; } .footer-copyright-text p a{ color: #e53637; } |
Conclusion:
In this way, you can create the footer of the website in HTML and CSS. If you are facing any type of problem in understanding any line of code of HTML and CSS then you can click here for learning all the tags and properties of HTML and CSS.
Task:
We have a black footer in Html and CSS. It has all the content related to the footer. Now add icons in the footer. Facebook, Instagram, Twitter, Pinterest, etc have icons. Import these icons from fontawesome website. Then use them along with the text.
If you found this article useful then must like it and follow us. Also share it because sharing is caring and comment below if you have any queries.
Thanks for reading this article.
Download Source CodeClick to Download
