Responsive Footer

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Footer</title>
    
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    />
    
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    
    <style>

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;
  }
}
      
    
    </style>
  </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>

demo

Code Preview

Popular Posts

Pages

Responsive Footer