Objective Your task is to use HTML5 and CSS to build and publish to your webhost account a semantically correct webpage listing the four 21* century US Presidents. The learning goals of this assignment are: To gain deeper understanding of semantic design principles, and exercise that understanding. To begin working with an external CSS file, text decoration properties, and the box model. To introduce the basics of Flexbox To begin practicing the use of em units. . . Task Build a simple HTML file with a heading that states "21st Century U.S. Presidents. Then list the names of the four presidents each in his own paragraph. The structure for this is an article wrapper around all the content, with child elements of h1 and p. Do not include any other HTML markup. Give each element a class name that semantically represents what the element means. Use CSS flexbox properties to organize the elements as follows. 21st Century U.S. Presidents George W Bush Donald Trump Barack Obama Joseph Biden Decorate your page using css text decoration and box model properties as described in the specifications below. All sizing on this lab must use either em or percent units. Use of pixels and other units is prohibited. See the appendix to this document for more information about ems. Specifications 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 slate. 2. Use CSS box model properties to draw a border around each President. You have complete control over how you style that border. 3 Do NOT use the width property to set the width of your president boxes. Instead, use the third value of the flex: property. I recommend setting it to 34%. 4. Add at least lem of padding and at least lem of margin inside and outside each of the presidential borders. IMPORTANT: horizontal padding + border + margin adds to the element's width and must be considered when calculating how much horizontal space an element will take up.? [Do not use the declaration box-sizing: border-box;] 5. You may add height or additional vertical padding to your president boxes if you wish. 6. Set a font-family for all the text in the document other than the browser default font. Declare three families in your rule (with the latter two being fall back choices.) Optional: you may use different font-families for the heading and presidents. You may use different font-families for each political party of President. 7. Increase the font-size of the heading text to a size you find aesthetically pleasing. Increase the font-weight of the heading text. 8. Horizontally center the text in all the elements using css. 9. Use line-height to increase the line-height of text to 1.5. 10. Color the Democrat presidents (Obama/Biden) blue and the Republican presidents (Bush/Trump) red. 11. As Biden is current President, italicize him (using CSS). 12. Optional: You may (but are not required to) make political commentary by using css to underline presidents you like and strikethrough presidents you don't like. 13. Resist the urge to add additional HTML markup or additional presentation complexities to your Lab 3 solution Overarching Constraints 1. As always: the webpage must be built using only HTML5. You are not permitted to use CSS nor JavaScript at all. You are not permitted to build in XHTML or HTML4.01. Any use of

or or

---

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