Could there be an issue with the verification on this particular step^

Tell us what’s happening:
The step about linear-gradient seems stuck on not accepting my code, I’ve done some research on how to use it, when I type in my code, I can see on the preview side that the gradient goes from red to green, red being on the left and green on the right. The gradient is clearly visible yet the code doesn’t seem to pass the verification, I’ve tried with hex values, rgb, keywords and always get the same result. I know the verification is very peculiar but I see no typos in my entry

.red {

background: linear-gradient(90deg, #FF0000, #00FF00);

}

  **Your code so far**
\ file: <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" type="text/css" 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>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Markers</title>
  <link rel="stylesheet" type="text/css" 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: 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(90deg,#FF0000, #00FF00);
}

.green {
background-color: #007F00;
}

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

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(90deg,#FF0000, #00FF00);
}

.green {
background-color: #007F00;
}

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

Challenge: Step 50

Link to the challenge:

Figured it out… The step’s description is a bit misleading… asking for a red to green gradient…

I was stuck at the same point, the solution is much simpler :smiley:
I posted the same issue and got the solution here Issue Step 50 "linear-gradient" function - #2 by Cryptic_X

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.