Hi.

I need the solution code for this case : "New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 3 Case Problem 1 i.e Slate & Pencil ". The instructions are different from those of 7th edition, In the 8th edition instructions , it is asking us to go by Grid layout, and every one has pasted here the code for the previous edition. I am done with almost everything except the instruction no.13. I can't figure out how my six aside elements be appeared in two columns with the nth-of-type(odd) property etc etc, though I have tried it.

Project 3 Slate & Pencil Tutoring Description Pts Your Score 1. Using your editor, open the sp_home_txt.html and sp_layout_txt.css files from the html03 c case1 folder. Enter your name and the date in the comment section of each file, and save them as sp_home.html and sp_layout.css respectively.

2. Go to the sp_home.html file in your editor. Within the document head, create links to the sp_base.css, sp_styles.css, and sp_layout.css style sheet files.

3. Go to the sp_layout.css file in your editor. Go to the Window and Body Styles section. Create a style rule for the html element that sets the height of the browser window at 100%.

4. Create a style rule for the page body that sets the width to 95% of the browser window ranging from 640 pixels up to 960 pixels. Horizontally center the page body within the browser window. Finally, Karen wants to ensure that the height of the page body is always at least as high as the browser window itself. Set the minimum height of the browser window to 100%.

5. Add a style rule to display all inline images as blocks.

6. Within the CSS Grid Styles section create a style rule that displays the body element as a grid with four columns of length 1fr.

7. Create a style rule for the img element with id "logo" so that the logo image spans three columns and has a width of 100%.

8. For the horizontal navigation list and the footer element create a style rule so that those elements span four columns. Create a style for the aside element to span two columns.

9. Within the Horizontal Navigation List Styles section create a style rule for li elements nested within the horizontal navigation list that display each element as a block with a width of 12.5% and floated on the left margin.

10. Within the Section Styles section create a style rule for inline images within the section element that sets the width of the image to 50% and centers the image using a top/bottom margin of 0 and a left/right margin of auto.

11. Create a style rule for paragraphs within the section element that sets the width of the paragraph to 70% and centers the paragraph using a top/bottom margin of 0 and a left/right margin of auto.

12. Go to the Customer Comment Styles section and create a style rule for the aside element setting the width to 75% and the bottom padding to 30 pixels.

13. The six aside elements will be displayed in two columns. For oddnumbered aside elements, use the justify-self grid property to place the element on the end (right) margin. (Hint: Use the nth-of-type(odd) pseudoclass to select the odd-numbered aside elements.)

14. Float inline images nested within the aside element on the left with a width of 20%.

15. Float paragraphs nested within the aside element on the left with a width of 75% and a left margin of 5%.