Code the Footer

Code the Footer. In this Article we will learn to code the last section of every website “The Footer”. The footer element is the section which may contains a list of your company details such as about, team, Contact ,info and etc.

Footer can be identical in every single page of your site,or it can be different  depend on your site design themes.

The most commons text insert in the Footer are such as Copyright, Terms , Privacy etc.

Follow the Code below on how to Code the Footer

1. Create a Footer tag inside HTML  and assign a Class name for your Footer Tag , in this example i will name my footer class as “footerClass”.
2. Create a Row Class to hold all the Column in the Footer
3. Create 4 column inside the row and assign a class name called “col-3 mobiledisplay”
4. Create an Un order list using the ul , li tag
5. Input some text into the list li

Provide your Footer a background color and a padding left of 10%

6.         <footer class="footerClass">
                         <div class="row">
           
                         <div class="col-3 mobiledisplay">
                          <h1> Company</h1>
                            <ul>
                               <li>About</li>
                               <li> Blog </li>
                               <li> Career</li> 
                            </ul>
                   
                        </div>
                        <div class="col-3 mobiledisplay">
                           <h1> Company</h1>
                            <ul>
                               <li>About</li>
                               <li> Blog </li>
                               <li> Career</li> 
                            </ul>
             
             
                      </div>
                     <div class="col-3 mobiledisplay">
                         <h1> Company</h1>
                          <ul>
                             <li>About</li>
                            <li> Blog </li>
                            <li> Career</li> 
                          </ul>
             
             
                     </div>
                    <div class="col-3 mobiledisplay">
                     <h1> Company</h1>
                       <ul>
                         <li>About</li>
                         <li> Blog </li>
                         <li> Career</li> 
                      </ul>
                    </div>
           
                 </div>
         
         </footer>
       
   
   
          

7. At your Footer , Style your footer and display as block
8. You might want your row width to be 100% , flex, wrap the content around and align all item at center
9. Define your col-x styling portion
10. Provide your footer H1 tag text a colour and a font size of 45px
11. Remove the dot in front of your list tag by assigning list-style: none; align your text left.
12. Provide your font a size, line height between the font on top and bottom , provide your font a colour.
13. Style your Footer when in Mobile mode inside “@media screen and (max-width: 680px)”
14. Display it as block and give it a width of 50% when in mobile mode

       footer{
              display:block;
    
             }

        .row{
    
             width:100%;
             display:flex;
             flex-wrap: wrap;
             align-items: center;  
    
             }
         .row::after{
    
                   display:table;
                   clear: both;
                   content:"";
     
                   }

          .col-1 {width: 8.33%};
          .col-2 {width: 16.66%;}
          .col-3 {width: 25%;}
          .col-4 {width: 33.33%;}
          .col-5 {width: 41.66%;}
          .col-6 {width: 50%;}
          .col-7 {width: 58.33%;}
          .col-8 {width: 66.66%;}
          .col-9 {width: 75%;}
          .col-10 {width: 83.33%;}
          .col-11 {width: 91.66%;}
          .col-12 {width: 100%;}
           

          footer.footerClass{
    
                           background-color: #666;
                           padding-left: 10%;
  
                           }

        footer.footerClass h1{
    
                          color: #fff;
                          font-size: 45 px;
    
    
                             }

        footer.footerClass ul{
                            list-style: none;
                            text-align:left;
                            padding-left:0;
    
    
                             }

       footer.footerClass ul li{
    
                             color:#fff;
                             font-size: 22px;
                             line-height:1.5;
    
                              }

       @media screen and (max-width: 680px) {

                                  div.mobiledisplay{
        
                                                  width:50%;
                                                  display:block;
                                                    }
  
                                                }

 
      

Well this wrap up the article on how to code the footer check out how to deal with text and image here