For this exercise, please first download these files.
Once you unzip the files, you will see that there is
- an index.html file,
- a folder of images,
- a screenshots folder,
- a file called index-not-marked-up.html.
There will be two ways to do this exercise:
- CSS Emphasis: the index.html file has most of the HTML & the content for the page. You will need to add some more html, however. The exercise done this way, in other words, primarily tests your CSS.
- HTML & CSS Emphasis: the index-not-marked-up.html file has almost no HTML in it. You will need to add the HTML. The exercise done this way, in other words, tests both your HTML and your CSS.
Whichever way I have asked you to do the exercise, please consult the screenshots, and the information below, and build the page and its responsive states as closely as possible.
If doing the CSS-Emphasis task, you may change any of the HTML you were given.
Typography
The fonts used are from Google: spectral for all text, except spectral sc (small-caps) for headings. You choose the appropriate weights.
The Header Area
The text of the word EATERY is an SVG graphic. For semantics, there is also actual text in the h1. Hide the text while keeping it accessible.
The hover states are shown in the screenshots. They occur at small and large screen sizes.
Make the links go to their respective sections of the page when clicked (ie clicking LUNCH will take the user to the LUNCH menu).
The Food Menus
The food menu sections each have three tables. Each section also has a background image (named for the section). The background images will exhibit the parallax effect: as each section scrolls, it will reveal more of the background image. The box will move, but the image will not. The background image will no longer appear on screen when its associated box is no longer on the screen.
The FOOTER Menu
In the footer is another menu. It shows up only at phone size. The phone link must dial the number if tapped on a phone. The other three links will take the user to the associated meal type menu.
The Location / Contact Area
Included in the HTML file is a stylized Google map. It will appear underneath the “contact details” text box. And it will still be operational, meaning that the user can grab it and move around on the map.
The Staff Area
Consult the screenshots, and make the staff area layouts as close as possible to how they are in the screenshot.
Marks Distribution
If this is a test, the marks distribution is as follows. If it’s a lab exercise, it’s just out of 1 mark.
| Header (and Footer), including Navigation and JS | 25% |
| Food Menu Areas | 15% each |
| Staff Area | 15% |
| Location / Contact Area | 15% |