This is a CSS styling assignment, you need to style the given html to look like what is shown in lab 4.pdf.

 

 

COSC 360 – Winter 2016 Term 3 Lab 4 – Layout with CSS In this lab, you will have the opportunity to build a two column page layout with CSS using the provided HTML and images with the use of margins and padding. The goal is to style your web page so it appears similar to the image provided in the lab. Detailed instructions follow. Review the marking rubric to ensure you have addressed all points required for the page. Ensure you keep a version on your page under version control as it may be used in subsequent weeks. You do not need to use a webserver to host your page for this lab. You are only producing stylesheet for the lab. Do not modify the HTML code. Assignment: Work will be done individually Assignment Submissions: All submissions will be done via Connect. For direct marking of assignment, you can show your TA in the lab and submit via Connect. Submit only your single CSS file. Due Date: Electronic submission February 8th, 2017 – end of day Rubric: The assignment will be marked as follows: Page layout with floats and correct spacing /4 Major page element styling /1 Header (zoom compatible) /2 Footer layout (floats, size, colour, etc) /4 Image overlay in posts /2 Image position/size in posts /2 Button position/styling /2 Individual post layout /3 Total /20 Bonus for lab demo (marked in lab) /1 Total possible marks 21/20 Information: Using the provided HTML file and images, correctly style the page. The spacing does not have to be exact but should approximate the layout of the page. In addition, you will need to style the image overlay. The page is a two column layout with a header and footer, with placeholder code. Do not change the HTML. You will need to inspect the HTML code of determines the correct class and id values for different elements. You will only submit your stylesheet . Instructions: While an exact match is not required, attempt to reproduce as close as possible noting the marking rubric. 1. Download the provided HTML5 code and images and place them in your local development directory. You will be able to view the page without a webserver. Examine the lab4.html file to understand how specific elements have been identified. 2. Create a new stylesheet called lab4.css and place it relative to your html file as css/lab4.css. 3. For the page, use the following font-family and font-size information: font-family: Tahoma, Helvetica, sans-serif;
h1
1.8em
h2
1.2em
p, body
0.9em
4. Using floating element, create the two column layout as shown along with the header and footer. With the two column layout, both the side column and main column need to be the size height. In order to do this, set the height of each to be 600px. The challenge is that as the page zooms, the content from the main column will wrap and overflow. Use the overflow property to allow the element to scroll in the size becomes too small to display the content. 2 em 5 em 5 em 2 em <article> - use margins to create 20 em space <figure> - float to the left <figcaption> and newbanner image positioned 5 em 5 em Each major <div> in the <article> needs to be cleared Images displayed within <div> with no floating or positioning Read More link floated to the right and displayed as a block element 2 em One of the two <div> elements within the <footer> uses a float 5. Change the margins and padding of the <article> element. For most of the margins, padding, widths and heights (with the exception of the height of the right-sidebar
with is set to 600px), attempt to use em units. Required spacing can be found on the page image. 6. For the <header>, set the height to 45px. Ensure that as the viewport changes size, the header text does not wrap. The text in the header is 1.8em. 7. Use the techniques presented in Section 5.3.3 and 5.3.4 to display the content within the <article>. Use the same float technique for the <footer>. You can use pixel units for overlapping elements. 8. The colours used are #ff8800, #474747 and #F5F5F5, but you are free to choose any colours as long as the physical page layout is the same (including background colours for the side and main column). You can find complementary colour schemes with tools such as http://paletton.com. Testing: Take the time to test your page is different browsers and at different zoom levels. Ensure that elements in the page scale appropriately.