Create Responsive Footer With HTML & CSS

A footer element is included in the HTML code. We have three divs with the class row within the footer. There is one more class name in these rows, which is primary, secondary, and copyright.

A column div with the class about makes up the major div. We have a p tag inside of this. The links are another column in this table. Last but not least, we have the subscribed column.

Demo

HTML Code:

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Footer</title>
    <!-- Font Awesome CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <footer>
      <div class="row primary">
        <div class="column about">
          <h3>Company Name</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae,
            voluptatem corporis error non, corrupti delectus unde, incidunt
            dolorem quam porro tenetur autem? Maxime aspernatur quas, natus
            nesciunt harum obcaecati voluptatum.
          </p>
        </div>
        <div class="column links">
          <h3>Quick 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>
            <li>
              <a href="#careers">Careers</a>
            </li>
          </ul>
        </div>
        <div class="column subscribe">
          <h3>Subscribe</h3>
          <div>
            <input type="email" placeholder="Your email id here" />
            <button>Subscribe</button>
          </div>
          <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>
          </div>
        </div>
      </div>
      <div class="row secondary">
        <div>
          <p>
            <i class="fas fa-phone-alt"></i>
          </p>
          <p>+12 123456789</p>
        </div>
        <div>
          <p><i class="fas fa-envelope"></i></p>
          <p>mail@domain.com</p>
        </div>
        <div>
          <p><i class="fas fa-map-marker-alt"></i></p>
          <p>1234 Pearl Street</p>
        </div>
      </div>
      <div class="row copyright">
        <p>Copyright © 2022 Website Name | All Rights Reserved</p>
      </div>
    </footer>
  </body>
</html>

CSS Code:

        body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}
footer {
  background-color: #121315;
  color: #ffffff;
  font-size: 16px;
}
footer * {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  border: none;
  outline: none;
}
.row {
  padding: 2em 1em;
}
.row.primary {
  display: grid;
  grid-template-columns: 2fr 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: #2a8ded;
  font-size: 1.6em;
  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: #ffffff;
  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: #2a8ded;
  color: #ffffff;
}
div.social {
  display: flex;
  justify-content: space-around;
  font-size: 2.4em;
  flex-direction: row;
  margin-top: 0.5em;
}
.social i:hover {
  color: #2a8ded;
}
.row.secondary {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.row.secondary i {
  font-size: 1.8em;
  color: #2a8ded;
}
.row.secondary div {
  padding: 1em 0;
  width: 100%;
}
.row.secondary div:hover {
  background-color: #25262e;
}
.copyright {
  padding: 0.3em 1em;
  background-color: #25262e;
}
.copyright p {
  font-size: 0.9em;
  text-align: center;
}
@media screen and (max-width: 850px) {
  .row.primary {
    grid-template-columns: 1fr;
  }
  .row.secondary {
    flex-direction: column;
  }
}

Read More :

Code World

Create Responsive Footer With HTML & CSS

إرسال تعليق

Pixel-EM Converter

Blogger’s Cheat Sheet

Quiz App With Javascript Easy way

Pixel Art Generator

Adsense from Click Bombing using Vanilla JavaScript

Mr.Busy