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, and a screenshots folder.
The index file has most of the content for the page.
You will need to add:
- a stylesheet
- icon fonts for the top and bottom menus
- any other html that helps your styling
- if we have done JavaScript in class yet, a script for hiding and revealing the top menu. If we haven’t done JavaScript yet, don’t worry about that part.
Please consult the screenshots, and the information below, and build the page and its responsive and interactive states as closely as possible. 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.
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).
At phone size, the top menu gets hidden. Clicking the MENU button will reveal the menu. Clicking it again will hide the menu again.
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. This section will require use of the various CSS background- properties.
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% |