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

*i can’t see to find the error on my code here
.red {
box-shadow: 5px 5px red;
}
//here is what I did
.red {
box-shadow: 5px 5px red;
}
*

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 class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </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);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

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


/* User Editable Region */

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))
  box-shadow: 5px 5px red;

}

/* User Editable Region */


.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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

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

Link to the challenge:

your answer passes for me ?

occasionally code can be deleted in other areas by mistake.
often refreshing the step and attempting again tends to help if this is the case.

well sure let me try to work on it
thanks for reaching out

1 Like

may you share the code that worked for you
i wanna take a look

I simply copied and pasted in your answer

box-shadow: 5px 5px red;

it passed :confused:

well okay let me check it out

let me know if it still has issues :frowning:


still getting an error

ah, i see.

Its a syntax error

your using a comer ‘,’ instead of a semi colon ‘;’
comers are like saying: I have more to give you.
semi colons are similar to: there are no more values, move to the next instruction

remember computers are very dumb XD
syntax is important to them :smiley:

edit, your not using a commer, or a colon sorry for the confusion. add a semicolon before your next instruction

okay let me look it up

OOOPPs i am still facing problem bro
but i am gratefull for the help

help is what we love to give here :smiley:

send me another screenshot

sure

take a look at the difference between your answer and mine.

when you give a new instruction, you tend to put it on a new line for readability.
it also makes it easier to spot syntax errors

at the end of each instruction in CSS you should have a semi colon ;

eg:

selector {
    instruction: value, value, value;
    instruction: value;
}

box-shadow is a new instruction, the values are the width height and colour

you should only need to add a semicolon between
rgb(162, 27, 27)) and box-shadow

let me know if this works

ALright let me see if it works

thanks it worked
Much appreciate
Whats your name

1 Like

you were right The box-shadow property should not be included in the background property 12, and should be separated by a semicolon to define it separately.

most call me guided since its my user name on most accounts XD

I’m glad it helped, syntax errors are fustrating :smiley:

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