Homework Assignment 2: Movie Review Solution

This assignment is about CSS and HTML for layout, positioning, and the CSS box model. You will create files for a fake movie review web site named Rancid Tomatoes for the film The Lion King. Turn in the following files:

    • lionking.html: The movie review webpage

    • movie.css: The style sheet for lionking.html

The Lion King Movie Review Page

You will recreate the page as shown in the provided screenshots. Your page must match the appearance specified in this document. We do not expect you to produce a pixel-perfect page that exactly matches the expected output image. But your page should follow the styles specified in this document and match the look, layout, and behavior shown here as closely as possible.

We will provide you a skeleton of lionking.html with the page contents, but no page sections or styles. You are to modify the provided file to divide it up using page section tags and add id and class attributes. You should also replace the two “YOUR REVIEW HERE” reviews with text of your choice.

Appearance Details

All images on the page and mentioned in the following text are hosted on the web in the folder https://webster.cs.washington.edu/images/. Link to all images using their full absolute URLs, not relative ones.

• rancidbanner.png
• moviebg.png
• fresh.png
•
rancidbannerbg.png
•
freshlarge.png
•
rotten.png
•
cover.jpg
•
rottenlargebg.png
•
critic.gif

The page’s title is: “The Lion King - Rancid Tomatoes”. The page background is moviebg.png. Page text uses 12pt font, using Arial, Helvetica, or any sans-serif font on the system. The page body has no margin or padding, so its contents stretch to the very edge of the browser window. The top of the page is an image banner.

The center of this banner is rancidbanner.png. Behind this banner rancidbannerbg.png repeats horizontally across the length of the page. Each image is 50px tall. (Hint: To make the banner stretch to the edges of the page, use the rancidbannerbg.png as the background image of a block element that is behind rancidbanner.png). Underneath the image banner is a centered heading containing the movie name and year in a 24pt bold font. The preferred fonts for this heading are Georgia, Times New Roman, or any serif font available on the system. The text in the header has a text shadow located 3px right and 3px down from the original text, using the color #999999.

Overall Content Area

Below the main heading is the page’s overall content area, with an overall “92%” rating for the film, several critics’ reviews, and an overview of the film at right. Taken together this content occupies 55% of the width

1
of the viewport, and is centered horizontally within the page. If the page resizes horizontally, this 55% section should move dynamically so that it remains centered horizontally on the page. It should also have a 5px by 5px gray box shadow with a blur distance of 5px. The background color of this section is #EEEEEE.

The reviews area and general overview area should be nestled inside a flex-container, flexing in the horizontal direction. Use flex properties to accomplish this “side-by-side” content layout for the two-column-layout of the overall content. (Note: do not use floating elements, absolute or relative positioning, tables, or the column-* CSS properties to accomplish the side-by-side layout).

Still inside the overall content area, there is a bar of centered text indicating reviews “(1-10) of 88”, with a background color of #A2B964. 0.5em separate the edge of its text and the element’s own outer edge.

Reviews

In the overall area there is a left section for the “fresh” 92% rating and the critics’ reviews of the film. The section is topped by an area containing a large “fresh” image (freshlarge.png), vertically aligned to be even with the bottom of the text around it. Behind this the image rottenlargebg.png repeats horizontally across the entire length of the section. Each of these images is 83px tall. This is followed by the 92% overall rating for the film, which is shown in a 48pt red bold font. Finally, there is 1rem of margin between this header and the reviews that start below.

Moving down the page, there is a column of reviews. The reviews are flex items in a flex container. The flex container should have a vertical flex axis, meaning its items should form a column of reviews. (Note: accomplish this layout with flex-box properties as seen in class, section, and lab. Avoid column-* CSS3 properties). Each review is a box with a quote about the movie, plus a citation for the quote.

The text of the quote is 13pt font, and overrides the default font family using Georgia, Times New Roman, or any serif font. The quote box takes up 90% of the width of its parent, has a background color of #FFFFFF, and a #CCCCCC solid border, 2px thick. The border has 12px rounded corners. 1em separates the quote box’s content from its border. Each box has an icon (fresh.gif or rotten.gif) for whether the reviewer liked or disliked the movie on the left side of the quote box, with 5px separating it from text to its right. Text wraps around the images as shown in the provided images.

The reviewer’s personal information follows under the quote box, shown in 13pt font. The reviewer’s name is displayed with normal style, but the publication is shown in italic. A reviewer icon (critic.gif) is shown to the left of the text, with 5px of horizontal space separating it from the text.

The top eight reviews should be as shown, but you should change the last two reviews to hold any text that you like. Be creative and write something funny or interesting about this movie, or write a short review of movie(s) of your choosing.

General Overview

To the right of the critics’ reviews is a General Overview section of the page with a list of information about the movie, with a background color of #A2B964. 15px separate the side edges of the section and the text of the list. Its text appears in a 12pt font of Arial, Helvetica or any sans-serif font available on the system.

The section includes a definition list (using dl, dt, and dd elements) about the movie such as its stars and director. Each term is bolded and has 15px of vertical separation between it and the element that precedes it. The bottom of this section contains a list of links about the movie. The list should be shown without bullets or indentation.




2
Other

The page’s bottom right corner has links to the W3C validators, aligned at the very right edge of the page. All other style elements on the page are subject to the preference of the web browser. One common mistake students make is to alter the default margins around paragraphs. Every p tag has a default 1em margin on top and bottom. We recommend that you do not alter this default setting. Our expected output is based on leaving this default setting in place, and if you remove it, it will be difficult to get all of the spacing to match the output.

Implementation and Grading

Submit your assignment online from the course web site. You do not need to turn in the provided images. For full credit, your HTML and CSS should follow the rules listed in the Style Guide on the class web site.

We strongly recommend that you use the Chrome Web Inspector or Firefox Page Inspector add-ons on this assignment. Using these to inspect elements will help you find problems with the box model and your styles. We suggest using the “Layout” tab at bottom right to see the box model settings for particular elements.

For full credit, your page must use valid HTML5 and successfully pass the W3C HTML5 validator. Do not express style information in the HTML, such as inline styles or presentational HTML tags such as b or font. Use organizational tags such as header, footer, aside, article, section, and nav for dividing your page into sections, though note that you do NOT need to change any of the existing tags. Prefer organizational tags over ids and classes when appropriate.

Express all stylistic information on the page using CSS defined in movie.css. The majority of the points for this assignment will be for the movie.css file. For full credit, your style sheet must successfully pass the W3C CSS validator.

Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles. For example, the two main columns of reviews share many (if not all) styles in common, so you should not specify those styles twice in your CSS file. As another example, if the page uses the same color or font family for multiple elements, group those elements into a single CSS rule, so that it would be possible to change the page’s color/font by modifying a single place in the CSS.

Use context selectors to avoid needing to apply classes and IDs to large numbers of elements. Limit the use of absolute and fixed positioning on this assignment, and do not use floating or positioning where it is not necessary or stylistically appropriate to do so (for example, where the same effect could be achieved with text alignment instead). Do not use HTML or CSS constructs past Chapter 4 of the textbook (apart from flex properties), and do not use HTML tables.

Format your HTML and CSS to be as readable as possible, similarly to the examples from class. Place a comment header in each file with your name, section, a brief description of the assignment, and the file’s contents. Properly use whitespace and indent your HTML and CSS code as shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin a block element past the 100th character on a line. For reference, our solution has roughly 130 lines of CSS (85 “substantive”), but you do not need to match this exactly.

Please do not place a solution to this assignment online on a publicly accessible web site.








3