Applied Visual Design: Adjust the Hue of a Color part

Tell us what’s happening:
So this code
.blue {
background-color: hsl(100%, 50%, 0%);
background-color: blue;

worked for the blue part and the cyan part, but not the green.
someone help please?

Your code so far


<style>
body {
  background-color: #FFFFFF;
}

.green {
  background-color: hsl(100%, 50%, 0%);
  background-color: green;
}

.cyan {
  background-color: hsl(100%, 50%, 0%);
  background-color: cyan;
}

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

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}
</style>

<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

Your browser information:

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

Challenge: Adjust the Hue of a Color

Link to the challenge:

In order to pass this challenge:

You shouldn’t apply the same hsl color to .green and .cyan and .blue

You shouldn’t have two background-color properties in the same class. You need to have only one background-color property but you applied two background-color properties.

You need to simply copy and paste the prepared hsl color code which is shown in the challenge guide.

Solved challenge:

body {
    background-color: #FFFFFF;
  }

  .green {
    background-color: hsl(120, 100%, 50%);
  }

  .cyan {
    background-color: hsl(180, 100%, 50%);
  }

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

it worked, thanks! for some reason, my code worked for the rest of the colors, just not the green.