The overall page has a background image of background.png. Text on the page uses an 8pt font. The preferred fonts for text are Verdana, Tahoma, or any sans-serif font available on the system. The overall page body has no margin or padding, so its contents stretch to the very edge of the browser window.
The top of the page contains an image banner. The center of this banner is the image banner.png. Behind this banner the image bannerbackground.png is repeated horizontally across the entire length of the page. Each of these images is 50px tall. (Hint: To make the banner stretch all the way to the edges of the page, use the bannerbackground.png as the background image of a block element that is behind the 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.
Below the main heading is the page's overall content area, containing an overall 32% 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 itself 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. (See textbook section 4.3.3 on making contents fit into a container.)
Within the overall content area, there is a 550px-wide left-central section that contains the overall "rotten" rating of 32% and the critics' reviews of the movie. The section is topped by a smaller section containing a large "rotten" image (rottenbig.png). Behind this the image rottenbackground.png repeats horizontally across the entire length of the section. Each of these images is 83px tall. This is followed by the 32% overall rating for the film, which is shown in a 48pt red bold font, and a message that there are 88 reviews total, which is shown in the standard 8pt font in white. (Hint: It can be tricky to get the large "rotten" image and the 32% rating text to line up vertically properly. Try adjusting vertical alignment and/or making some content float.)
Below the 32% 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. (See class notes or just goggle on creating multi-column layouts.)
Each individual review consists of a box in which the reviewer gives a quote about the movie, in bold 8pt font. The quote box has a background color of #E1D697. The box has a gray border, 2px thick. 8px separate the quote box's content from its border. Each quote box also contains an icon showing whether the reviewer liked (fresh.gif) or disliked (rotten.gif) the movie. These images are on the left side of the quote box, with 5px separating them from the text to their right. Text wraps around these images as needed.
The reviewer's personal information follows underneath the quote box, including the reviewer's name and publication in italic. A reviewer icon (critic.gif) is also shown, to the left of the name/publication text, with 5px of horizontal space separating it from the text. There is 3em of vertical space between reviews. (Hint: Paragraphs that are part of movie reviews should be sized large enough to contain all of their content, including any floating content. See textbook section 4.3.3 on making contents fit into a container.)
To the right of the critics' reviews is a General Overview section of the page with a list of information about the movie. This section is 250px wide, and there is 10px of space between the edge of the section and the text of the list. The overview's content uses a background color of #A2B964. Its text appears in an 8pt font of Arial 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 1em of vertical separation between it and the element that precedes it. The bottom of this section contains a link to the movie review web site, https://savedelete.com/internet-tips/movie-reviewwebsites/36302/.
Below the set of reviews is a bar with centered text explaining that the page shows reviews 1-8 of 88. This bar has a background color of #A2B964 and is placed directly up against its surrounding content. 5px separate the edge of its text and the element's own outer edge.
The bottom right corner of the page has a section containing two links to the W3C validators. These are the same images and links as used in the previous assignment, with no borders. The W3C images are always present at the page's very bottom-right corner, both when the page first appears and after any scrolling.
All other style elements on the page are subject to the preference of the web browser. The screenshots in this document were taken on an older browser of Firefox, which may differ from your system. The web page's title text should be DGMR - DA Gucci Movie Review . The page should have a "favorites icon" or "favicon" of rotten.gif from the image directory shown previously.
Built With
HTML
CSS
Output
Contact us for this Web assignment Solutions by Codersarts Specialist who can help you mentor and guide for such Web assignments.
If you have project or assignment files, You can send at contact@codersarts.com directly