Build a House Painting - Build a House Painting

freeCodeCamp Support
1

Tell us what’s happening:

  1. Your #chimney should have a top value that puts it at the top of your #house.How can I by-pass this since I keep on using the correct values but still says failed

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>House Project</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="house">
    <div id="chimney"></div>
    <div id="roof"></div>
    <div id="window-1"></div>
    <div id="window-2"></div>
    <div id="door"></div>
  </div>
</body>
</html>

#house {
  position: relative;
  width: 500px;
  height: 400px;
  border: 3px solid black;
  background-color: lightblue;
}


#chimney {
  position: absolute;
  width: 60px;
  height: 100px;
  border: 2px solid black;
  background-color: brown;
  top: 0px;              
  left: 50px;
  z-index: -1;        
}


#roof {
  position: absolute;
  width: 500px;
  height: 80px;
  border: 2px solid black;
  background-color: darkred;
  top: 0;
}


#window-1, #window-2 {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid black;
  background-color: white;
  top: 120px;         
}

#window-1 {
  left: 60px;
}

#window-2 {
  right: 60px;
}


#door {
  position: absolute;
  width: 100px;
  height: 150px;
  border: 2px solid black;
  background-color: darkblue;
  bottom: 0;           
  left: 200px;         
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.0.0

Challenge Information:

Build a House Painting - Build a House Painting

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-house-painting/66d6a7a3e1aa411e94bf2346.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @wanjachristine201

Please also post your HTML code.

Happy coding

3

I have edited your code for readability.

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

4

Hi @wanjachristine201

I cannot see a chimney using your code.

Try adjusting the top property.

Happy coding