An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Responsive Footer Design using HTML and CSS
In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of simple footer design tutorials with you. The design that I have shown in this tutorial is very simple and easy. Will be very suitable for different types of personal websites or business websites.
Live Demo: https://codepen.io/codemediaweb/full/RwZzQme
It is made fully responsive so that it can be easily used on any device. CSS's Flexbox has been used to make it responsive. With the help of Flexbox, no separate CSS code had to be added to make it responsive.
I have already shared step by step tutorial. If you have difficulty understanding the code, you can follow the tutorial.
HTML Code:
<footer><div class="row primary"> <div class="column about"> <h3>Foolish Developer</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, voluptatem corporis error non, </p> <div class="social"> <i class="fa-brands fa-facebook-square"></i> <i class="fa-brands fa-instagram-square"></i> <i class="fa-brands fa-twitter-square"></i> <i class="fa-brands fa-youtube-square"></i> <i class="fa-brands fa-whatsapp-square"></i> </div></div><div class="column links"><h3>Some Links</h3> <ul> <li> <a href="#faq">F.A.Q</a> </li> <li> <a href="#cookies-policy">Cookies Policy</a> </li> <li> <a href="#terms-of-services">Terms Of Service</a> </li> <li> <a href="#support">Support</a> </li> </ul></div><div class="column links"> <h3>Some Links</h3> <ul> <li> <a href="#faq">F.A.Q</a> </li> <li> <a href="#cookies-policy">Cookies Policy</a> </li> <li> <a href="#terms-of-services">Terms Of Service</a> </li> <li> <a href="#support">Support</a> </li> </ul></div><div class="column subscribe"> <h3>Newsletter</h3> <div> <input type="email" placeholder="Your email id here" /> <button>Subscribe</button> </div></div></div><div class="row copyright"> <div class="footer-menu"> <a href="">Home</a> <a href="">About</a> <a href="">Contact</a> <a href="">Blog</a> <a href="">Social</a> </div> <p>Copyright © 2021 Foolish Developer</p></div></footer>
CSS Code:
body { padding: 0; margin: 0; min-height: 100vh; display: flex; align-items: flex-end;}footer { background-color: #121315; color: #a7a7a7; font-size: 16px;}footer * { font-family: "Poppins", sans-serif; box-sizing: border-box; border: none; outline: none;}.row { padding: 1em 1em;}.row.primary { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; align-items: stretch;}.column { width: 100%; display: flex; flex-direction: column; padding: 0 2em; min-height: 15em;}h3 { width: 100%; text-align: left; color: white; font-size: 1.4em; white-space: nowrap;}ul { list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0;}li:not(:first-child) { margin-top: 0.8em;}ul li a { color: #a7a7a7; text-decoration: none;}ul li a:hover { color: #2a8ded;}.about p { text-align: justify; line-height: 2; margin: 0;}input,button { font-size: 1em; padding: 1em; width: 100%; border-radius: 5px; margin-bottom: 5px;}button { background-color: #c7940a; color: #ffffff;}div.social { display: flex; justify-content: space-around; font-size: 2.4em; flex-direction: row; margin-top: 0.5em;}.social i { color: #bac6d9;}.copyright { padding: 0.3em 1em; background-color: #25262e;}.footer-menu{ float: left; margin-top: 10px;}.footer-menu a{ color: #cfd2d6; padding: 6px; text-decoration: none;}.footer-menu a:hover{ color: #27bcda;}.copyright p { font-size: 0.9em; text-align: right;}@media screen and (max-width: 850px) { .row.primary { grid-template-columns: 1fr; }}
You can download the source code if you want.
Original Link: https://dev.to/shantanu_jana/responsive-footer-design-using-html-and-css-m1i
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To