Create Responsive Footer

To paste the program's supplied codes, you must first create two files, one of which is an HTML file and the other of which is a CSS file. Once these two files have been created, you can quickly copy-paste the given codes into your HTML and CSS files. You may also get all of the source code files from the following link. Button to Save

If you're acquainted with HTML & CSS then you'll simply produce this Footer section. Those friends WHO square measure feeling troublesome to grasp this, don't be concerned I even have provided the total ASCII text file of this program Responsive Footer. be happy to use the subsequent codes.

Demo

HTML Code:

                  <!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
      <meta charset="UTF-8">
      <!--<title> Responsive Footer</title>--->
      <link rel="stylesheet" href="style.css">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     </head>
  <body>
   <footer>
     <div class="content">
       <div class="left box">
         <div class="upper">
           <div class="topic">About us</div>
           <p>Best Way to learn</p>
         </div>
         <div class="lower">
           <div class="topic">Contact us</div>
           <div class="phone">
             <a href="#"><i class="fas fa-phone-volume"></i>+007 9089 6767</a>
           </div>
           <div class="email">
             <a href="#"><i class="fas fa-envelope"></i>abc@gmail.com</a>
           </div>
         </div>
       </div>
       <div class="middle box">
         <div class="topic">Our Services</div>
         <div><a href="#">Web Design, Development</a></div>
         <div><a href="#">Web UX Design, Reasearch</a></div>
         <div><a href="#">Web User Interface Design</a></div>
         <div><a href="#">Theme Development, Design</a></div>
         <div><a href="#">Mobile Application Design</a></div>
         <div><a href="#">Wire raming & Prototyping</a></div>
       </div>
       <div class="right box">
         <div class="topic">Subscribe us</div>
         <form action="#">
           <input type="text" placeholder="Enter email address">
           <input type="submit" name="" value="Send">
           <div class="media-icons">
             <a href="#"><i class="fab fa-facebook-f"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-youtube"></i></a>
             <a href="#"><i class="fab fa-linkedin-in"></i></a>
           </div>
         </form>
       </div>
     </div>
     <div class="bottom">
       <p>Copyright © 2022 <a href="#">Website Name</a> All rights reserved</p>
     </div>
   </footer>
  </body>
  </html>

CSS Code:

          @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
    text-decoration: none;
  }
  footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #111;
  }
  footer .content{
    max-width: 1350px;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  footer .content p,a{
    color: #fff;
  }
  footer .content .box{
    width: 33%;
    transition: all 0.4s ease;
  }
  footer .content .topic{
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
  }
  footer .content p{
    text-align: justify;
  }
  footer .content .lower .topic{
    margin: 24px 0 5px 0;
  }
  footer .content .lower i{
    padding-right: 16px;
  }
  footer .content .middle{
    padding-left: 80px;
  }
  footer .content .middle a{
    line-height: 32px;
  }
  footer .content .right input[type="text"]{
    height: 45px;
    width: 100%;
    outline: none;
    color: #d9d9d9;
    background: #000;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 17px;
    border: 2px solid #222222;
  }
  footer .content .right input[type="submit"]{
    height: 42px;
    width: 100%;
    font-size: 18px;
    color: #d9d9d9;
    background: #eb2f06;
    outline: none;
    border-radius: 5px;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 12px;
    border: 2px solid #eb2f06;
    transition: all 0.3s ease-in-out;
  }
  .content .right input[type="submit"]:hover{
    background: none;
    color:  #eb2f06;
  }
  footer .content .media-icons a{
    font-size: 16px;
    height: 45px;
    width: 45px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
    border-radius: 5px;
    border: 2px solid #222222;
    margin: 30px 5px 0 0;
    transition: all 0.3s ease;
  }
  .content .media-icons a:hover{
    border-color: #eb2f06;
  }
  footer .bottom{
    width: 100%;
    text-align: right;
    color: #d9d9d9;
    padding: 0 40px 5px 0;
  }
  footer .bottom a{
    color: #eb2f06;
  }
  footer a{
    transition: all 0.3s ease;
  }
  footer a:hover{
    color: #eb2f06;
  }
  @media (max-width:1100px) {
    footer .content .middle{
      padding-left: 50px;
    }
  }
  @media (max-width:950px){
    footer .content .box{
      width: 50%;
    }
    .content .right{
      margin-top: 40px;
    }
  }
  @media (max-width:560px){
    footer{
      position: relative;
    }
    footer .content .box{
      width: 100%;
      margin-top: 30px;
    }
    footer .content .middle{
      padding-left: 0;
    }
  }

Read More :

Code World

Create Responsive Footer

إرسال تعليق

Pixel-EM Converter

Blogger’s Cheat Sheet

Quiz App With Javascript Easy way

Pixel Art Generator

Adsense from Click Bombing using Vanilla JavaScript

Mr.Busy