HTML/CSS Layout Exercise (GOAT) 2025 – WRMF.ca (Transferred)

If this is a test, the points are listed. If this is a weekly exercise, it’s out of 1 mark, as usual.

Download the starter content.
Download the screenshots.
Rename the folder firstname-lastname-midterm
Make the following files: index.html, style.css, and main.js
The starter content has a logo file and an html file with 14 tables. You will use the tables in the exercise, in the index file.
Use the system ui font stack for all typography.
Pay close attention to font-weight and proportions
Always consult screenshots and movie. The text is to explain them, but not every single detail.

Responsive Layout Summary

At small size, single-column stack
At desktop size, header is on left side. In this layout, header width remains the same at all screen sizes.
At desktop size, main content area goes 1, 2, then 3 columns. It never goes more than 3 columns, regardless of screen width.
Maintain readability and alignments at all times.

Site Name: Midterm.
Site Description: Just another WordPress Site
Goat logo image, made greyscale
Menu area with four sections. Each link has three words
– Section 1: two links
– Section 2: four links
– Section 3: three links
– Section 4: two links
Button with hamburger menu icon, MENU text, up arrow
Pay attention to spacing and alignments.
Consult screenshots and movie.

On hover, Goat logo turns original pink color.
On hover, Menu button turns green. Choose a nice shade of green to go with the logo’s pink.
On hover, each hovered text link is enclosed in a set of square brackets ( [ ] )

Note: the Visual Studio Code Random extension will allow you to generate the random content in the meta area.

14 articles.
Each article has a unique three-word random title
Each article has a unique feature image: 2000px by 1334px
Each article has a meta area
Meta area has unique author names
Meta area has unique short date
Meta area has random category from politics, music, art, movies, or food
Each of the three meta items has an appropriate icon
Each article has a paragraph of 22 unique random words
Each article has a continue reading link
Each article has one of the tables (from the html file in the starter content). Do not use the same table in multiple articles.

At desktop size, every seventh article (starting with the first) always takes the entire row entire width of the articles content area).
Code this in such a way that if we added additional articles, they would follow this pattern.
Consult the screenshot for similarities and differences from general article style

When any part of an article is hovered over (at any size), the table fades in over the image in the article.
Regardless of screen or article size, the faded in element is 1rem away from the edge of the image in the article.
Pay close attention to alignments: consult screenshots and in-class movie.

Hide the menu accessibly. No display:none.
When the MENU button is clicked, make the menu appear (5 Mark bonus).
When the menu is visible, flip the arrow in the button (3 Mark bonus).
Make the menu appearance take place with a transition (10 Mark bonus).
(The button will appear to slide down the page as the menu appears.)
Make the header content not scroll at desktop size.
For appearance and behavior, consult screenshots and in-class-movie (7 Mark bonus).

If you can’t make the button-click-causes-menu-to-appear effect work, make sure that the menu is not hidden.

Hints for the bonus section:

Study the visually hidden code.
Google interpolate-size (be sure to test in Chrome. This is not yet supported by all browsers).
Note: you do not necessarily need to use interpolate-size here. Other methods are possible.