First please download the starter files and the screenshots.
If this is a test, talking to anyone but me will result in a score of “0”.
In the download is an HTML file. I have put some of the HTML in. You will need to put in a lot more. Make sure that you read through the entire exercise before starting your coding.
In the FOOTER of that document, please add your name and computer login ID.
Typography
The font used for the site title, site description, and menu items is the google font Kirang Haerang. All other type is the traditional georgia font-stack.
Responsive States
There are three responsive layouts: small, medium, large.
Please consult the screenshots.
The Header Area
Anything that is a link (site-title, cities, contact, about, etc) in the header can be a testing link (#).
The site-title color and its background-color reverse on hover. This is the h1 at the top of the document.
Other links in the header become yellow on hover.
When clicked, the CITIES menu item will reveal a submenu (or individual cities). Consult the screenshot for layout. This will require JavaScript.
Everything in the header is perfectly centered.
The text of each article
Here are the text features you need to reproduce:
- With the Feature Article, the text is always visible, styled as in the screenshots
- With the other articles, the article-title (h2) appears in the top right of the article, sitting on the image.
- In the small view, the article-text (p) appears below the picture.
- In the medium and large views, the article-text is hidden and appears only on hover.
- When visible on hover, that article-text will be horizontally and vertically centered.
- The article-text font size is bigger in the large view.
- The article-title is always visible. It does not get covered by anything at all time, including the hover sates.
HINT: you do not need to use JavaScript for the Hover states. Descendent selectors and the :hover pseudo class are all you need.
Background Colors For The Hover States
Each city’s hover background color is translucent (partially see-through). The colors for each city are as follows. You will need to figure out exact color values:
- Tokyo: always translucent orange
- London: always translucent hotpink
- Paris:always translucent red
- New York: always translucent blue
To repeat: the hover revealing of the article text occurs only in the medium and large layouts.
MARKING METRIC
| Header | 2 marks |
| Menu Reveal | 4 marks |
| Phone Layout | 2 marks |
| Medium Layout | 3 marks |
| Desktop Layout | 4 marks |
| Article Text Hovers | 5 marks |
When done, please hand your work into the studentshare folder for this class. You do not need to rename the folder.