Learn CSS Colors by Building a Set of Colored Markers - Step 61

Tell us what’s happening:
Describe your issue in detail here.
Clueless on this step and found no other results for help.

Step 61

For this marker, you’ll use hex color codes for your gradient.

Use the linear-gradient function and set gradientDirection to 180deg. And for the first color argument, use a hex color code with the values 55 for red, 68 for green, and 0D for blue.

Test

Sorry, your code does not pass. Hang in there.

Hint

Your .green CSS rule should have a background property with the value linear-gradient(180deg, #55680D).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
/* file: styles.css */
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.red {
  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}

.green {
  background: #007F00; linear-gradient(180deg, #55680D) 
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Learn CSS Colors by Building a Set of Colored Markers - Step 61

Link to the challenge:

Look at the .red block.
Your background setting should be in a similar style.

background: linear-gradient(…
1 Like

Thank you very much :slight_smile:

1 Like