First, please download the starter files.
In the zip archive you downloaded is an index.html file and several folders of images. The images are full resolution. On a live site, we would definitely need to size them down.
I have marked up a lot of the HTML file. You will need to add more HTML, a CSS file, and a JS file.
Enclosed with the files you downloaded is a folder of screenshots. Please open all the screenshots and try to recreate the layouts shown.
Some of the characteristics of the layouts as as follows:
The Menu
The menu is hidden by default, at all sizes. Clicking the MENU button will make the menu visible.
The appearance of the menu is seen in at least one screenshot. There is also a hover / tapped state for the links in the menu.
The Gallery
The gallery is hidden at small screen sizes. Clicking the GALLERY button makes the gallery visible.
At medium sizes and above, the gallery is always visible. The GALLERY button is hidden at medium sizes and above.
The gallery button shows up only on small screens, when the gallery is automatically hidden.
The Articles
There are nine articles in the document. Each has a 1px white border. In phone view, only the top and bottom borders are visible.
The Content Areas
At mobile size, almost everything stacks single column. The gallery, however has 2 columns at all sizes.
For the Medium and Larger sizes, there are three main content divisions:
- the gallery, which is in an article
- the three big articles, with images of berlin, paris, and warsaw
- the five smaller articles
This is a complex layout. It doesn’t have to be perfect.
Marking Matrix
| Hiding and Showing | 6 |
| Menu | 4 |
| Mobile View | 3 |
| Medium & Bigger | 10 |
| Validation: NO HTML or CSS Errors | 2 |