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

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="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;
}

.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 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36

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

Link to the challenge:

2

Learning to describe the bugs or issues you’re facing is a great skill to have in a developer, it may seem hard at first, but you should at least provide a brief summary of what you are trying to accomplish and what’s the error that shows up when you try to run your code.

Add your question in the following section.

Tell us what’s happening:

3

how do i open a new div in an existing div

4

In previous challenges, you’ve been adding text content inside of other elements like h1 and button, in the same way you can also add elements inside of other elements. This is called nesting. For example: if i want to add a button inside of my form element, i could achieve that by doing this.

<form>
    <button>my button</button>
</form>

Hope this helps! :smile:

1 Like
5

this part of code is really wrong as the person has not enclosed the first div element & has not enclosed the name sleeve inside quotes,as in, “sleeve”; rather, the code should be:

1 Like