Week9 Lab1:

Adding Social Media and a Pop-up Message to Steve’s Screen Services

Problem:

You work for a screening company called Steve’s Screen Services that specializes in screening, cleaning, and repairing screened patios. The company has asked you to create a responsive website. You have already created the website, but now need to add social media icons and links. You then need to style the icons and links. Finally, you need to add a pop-up message to the quote.html page. The home page with the social media icons is shown in Figure 10.1. The Quote page with the pop-up message is shown in Figure 10.2. Figure 10.1 Figure 10.2 Web Design with HTML & CSS3:

Comprehensive, 8th Edition Jessica Minnick; Lisa Friedrichsen ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017 Cengage Learning Australia Instructions:

Perform the following tasks:

1. Download the Week9 Tutorial ZIP file from your Week 9 - Tutorial materials in moodle.

2. Open the index.html document and update the comment at the top of the page to include today’s date.

3. Wrap the content in the footer element within a paragraph element.

4. Wrap the paragraph element you created in the previous step within a div element and assign an id value of copyright.

5. Create a new div element below the div you created in the previous step and assign an id value of social.

6. Create a new paragraph element within the social div and include the text, Follow us at:.

7. Insert an img element below the new paragraph and insert the Facebook icon. Include appropriate alt text. Link the img element to facebook.com.

8. Insert an image element below the new paragraph and insert the Twitter icon. Include appropriate alt text. Link the img element to twitter.com.

9. Save your changes, copy the footer element, and then paste it over the footer element on the contact.html page, the gallery.html page, the quote.html page, and the services.html page. Save all of your changes.

10. In the screenstyles.css file, create a new style rule above the media queries for the #copyright selector, specify a float property with a value of left and then specify a width property with a value of 80%. Include an appropriate comment for the new style rule.

11. In the screenstyles.css file, create another new style rule above the media queries for the #social selector, specify a float property with a value of right and then specify a width property with a value of 20%. Include an appropriate comment for the new style rule.

12. In the screenstyles.css file, in the desktop media query, add the overflow property with a value of auto to the existing style rule for the body element.

13. In the screenstyles.css file, in the desktop media query, create a new style rule for anchor elements within the footer element that specifies a color property and a white value. Include an appropriate comment for the new style rule.

14. Save your changes, open the home page in your browser, and compare it to Figure 10.1.

15. Open quote.html in your text editor and update the comment with today’s date.

16. Create a script element within the head element.

17. Create a function named thanks within the script element that creates an alert message with the text, Thank you for your interest. We will contact you very soon.

18. Add an on click event handler to the submit button that calls the thanks function.

19. Save your changes, open quote.html in your browser, and then click the Submit button to display the alert message, as shown in Figure 10.2.

20. Validate your HTML code and fix any errors.

21. Validate your CSS code and fix any errors.