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: