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

HTML-CSS
1

Tell us what’s happening:
Wanted to add new div element with class cap before the sleeve div element. It’s not accepting it the way i did here. What am i missing please!

  **Your code so far**

/* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Good afternoon Isrealolladapo18!

I can see were you can correct your code.

See here this is what you typed:

<div class="marker red"> <div class="cap">
<div class="sleeve"></div>

What happened was you took away your ‘closing tag’ for your div’s class: marker red. Then you added in your brand new div with class: cap. This too is missing your ‘closing div tag’.

Remember to include your closing tags and you should be able to move forward again. Corrections here:

<div class="marker red"></div>
 <div class="cap"></div>
<div class="sleeve"></div>

Have an awesome weekend Code-Mate

3

Thank you @inspire.elevate.us
I just tried the code you made as a correction for me, it doesn’t accept the code either. Fortunately i’ve figured it out!
The code correction you made for me:

The right code i later submitted:

I removed the closing tag for the 'marker red' div element and added the class 'cap' div element within and closed the tag.

You can do well to drop your whatsapp digit so we can connect and rub minds as a mate…
I got hinted from the code correction you sent
Thanks mate, have an awesome weekend too!

4

Thank you EllaGriff,

Your insight was very fruitful. I will make certain that my activities of providing
every Code-Mate I encounter to assist has proper guidance toward figuring out
the solutions to the proper answers without unintentionally giving incorrect
information. Or, hindering their development by not allowing them the space to
have natural discovery of the intended answer on their own.

Coding evermore, E.

1 Like
6

If you do have a correct solution please do not share those solutions in full on the forum. We are trying to reduce spoiler answers on the forum as they do not help people learn.

Your code was not a solution after testing, otherwise it would have been removed.

7

Lolz…
Was It the WhatsApp digit I mentioned made you viewed my message this way? Pardon me for that i did not know i’ve stepped beyond the boundary, And here the Intimacy or whatsoever you misinterpret my reply and the tone for. Calling each other as a CODE-MATE should be a normal way of addressing a fellow student here. I found you offensive because your mean has nothing to do with my intention in my previous reply. Don’t tell me what i know about on this forum. I’m the type that always have a positive focus on whatsoever i venture myself and my focus here is for study purpose only nothing else attached. If you’re not feeling save that’s left to you. The most annoying in your word is ‘‘However, as a fellow student in code I would strongly caution you in utilizing this learning environment as a social media platform for dating or intimate connections’’ … Like, I don’t even have that kind of mind, please do well to clean your dirty mind @inspire.elevate.us it’s not healthy to humanity.
THANK YOU SIR!

8

Thank you EllaGriff,

I will do so from here on.

1 Like
9

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