In the last article, we started creating a standard website layout and added a header to it which contains website name and logo. Now let's add more components to it to complete our website layout.
Now as we have implemented navigation successfully, let's see how we can add content.
First, create a div element with class row and create three divs inside it with the class column. Main CSS here is to make the width of each of this 3 divs to value near to 30% so that they get equal width and set float property to left.
That's all for today. In the next article, we will continue from this and will resize it for small screens.
Till then #keepCoding.
Follow @theCodingExprs
Navigation Bar
It contains links to various pages and topics for easy navigation. We have already created navigation bars in previous articles. Let's add one below header...Now as we have implemented navigation successfully, let's see how we can add content.
Content
This is the part where website show creativity. We can have various types of layouts for this section like a single column, double column or multi-column depending on what content we have. Here, we will create three column layout and will change it to one column in small screens.First, create a div element with class row and create three divs inside it with the class column. Main CSS here is to make the width of each of this 3 divs to value near to 30% so that they get equal width and set float property to left.
That's all for today. In the next article, we will continue from this and will resize it for small screens.
Till then #keepCoding.
Follow @theCodingExprs
Comments
Post a Comment