Lab 2: 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–55. The Quote page
with the pop-up message is shown in Figure 10–56.

Instructions: Perform the following tasks:
1. Save the images within the lab2\images folder from the Data Files for Students to your lab2\images folder.
2. Open the index.html document and update the comment at the top of the page to includetoday’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 oat 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 oat
      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 overow 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–55.
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 onclick 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–56.
20. Validate your HTML code and fix any errors.
21. Validate your CSS code and fix any errors.
22. Submit your assignment in the format specified by your instructor.
23. Use your browser to research the term, Social Media Marketing Expert. Explain the responsibilities for this job.