HTML Course | Building Footer - GeeksforGeeks

10 Aug, 2021
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.  
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
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:  
Create two div’s with class names as “company-details” and “copyright” respectively.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.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.
Create two div’s with class names as “company-details” and “copyright” respectively.
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.
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.
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.
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ghoshsuman0129
ysachin2314
HTML-course-basic
HTML5
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property