I am providing you with six image files to use. I recommend you build your HTML from the February 8 class demonstration (in class Workshop 6) of the three stooges. Please your images inside of figures so you are able to crop the image bottoms to achieve consistent image height. The wives names are: Catherine of Aragon Anne Boleyn Jane Seymour Anne of Cleves Catherine Howard Catherine Parr Place all of your content into a flex-container and use flexbox to manage your general layout. Give your container a fixed width at each of the three breaks. Use two media queries to manage your two breakpoints. You are permitted to use pixels for screen width in the @media rule. If you use ems, remember your em value is from the root em for an @media rule. You determine at what width to set your break points to achieve the 6, 3, 2 column layouts. You determine what width to make the flex-container at each of the three sizes. All of this will be based on how wide you make each individual queen's image. Note that I set each image to be 240px wide, but I have a screen that is 1920px wide. If your desktop screen is smaller than mine, you may wish to start with smaller individual images. Note that I've resized my heading text so that it always fits on one line, but is large and bold enough to stand out. I used a Google font to get a look I like. Note that I have some horizontal spacing between items (achieved without padding or margin) and similar vertical spacing (achieved with a margin). My complete CSS (beautified, but without comments) is 54 lines long You may make all other aesthetic choices on your own. 1. Do not rely on any browser default css. To ensure this is the case, include the following link element in your HTML ABOVE your link to your own CSS file: This "reset" file essentially turns off all the default CSS and leaves you to start with a blank presentation state. NOTE: If you prefer to do so, you are permitted to download/create your own reset file rather than use one from the CDN. Some people like to customize their reset files. 2. Do NOT use Pixel as a unit of measure anywhere in your CSS. All of your sizing must be done in Em, Percent, ww, or VH. Document both your HTML and CSS with source code notes. I haven't emphasized this point until now, but your work should be documented as though someone else is going to maintain it. Hint: What does that mean? If you are inheriting someone else's code and are responsible for maintaining, fixing, updating it: what do you want them to tell you in code comments so you can understand what is going on? if you desire guidance on how/what to document, please refer to the note at bottom of this page. 3. As always: the webpage must be built using only HTMLS. You are not permitted to use JavaScript at all. You are not permitted to build in XHTML or HTML4.01. Any use of or

---

must be for semantic, not presentational purposes. Beyond these constraints, you may use any other HTML5 element you deem semantically appropriate 4. Your page layout MUST be achieved using Flexbox. You may NOT use float or position or table or display: inline-block to organize the presentation of your content. 5. The of your HTMLS file must contain: a. A meta element naming the Unicode character set you want the browser to use (UTF-8). b. a