Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I cannot get past test 42: Your windows should be placed below your #roof and at least higher than one third of your #door’s height. but it seems like my windows are 1/3 above my doors height and below the roof. can someone help me?

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="background">
        </div>
    <div id="house">
        <div id="chimney">
            </div>
        <div id="roof">
            </div>
        <div id="window-1">
            <div class="window-sill">
                <div>
            <div class="window-sill-2">
                </div>
            </div>
        <div id="window-2">
            <div class="window-sill">
                </div>
            <div class="window-sill-3">
                </div>
            </div>
        <div id="door">
            </div>
    </div>

</body>
</html>

/* file: styles.css */
* {
  background-color: lightblue;
}
#background {
  background-color: rgb(74, 126, 74);
  width: 600px;
  position: absolute;
  height: 200px;
  left: -2px;
  top: 300px;
}

#house {
  position: relative;
  border: 4px solid rgb(153, 57, 57);
  background-color: rgb(224, 171, 171);
  width: 500px;
  height: 400px;
  margin: 40px;
}
#chimney {
  position: absolute;
  width: 90px;
  height: 40px;
  border: 2px solid rgb(92, 98, 100);
  background-color: rgb(132, 142, 146);
  top: -40px;
  left: 60px;
  z-index: -1; 
}
#roof {
  position: absolute;
  width: 520px;
  box-sizing: border-box;
  height: 90px;
  left: -10px;
  top: 0;
  bottom: 0;
  background-color: rgb(175, 71, 71); 
  border: 4px solid rgb(153, 57, 57);
  

}
#window-1 {
  position: absolute;
  width: 70px;
  height: 81px;
  background-color: rgb(131, 163, 225);
  border: 2px solid rgb(153, 57, 57);
  left: 80px;
  right: 2px;
  top: 170px;
  bottom: 160px;
}
#window-2 {
  position: absolute;
  width: 70px;
  height: 81px;
  background-color: rgb(131, 163, 225);
  border: 2px solid rgb(153, 57, 57);
  left: 230px;
  top: 10px;
  bottom: 120px;
  right: 2px;
  z-index: 3;
}
.window-sill {
  height: 80px;
  width: 3px;
  background-color: rgb(153, 57, 57);
  position: absolute;
  left: 33.5px;
}
.window-sill-2 {
  position: absolute;
  width: 72px;
  height: 3px;
  background-color: rgb(153, 57, 57);
  top: 38px;
  left: -34px;

}
.window-sill-3 {
  position: absolute;
  width: 72px;
  height: 3px;
  background-color: rgb(153, 57, 57);
  top: 38px;
  z-index: 3;
}
#door {
  position: absolute;
  width: 90px;
  height: 120px;
  border: 4px solid rgb(153, 57, 57);
  background-color: rgb(230, 208, 95);
  bottom: 0;
  right: 100px;
  left: 100px;
  top: 100px;
  z-index: 4;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

you have an issue that your window-2 is inside your window 1, and so is the door

if you right click in the editor and choose format you could see it better

once you fix that you will need to fix again some css, but you should pass

3

Thank you, I fixed it and passed the test.