🎥Responsive Footer Section using Flexbox

This content originally appeared on DEV Community and was authored by Robson Muniz

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>

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

This content originally appeared on DEV Community and was authored by Robson Muniz

Print Share Comment Cite Upload Translate Updates

APA

Robson Muniz | Sciencx (2021-12-20T13:20:10+00:00) 🎥Responsive Footer Section using Flexbox | HTML CSS🙌. Retrieved from https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/

MLA

" » 🎥Responsive Footer Section using Flexbox | HTML CSS🙌." Robson Muniz | Sciencx - Monday December 20, 2021, https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/

HARVARD

Robson Muniz | Sciencx Monday December 20, 2021 » 🎥Responsive Footer Section using Flexbox | HTML CSS🙌., viewed ,<https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/>

VANCOUVER

Robson Muniz | Sciencx - » 🎥Responsive Footer Section using Flexbox | HTML CSS🙌. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/

CHICAGO

" » 🎥Responsive Footer Section using Flexbox | HTML CSS🙌." Robson Muniz | Sciencx - Accessed . https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/

IEEE

" » 🎥Responsive Footer Section using Flexbox | HTML CSS🙌." Robson Muniz | Sciencx [Online]. Available: https://www.scien.cx/2021/12/20/%f0%9f%8e%a5responsive-footer-section-using-flexbox-html-css%f0%9f%99%8c/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Source Code:

Related Posts