Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport. Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background: background: linear-gradient(to right, #67afcb, #1a3e4c 25%);  Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop. Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values. Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values: #e6e6ff #70dbdb #ffffcc #cc6699 Create a style rule for the gradient5 class selector and add the following declaration to specify a repeating linear-gradient for the background:     background: repeating-linear-gradient(#df80ff 10%, #ccffff 20%);  Create a style rule for the gradient6 class selector and add the following declaration to specify a linear-gradient for the background that uses transparency:     background: linear-gradient(to right, rgba(0,0,153,0) 25%, rgba(0,0,153,1)); Create a style rule for the gradient7 class selector and add a declaration to specify a radial-gradient that uses the following three color values: #0000ff #fff #ff0000 Create a style rule for the gradient8 class selector and add the following declaration to specify a repeating radial-gradient for the background:     background: repeating-radial-gradient index.html   Gradients                                              Exploring Gradients                                                         Linear Gradient to right at 25%                                                            Linear Gradient to left at 90%                                                            To Top Left Linear Gradient                                                                         Linear Gradient, Multiple Colors                                                                         Repeating Linear Gradient                                                                         Gradients and Transparency                                                                         Radial Gradient                                                            Repeating Radial Gradient                                                                                   Completed by: Student's Name

Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport. Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background: background: linear-gradient(to right, #67afcb, #1a3e4c 25%);  Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop. Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values. Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values: #e6e6ff #70dbdb #ffffcc #cc6699 Create a style rule for the gradient5 class selector and add the following declaration to specify a repeating linear-gradient for the background:     background: repeating-linear-gradient(#df80ff 10%, #ccffff 20%);  Create a style rule for the gradient6 class selector and add the following declaration to specify a linear-gradient for the background that uses transparency:     background: linear-gradient(to right, rgba(0,0,153,0) 25%, rgba(0,0,153,1)); Create a style rule for the gradient7 class selector and add a declaration to specify a radial-gradient that uses the following three color values: #0000ff #fff #ff0000 Create a style rule for the gradient8 class selector and add the following declaration to specify a repeating radial-gradient for the background:     background: repeating-radial-gradient index.html   Gradients                                              Exploring Gradients                                                         Linear Gradient to right at 25%                                                            Linear Gradient to left at 90%                                                            To Top Left Linear Gradient                                                                         Linear Gradient, Multiple Colors                                                                         Repeating Linear Gradient                                                                         Gradients and Transparency                                                                         Radial Gradient                                                            Repeating Radial Gradient                                                                                   Completed by: Student's Name

New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter4: Graphic Design With Css: Creating A Graphic Design For A Genealogy website
Section: Chapter Questions
Problem 14RA
See similar textbooks
icon
Related questions
Question

Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport.

Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background:

background: linear-gradient(to right, #67afcb, #1a3e4c 25%); 

Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop.

Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values.

Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values:

  • #e6e6ff
  • #70dbdb
  • #ffffcc
  • #cc6699

Create a style rule for the gradient5 class selector and add the following declaration to specify a repeating linear-gradient for the background:

    background: repeating-linear-gradient(#df80ff 10%, #ccffff 20%); 

Create a style rule for the gradient6 class selector and add the following declaration to specify a linear-gradient for the background that uses transparency:

    background: linear-gradient(to right, rgba(0,0,153,0) 25%, rgba(0,0,153,1));

Create a style rule for the gradient7 class selector and add a declaration to specify a radial-gradient that uses the following three color values:

  • #0000ff
  • #fff
  • #ff0000

Create a style rule for the gradient8 class selector and add the following declaration to specify a repeating radial-gradient for the background:

    background: repeating-radial-gradient
index.html
<html lang="en">
<head>
  <title>Gradients</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>
<body>

  <div id="container">

        <!-- Use the header area for the website name or logo -->
        <header>
            <h1>Exploring Gradients</h1>
        </header>
        
        <main>

            <div class="columns">
                <h3>Linear Gradient to right at 25%</h3>
                <div class="box gradient1"></div>
            </div>

            <div class="columns">
                <h3>Linear Gradient to left at 90%</h3>
                <div class="box gradient2"></div>
            </div>

            <div class="columns">
                <h3>To Top Left Linear Gradient</h3>
                <div class="box gradient3"></div>
            </div>
            
            <div class="columns">
                <h3>Linear Gradient, Multiple Colors</h3>
                <div class="box gradient4"></div>
            </div>
            
            <div class="columns">
                <h3>Repeating Linear Gradient</h3>
                <div class="box gradient5"></div>
            </div>
            
            <div class="columns">
                <h3>Gradients and Transparency</h3>
                <div class="box gradient6"></div>
            </div>
            
            <div class="columns">
                <h3>Radial Gradient</h3>
                <div class="box gradient7"></div>
            </div>

            <div class="columns">
                <h3>Repeating Radial Gradient</h3>
                <div class="box gradient8"></div>
            </div>
            
        </main>

        <!-- Use the footer area to add webpage footer content -->
        <footer>
            <p>Completed by: Student's Name</p>
        </footer>

  </div>
  
</body>
</html>
 
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Hyperlinks
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
SEE MORE TEXTBOOKS