First, please watch this Loom video description of the task.
Next, please download the screenshots.
In this exercise, you will create a single page site called cranq.
The font throughout is the system-ui stack. Pay attention to font weights.
All text content, except a couple phrases, will be created with Emmet’s lorem functionality. Images will come from picsum.photos.
Name your project folder YourFullName-Cranq.
In the header:
- site name: cranq
- site tagline: piquant productions
- list based menu.
- search field and icon in button with accessible text.
Site name + Site Tagline Behavior
- Site name and Site description scale with screen width
- However, relative sizing and alignment of site name and site tagline will remain consistent at all screen widths
- If the above is unclear, watch the first part of the video.
About the List-Based Menu
- seven items, wrapping on smaller screens
- each item has a font-awesome icon. Search for font-awesome animal icons. You can use any of the free ones.
- each icon has one word of lorem ipsum on top of it. The text box takes the full width, but is perfectly centered vertically relative to the icon. (See fish icon in screenshot).
- each icon has two words of lorem ipsum below it. If a generated phrase is too wide, you can shorten it to one word or use a different phrase.
- the icon and the two text boxes are all inside a testing link (#).
List Menu Behavior
- on hover, the icon and the text below it turns salmon
- on odd link hovers, the icon rotates 45 degrees to the left
- on even link hovers, the icon rotates 45 degrees to the right
- each then returns to initial position. Hover animation repeats infinitely.
Search Field Behaviour
- the button containing the search icon is horizontally centered
- when hovered, the icon turns salmon
- when icon button is clicked, the search field expands to 280px width, with transition
- icon + search field combination is horizontally centered
Hero Area of Site
- Background color is not white. It is off white. You choose the shade of grey.
- Section heading phrase: sunlight danced gently across the field.
- Section heading scales with browser width, but never below 3rem
- Entity is heavy teardrop-spoked asterisk
- Centered text block is 35 words of lorem ipsum.
Articles Area Content
- Background color is not white. It is off white (same as hero area). You choose the shade of grey. Article backgrounds are white.
- Space between articles and at each edge of article area is equal.
- 12 articles
- Articles are a minimum of 300px wide
- Each article has a feature image with a 2:1 aspect ratio (twice as wide as high)
- Each article has heading with six words of unique lorem ipsum
- Each article has 24 words of unique lorem ipsum
- Each article has phrase “read more about:” followed by three words of unique lorem ipsum
- Study screenshots carefully.
- Make sure the area holding the articles never has more than five columns, regardless of screen width
Footer Properties
- Same menu and menu behaviour as in header
- Text Line 1: Exercise completed by your name (make your name salmon colored )
- Text Line 2: For WMDD 4835, Today’s Date
- (The screenshot does not show line 2 exactly.)
Marks Breakdown
This applies only if this is a test. If it’s a regular exercise, the usual 1/1 marking scheme applies.
| Site Branding (Header + Tagline) | 5 marks |
| Header Layout | 5 marks |
| Menu Layout | 15 marks |
| Menu Hovers | 10 marks |
| Search Expansion | 10 marks |
| Hero Area | 10 marks |
| Article Content | 10 marks |
| Articles Area Layout | 25 marks |
| Footer | 10 marks |