Description
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 to determine the
correct class and id values for different elements. Only your submitted stylesheet will be
graded.
Instructions:
While an exact match is not required, attempt to reproduce as close as possible noting the
marking rubric.
1. **Do not modify the HTML code**
2. View the provided HTML5 code and images. Do not change the directory structure. You
will be able to view the page without a webserver. Examine the lab4.html file to
understand how specific elements have been identified.
3. Create a new stylesheet called lab4.css and place it relative to your html file as
css/lab4.css.
4. 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
5. 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 when the size becomes too
small to display the content.
6. Change the margins and padding of the
padding, widths and heights (with the exception of the height of the right-sidebar
which is set to 600px), attempt to use em units. Required spacing can be found on the
page image.
7. For the
the header text does not wrap. The text in the header is 1.8em.
8. Use the techniques presented in Section 5.3.3 and 5.3.4 to display the content within
the
