Responsive Footer Design using only HTML and CSS

Hey Friends today in this blog i'll be showing you how to design a footer using HTML & CSS only. Now in this blog we have our basc footer at the header you can see that we have our Logo, Brand Name and some Icons imported from Font-Awesome. At the middle content you can see we've some text items on the left side of our middle content you can see we've our Newsletter, In my video published a month ago i've tought you how to create a Newsletter Using HTML and CSS only if you want to check that out i'll leave a link below. Now at the bottom of our foooter we've our copyright items followed by some Policies and Codintion.

Now to be able to make this design responsive don't forget you've to know your Media Query

You Might Like This

Responsive Newsletter using HTML and CSS only

Facebook Post Box UI Design using only HTML and CSS

WiFi Detector Using HTML CSS and JavaScript

Responsive Footer Design | Video Tutorial

In this video, i've shown you the demo of the project and how to design it, ann as you know to create this file you will need two files also "index.html" "style.css" once you have created this two files then you can design this don't also forget that your extension is .html or .css so you are to save it as index.html and style.css but once you've saved it like this on your text editior it will automatically generate the file for you

Responsive Footer Design | Source Code

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Responsive Website Footer Design</title>
  <!-- Font-Awesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
      <footer>
        <div class="content">
          <div class="top">
            <i class="fa fa-database"><span>Code Block</span></i>
            <div class="icons">
              <i class="fa fa-facebook"></i>
              <i class="fa fa-twitter"></i>
              <i class="fa fa-youtube-play"></i>
              <i class="fa fa-instagram"></i>
              <i class="fa fa-linkedin"></i>
            </div>
          </div>
          <div class="middle-content">
            <div class="place-content">
              <p>Company</p>
              <li><span>Home</span></li>
              <li><span>About us</span></li>
              <li><span>Contact us</span></li>
              <li><span>Get started</span></li>
            </div>
            <div class="place-content">
              <p>Services</p>
              <li><span>App design</span></li>
              <li><span>Web design</span></li>
              <li><span>VPN hosting</span></li>
              <li><span>Logo Design</span></li>
            </div>
            <div class="place-content">
              <p>Account</p>
              <li><span>Profile</span></li>
              <li><span>My account</span></li>
              <li><span>Prefrences</span></li>
              <li><span>Purchase</span></li>
            </div>
            <div class="place-content">
              <p>Courses</p>
              <li><span>HTML & CSS</span></li>
              <li><span>JavaScript</span></li>
              <li><span>PHP</span></li>
              <li><span>MySQL</span></li>
            </div>
            <div class="newsletter">
              <form action="">
                <span class="news">Subscribe Us</span>
                <input type="email" placeholder="Enter Email Address" required>
                <button type="submit">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
        <div class="copyright">
          <span class="copy">Copyright © 2021 Code Block All Rights Reserved</span>
          <a href="#condition">Privacy Policy
            Terms & Codnition
          </a>
        </div>
      </footer>
</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #EEECEB;
}
footer{
  position: fixed;
  background: #140B5C;
  width: 100%;
  bottom: 0;
  left: 0;
}
footer .content{
  max-width: 1250px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .content .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .content .top span{
  font-size: 28px;
  color: #fff;
  padding-left: 7px;
  position: relative;
  top: 2px;
}
footer .content .top i{
  font-size: 18px;
  color: #fff;
}
footer .content .middle-content{
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  border-top: 2px solid #EEECEB;
  width: 100%;
  padding: 30px 30px 20px 20px;
}
footer .content .middle-content{
  color: #fff;
}
footer .content .middle-content li{
  list-style: none;
  margin: 5px 0;
  cursor: pointer;
}
footer .content .middle-content p{
  font-size: 22px;
}
footer .content .middle-content li:hover{
  text-decoration: underline;
}
footer .content .top .icons i{
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 9px;
}
footer .content .top .icons i.fa-facebook{
  background: #4267B2;
}
footer .content .top .icons i.fa-twitter{
  background: #1DA1F2;
}
footer .content .top .icons i.fa-youtube-play{
  background: #FF0000;
}
footer .content .top .icons i.fa-instagram{
  background: #E1306C;
}
footer .content .top .icons i.fa-linkedin{
  background: #0e76a8;
}
footer .content .middle-content .newsletter{
  display: flex;
  flex-direction: column;
}
footer .content .middle-content .newsletter input{
  width: 100%;
  height: 34px;
  border: 2px solid #EEECEB;
  background: none;
  outline: none;
  padding-left: 10px;
  color: #EEECEB;
  border-radius: 5px;
  margin-top: 5px;
}
footer .content .middle-content .newsletter input::placeholder{
  color: #EEECEB;
}
footer .content .middle-content .newsletter .news{
  font-size: 18px;
}
footer .content .middle-content .newsletter button{
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border-radius: 5px;
  background: none;
  outline: none;
  border: none;
  background: #0e76a8;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}
footer .content .middle-content .newsletter button:hover{
  background: #5f27cd;
}
footer .copyright{
  width: 100%;
  background: #0F0844;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
footer .copyright a{
  color: #fff;
  text-decoration: none;
}
@media (max-width: 900px) {
  footer .content .middle-content{
    flex-wrap: wrap;
  }
  footer .content .middle-content .newsletter input{
    width: 80%;
  }
  footer .content .middle-content .newsletter button{
    width: 80%;
  }
}
@media (max-width: 700px) {
  footer .content .top span{
    font-size: 25px;
  }
  footer .content .top .icons i{
    width: 35px;
    height: 35px;
    font-size: 15px;
    line-height: 35px;
  }
}
@media (max-width: 705px) {
  footer .content .middle-content{
    width: calc(100% - 50px);
  }
  footer .content .middle-content .newsletter input{
    width: 100%;
  }
  footer .content .middle-content .newsletter button{
    width: 100%;
  }
}
@media (max-width: 466px) {
  footer .content .top span{
    font-size: 20px;
  }
  footer .content .middle-content .place-content{
    margin-right: 10px;
  }
}
@media (max-width: 500px) {
  footer{
    position: relative;
  }
}

DOWNLOAD CODE FILE

2 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Creative Tutorials12 June 2021 at 03:26
Hey Friends if you've any issues downloading or copying code please let me know as soon as possible
Alex Rosas negras21 July 2022 at 16:45
you did a good job

Responsive Footer Design using only HTML and CSS

Creative Tutorials

2 Comments

Post a Comment

Contact Form