simple responsive footer design

Responsive Footer Design using HTML & CSS

Responsive Footer Design using HTML & CSS

In this article, you will learn how to create a Responsive Footer Design using HTML and CSS. Earlier I shared many more types of HTML footer tutorials with you. Footer is one of the most important parts of any website. The beauty of a website depends a lot on the footer design.

There are many types of Responsive Footer. Some websites use a simple footer that contains some basic information and some links. Some websites use modern footer designs which include many types of information, links, social icons, subscribe forms, etc.

It is made fully responsive so that it can be easily used on any device. CSS’s Flexbox has been used to make it responsive. With the help of Flexbox, no separate CSS code had to be added to make it responsive.

Responsive Footer using HTML and CSS

To create this project (simple responsive footer HTML CSS) you need to have a basic idea about HTML and CSS. Below I have shared step-by-step tutorials and provided the necessary source code.

 If you only want the source code, you can use the download button at the bottom of the article.

Step 1: The basic structure of footer design

The basic structure of this footer design has been created using the following HTML and CSS codes. This structure will contain all the information such as text, social icons, links, newsletters, etc.

<footer>
  <div class=”row primary”>
 
  </div>
</footer>

Background-color light black is used here. Here width: 100% and min-height: 100px are used. Its height will depend on the amount of content. 

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}
footer {
  background-color: #121315;
  color: #a7a7a7;
  font-size: 16px;
min-height:100px;
width:100%;
}
footer * {
  font-family: “Poppins”, sans-serif;
  box-sizing: border-box;
  border: none;
  outline: none;
}

This footer area is divided into 4 columns using the following CSS codes. We call this column sharing method Flexbox.

.row {
  padding: 1em 1em;
}
.row.primary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  align-items: stretch;
}
The basic structure of footer design

Step 2: Add information to Responsive Footer Design (more…)

Continue ReadingResponsive Footer Design using HTML & CSS
Responsive Footer Design using HTML, CSS & Bootstrap

Responsive Footer Design using HTML, CSS & Bootstrap

Responsive Footer Design using HTML, CSS & Bootstrap

In this article, I am going to show you how to create a footer design using HTML and CSS code. In the meantime, I have designed and shown many more types of footer sections. Hope you like this design too. 

It is a complete professional footer design with all kinds of information neatly arranged. Footer credits have been added below. First of all, there is the option of About us where you can give some information about your service or yourself. Below that, I have used icons and links from five social media platforms. Next to it, contact information has been added.

 Where address, email ID, and mobile number are given. Next to that are some links known as footer menus. There are pictures of some projects next to it. Here I have used six pictures. Below is a subscribe form to subscribe to. Where you can subscribe by adding a user name and email id.



 I have used footer credits below all. Where you can use your own copyright. Next to it, I have used important links such as About Us, Contact Us, Privacy Policy, etc. It is a fully responsive design that can be used on any website. I used HTML and CSS code to design this footer design. I used bootstrap programming code to make it responsive.

Footer Design Using HTML, CSS, and Bootstrap

Below I show you the complete step-by-step how I made the design of this footer section. You can use the demo button below the article to watch the live demo. You can also download the source code using the download button. 

If you want to see the complete process of making it step by step, follow the tutorial below. In this tutorial, I have described step by step the programming code that I used to create an element. This tutorial will show you exactly how to design a footer section.

Step 1: Basic structure for footer designs

<!DOCTYPE html>
<html lang=“en”>
    <head>
        <meta charset=“utf-8”>
        <title>Bootstrap Footer Template</title>
        <meta content=“width=device-width, initial-scale=1.0” name=“viewport”>
        <!– Libraries –>
        <link href=“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” rel=“stylesheet”>
        <link href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css” rel=“stylesheet”>
        <!– Stylesheet –>
        <link href=“css/footer-4.css” rel=“stylesheet”>
    </head>
    <body>
        <!– Footer Start –>
        <div class=“footer”>
            <div class=“container”>
                <div class=“row”>
                   
                    <!–Footer About–>
                     <!–Contact Us–>
                        <!–Footer Link–>
                        
                    <!–project Image–>
                </div>
            </div>
            
           <!– Newswletter –>
            <div class=“copyright”>
                <div class=“container”>
                    <div class=“row align-items-center”>
                        
                      <!–Copy Right–>
                        <!–Footer Menu–>
                    </div>
                </div>
            </div>
        </div>
        <!– Footer End –>
    </body>
