mockup1
Convert the mockup below to functional XHTML and CSS.  Submit two files, one for the XHTML and one for the CSS.

Here is the style guide for the page:

color for all the borders: #940627
main page background color: #c0dae4
right sidebar background color: #c8e4c0
highlighted tab background color: #e4c0c9
tab and header text color: #066e94
footer background color: #eff5f8
footer text color: #666666
main text font family: Verdana
tab font family: Comic Sans

Here is the checkmark image:

Notes:

- Ideally, your solution should work well in IE6, IE7, and Firefox.

- The HTML should be cleanly written and easy to modify and adapt. For example, it should be easy for software developers to find the places that they might need to modify, should the HTML be hooked into a templating system such as JSP. Also, adding or deleting text should not cause the layout to break.

- You don't have to get the spacing pixel perfect, but we do want it to be close to the mockup.  Same goes for the font sizes.

- The page content should be centered and fixed width so that it looks good on a 1280x1024 monitor.

- The text in the mockup doesn't matter, so you can use your own random text if you like.  A good way to generate random text content is using the Lorem Ipsum Generator at http://lorem-ipsum.perbang.dk/

- The header tabs and the "Fake Company" in the footer should all be links; it's OK for them to link to "#".

- The rounded edges and corners are desired, but optional. Consider them extra credit.


Here is the mockup:

Last updated  2021/05/05 19:44:06 PDTHits  356