Complete the following: 1. Using your editor, open the sp_home_txt.html and sp_layout_txt.css files from the html03 > 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. Study the content and structure of the file and then save your changes to the document. 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. Create a style rule to apply the Border Box model to all header, ul, nav, li, and a elements in the document. 6. Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) 7. Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. 8. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: a) floats the navigation list on the left, b) sets the size of the left and right padding to 2%, and c) sets the width of the navigation list to 30% of the width of the header. 9. The hypertext links in the navigation list should be displayed as blocks. Create a style rule for every a element in the header navigation list that displays the element as a block with a width of 100%. 10. Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin. 11. Go to the Topics Styles section. This section sets the styles for a list of four topics describing what the company is offering. Karen wants this list to also be displayed horizontally on the page. For list items within the ul element with the id topics, create a style rule to: a) display the items as blocks with a width of 20%, b) float the items on the left margin, and c) set the size of the left margin space to 0% and the right margin space to 1.5%. 12. Karen wants the topics list to be well away from the left and right edges of the page body. In the same section, create a rule that sets the size of the left margin of the first item in the topics list to 7.75% and sets the right margin of the last item to 7.75%. 13. In the same section, create a rule that displays the image within each list item in the topics list as a block with a width of 50% and centered within the list item block. (Hint: Set the left and right margins to auto.) 14. Go to the HR Styles section. The hr element is used to display a horizontal divider between sections of the page. Add a style rule that sets the width of the hr element to 50%. 15. Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the w…
Looking for solution of this Assignment?
WHY CHOOSE US?
We deliver quality original papers |
Our experts write quality original papers using academic databases.We dont use AI in our work. We refund your money if AI is detected |
Free revisions |
We offer our clients multiple free revisions just to ensure you get what you want. |
Discounted prices |
All our prices are discounted which makes it affordable to you. Use code FIRST15 to get your discount |
100% originality |
We deliver papers that are written from scratch to deliver 100% originality. Our papers are free from plagiarism and NO similarity.We have ZERO TOLERANCE TO USE OF AI |
On-time delivery |
We will deliver your paper on time even on short notice or short deadline, overnight essay or even an urgent essay |