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

HTML-CSS
1

Tell us what’s happening:
I’m really confused about Linear and Gardient colours. Could someone help me with CSS ? I’ve tried to do my own research, but I’m still confused. I can’t get passed Step 65 of this session.

My 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), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
}

.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/116.0.0.0 Safari/537.36

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

Link to the challenge:

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

.green {
  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
}

The gradientDirection is the first argument to the function.

In this case, the 180deg value. Remove it and the comma so you are only left with the colors inside the function.

1 Like