Responsive Footer Section using HTML & CSS




Hello developers, today in this blog you will learn to create a Responsive Footer Section using HTML & CSS.

A footer is a section, present at the bottom of the web page. A few years ago, the footer is only used to give copyright information. But nowadays footer is made compulsory for any website. Footer section is always set at the bottom of the web page. The footer contains information that improves a website's overall usability.

In this Responsive Footer Section Design, there is a company name at the center, the list of services that the company provides, some social icons, some quick links to redirect to that particular web pages, and the location and contact information.

This footer section is made fully responsive, by using CSS media query property. When you open this footer section on the PC, these footer categories are horizontally aligned, but on the mobile screen, these categories are vertically aligned. That is arranged one after the other.

The source code of this Responsive Footer Section using HTML & CSS is given below, you can copy the source code of this program. You can use this Responsive Footer Section using HTML & CSS, you can take this to the next level with your creativity.

Responsive Footer Section using HTML & CSS [Source Code]

To make this website (Responsive Footer Section using HTML & CSS), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Footer || Learning robo</title> <link rel="stylesheet" href="style.css" /> <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous" ></script> </head> <body> <div class="footer"> <div class="heading"> <h2>COMPANY NAME<sup>™</sup></h2> </div> <div class="content"> <div class="services"> <h4>Services</h4> <p><a href="#">App development</a></p> <p><a href="#">Web development</a></p> <p><a href="#">Graphic designing</a></p> <p><a href="#">Web designing</a></p> </div> <div class="social-media"> <h4>Social</h4> <p> <a href="#" ><i class="fab fa-linkedin"></i> Linkedin</a > </p> <p> <a href="#" ><i class="fab fa-twitter"></i> Twitter</a > </p> <p> <a href="#" ><i class="fab fa-github"></i> Github</a > </p> <p> <a href="#" ><i class="fab fa-codepen"></i> Codepen</a > </p> <p> <a href="#" ><i class="fab fa-instagram"></i> Instagram</a > </p> </div> <div class="links"> <h4>Quick links</h4> <p><a href="#">Home</a></p> <p><a href="#">About us</a></p> <p><a href="#">Contact us</a></p> <p><a href="#">Gallery</a></p> </div> <div class="details"> <h4 class="address">Address</h4> <p> Lorem ipsum dolor sit amet consectetur <br /> adipisicing elit. Cupiditate, qui! </p> <h4 class="mobile">Mobile</h4> <p><a href="#">+9111xxxxxxxx</a></p> <h4 class="mail">Email</h4> <p><a href="#">example@gmail.com</a></p> </div> </div> <footer> © 2021 COMPANY NAME Pvt. Ltd. All rights are reserved<br><br> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </footer> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color:#202124;
    color:#fff;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.footer .heading {
    max-width: 1010px;
    width: 20%;
    text-align: center;
    text-transform: uppercase;
    margin: 10px auto;
    margin-bottom: 3rem;
    background-color: #887fff;
    color:#202124;
    border-radius: 8px;
    padding:5px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footer .content {
    display: flex;
    justify-content: space-evenly;
    margin: 1.5rem;
}
.footer .content p {
    margin-bottom: 1.3rem;
    color: #ddd;
}  
.footer .content a {
    text-decoration: none;
    color: #ddd;
}
.footer .content a:hover {
    color:#887fff
}
.footer .content h4 {
    margin-bottom: 1.3rem;
    font-size: 19px;
   color: #887fff;  
}  
footer {
    text-align: center;
    margin-bottom: 2rem;
    color: #887fff;
}  
@media (max-width: 767px) {
    .footer .content {
      display: flex;
      flex-direction: column;
      font-size: 14px;
}
.footer .heading{
      width: 90%;
}
    .footer {
      position: unset;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .footer .content,
    .footer {
      font-size: 14px;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .footer {
      position: unset;
    }
}
.credit{
    text-align: center;
    color: #000;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color:#fff;
    font-weight: bold;
}  
We hope you would like this Responsive Footer Section using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Footer Section using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome