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 herstee.

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

/* User Editable Region */

  height: 25px;
 background-color: rgba(255, 255, 255, 0.5);
 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/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

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

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

didn’t understand can you help me please?

4

Can you talk about how you are stuck on this problem please.

5

how to change block level to inline beasd on step78 instruction

6

To position two div elements on the same line, set their display properties to inline-block.

Create a new rule to target both the cap and sleeve classes, and set display to inline-block.

You follow the instructions here.

Do you remember how to create a CSS rule? Do you remember how to target to different types of elements with the same CSS rule? Do you remember how to add attributes and values to a CSS rule?

Can you be more specific about what you don’t understand?

It does look like you made changes outside of the editable region - I’d reset the code and make zero changes outside of the area you were given.

2 Likes
7

i think you you anderstand my problem .i didnt remember both of them. and can you show me please?

1 Like
8

I cannot write the answer for you, no. That’s against the rules. That’s why I’m asking you to say more so I can help.

If you don’t remember anything about writing CSS, you should go back to the first CSS project and start over.

1 Like
9

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