CSS Assighnment

You will create the styling and modify the HTML as necessary for the CustomTechGames webpage (not a real website/business). The basic HTML code used to create this page will be provided to you in the document called skeleton.html. You will also be given a folder (images) with the graphics to include within the site.  You will rename your HTML file index.html before submitting it, and you will also need to create a stylesheet called style.css within a styles folder, which will be what you use to layout and design the contents of index.html. Place a comment header in your HTML and CSS files containing your name and a brief description of the assignment, and the file's contents.

Your page must match the appearance specified in the image contained within the assignment description above. It would be difficult to produce a pixel-perfect representation for your page that matches the image shown above, and I do not expect you to do so… entirely that is. Even so, your page should follow all of the styles specified in this document and should match the overall look, layout, and behavior of the page shown here as closely as possible.

Remember, I am providing you with a skeleton version of index.html with the page contents, but no page sections or styles. The only modifications you should (and are allowed to) make to index.html are to divide it into sections using div/span tags and add id and class attributes as necessary.  Please read the following sections carefully for specifics and hints on how to style your page.

Appearance and Behavior Details

The page text uses the font Consolas, or any monospace font on the system. The page body has no margin or padding, so its contents stretch to the very edge of the browser window. All anchors are bold. Anchors in the content area are the color #00C70D, and all anchors in the navigation menu and footer are white. None of the anchors are underlined.

The top of the page is an image banner that is 180px in height. The image called green_pixels.png will be used as its background, or the color #00C70D. The image should stretch to cover the entire width of the banner.

The header should be 1000px in width, and will be centered on the page within the image banner. The title section within the header will have top and bottom padding of 45px, and will be 400px in width. The color of all headings in the title will be white. A subsection of the first heading, “Tech”, should be the color #00C70D. The second heading, “Creating custom games since 2010!”, should be 18px. The TEXT WITHIN THE title section should have top and bottom padding of 15px, and left and right padding of 25px; however, there should not be any additional spacing added between the two different headings (h1 and h2). The background for this area is the image called metal.jpg.

Below the top banner is an area for the nav bar which has a height of 35px and a width of 1000px. The menu in the nav bar has a top padding of 8px, is displayed horizontally, and is floated to the right. The background color of the entire nav bar is the black. This background should stretch to the edges of the screen.

Each element within the menu has a 25px left padding. There should be no bullet points or numbers displayed before any of these elements.

The content of the page has a width of 1000px and is centered on the screen. There are three columns at the top of the content area, followed by a section that covers the entire width of the content area.

The first column has a total width of 200px, a bottom margin of 20px, and is floated to the left. Any headings within this column should be the color green, and should have the following margins: left/right = 0px, bottom = 10px, top = 20px. The paragraph “Want your own game? Click here to contact our sales team!” should have a 20px top margin. All list elements within this column have a left-margin of 25px, and the bullet point is the image called controller.jpg.

The middle column has a total width of 640px, with 20px margins on all sides, and is floated to the left.

The last column has a width of 160px, a bottom margin of 20px, and is floated to the right. All text within this column should be aligned to the right. Headers within this column will have the following margins: left/right = 0px, top = 20px, and bottom = 10px. No bullet points should be shown in this column.

The bottom section of the content area should fill the entire width of the content section, and should not be floated to the left or the right. It has a 3px green border on top of it, which separates it visually from the rest of the content. It has a bottom margin and a top padding of 20px.

Beneath all of the content is the footer, which has the same background as the nav bar. The entire footer is 90px in height which includes a 10px top padding. The footer should be positioned at the very bottom on the page with no extra white space underneath. All text within the footer should be the color white and should be 12px. Anchors within the footer should not be bold. The contents of the footer should be aligned to the center of the webpage. The images with the footer should be 30px by 30px.

All other style elements on the page are subject to the preference of the web browser.

Implementation and Grading

It is strongly recommended that you install and use the Firebug add-on for Firefox when working on this assignment. Using it to inspect elements will help you diagnose problems with the box model and develop your styles just right. In particular, use the "Layout" tab on the bottom right to investigate the box model settings for particular elements. 

Even though you can add spans and divs, you should insure that after they have been added that you have implemented the content of your web page using valid HTML5 as taught in class. For full credit, your page must successfully pass the HTML5 validator.

Do not express stylistic information in the HTML itself, such as inline styles or presentational HTML tags (b or font). Express all stylistic information on the page using CSS defined in the file style.css. The majority of the points for this assignment will be for the style.css file. For full credit, your style sheet must also successfully pass the W3C CSS validator. Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles, as well as using context selectors (*, p, a, body, etc.) to avoid applying classes and IDs to large numbers of elements when possible. As much as possible you should limit the use of absolute and fixed positioning on this assignment. You should not use HTML or CSS constructs past what has been discussed in class, and you should not use HTML tables for any reason on this assignment.

Format your HTML and CSS to be as readable as possible, similarly to the examples from class. Make sure to place a comment header in each file containing your name, section, a brief description of the assignment, and the file's contents. You must properly use whitespace and indent your HTML and CSS code following examples shown in class.