HTML Course | Building Footer

Course Navigation

So, we have completed building all parts of our website except the footer. So, let’s take a look at what our final footer will look like:

Our footer mainly consists of two sections:

  • Company Details: This contains of three columns with address details, phone details and Email details.
  • Copyright Information: This contains information about the Copyright and links to social media handles.

Before we start building the Footer. It is recommended to go to this link once: Font Awesome Icons.

We will be using font awesome icons at different places in the footer. To use fontawesome icons, follow below steps:

  • Include Font Awesome CSS. Paste the below code in between your head tags present at the top of index.html file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    chevron_right

    
    

  • Now, to use the icons just add the below class to a span tag.
    <span class="fa fa-icon_name"></span>
    
    Where, icon_name is the name of the icon.
    

Let us now just start writing the HTML structure of the website’s footer. We have divided the footer in two sections namely Company Details and Copyright Information.

Follow the below steps:

  1. Create two div’s with class names as “company-details” and “copyright” respectively.
  2. Steps For div with class “company-details”:

    • Add a div with class named as “row”.
    • Add three div’s inside the previous div with id’s col1, col2 and col3 respectively.
    • For each of the column divs declare two span tags. One for the font awesome icon and second for the information.
  3. Steps For div with class “copyright”:

    • Add a paragraph element to show the text: “© All rights reserved | GeeksforGeeks.”
    • Add an unordered list of three elements to show the three social media icons.

Below is the complete HTML code of the footer:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Footer Menu -->
<footer id = "footer">
          
    <!-- Company Details -->
    <!-- 1. Address 
         2. Contact Number
         3. Enquiry Mail 
    -->
    <div class="company-details">
        <div class="row">
            <div id ="col1">
                <span id = "icon" class="fa fa-map-marker"></span>
                      
                <span>
                    710-B, Advant Navis Business Park,
                    <br />Sector-142, Noida
                </span>
            </div>
                  
            <div id ="col2">
                <span id="icon" class="fa fa-phone"></span>
  
                <span>
                    Telephone: +91-890 * * * * * * *
                </span>
            </div>
                      
            <div id ="col3">
                <span id="icon" class="fa fa-envelope"></span>
                <span>xyz@geeksforgeeks.org</span>
            </div>
        </div>
    </div>
              
    <!-- Copyright Section -->
    <div class="copyright">
        <p>©  All rights reserved | GeeksforGeeks.</p>
      
        <ul class="contact">
            <li>
                <a href="#" class="fa fa-twitter">
                    <span>Twitter</span>
                </a>
            </li>
              
            <li>
                <a href="#" class="fa fa-facebook">
                    <span></span>
                </a>
            </li>
              
            <li>
                <a href="#" class="fa fa-rss">
                    <span>Pinterest</span>
                </a>
            </li>
        </ul>
    </div>
</footer>

chevron_right


Look at the red marked portion in the below image. This is what the website’s footer look like now:

Let’s now add styles to the footer.

Adding Styles to div “website-details”

  • First style the basic layout: Set the basic margins, paddings, background color and align the texts to center.
    Add the below CSS code to your style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .company-details{
        overflow: hidden;
        padding: 3em 0em;
        background: #E3F0F7;
        text-align: center;
        margin-top: 5em;
    }

    chevron_right

    
    

  • Aligning the three columns in one line: Float all of the three columns to the left and assign a width of 320px to each one of them.
    Add the below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #footer #col1,
    #footer #col2,
    #footer #col3{
        float: left;
        width: 320px;
        padding: 0px 40px 0px 40px;
    }

    chevron_right

    
    

  • Adding Styles to the FontAwesome Icons: Set the font-size of the icons to 3em and a bottom-margin of 1em and display them as block.

    Add the below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #footer #icon{
        display: block;
        margin-bottom: 1em;
        font-size: 3em;
    }

    chevron_right

    
    

Adding Styles to div “copyright”

  • Adding Styles to basic layout: Set the basic margins, paddings, background-colors etc. for the copyright class.

    Add the below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .copyright
    {
        overflow: hidden;
        padding: 3em 0em;
        border-top: 20px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        background: #4CAF50;
    }

    chevron_right

    
    

  • Adding style to the paragraph element: Add styles to the copyright information stored in <p> tags. Add letter-spacing, color etc.

    Add the below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .copyright p
    {
        letter-spacing: 1px;
        font-size: 0.90em;
        color: rgba(255, 255, 255, 0.6);
    }

    chevron_right

    
    

  • Adding Styles to the anchor tag: Set the color of the anchor tag and text-decoration to none:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .copyright a
    {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.8);
    }

    chevron_right

    
    

If you open the index.html file in the browser now, you will see the footer as shown below:

The above footer looks good, the only difference is in the display of the social icons of facebook, twitter etc. Let’s fix this. The last thing left is to add styles to the social media icons.

Adding styles to the Social Icons:

  • Remove the margin from the ul or class named “contact”, add padding and set the list-style to none:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    ul.contact{
        margin: 0;
        padding: 2em 0em 0em 0em;
        list-style: none;
    }

    chevron_right

    
    

  • Set the list items to display as inline-block so that the icons can be displayed horizontally instead of vertically. Also add padding and font-size to the list items.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    ul.contact li{
        display: inline-block;
        padding: 0em 0.10em;
        font-size: 1em;
    }

    chevron_right

    
    

  • After adding the above two styles, the icons will now be arranged horizontally and at the center of the copyright div. Refresh and see the result in your browser after making the above changes.
  • The last thing is to add background for the social icons. To do so, add the below style for the anchor tags of each list item:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    ul.contact li a{
        color: #FFF;
        display: inline-block;
        background: #4C93B9;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;

    chevron_right

    
    

The complete CSS code for the footer of the Website is as below:

filter_none

edit
close

play_arrow

link
brightness_4
code

/**********************************/
/*          Styling Footer        */
/**********************************/
  
/*** Adding Styles to Company Details ***/
.company-details{
    overflow: hidden;
    padding: 3em 0em;
    background: #E3F0F7;
    text-align: center;
    margin-top: 5em;
}
  
#footer #col1,
#footer #col2,
#footer #col3{
    float: left;
    width: 320px;
    padding: 0px 40px 0px 40px;
}
      
#footer #icon{
    display: block;
    margin-bottom: 1em;
    font-size: 3em;
}
  
/*** Adding Styles to Copyright Div ***/
.copyright
{
    overflow: hidden;
    padding: 3em 0em;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #4CAF50;
}
      
.copyright p
{
    letter-spacing: 1px;
    font-size: 0.90em;
    color: rgba(255, 255, 255, 0.6);
}
      
.copyright a
{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}
  
/* Styling Social Icons */
ul.contact{
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}
      
ul.contact li{
    display: inline-block;
    padding: 0em 0.10em;
    font-size: 1em;
}
  
ul.contact li a{
    color: #FFF;
    display: inline-block;
    background: #4C93B9;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;

chevron_right




My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.