Part 1: 3-Column layout (10 marks) Use Exercise Semantics and create a three column layout with the procedure below:

Notice your body width is 960px (excluding the borders and section margin). We wish to create a three-column layout with a gap of 20px between columns and we want a padding of 20px for each column. This leaves us with 800px to work with. The section should be floated left with a width of 600px and the aside should be floated right with a 270px width Create a separate CSS stylesheet and create a class for each of your articles e.g. col1, col2. Add the stylesheet to your HTML file. As these articles are part of the section, so to create a three-column layout, you need to distribute the section width evenly to your article classes and add appropriate floats. Float your Column 1 in the section to the left, and give it a width of 260px. Next, give your column that 20px padding. Next make sure there is a gap between the columns via a 20px right margin. Apply the same for column 2 except the floating attribute. The Column 2 should float right. The column 3 should float right. Remember to clear the footer so that it does not move up. Leave the body width as 1000px provided in the style.css file. CSS3col.png

Part 2: Drop Down Menu (10 marks) Next create a drop down menu. This exercise will utilise more complex selectors. You may need to refer to the following reference:

http://reference.sitepoint.com/css/selectorref (Links to an external site.)Links to an external site.

First things first, you need to make all your list items contain hyperlinks. For the purpose of this exercise, the links do not need to go anywhere, href="" For the list item that you want to have a drop down, create a nested unordered list. CSS3colg.png

Part 3: Responsive Web Design (10 marks) Allow for multiple devices. If it's loaded on a mobile device (eg. iPhone), hide the aside and have the columns stack. Also, stack the navigational menu or create a menu burger.