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

HTML-CSS
1

I don’t know this step, help me please
thanks!!
Captura

/* 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);
}



.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%));
}
2

I don’t see a new CSS rule set that targets elements with either the class cap or the class sleeve. Did you try to do this yet? If so, please post your CSS so we can see what you did. If not, please ask a very specific question about what you don’t understand?

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3

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

Try this it worked .

1 Like
4

Hey @Divya30, I know you are new, so just wanted to let you know that we don’t just post the solutions in here. We try to help the person find the solution on their own.

5

@bbsmooth
Am sorry. will keep that in mind.
Thanks.

6

Thank you so much. I did the same code without commas and it worked perfectly before but now it didn’t work and I was stuck and frustrated.

7

I think the solution is this

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

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