Lab 4.5 - Position with Quokkas! 😍
In this lab, you will work on using different CSS position values to accomplish frequent, if quirky layout tasks.
Categories:
less than a minute
Quokkalot
⚠️ GitHub Classroom
This page is just to keep us all in communication. You must use the GitHub classroom link provided by your instructor for this assignment (from which you’ll get the starting code as well as the final version of the specs drafted below).Specs
- mark up the text in the html file (modified from wikipedia) with the appropriate tags
- the submission must pass html validation
- tell the html file to use the provided css file
- make the page look like the provided image, specifically:
- The main text has a width of
50rem. - the figures have a width of
43rem. - The main text and figures are centered horizontally in the page.
- The margin notes have a width of
12.5rem. - The margin notes are “anchored” against their containing paragraphs.
- The margin notes have a bg color of 🐑 (
#BABABA😂). - The margin notes have a text size of
0.75rem. - The gap between the main text and the margin notes is
1rem. - remove the placeholder style that makes the page awful (but totally helps ensure you’ve told the html file to use the css file)
- captions for the images should have a text size of
0.5rem.
- The main text has a width of
Acknowledgements
With thanks to Dr. Chris Johnson for thinking this one up.
Last modified August 11, 2024: moved a bunch of things for archival purposes (6652bbe)