Homework #2: Tomaytoes

Homework #2: Tomaytoes

Instructions: • Create two files to recreate the web page seen in Figure 1: tomayto.html and tomayto.css. • A pixel-perfect reproduction is impossible, given different platforms, fonts, etc. The screenshot below was taken from Chrome on Linux. However, your page should match the specifications in this document and the look and behavior shown here as closely as possible. • I have provided a skeleton of the web page, in the file tomaytoskeleton.html, which includes all of the content of the web page. The only modifications you need to make are adding div/span tags with id and class attributes. • You can also add a review or two of your own. • The next homework assignment will build on this one, and will have many movies and reviews filled in with PHP, so make this page as clean as possible.
Appearance details: • The background color of the webpage is #ff9955. • All images used on the web page are in folders on the github site. • At the top and bottom of the page is an image banner. The background image is images/tomatobanner.jpg and is repeated across the page. The text on the banner is an h1 heading which is shifted 25% of the way across the page. The heading has a drop-shadow with specifications 10px 10px 10px #000000 • The name of the movie is centered and in a sans-serif bold font of size 36pt and color #114400. It has a drop-shadow with specifications 4px 4px 4px #999999 and a margin of 20px. • The main block of the page has a width of 800px and is centered. It has a solid border of width 8px and color #999999. The rounded corners have a radius of 20px. • On the left hand side there is a horizontal bar with background color #114400, an image of a tomato, and the average number of tomatoes for the rating. This average is in a bold 64pt sans-serif font in color #ff2211. • Below the bar with the average rating are a number of reviews, arranged in two columns. The columns are 275px wide. See Section 4.3.4 of the textbook for making columns, but do not use the multi-column layouts provided by CSS3 (column-count, column-gap, etc.). • The individual reviews have a background color of #ffbb88. They have a 3px solid black border with a rounded corner of radius 10px. There is 10px of space between each review and the one below it, and the reviews themselves are 255px wide. • The reviews are in an 8pt bold sans-serif font, with a 5px margin around the text.
1
• The reviewer and their affiliation are in an italic type below the reviews. • On the right hand side is a block with the image for the movie and a summary. The background color for this section is #558822 and its width is 250px. • The text in the overview area is sans-serif and has a 10px margin.
Style: • Format your html and css to be as readable as possible. Use whitespace and indentation properly. Use meaningful names for ids and classs. • Express your css concisely and without redundant styles. For example, if two main sections share many (if not all) styles, those styles should not be repeated twice. (My solution uses less than 100 lines.) • Use context selectors to avoid needing to apply classes and IDs to large numbers of elements. • Limit the use of absolute and fixed positioning (I didn’t use any). • Try not to use fancy HTML or CSS beyond what we’ve discussed in class. • Do not use HTML tables. • Place a comment header in each file with your name, a brief description of the assignment, and the file’s contents.
Validate your files: • Your html and css must pass the validators without errors for full credit: – https://validator.w3.org/ – http://jigsaw.w3.org/css-validator/