First, please download the starter files and the screenshots.
Then watch this Loom video to see the layout you need to created.
You must use SASS in this exercise.
Make a logical project structure. The minimum requirement is that you use variables for all colors and fonts.
Use a mobile first methodology to compose your page.
Preliminary Information
- Serif Font: Source Serif ( google )
- Sans-Serif Font: Bebas Neue ( google )
- Accent Color: Deeppink
- Dark Color: Black
- Light Color: White
- Section-Title Symbol Unicode Value: \2749
All of the above values must be stored as SASS variables.
Any uses of them in your website must come via SASS.
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 AWARDS 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 window.
Each clicked link in the Navigation menu will cause the page to scroll to its respective section of the page.
You can accomplish sizing this through the use of vh widths.
The scrolling is created with the use of the CSS scroll-behavior property, not the transition property.
If you have not used that property before, google it.
Task Three: Header
(10 marks)
The layout of the header content is essentially the same through all screensizes.
However, if you resize the height of the browser, you will see that the image shrinks as the height decreases.
Similarly, the size of Jim Jarmusch’s name also shrinks as the page height reduces.
Task Four: Awards
(10 marks)
Examine the screenshots and movies.
There are three main responsive states.
Task Five: Posters
(10 marks)
Examine the screenshots.
Insert the first twelve images from the posters-webp folder.
There are three responsive states: two-column, four-column, and six-column.
Task Six: 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 Seven: SASS
(10 marks)
Mark Pt Eight: Typography
(10 marks)
What to Hand In
When you are done, please rename the project folder to the following:
yourname-jarmusch-awards
and then zip the folder up and hand it in to Brightspace.