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 TMNT$.$ Turn in the following files:

A tmnt$.$html

A movie.css$,$ the style sheet for tmnthtml

You will recreate the page below. Your page must match the appearance specified in this document.

We do not expect you to produce a pixel$-$perfect page that exactly matches this 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 tmnt$.$html with the page contents, but no page sections or styles. The only modifications you should make are to divide it into sections using div$/$span tags, and add id and class attributes. You should also replace the last two "YOUR REVIEW HERE" reviews with text of your choice. $($You are also allowed to add the HTML necessary to enable the "favorites icon" or "favicon" specified on the next page.$)$

Appearance Details:

All images on the page and mentioned in the following text are hosted on the web with the following file names.

bannerpng

bannerbgpng

overview.png

background.png

rottenbig.png

rbgpng

freshgif

bannerbgpng

The page's title is $\text{'}$TMNT $-$ Rancid Tomatoes. The page has a "favorites icon" $("$favicon$")$ of rotten.gif.

The page background is background png$.$ Page text uses $8$pt font, using Verdana, Tahoma, 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 banner.png Behind this banner bannerbgpng repeats hocizontally across the length of the page. Each image is $50$px tall. $($Hint: To make the banner stretch to the edges of the page, use the bannerbg.png as the background image of a blacke element that is bebind banner.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 Tahoma, Verdana, or any sans$-$serif font available on the system. The text in the header has a "shadow" located $3$px right and $3$px down from the original text, using the color #$999999.$

Below the main heading is the page's overall content area, with an overall $33\%$ rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies $800px$ in width and is centered horizontally within the page. If the page resizes horizontally, this $800px$ section should move dynamically so that it remains centered horizontally on the page. This overall section has a $4px$ gray solid border with a $20px$ round radius and should be sized large enough to contain all of its contents.

In the overall area there is a $550$ px$-$wide left section for the "rotten" $33\%$ rating and the critics' reviews of the film The section is topped by a smaller section containing a large "rotten" image $($rottenbig$.$png$),$ vertically aligned to be even with the bottom of the text around it$.$ Behind this the image rbgpng repeats horizontally across the entire length of the section. Each of these images is $83px$ tall. This is followed by the $33\%$ overall rating for the film, which is shown in a $48$ pt red bold font.

Below the $33\%$ overall rating, there are two columns of reviews. The columns each occupy $47\%$ of the width of

the overall left$-$center section of the page. There is a horizontal spacing of $2\%$ between the columns and neighboring content.

Each review is a box with a quote about the movie, in bold $8$ pt font. The quote box has a background color of #E$8$DC$9$B$,$ and a gray border, $2px$ thick with a $10px$ round radius. $8px$ separate 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 morie on the left side of the quote box, with $5$ px separating it from text to its right. Text wraps around the images as needed.

The reviewer's personal information follows under the quote box, including: the reviewer's name; and the publication in italic. A reviewer icon $($critic$-$gif$)$ is shown to the left of the text, with $5$px of horizontal space separating it from the text. There is $20pt$ of vertical space between reviews. $($Hint: Paragraphs in wovie reviews should be made large enougb to contain all their content, including any floating content.$)$

The top eight reviews should be as shown, but you should change the last two to hold any text that y