Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 27, 2021 04:16 pm GMT

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 &copy; 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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To