Independent Challenge 1 Sarah Nguyen, the owner of the Spotted Wren Garden Center, has asked you to enhance the layout of the website you created for the store. You start by implementing the new layout on the main page.
a. In your editor, open HTM_D-6.html from the IC1 folder where you store your Data Files for this unit, enter your first and last name and today’s date in the comment section, save the file as index.html , then repeat for HTM_D-7.css, saving it as styles.css.
b. In styles.css, create a reset styles comment, then add a style rule under the comment that sets border, margin, and padding to 0 for the article , body , div , footer , header , h1 , h2 , h3 , and p elements.
c. Below the reset styles style rule, create a global styles section, set the bottom margin of h2 and h3 elements to 0.4em, then set the top and bottom margins of p elements to 0.4em.
d. Set a bottom border on the header element of 3px solid red, then use the same settings for the top border of the footer element and the left border of the article element.
e. Set the maximum width of the element with the class value container to 640px, then set the width of the article element to 52% and create a style rule to set the aside element to 38%.
f. Float the aside element to the left and the article element to the right, then set the footer element to be displayed only when the left and right margins are clear of floated elements.
g. Set the left and right margins of the element with the class value container to auto .
h. Add 0.5em padding to the header and footer elements, and 2% padding to the article and aside elements.
i. Create a style rule for p elements within the article element, then set the left margin of these elements to 1em.
j. Save your changes to styles.css, open index.html in a browser, then compare your document to FIGURE D-28 .
k. Open index.html on a smartphone and verify that the layout is displayed as expected.
l. Validate your HTML and CSS code.