Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML Course | Building Footer

  • Difficulty Level : Easy
  • Last Updated : 10 Aug, 2021

Course Navigation 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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. 
     
  • 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: 
 

HTML




<!-- 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">
 
                    </a>
                </li>
 
                <li>
                    <a href="#" class="fa fa-facebook">
 
                    </a>
                </li>
 
                <li>
                    <a href="#" class="fa fa-pinterest-p">
 
                    </a>
                </li>
            </ul>
        </div>
    </footer>

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: 
     

CSS




.company-details{
    overflow: hidden;
    padding: 3em 0em;
    background: #E3F0F7;
    text-align: center;
    margin-top: 5em;
}
  • 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: 
     

CSS




#footer #col1,
#footer #col2,
#footer #col3{
    float: left;
    width: 320px;
    padding: 0px 40px 0px 40px;
}
  • 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: 
     

CSS




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

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: 
     

CSS




.copyright
{
    overflow: hidden;
    padding: 3em 0em;
    border-top: 20px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: #4CAF50;
}
  • 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: 
     

CSS




.copyright p
{
    letter-spacing: 1px;
    font-size: 0.90em;
    color: rgba(255, 255, 255, 0.6);
}
  • Adding Styles to the anchor tag: Set the color of the anchor tag and text-decoration to none: 
     

CSS




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

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: 
     

CSS




ul.contact{
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}
  • 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. 
     

CSS




ul.contact li{
    display: inline-block;
    padding: 0em 0.10em;
    font-size: 1em;
}
  • 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: 
     

CSS




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

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

CSS




/**********************************/
/*          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;
}

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :