Learn Intermediate CSS by Building a Picasso Painting - Step 34

Can someone tell me why I am stucked here please
Error:
You should add a new div element within the .characters
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>

 <div class="characters">
  
  <div id="offwhite-character"></div>
  <div= id="black-character"></div>

    <div id="white-hat"></div>
     <div id="black-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
          </div>
        
     <div id="gray-instrument">
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
        </div>
        
      <div id="tan-table"></div>
      </div>


      

<!-- User Editable Region -->

      

<!-- User Editable Region -->

    </div>
  </body>
</html>
/* file: styles.css */
body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#offwhite-character {
  width: 300px;
  height: 550px;
  background-color: GhostWhite;
  position: absolute;
  top: 20%;
  left: 17.5%;
}

#white-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 140px 180px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: GhostWhite;
  border-left-color: transparent;
  position: absolute;
  top: -140px;
  left: 0;
}

#black-mask {
  width: 100%;
  height: 50px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gray-instrument {
  width: 15%;
  height: 40%;
  background-color: rgb(167, 162, 117);
  position: absolute;
  top: 50px;
  left: 125px;
  z-index: 1;
}

.black-dot {
  width: 10px;
  height: 10px;
  background-color: rgb(45, 31, 19);
  border-radius: 50%;
  display: block;
  margin: auto;
  margin-top: 65%;
}

#tan-table {
  width: 450px;
  height: 140px;
  background-color: #D2691E;
  position: absolute;
  top: 275px;
  left: 15px;
  z-index: 1;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; SM-G973U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Mobile Safari/537.36

Challenge: Learn Intermediate CSS by Building a Picasso Painting - Step 34

Link to the challenge:

Follow carefully the instruction. This is the code that you get in this challenge:
image

As you can see, the closing </div> tag of the .div#offwhite-character is marked in the image. Below this closing div tag, you should add another div element with a class set to the value of “black-character”.

Don’t add the “=” operator after the word “div” in the opening ‘div’ tag.

Please this is not clear.

Hello dixaya, let me see if I can clear it up for you. So right now, your code looks like this. Do you see where you added the div with the black character? That is not in the right spot. When the directions say you need to add it after the offwhite character div that means you needs to add it after the closing div tag which is this

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>

 <div class="characters">
  
  <div id="offwhite-character"></div>
  <div= id="black-character"></div>

    <div id="white-hat"></div>
     <div id="black-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
          </div>
        
     <div id="gray-instrument">
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
        </div>
        
      <div id="tan-table"></div>
      </div>


      

<!-- User Editable Region -->

      

<!-- User Editable Region -->

    </div>
  </body>
</html>

To give you a hint you need to add the div AFTER the div in this line. It needs to go AFTER that last div in your code. Also, if you look at the challenge it should give you an area that say “User editable region” This is where you want to put the code for the challenge.

<div id="tan-table"></div>
      </div>

Second, This is how you are trying to make the div. This is not correct, look at all the other divs in the challenge and you should see how you are supposed to make this div. You can even copy an already existing div and just change the ID to the text you need. Let me know if you need any more help

<div= id="black-character"></div>

Seriously I have done everything that there is and yet can’t pass.

Restart the step.

You get the following in your editor. As you can see, the blank line is there for you to type in the required ‘div’ element.

The ‘div’ element looks like this:

<div attribute="value"></div>

‘id’ is the attribute,
‘black-character’ is the value.

1 Like

Thanks a million Mr Dobar. That resolved that thank you.

1 Like

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