Starting from:
$29
Project 1: CSS and HTML for layout
Project 1: Movie Review
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:
· tmnt.html
· movie.css, the style sheet for tmnt.html
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. The screenshots in this document were taken in Firefox, which may differ from your system.
Appearance Details:
All images on the page and mentioned in the following text can be found in project folder.
The page's title is: TMNT - Rancid Tomatoes
The page background is moviebg.png. Page text uses 8pt 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 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.) Under 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 3px right and 3px 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 and should be sized large enough to contain all of its contents.
In the overall area there is a 550px-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 (rottenlarge.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 33% overall rating for the film, which is shown in a 48pt 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 8pt font. The quote box has a background color of #E8DC9B, and a gray border, 2px thick. 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 movie on the left side of the quote box, with 5px 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 5px of horizontal space separating it from the text. There is 20pt of vertical space between reviews. (Hint: Paragraphs in movie reviews should be made large enough to contain all their content, including any floating content.)
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. 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. This section is 250px wide, with 10pt between the edge of the section and the text of the list. Its text appears in an 8pt font of Arial or any sans-serif font available on the system. You may assume that the general overview section will always be taller than the section of reviews to its left.
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 10pt 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.
Below the reviews is a bar of centered text indicating reviews "(1-10) of 88", with a background color of #A2B964. It is placed directly next to surrounding content. 5px separate the edge of its text and the element's own outer edge. You may not include W3C validator buttons in the page.
All other style elements on the page are subject to the preference of the web browser. Note: 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.
Additional Features:
1. Top banner does not scroll: The "Rancid Tomatoes" banner across the top of the page should remain fixed at the very top of the page, even after scrolling. To keep the top banner from initially obscuring the "TMNT" heading, give the TMNT heading a top margin of 72px for separation.
2. Small white text after 33% rating: After the large red number 33 in the 33% rating, place small white text saying, "% (out of 88 reviews)". This text should appear in a white 8pt font. To implement this you will have to add this text to the HTML content of the page; that is fine.
3. Rounded corners: The overall content section should have a 20px rounded corner radius on its borders. Each review quote bubble should have a 10px round radius.
4. Favorites icon ("favicon"): Set the page to have a "favorites icon" of rotten.gif, located in the same folder as the other images in this document. You must modify the head of the HTML file to do this.
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:
· tmnt.html
· movie.css, the style sheet for tmnt.html
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. The screenshots in this document were taken in Firefox, which may differ from your system.
Appearance Details:
All images on the page and mentioned in the following text can be found in project folder.
The page's title is: TMNT - Rancid Tomatoes
The page background is moviebg.png. Page text uses 8pt 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 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.) Under 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 3px right and 3px 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 and should be sized large enough to contain all of its contents.
In the overall area there is a 550px-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 (rottenlarge.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 33% overall rating for the film, which is shown in a 48pt 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 8pt font. The quote box has a background color of #E8DC9B, and a gray border, 2px thick. 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 movie on the left side of the quote box, with 5px 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 5px of horizontal space separating it from the text. There is 20pt of vertical space between reviews. (Hint: Paragraphs in movie reviews should be made large enough to contain all their content, including any floating content.)
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. 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. This section is 250px wide, with 10pt between the edge of the section and the text of the list. Its text appears in an 8pt font of Arial or any sans-serif font available on the system. You may assume that the general overview section will always be taller than the section of reviews to its left.
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 10pt 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.
Below the reviews is a bar of centered text indicating reviews "(1-10) of 88", with a background color of #A2B964. It is placed directly next to surrounding content. 5px separate the edge of its text and the element's own outer edge. You may not include W3C validator buttons in the page.
All other style elements on the page are subject to the preference of the web browser. Note: 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.
Additional Features:
1. Top banner does not scroll: The "Rancid Tomatoes" banner across the top of the page should remain fixed at the very top of the page, even after scrolling. To keep the top banner from initially obscuring the "TMNT" heading, give the TMNT heading a top margin of 72px for separation.
2. Small white text after 33% rating: After the large red number 33 in the 33% rating, place small white text saying, "% (out of 88 reviews)". This text should appear in a white 8pt font. To implement this you will have to add this text to the HTML content of the page; that is fine.
3. Rounded corners: The overall content section should have a 20px rounded corner radius on its borders. Each review quote bubble should have a 10px round radius.
4. Favorites icon ("favicon"): Set the page to have a "favorites icon" of rotten.gif, located in the same folder as the other images in this document. You must modify the head of the HTML file to do this.
1 file (2.3MB)
