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

HTML-CSS
1

Tell us what’s happening:

on line 28 in the CSS file my code is not working.

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>
        <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.sleave {
  inline-block: display
}

/* 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/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

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

2

Hi there!

You used the display property on wrong side. CSS property become first,then it’s value.

3

hello, I fixed this but there still seems to be a problem

4

Post your updated code here, using three back ticks (```) on a separate line before and after your code here in your next reply.

5 
cap.sleave {
  display: inline-block;
}
6

Use comma between the cap and sleeve. Also cap is missing a dot immediately before it. And remember the quote marks are not back ticks.

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8
  • Both .cap and .sleeve are classes. Class selectors start with a dot .
  • To target multiple selectors, you use a selector list, which is a comma separated list of selectors.
9

Hello @HTMLtryHard !

Good attempt!

Along with all of the good guidance previously provided, please check the spelling of sleave which should be sleeve?

This along with the previous guidance will hopefully help you move on in your coding journey.

Wishing you the best on your coding path. :slightly_smiling_face: