(Recycled parts from previous projects. All images taken by me.)
The background color of the page will change (along with the flexbox and grid container color) depending on what device/ what browser window width you are viewing this page on. If you are viewing this page on a desktop the background will be white, on a tablet or slightly smaller window size the background will be a pale blue, and on a mobile device the background will be a slightly darker shade of light blue.
Box 1 starts at column 1, is 8 columns wide, and 1 row tall.
Box 2 starts at column 4, is 5 columns wide, and 2 rows tall.
Box 3 starts at column 1, is 3 columns wide, and 3 rows tall.
Box 4 starts at column 9, is 4 columns wide, and 3 rows tall.
Box 5 starts at column 4, is 9 columns wide, and 1 row tall.
(also an example of a media query) Box 1 takes up 2 columns in a desktop layout, 3 columns in a tablet layout, and all 6 columns in a mobile layout.
The images in this flexbox automatically wrap around as the page width grows/shrinks.
This image only takes up 25% of the page width.
The box that has been present on the bottom right corner of the page uses fixed positoning.