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

HTML-CSS
1

Tell us what’s happening:
I cannot figure-out this step…

  **Your code so far**
  ```

type or paste code here

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

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


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

People tend to post to the forum when they can’t figure out how to fix the code. Perhaps you can be a bit more specific about how you are stuck?

Describing the trouble you are having with the instructions is hard but it’s important. I can see the instructions but I can’t see what you are thinking.

3

Sorry about that…

I’m trying to follow this step: Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right.

Add a new div with the class cap before the sleeve div element.

<div class="container">
      <div class="marker red">
        <div class="cap">;
        <div class="sleeve"></div>
      </div>
4

I’m receiving the following error:

Test

Sorry, your code does not pass. Keep trying.

Hint

Your new div element should be within the red marker div.

5

You are still just telling me things I can read for myself from the instructions.

What is that extra semicolon doing in there?

6

Ooh, I missed that…

I took out the semicolon, and I’m still receiving the same error message.

What extra information do you need? All I know is that I’m not able to add the “cap” div command and proceed to the next step.

7

Does your div have a closing tag?

8

No. No, it does not!

That was it! Thanks!

1 Like
9

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