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

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

/* file: index.Ext.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="marker green"><div></div><div></div></div>
      <div class="sleeve"></div>
      </div>
      </div>
      <div class="marker blue">
        <div></div>
        <div></div>
      </div>
    </div>
  </body>
</html>
/* file: styles.Ext.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);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

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

.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 mobile information:

SM-G935V - Android 8.0.0 - Android SDK 26

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

Link to the challenge:

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Hi @vitorio.paulo

Add a cap and sleeve to both the green and blue markers. You can just copy the div elements from the red marker and paste them into the other two markers.

You seem to have added empty div elements to the code editor.

Please reset the step to restore the original code.
Then copy the .cap and .sleeve elements into the green and blue marker elements.

Happy coding

Hi, Telles

Thank you so much to offer help so promptly.

I followed your instructions, step by step as you said, though the app keeps telling me that: “your green marker should have two div elements”.

At this point, I’m sorry to say, but I’m really confused: the code should work, based upon your instructions, but it doesn’t.

Should I post again my most recent code opening another topic?

Once again, thank you so much to be in touch.

Looking forward to hear your thoughts.

Happy coding.

Warm regards.

Tell us what’s happening:

Hi, everyone

So it’s the second time that I’m posting seeking help to troubleshoot my code.

The app keep reporting an error msg: “your green marker should have two div elements”.

I reviewed my code many times so far, but am still stuck in this step of the tutorial.

If someone could volunteer to see my code so far, it follows bellow.

Thank you so much in advance for your time and looking forward to hear your thoughts.

Happy coding, y’all.

Warm regards.

Your code so far

/* file: index.Ext.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 cap sleeve red"></div>
      <div class="cap"></div>
      <div class="marker cap sleeve green"></div>
      <div class="sleeve"></div>
      <div class="marker cap sleeve blue">
      </div>
    </div>
  </body>
</html>
/* file: styles.Ext.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);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

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

.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 mobile information:

SM-G935V - Android 8.0.0 - Android SDK 26

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

Link to the challenge:

Hi @vitorio.paulo !

So on step 85 you start with this code:

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

And they ask you to add a cap and sleeve to the green and blue markers. This should be done in the exact same way as you’ve done for the red marker, so it’s just a matter of copying the cap div and sleeve div withing the red marker div and pasting it in the other two (so multiple divs, not a conglomerate of classes for one div).

Good luck!

Hey, rustedviking!

I don’t have words to express my gratitude to you.

It finally worked.

Thank you so much to have helped me out.

Code finally troubleshooted.

Happy coding.

Sweetie!

1 Like