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

HTML-CSS
1

l need help am stuck on this question

<!-- 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 class="cap"></div>
        <div class="sleeve"></div>
      </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;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}


/* User Editable Region */

.cap, sleeve {
  display: inline-block;
}


/* User Editable Region */


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

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

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

Your browser information:

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

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

Link to the challenge:

2

Both cap and sleeve are classes but you are only treating one of them as a class and the other as an element.

3

how do l do that
because l have tried it doe not wanna work

4

You tell me :slightly_smiling_face:

Which one of those is targeting a class and which one of those is targeting an element? You want to change the one that is targeting an element to target a class instead.

5

this is what thy asked me too do

“Create a new rule to target both the cap and sleeve classes, and set display to inline-block .”

and it says both

6

Yes, I know what the instructions are asking you. And you have almost done it correctly. You just have one error.

“…target both the cap and sleeve classes…”

Are you targeting both the cap and sleeve classes? I’ve been telling you that you are only targeting one of those classes. Look closely at this:

.cap, sleeve {

Do you see a difference? What does one of them have that the other doesn’t?

7

the other one has a . cap and the other one doe not

l hope am ryt

8

thank you very much it actually worked