CSS Placement

This is an exercise in object placement. You should create something similar to the page shown in class. It looks like this:

You should create a very similar page with three groups of objects. Feel free to change the colors or reorder the areas, but the shapes are required, and at lest three in each area. Each group should have its own color, different from the others. The areas should be about equal width. Your page should show the three areas at the top as this does, in a box which is the width of the page, and some reasonable fraction of the vertical space. When you point to one of the groups, all of its shapes should change color.

1. Use only HTML and CSS. No JavaScript.
2. Do not use any external libraries.
3. Do not use any images. All the shapes are divs, or some other element.
4. The rectangles (or horizontal bars) should stack. The stack should be centered horizontally and vertically.
5. The circles, in their area, should be a series of increasing sizes, and fall along a diagonal line, and the group should be centered horizontally and vertically.
6. The half-round and rectangle stack should be as shown.
7. When the page is resized, the areas and shapes should resize proportionally, in each dimension, except that the circles should stay round.

I made the outer box 100% wide, and gave a height in vh. That let me use percent sizes for the boxes inside. I also used vh and vw inside. Either will do for many things.

I used calc in several places, particularly to center things.

Post your solution on your Sandbox account, paste the URL here and send it.