Build a House Painting - Build a House Painting

Curriculum Help
,
1

Tell us what’s happening:

‘Your #chimney should have a top value that puts it at the top of your #house’, error persists. Any other value except a minus, seems to be placing the #chimney at the bottom of the #house, yet that is not accepted. Anyone else with a better idea?

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>House Painting</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 class="window-1-left"></div>
        </div>
        <div id="window-2">
            <div class="window-2-right"></div>
        </div>
        <div id="door"></div>
    </div>
</body>
</html>

/* file: styles.css */
body {
  margin: 50px 50px;
}

#house {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 30px;
  width: 500px;
  height: 400px;
  background-color: gray;
  border: 2px solid #110f11;
}

#chimney {
  position: absolute;
  top: 410px;
  left: 350px;
  z-index: -1;
  width: 40px;
  height: 410px;
  border: 1.5px solid #110f11;
  background-color: #fff2f2; 
}

#roof {
  position: absolute;
  top: 0;
  right: -50px;
  margin: 0 auto;
  width: 600px;
  height: 150px;
  border: 2px solid #110f11;
  background-color: coral;
}

#window-1 {
  position: absolute;
  top:200px;
  left: 360px;
  margin-top: 20px;
  aspect-ratio: 1/3; 
  width: 80px;
  height: 100px;
  border: 2px solid rgb(239, 239, 160);
  background-color: gray;
}


#window-2 {
  position: absolute;
  top: 200px;
  right: 360px;
  margin-top: 20px;
  aspect-ratio: 1/3;
  width: 80px;
  height: 100px;
  border: 2px solid rgb(239 239 160);
  background-color: gray;
}

#door {
  position: absolute; 
  left:200px;
  bottom: 0;
  display: flex;
  align-self: centre;
  width: 80px;
  height: 150px;
  border: 2px solid rgb(239 239 160);
  background-color: gray;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/155.0.0.0 Safari/537.36 Edg/155.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

Hi @SimbaBrynMahaja,

The position of the chimney is relative to the house, and the top of the house is at 0. Your chimney’s height is 410px, so what does the top of the chimney need to be so the bottom of the chimney is flush with the top of the house?

Happy coding

3

I certainly will keep that trick in mind, I was looking everywhere else but just. Challenge passed.

Thanks again