Exploring Gradients
Instructions: In this exercise, you will explore how to work with different kinds of gradients.
You will discover how to modify linear gradients and how to create angled gradients, diagonal
gradients, radial gradients, and gradients with multiple colors. The completed webpage is

shown in Figure 6–55.

Perform the following tasks:
1. Open extend06.html in your browser to view the webpage. Adjust the browser 
    window to a desktop viewport.
2. Open extend06.html in your text editor and modify the comment at the top of
    the page to include your name and today’s date.
3. Open the styles06.css file from the extend\css folder. Modify the comment at the top
    of the style sheet to include your name and today’s date.
4. In the styles.css fille, add a linear gradient to the background for the #gradient1 selector.
     Include comments to note which prefix is needed for each browser:
           background: -moz-linear-gradient(to right, #000066, #99FF99 25%);
           background: -o-linear-gradient(to right, #000066, #99FF99 25%);
           background: -webkit-linear-gradient(to right, #000066, #99FF99 25%);
          background: linear-gradient(to right, #000066, #99FF99 25%); /* List standard syntax last */

5. Save your changes and view extend06.html in your browser to view the changes.
6. In the styles.css file, add a linear gradient to the #gradient2 selector, but style it to the left,
    using the same colors, and 10% as the color stop. Add the same linear gradient with a prefix for
    all major browsers and include comments to note the prefix needed for each browser.
7. Save your changes and view extend06.html in your browser to view the changes.
8. In the styles.css file, add the following radial gradient to the background for the #gradient3 selector.
     Include comments to note which prefix is needed for each browser:

     background: -webkit-radial-gradient(#006699, #00CC00, #FF0000);
     background: -o-radial-gradient(#006699, #00CC00, #FF0000);
     background: -moz-radial-gradient(#006699, #00CC00, #FF0000);
   background: radial-gradient(#006699, #00CC00, #FF0000); /*List standard syntax last */

9. Save your changes and view extend06.html in your browser to view the changes.
10. In the styles.css file, add the following repeating radial gradient to the background for
      the #gradient4 selector. Add the same repeating radial gradient with a prefix for all
      major browsers above the standard syntax and include comments to note the prefix
      needed for each browser:

      background: repeating-radial-gradient(#006699, #00CC00 10%, #FF0000)
      15%; /* List the standard syntax last */
11. Save your changes and view extend06.html in your browser to view the changes.
12. In the styles.css  file, add the following linear gradient to the background for the #gradient5
      selector. Add the same linear gradient with a prefix for all major browsers above the standard
       syntax and include comments to note the prefix needed for each browser:
        background: linear-gradient(to top left, #FFFF00, #FF6600, #006699,
         #3333FF); /* List the standard syntax last */
13. Save your changes and view extend06.html in your browser to view the changes.
14. In the extend06.html file, add a heading three element with title above each div
      gradient element.
15. Save your files and submit them in a format specified by your instructor.
16. In this exercise, you explored more about gradients and used percentages to set color stops.
      stops. Use your browser to research how to set gradient color stops using percentages.
      Include a description of your findings.