EECS 493 Assignment 1 (JavaScript代写,CSS代写,HTML代写,北美程序代写,美国程序代写)

EECS 493
Assignment 1 Released:

The objective of this assignment is for you to gain practical experience in building common user interface layouts and features using HTML and CSS. No external library is allowed unless instructed to do so.

We would like you to create a website displaying the Tony Awards winners and nominees from 2019. The website has 4 main components
[1] A fixed header with a title and the Tony Award images
Event information about the 2019 Tony Awards
[2] A list of Actress (Leading Role - Musical) nominees
[3] A list of Actor (Leading Role - Musical) nominees
[4] A selective list of award categories, with a link to an official Tony Awards webpage.

You can find the information for all the nominees of a specific category in 2019 by searching through this page: https://www.tonyawards.com/nominees/ .

Notes:
Please refer to this Piazza post for modifications and clarifications.
You are free to use any browser during development. However, please make sure that your application (webpage) behaves properly on Google Chrome, which is currently the most popular web browser. Your graders will use Chrome (hint).
Please check the rest of the document for screenshots and detailed requirements. Here is a screenshot of what the page should like on a wide monitor (or if you zoom your browser out a lot):

Here is what the page should look like on a narrower monitor or when more zoomed in:

Notice here 2 important things:
That the lower 2 sections (Actor and Other categories) no longer appear in the viewport
That the single row of images of actresses has now wrapped around to a second row. If we resize the browser to make it narrower, the images should continue wrapping around. See the attached video to understand the full expected wrapping behavior.

Here is what the page should look like if we make the browser narrower:

Note that the Tony trophies remain on the right and left sides of the header regardless of the viewport width.

Now, if we scroll down in the browser, this is what the page should look like:

If we scroll down to the bottom, this is what the page should look like:

Note here that the images for award categories and content should scroll, but the header at the top should remain fixed. See the attached video to understand the full expected wrapping behavior.
Everything listed below, unless labeled as “Suggested”, is required. Please be sure to examine the attached video closely to understand the full expected behavior. However, here is a list of some of the key items/behaviors we expect:
General
Do all styling and layout in a separate CSS file, style.css. - 15 points off if not followed.
Use relative paths for images. - 25 points off if not followed.
Whole page - 4 points
Use the “Poppins” font throughout. See the following link about how to use this font through Google Font: https://developers.google.com/fonts/docs/getting_started
Some space between the content and both (left and right) sides of the page, except the header (using the full width of the viewport).
Header - 16 points
Fixed header (should remain at the top of the viewport even when the page is scrolled).
Tony trophies should be on the left and right sides of the header, even if the browser is resized.
Make sure the trophies retain their original width/height ratio.
“Tony Awards”, horizontally centered and vertically centered.
Top and bottom borders.
Color
The header: #2C4762
“Tony Awards”: #A1ACD1
Border: #BBBBBB
Suggested styles:
The Header height is 200 pixels
Border width is 3 pixels
“Tony Awards” font size is 40 pixels and is bold
Tony trophy width of 120 pixels
Event information section: 4 points
“Tony Awards 2019” heading: left-aligned, and bold.
Suggested font size is 28 pixels.
“Airing” should be bold, but “Dec. 18, 9 PM ET on CBS” should not be.
There should be some visible distance between this section and the sections before/after so different sections can be separated.
When you first open the webpage (i.e., the scroll position is at the very top of the page), this section should be visible and appear right below the header. It should not appear behind the header.
Actress section - 35 points
When you first open the webpage (i.e., the scroll position is at the very top of the page), this section should be visible and appear right below the event information section. It should not appear behind the header.
“Actress (Leading Role - Musical) Nominees”, left-aligned and bold.
The images for 5 actresses, each with a name and a musical title, separated by “, ”.
The musical title should be in italics, but the name of the actress should not be.
The winner will have the label “Winner” bolded beneath the name and musical title, also horizontally centered.
The combination of name and musical title should be horizontally centered with regard to the corresponding image.
All images (the visible part) should be the same height and width. The images should not be stretched or distorted. Cropping images using CSS is allowed as long as visitors can still see clearly who each nominee is.
When you resize the browser width or height, images should remain the same dimension (height and width).
Actresses are evenly spaced vertically and horizontally, with some small amount of space between them (amount of vertical space doesn’t need to be the same as the amount of horizontal space)
Actresses naturally wrap around to the next row(s) as the browser is made narrower. They should wrap around to the left side first, before moving right (see the attached video).
An actress’s image should be horizontally aligned with the other actresses’ images: every actress who is the X (e.g., 1st, 2nd, etc.) person in each row should appear at the same horizontal position.)
The winner will be highlighted through some visible styling on the border/bounding box (e.g., border with a specific color, #0000FF) to distinguish the winner and the rest of the nominees in the same category. In other words, you are free to choose the styling you like, as long as 1) it is a rectangle shape surrounding all the information for the winner, and 2) it is visible (people can see it easily).
The actresses should all align vertically (i.e., their top edge should all align) even though only the winner has a special styling on the border. See https://stackoverflow.com/questions/8625812/css-hover-border-makes-inline-ele ments-adjust-slightly for a hint.
A line that separates this section and the next.
Suggested styles:
“Actress (Leading Role - Musical) Nominees” font size is 24 pixels.
Actress’s name font size is 18 pixels, so does the “Winner” label.
Musical’s title font size is 18 pixels.
The line (separator) thickness is 2 pixels with color: #BBBBBB .
Image dimensions: 420 pixels x 320 pixels (width x height).
Actor section - 35 points
Much the same as the Actress section.
The actors’ images should be horizontally aligned with the actresses’ images (i.e., the first actor should appear at the same horizontal position as the first actress, the second actor should appear at the same horizontal position as the second actress, etc)
A line that separates this section and the next.
“Other Categories” section - 6 points
“Other Categories” heading, with the exact same style as “Actress (Leading Role
- Musical) Nominees” and “Actor (Leading Role - Musical) Nominees”
Bulleted list of a selection of categories
Book of a Musical
Choreography
Costume Design - Musical
Direction - Musical
Lighting Design - Musical
Musical
Orchestrations
Scenic Design - Musical
Score
...
A link, “See the complete list”, which will open a new tab displaying the official Tony Awards website (https://www.tonyawards.com/nominees/) when a visitor clicks the link.

The particular dimensions you choose (e.g., border width, element width, margin/padding, font size) are not critical. What we care about are the general layout, style, and consistency requirements evident in the screenshots and video provided. For example, we don’t care exactly what amount of space you place between adjacent images, but the space should be consistent across each pair of images.

Small challenge(s) for yourself after you finish the assignment (no points):
Use an alternative to center the text and position the images on both sides for the header.
Use an alternative to layout all the nominees while achieving the required behavior.