DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Robson Muniz
Robson Muniz

Posted on

πŸŽ₯Responsive Footer Section using Flexbox | HTML CSSπŸ™Œ

In this video, I have shown you how you can create a responsive footer section using HTML and CSS only.



Source Code:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Footer</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

  <section>
    <h1>Your Content Here!</h1>
  </section>

  <footer>
    <div class="main-content">
      <div class="left box">
        <h2>About us</h2>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sunt saepe maxime consequatur, architecto cum quos quo ut id totam laborum veritatis quaerat esse atque, doloremque facere hic. Odit, eum.</p>
          <div class="social">
            <a href=""><span class="fab fa-facebook-f"></span></a>
            <a href=""><span class="fab fa-instagram"></span></a>
            <a href=""><span class="fab fa-twitter"></span></a>
            <a href=""><span class="fab fa-youtube"></span></a>
          </div>
        </div>
      </div>
      <div class="center box">
        <h2>Adress</h2>
        <div class="content">
          <div class="place">
            <span class="fas fa-map-marker-alt"></span>
            <span class="text">London, UK</span>
          </div>
          <div class="phone">
            <span class="fas fa-phone-alt"></span>
            <span class="text">+089-5689754993</span>
          </div>
          <div class="email">
            <span class="fas fa-envelope"></span>
            <span class="text">webdev@dev.com</span>
          </div>
        </div>
      </div>
      <div class="right box">
        <h2>Contact US</h2>
        <div class="content">
          <form action="#">
            <div class="email">
              <div class="text">Email:</div>
              <input type="email" required>
            </div>
            <div class="msg">
              <div class="text">Message:</div>
              <textarea name="" id="" cols="25" required rows="2"></textarea>
            </div>
            <div class="btn">
              <button type="submit">Send</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="bottom">
      <center>
        <span class="credit">
          Created by <a href="">WebDev</a> |
        </span>
        <span class="far fa-copyright"></span>
        <span>2021 All Rights Reserved.</span>
      </center>
    </div>

  </footer>

</body></html>
Enter fullscreen mode Exit fullscreen mode

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  background-color: bisque;
}

section {
  /* Just for parent demo size */
  height: 65vh;
  display: grid;
  place-items: center;
}

h1 {
  font-size: 48px;
  color: black;
}

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: #111;
}

.main-content {
  display: flex;
}

.main-content .box {
  flex-basis: 50%;
  padding: 10px 20px;
}

.box h2 {
  font-size: 1.125;
  font-weight: 600;
  text-transform: uppercase;
}

.box .content {
  margin: 20px 0 0 0;
  position: relative;
}

.box .content::before {
  position: absolute;
  content: "";
  /*  border: 2px solid red;*/
  /*  Show them the file*/
  top: -10px;
  height: 4px;
  width: 100%;
  background-color: #1a1a1a;
}

.box .content::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 20%;
  background: #f12020;
  top: -10px;
}

.left .content .social {
  margin: 20px 0 0 0;
}

.left .content .social a {
  padding: 0 2px;
}

.left .content .social a span {
  height: 40px;
  width: 40px;
  background-color: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}

.left .content .social a span:hover {
  background: #f12020;
}

.center .content .fas {
  font-size: 1.4375rem;
  background-color: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: .3s;
}

.center .content .fas:hover {
  background-color: #f12020;
}

/*Now we grab the text*/

.center .content .text {
  font-size: 1.07rem;
  font-weight: 500;
  padding-left: 10px;
}

.center .content .phone {
  margin: 8px 0;
}

.right form .text {
  font-size: 1.07rem;
  margin-bottom: 2px;
  color: #656565;
}

.right form .msg {
  margin-top: 10px;
}

.right form input,
.right form textarea {
  width: 100%;
  font-size: 1.07rem;
  background-color: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}

.right form input:focus,
.right form textarea:focus {
  outline-color: #3498db;
}

.right form input {
  height: 35px;
}

.right form .btn {
  margin-top: 10px;
}

.right form .btn button {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: #f12020;
  font-size: 1.07rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}

.right form .btn button:hover {
  background-color: #000;
}

.bottom center {
  padding: 5px;
  font-size: 0.94rem;
  background-color: #151515;
}

.bottom center span {
  color: #656565;
}

.bottom center a {
  color: #f12020;
  text-decoration: none;
}

.bottom center a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  footer {
    position: relative;
    bottom: 0px;
  }

  .main-content {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .main-content .box {
    margin: 5px 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.