First, please download the starter files and the screenshots.
Then watch this Loom video to see the layout you need to create.
You must use CSS Custom Properties (CSS Variables) in this exercise. The minimum requirement is that all references to fonts and colors must be done with variables.
Use a mobile first methodology to compose your page.
Preliminary Information
- Serif Font: Crimson Text ( google )
- Sans-Serif Font: Bebas Neue ( google )
- Accent Color: Firebrick
- Font Color: Black
- Light Color: White
- Light Blue: #dde (used in Music section)
All of the above values must be stored as CSS Custom Properties (CSS Variables).
Any uses of them in your CSS, including in gradients, must by via the variable names.
Task One: Markup
(10 marks)
Examine the screenshots and the video, then markup the document with semantic and accessible HTML.
Note that there are a few places in the FILMS area where text needs to be hidden accessibly — not seen by sighted readers, but readable by screenreading software.
Task Two: Sections
(10 marks)
Each section of the page will take up the full height of the browser.
You can accomplish this through the use of vh widths.
Each link in the Navigation will link to its respective section of the page.
The scrolling is created with the use of the CSS scroll-behavior property, not the transition property.
If you have not used this property before, google it.
Task Three: Films
(20 marks)
Examine the screenshots and movies.
There are three main responsive states.
Note that the movie titles, because of their relatively large font size, will occasionally wrap at the smallest screen size.
This is fine, but make sure that you nicely package each typographic piece of content. Examine how wrapped movie titles look in the smallest screenshot.
Task Four: Music
(10 marks)
Examine the screenshots.
Markup this content in a logical manner.
The “dotted” background is created with CSS Gradients.
Task Five: Contact
(10 marks)
The three images used in the contact section come from the posters-webp folder. Use the same images as in the screenshots.
Make sure that we see approximately the same parts of the image as as shown in the screenshots.
Make sure that you preserve and enhance readability through your styling efforts.
Mark Pt Six: CSS Variables
(10 marks)
Mark Pt Seven: Typography
(10 marks)
What to Hand In
When you are done, please rename the project folder to the following:
yourname-jarmusch-films
and then zip the folder up and hand it in to Brightspace.