Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Hi! For some reason my code is failing two tests, even though, visually, it appears to be fine.

// running tests
40. Your #chimney should have a top value that puts it at the top of your #house.
42. Your windows should be placed below your #roof and at least higher than one third of your #door's height.
// tests completed

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>
        <div id="window-2"></div>
        <div id="door"></div>
        <div id="ceiling-hider"></div>
    </div>
</body>
</html>

/* file: styles.css */
#house {
  position: relative;
  border: none;
  background-color: rgb(230,230,160);
  width: 500px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  transform: scale(0.5);
}

#ceiling-hider {
  border: 3px solid rgb(200,200,130);
  position: relative;
  background-color: rgb(230,230,160);
  width: 500px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
}

#chimney {
  position: absolute;
  width: 100px;
  height: 200px;
  border: 3px solid rgb(255, 60, 60);
  background-color: rgb(200, 30, 30);
  top: -100px;
  z-index: -1;
}

#roof {
  position: absolute;
  width: 400px;
  height: 300px;
  border: 3px solid rgb(255, 60, 60);
  background-color: rgb(255, 60, 100);
  transform: rotate(-45deg) translate(80px, -80px);
  top: 0px;
  left: 48px;
}

#window-1 {
  position: absolute;
  border: 5px solid white;
  background-color: cyan;
  width: 100px;
  height: 100px;
  z-index: 200;
  top: 150px;
  left: 50px;
}

#window-2 {
  position: absolute;
  border: 5px solid white;
  background-color: cyan;
  width: 100px;
  height: 100px;
  z-index: 200;
  top: 150px;
  right: 50px;
}

#door {
  position: absolute;
  width: 100px;
  height: 161px;
  /*A golden-ratio'd door to fix the ugly house*/
  background-color: brown;
  border: 3px solid rgb(255, 100, 0);
  z-index: 200;
  bottom: 0;
  left: 40%;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Build a House Painting - Build a House Painting

2

Untitled
Untitled323×349 1.53 KB

When I change the z-index properties of your chimney and roof, it shows why the tests are failing.