First, please download the starter files.
In this exercise, you will work with grid to produce the following layout:
And here is a Loom video describing the layout
To make this exercise more interesting, you may not edit the HTML—only the CSS.
Note: the HTML is already “wired up” with the Google font Oswald, and a link to the stylesheet.
If JavaScript is supplied in your download, you do not need to write the JS. Otherwise, you will need to (and you can add the link to the HTML file).
Requirements
- The layout is completely responsive: the content sits in the vertical and horizontal middle of the page and changes size in response to browser window width
- Even the font-size is responsive, scaling with the width
- You may not use css positioning
- The h1 box is not the same width or height as an image box: it is 2/3 the size.
- You may not edit the HTML
Useful Things
- CSS Grid, obviously
- The Grid align- and justify- properties
- The CSS aspect-ratio property
- Relative units like percentage, and fr.
- Z-index (even though you can’t use positioning)
- Subgrid
- Named Lines will help too — very much!
And don’t forget to:
- Obsess over the details
- Have fun