Learn Intermediate CSS by Building a Picasso Painting - Step 34

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Stack here.
Where should I put this?

</div

I got this error “You should add a new div element within the .characters element.”
but I indeed put it!

I tried everywhere.
I even put it on top of my pizza, didn’t work.
Any help?
Thanks!

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 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>
      
    </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

2

Reset the code.

Then notice that the editor is empty.
Start typing directly into the empty line the editor is giving you as that is where the new div should go.

1 Like
3

not clear what you say.
The html was correct till now, I’m just putting the code where it asks to do and I have that issue.

4

oooohhh I got it!
But I would like to understand why…
However…thanks for the hint.

5

What part do you need to understand?

6

It was asking to put the div within the .characters that is at the beginning of the body.
But the task to be right should have the div in the end of the body…that’s strange…

7

Instructions were:

After your After your div#offwhite-character element, add a div element,

Below, is the div they were talking about.
Since you were asked to add a div -after- it, you should have added it after the closing tag of the div#offwhite-character element. (Which happens to be exactly where the editor placed an empty line for you)

8

Exactly.
I thought the closing div was another element.
I have still to learn a lot.
Thank you for your patience.

9

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