Learn Intermediate CSS by Building a Picasso Painting - Step 50

HTML-CSS
1

Tell us what’s happening: missing something. no idea what.
Describe your issue in detail here.

  **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 id="black-character">
      <div class="blue" id="blue-left"></div>
      <div class="blue" id="blue-right"></div>
      <div id="black-hat"></div>
      <div id="gray-mask">
        <div class="eyes left"></div>
        <div class="eyes right"></div>
      </div>
      <div id="white-paper">
        <i class="fas fa-music"></i>
        <i class="fas fa-music"></i>
        <i class="fas fa-music"></i>
        <i class="fas fa-music"></i>
    
      
    </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;
}

#black-character {
width: 300px;
height: 500px;
background-color: rgb(45, 31, 19);
position: absolute;
top: 30%;
left: 59%;
}

#black-hat {
width: 0;
height: 0;
border-style: solid;
border-width: 150px 0 0 300px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: rgb(45, 31, 19);
position: absolute;
top: -150px;
left: 0;
}

#gray-mask {
width: 150px;
height: 150px;
background-color: rgb(167, 162, 117);
position: absolute;
top: -10px;
left: 70px;
}

#white-paper {
width: 400px;
height: 100px;
background-color: GhostWhite;
position: absolute;
top: 250px;
left: -150px;
z-index: 1;
}

.fa-music {
display: inline-block;
margin-top: 8%;
margin-left: 13%;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hellloo
You need to add these 2 new divs under the element.
You added them under it’s opening tag.

3

hi - is this something new to learn? I have done it that way several times (or think so) unless spacing out here

4

Not at all

this is opening tag

The whole element - is it’s opening tag, closing tag and all that stuff that is between these tags

So you just need to move this stuff:

from inside the element

and place it after the element

5

still an error. I think I am having a brain fart. Seems simple yet no pass.

<div id="black-character">/div>
        <div class="blue" id="blue-left"></div>
      <div class="blue" id="blue-right"></div>
6

Lets reset the step

You will see this bunch of code:

      <div id="black-character">
        <div id="black-hat"></div>
        <div id="gray-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
        </div>
        <div id="white-paper">
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
        </div>
      </div>

ALL this code - it’s div element with id=“black-character”

So you need to place these two:

After this element

7

thanks. got it. can you post a link to a doc on freecodecamp I can read up on this again

8

I am not sure what link can be useful.
I guess I can write some stuff myself:

here element begins, with opening tag

<element>

here element ends, with closing tag

</element>

When they are asking you to place something below(or after) element, you need to place this something under the closing tag.

In your first versions of code you were placing the new divs inside element.

That’s all really, nothing fancy here.

You can add any post in your bookmarks, so you can re-read it later if you’ll need

1 Like
9

how do I bookmark stuff? I clicked on a flag and it came up with a ‘report’ thing . I exited. Not sure what button to save stuff with

10

So when you clicked ‘show more’ button, there were bunch of options, right?

The one you are talking about - it’s for flagging some nasty posts, like insults or abuse or stuff like that. So moderators will know, that they are needed

Bookmark button is not far from this flag button, it looks a little different. When you hover on it, it will show description ‘bookmark this post’

11

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