Quiz: Backgrounds and Gradients

Instructions

Create an HTML file in the Backgrounds and Gradients folder in the Github repo and paste the following code:

<!DOCTYPE html>
<html>
    <head>
    <style>
        .gradient-01 { }
        .gradient-02 { }
        .gradient-03 { }
        .gradient-04 { }
        .gradient-05 { }
        .gradient-06 { }
        .gradient-07 { }
    </style>
    </head>
    <body>
        <div class="gradient-01" style="height:200px"></div>
        <div class="gradient-02" style="height:200px"></div>
        <div class="gradient-03" style="height:200px"></div>
        <div class="gradient-04" style="height:200px"></div>
        <div class="gradient-05" style="height:200px"></div>
        <div class="gradient-06" style="height:200px"></div>
        <div class="gradient-07" style="height:200px"></div>
    </body>
</html>

For each div, try to re-create the background gradient and submit the code.

Task #1: Set a linear gradient background for the div element, going from the top to bottom, transitioning from "white" to "green".

Task #2: Set a linear gradient background for the div element, going from the top left to the bottom right, transitioning from "white" to "green".

Task #3: Set a linear gradient background for the div element, going at a 70 degree angle, transitioning from "white" to "green".

Task #4: Set a linear gradient background for the div element, going from the top to bottom, transitioning from "white" to "red" to "blue" to "green".

Task #5: Set a linear gradient background for the div element, going from the top to bottom, transitioning from "rgba(0,255,0,0.2)" to "rgba(0,255,0,1)".

Task #6: Set a radial gradient background for the div element, transitioning from "white" to "green".

Task #7: Set a radial gradient background for the div element, with a circle shape, transitioning from "white" to "green".

Leave a Reply