Create Fully responsive footer design using CSS flexbox in HTML & CSS

Q: How do I make a fully responsive footer in HTML and CSS?

A: To create a fully responsive footer in HTML and CSS, you need to read the given article. Then you will definitely build a beautiful responsive footer that I have given as an image.

Hello readers, today in this blog, we are going to create a simple but very beautiful footer by using HTML and CSS. Earlier I have created a responsive Slide navigation bar in HTML , CSS and javascript which you guys like most. So now it's time to create a footer in black color as you can see on the image.

What does the website footer mean?

Website Footer is the section that is located at the bottom of every website and it contains essential quick links. The main purpose of the footer is to make user's work easier and convenient for a quick movement from one webpage to another. We must need a footer to make our website complete and to make users work faster.

As you can see on the given image of the footer design that I have given on the webpage. Many people are confused about what they need to put inside the footer. We can put essential quick links, logo our privacy policy link, and copyright message. We can also add our social media icon inside the footer. By adding these types of elements we can make a good footer.

You might also read :

Responsive Footer using HTML And CSS | Free Source Code

To copy-paste the given codes of this website footer design, first of all, you need to create two files, one is an HTML file and another is a CSS file. You can also download all source code files from the given download button.

Document

HTML CODE:

        <!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">
            <link rel="stylesheet" href="style.css">
            <title>footer</title>
        </head>
        <body>
            <div class="home">
                <div class="text">
                    Home Content
                </div>
            </div>
            <footer>
                <div class="top">
                    <div class="logo">
                        Spiritual Codes
                    </div>
                    <div class="social">
                        <div class="icon">
                            <i class="bi bi-facebook"></i>
                        </div>
                        <div class="icon">
                            <i class="bi bi-twitter"></i>
                        </div>
                        <div class="icon">
                            <i class="bi bi-instagram"></i>
                        </div>
                        <div class="icon">
                            <i class="bi bi-linkedin"></i>
                        </div>
                        <div class="icon">
                            <i class="bi bi-youtube"></i>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <div class="about">
                        <div class="title">
                            <img src="profile.png" height="70px" alt="">
                        </div>
                        <div class="text">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error reprehenderit a accusantium quam?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est, numquam!
                        </div>
                    </div>
                    <div class="list">
                        <div class="boxes box2 box">
                            <div class="heading">
                                <h2>Services</h2>
                            </div>
                            <ul>
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Search Engin Optimisation</a></li>
                                <li><a href="#">App development</a></li>
                                <li><a href="#">Accessories</a></li>
                            </ul>
                        </div>
                        <div class="boxes box3 box">
                            <div class="heading">
                                <h2>Products</h2>
                            </div>
                            <ul>
                                <li><a href="#">Laptops</a></li>
                                <li><a href="#">cases</a></li>
                                <li><a href="#">chargers</a></li>
                                <li><a href="#">Phones</a></li>
                            </ul>
                        </div>
                        <div class="boxes box4 box">
                            <div class="heading">
                                <h2>Pages</h2>
                            </div>
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Terms & Condition</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">F&Q</a></li>
                            </ul>
                        </div>
                        <div class="boxes box5 box">
                            <div class="heading">
                                <h2>Follow Us</h2>
                            </div>
                            
                            <ul>
                                <li>
                                    <i class="bi bi-facebook"></i>
                                    <a href="#">facebook</a>
                                </li>
                                <li>
                                    <i class="bi bi-instagram"></i>
                                    <a href="#">Instagram</a>
                                </li>
                                <li>
                                    <i class="bi bi-telegram"></i>
                                    <a href="#">Telegram</a>
                                </li>
                                <li>
                                    <i class="bi bi-whatsapp"></i>
                                    <a href="#">Whatsapp</a>
                                </li>
                            </ul>
                        </div>
                        <div class="boxes contact ">
                            <h3>JOIN US</h3>
                                <form action="">
                                    
                                    <div class="input">
                                        <input type="email" placeholder="Email" name="" id="email" class="space">
                                    </div>
                                    
                                    <button type="submit">Send</button>
                                </form>
                        </div>
                    </div>
                    
                </div>
                
                <div class="copy">
                    © 2021 <a href="#">Spiritual Codes</a> All Rights Reserved
                </div>
            </footer>
        </body>
        </html>

CSS CODE:

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
        @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            font-family: 'Nunito', sans-serif;
        }
        body{
            position: relative;
        }
        .home{
            width: 100%;
            height: 100vh;
            background-color: rgb(0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .home .text{
            color: white;
            font-size: 100px;
        }
        footer{
            width: 100%;
            background-color: rgba(192, 192, 192, 0.712);
            bottom: 0px;
        }
        footer .top{
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 2px;
         flex-wrap: wrap;
         background-color: rgba(0, 0, 0, 0.842);
        }
        footer .top .logo{
            font-size: 30px;
            color: rgb(255, 255, 255);
        }
        footer .top .social{
            display: flex;
        }
        footer .top .social .icon{ 
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            align-items: center;
            background-color: rgb(255, 255, 255);
            margin: 5px;
            color: rgb(255, 255, 255);
            border-radius: 50%;
            transition: all 0.4s ease;
        }
        footer .top .social .icon:nth-child(1){
            background-color:#4267B2 ;
        }
        footer .top .social .icon:nth-child(1):hover{
            color: #4267B2;
            background: #fff;
        }
        
        footer .top .social .icon:nth-child(2){
            background: #1DA1F2;
        }
        footer .top .social .icon:nth-child(2):hover{
            color: #1DA1F2;
            background: #fff;
        }
        
        footer .top .social .icon:nth-child(3){
            background: #E1306C;
        }
        footer .top .social .icon:nth-child(3):hover{
            color: #E1306C;
            background: #fff;
        }
        
        footer .top .social .icon:nth-child(4){
            background: #0077B5;
        }
        footer .top .social .icon:nth-child(4):hover{
            color: #0077B5;
            background: #fff;
        }
        
        footer .top .social .icon:nth-child(5){
            background: #FF0000;
        }
        footer .top .social .icon:nth-child(5):hover{
            color: #FF0000;
          background: #fff;
        }
        
        
        
        
        footer .main{
            background-color:rgba(0, 0, 0, 0.911) ;
        }
        footer .main .about{
            padding: 5px;
            padding-top: 20px;
            width:70% ;
            margin: auto;
            
        }
        footer .main .about .title{
            text-align: center;
            color: white;
            overflow: hidden;
            height: 70px;
            width: 70px;
            margin: auto;
            border: 2px solid red;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        footer .main .about .text{
            color: white;
            text-align: center;
            margin-top: 10px;
        }
        footer .list{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
        }
        footer .boxes{
            margin-top: 15px;
            
        }
        footer .boxes .about{
            width: 300px;
        }
        footer .boxes h2{
            border-left: 3px solid yellow;
            padding: 5px;
            color: white;
        }
        footer .boxes .text{
            text-align: justify;
            margin: 5px;
            color: rgba(233, 233, 233, 0.781);
        }
        footer .boxes ul li{
            list-style: none;
            margin: 5px;
        }
        footer .boxes ul li a{
            text-decoration: none;
            color: rgba(219, 219, 219, 0.842);
        }
        footer .boxes ul li a:hover{
            color: rgb(255, 255, 255);
            text-decoration:underline;
        }
        footer .boxes ul li i{
            color: white;
        }
        
        
        footer .boxes form{
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
        }
        footer  .contact{
            margin-top: 0px;
            margin-left: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            
        }
        footer .boxes  h3{
            text-align: center;
            font-size: 30px;
            color: rgb(255, 251, 24);
        }
        footer .boxes form .space{
            background-color: transparent;
            outline: none;
            border: none;
            border-bottom:2px solid red;
            height: 30px;
            width: 250px;
            padding: 10px;
            color: rgb(255, 255, 255);
        }
        footer .boxes form button{
            height: 30px;
            width: 250px;
            margin-top: 5px;
            color: white;
            cursor: pointer;
            background-color: transparent;
            outline: none;
            border: 2px solid red;
            transition: all 0.2s ease-in;
        }
        
        footer .boxes form button:focus{
            background-color: red;
        }
        .copy{
            font-size: 15px;
            text-align: center;
            line-height: 40px;
            background-color: rgb(0, 0, 0);
            color: white;
        }
        
        @media screen and (max-width: 871px) {
            .contact{
                display: block;
                width: 100%;
            }
          }
          @media screen and (max-width: 891px){
            footer .main .about{
                width:100% ;
                
            }
            .home .text{
                color: white;
                font-size: 80px;
            }
          }
          @media screen and (max-width: 515px){
            .home .text{
                font-size: 50px;
            }
          }
          @media screen and (max-width: 413px){
              .boxes{
                  display: block;
                  width: 100%;
                  margin-left: 30px;
              }
              footer .top{
                display: block;
                text-align: center;
               }
               footer .social{
                   margin-top: 20px;
                   display: flex;
                   justify-content: center;
               }
               
               .home .text{
                font-size: 50px;
            }
          }

Download

Create Fully responsive footer design using CSS flexbox in HTML & CSS

Post a Comment

Contact Form