back to all posts

Build an Agency Website with HTML & CSS -3

by Nabendu Biswas / July 23rd, 2020

#html #beginners #css
Series: Agency-html

Welcome to part-3 of the series. We will complete the homepage by creating the footer first.

So, first head over to index.html and create the html for footer.


After that in our style.css the styles for the footer.


It will show the footer as below. But we have a problem as it have a white gap at the end.

Gap at endGap at end

So, to fix the same we need to make the footer as fixed. Add the below code in footer.

position: fixedposition: fixed

So, now our footer is fixed and at the bottom.

Footer at bottomFooter at bottom

Now, we will create the About page. So, copy all the content from index.html and create an about.html in the same folder. Remove everything from the body, only keep header and the footer.


Now, once you click on About, it will show as below.


Now, let’s put some html tags and content to it. We will first have a section of main, inside it our container class.

Now we will have an article with class main-col. Inside that we will have three paragraph with some real content about an Agency.


After this we will also have an aside tag, which will be used for sidebar. It also have a div with class dark, wrapping the h3 and the p.


It will show as below, without any styles.

Without stylesWithout styles

Now, we will again use float again to form a two column layout. We are also creating styles for the dark class.

Two columnTwo column

Now, our About page is complete and it shows beautiful two column layout.

Two Column layoutTwo Column layout

This completes part-3 of the series.

You can find the code till this part in my github repo here.

Nabendu Biswas