</html>

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
}
a {
    transition: .3s;
}
a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
}
.footer {
    position: relative;
    padding-top: 45px;
    background: #121518;
}
.footer .footer-about,
.footer .footer-contact,
.footer .footer-links,
.footer .footer-project {
    position: relative;
    margin-bottom: 45px;
    color: #999999;
}
.footer .footer-about h3,
.footer .footer-contact h3,
.footer .footer-links h3,
.footer .footer-project h3 {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #eeeeee;
}
.footer .footer-about h3::after,
.footer .footer-contact h3::after,
.footer .footer-links h3::after,
.footer .footer-project h3::after {
    position: absolute;
    content: “”;
    width: 50px;
    height: 2px;
    left: 0;
    bottom: 0;
    background: #eeeeee;
}



Result:

Step 2: Add about section


<div class=“col-md-6 col-lg-3”>
                        <div class=“footer-about”>
                            <h3>About Us</h3>
                            <p>
                                Lorem ipsum dolor sit amet elit. Quisque eu lectus a leo dictum nec non quam. Tortor eu placerat rhoncus, lorem quam iaculis felis, sed lacus neque id eros
                            </p>
                            <div class=“footer-social”>
                                <a href=“”><i class=“fab fa-twitter”></i></a>
                                <a href=“”><i class=“fab fa-facebook-f”></i></a>
                                <a href=“”><i class=“fab fa-youtube”></i></a>
                                <a href=“”><i class=“fab fa-instagram”></i></a>
                                <a href=“”><i class=“fab fa-linkedin-in”></i></a>
                            </div>
                        </div>
                    </div>
.footer .footer-social {
    position: relative;
    margin-top: 20px;
}
.footer .footer-social a {
   text-align: center;
    color: #999999;
    font-size: 14px;
    border: 1px solid #999999;
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 6px 0;
    border-radius: 35px;
}

.footer .footer-social a:hover {
    color: #ffffff;
    background: #0085ff;
    border-color: #0085ff;
}



Result:

Step 3: Add contact information

  
<div class=“col-md-6 col-lg-3”>
                        <div class=“footer-contact”>
                            <h3>Get In Touch</h3>
                            <p><i class=“fa fa-map-marker-alt”></i>123 Street, New York, USA</p>
                            <p><i class=“fa fa-phone-alt”></i>+012 345 67890</p>
                            <p><i class=“fa fa-envelope”></i>info@example.com</p>
                            <p><i class=“far fa-clock”></i>Mon – Fri, 9AM – 10PM</p>
                        </div>
                    </div>
.footer .footer-contact p {
    margin-bottom: 10px;
    font-size: 16px;
    color: #999999;
}
.footer .footer-contact i {
    margin-right: 10px;
    font-size: 16px;
    color: #999999;
}
.footer .footer-contact a:last-child i {
    margin: 0;
}
.footer .footer-contact a:hover i {
    color: #0085ff;
}
Result:

Step 4: Add important links to the footer section

<div class=“col-md-6 col-lg-3”>
                        <div class=“footer-links”>
                            <h3>Useful Links</h3>
                            <a href=“”>Lorem ipsum</a>
                            <a href=“”>tempus posuere </a>
                            <a href=“”>velit id accumsan</a>
                            <a href=“”>ut porttitor</a>
                            <a href=“”>Nam pretium</a>
                            <a href=“”>accumsan</a>
                        </div>
                    </div>
.footer .footer-links a {
    margin-bottom: 6px;
    padding-left: 15px;
    color: #999999;
    display: block;
}
.footer .footer-links a:last-child {
    margin: 0;
}
.footer .footer-links a:hover {
    color: #0085ff;
}
.footer .footer-links a::before {
    position: absolute;
    content: “\f105“;
    font-family: “Font Awesome 5 Free”;
    font-weight: 900;
    left: 0;
}

Result:

Step 5: Add important projects and images

<div class=“col-md-6 col-lg-3”>
                        <div class=“footer-project”>
                            <h3>Latest Projects</h3>
                            <a href=“”><img src=“img/img-1.jpg” alt=“Image”></a>
                            <a href=“”><img src=“img/img-2.jpg” alt=“Image”></a>
                            <a href=“”><img src=“img/img-3.jpg” alt=“Image”></a>
                            <a href=“”><img src=“img/img-4.jpg” alt=“Image”></a>
                            <a href=“”><img src=“img/img-5.jpg” alt=“Image”></a>
                            <a href=“”><img src=“img/img-6.jpg” alt=“Image”></a>
                        </div>
                    </div>
.footer .footer-project {
    float: left;
    font-size: 0;
}
.footer .footer-project a {
    padding: 0 8px 8px 0;
    display: block;
    width: 33.33%;
    float: left;
}
.footer .footer-project a img {
    width: 100%;
}
Result Code: (more…)

Continue ReadingResponsive Footer Design using HTML, CSS & Bootstrap