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

HTML-CSS
1

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

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

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

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

Link to the challenge:

2

Please 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!

3

Having problem trying to get pass this step

4

You should be using both classes in one style, but you have a style for each class.

You can read the discussion here and should be able to find the answer
css - How can I apply styles to multiple classes at once? - Stack Overflow.

1 Like
5

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

Wrote it as this and still get the same error

6

Please paste all your code. Use the format button that looks like </> and paste all your code between the lines it gives you

7

image
image916×510 24.1 KB

html


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

8

image

9

image
image920×586 49 KB

10

I need to see all your css code not just the one line. Notice how you have red underlining in your code the cap and sleeve line? That means there is an issue somewhere else

11

How can i bring the whole code here?

12

Follow what I previously posted

13 
<!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>

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);

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

14

You dont have a closing brace } for this class. Which is why the challenge is not passing because without the brace CSS doesn’t know when your style for that class ends


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

This line is also still wrong. You are missing something

2 Likes
15

Thank you so much
I got the solution now
Will leave a screenshot attach to this to help anyone having the same problem

The website remove the closing brace ( i think this might be because of an error from the web itself) because there was a closing brace in step 77 before step 78.

A easy solution is to have a closing brace} before step 78.

Big ups to @Cody_Biggs

2 Likes
16

Glad you got it figured out. Im going to remove the solution though. We still want others attempting this challenge to do it on their own without giving them the answer.

Keep it going!

4 Likes
17

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