How to create a Responsive Footer in HTML and CSS?

Leave a Comment / CSS, HTML / By

Hello Coders, Today we will be telling you about the code for creating a responsive footer with HTML and CSS. So a footer is present at the bottom of a web page. Today it is an important part of the website.

A responsive footer improves the overall usability of a website. It contains links to pages, Contact details of a company, Copyright, and some text. All the links should work properly.

Responsive Footer in HTML and CSS

HTML and CSS

To create this Responsive Footer we have used External CSS. Also, the code of this website is responsive on all devices. So we need 2 files for it, File no (1)index.html (2)style.css. Now let us write code in the First file. 

OUTPUT Without CSS

Footer without HTML

OUTPUT With CSS

Responsive Footer

Index.html

 <!DOCTYPE html>
 <html lang=”en”>
    <head>
        <meta charset=”UTF-8″>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
        <link rel=”stylesheet” href=”style.css”>
        <title>Responsive footer| Codeblockx</title>
    </head>
    <body>
        <footer>
            <div class=”content”>
                    <div class=”name”>
                        <span>Code Blockx</span>
                    </div>
                <div class=”boxes”>
                    <p class=”box”>Solution of All your Coding Questions</p>
                    <ul class=”box”>
                        <li class=”linkname”>Links</li>
                        <li><a href=”#”>Home</a></li>
                        <li><a href=”#”>Blog</a></li>
                        <li><a href=”#”>Contact</a></li>
                        <li><a href=”#”>About Us</a></li>
                    </ul>
                    <ul class=”box”>
                        <li class=”linkname”>Contact</li>
                        <li><a href=”#”>+475 4xxx xxx</a></li>
                        <li><a href=”#”>+389 5xxx xxx</a></li>
                        <li><a href=”#”>abc@gmail.com</a></li>
                    </ul>
                </div>
            </div>
              <div class=”bottom_text”>
                <span class=”copyright_text”>Copyright © 2022 <a   href=”https://www.codeblockx.com/”>Codeblockx</a></span>
              </div>
        </footer>
    </body>
 </html>

Style.css

 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 body{
   min-height: 100vh;
   width: 100%;
   background-color: #687070;
 }
 footer{
   position: fixed;
   background: rgb(0, 0, 0);
   width: 100%;
   bottom: 0;
   left: 0;
 }
 .content{
   max-width: 1250px;
   margin: auto;
   padding: 30px 40px 40px 40px;
 }
 .content .name{
   display: flex;
   justify-content: center;
   margin-bottom: 50px;
   color: #fff;
   font-size: 30px;
 }
 .boxes{
   width: 100%;
   display: flex;
   justify-content: space-between;
 }
 .boxes p{
     color: #fff;
     font-size: 25px;
 }
 .box{
   width: calc(100% / 5 – 10px);
 }
 .linkname{
   color: #fff;
   font-size: 18px;
   font-weight: 400;
   margin-bottom: 10px;
   position: relative;
 }
 .box li{
   margin: 6px 0;
   list-style: none;
 }
 .box li a{
   color: #fff;
   font-size: 14px;
   font-weight: 400;
   text-decoration: none;
   opacity: 0.8;
   transition: all 0.4s ease
 }
 .box li a:hover{
   opacity: 1;
   text-decoration: underline;
 }
 .bottom_text{
   width: 100%;
   background: #000000;
   max-width: 1250px;
   margin: auto;
   padding: 25px 30px;
   display: flex;
   justify-content: center;
 }
 .copyright_text{
     color: #fff;
 }
 .bottom_text a{
     text-decoration: none;
     color: #fff;
 }
 .bottom_text a:hover{
     color: bisque;
     text-decoration: underline;
 }

Hope this blog post was helpful to you and you have got the answer to your question. Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Till then check out our more blog posts.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *