Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I don’t know why I can’t pass these two tests :
Failed:40. Your #chimney should have a top value that puts it at the top of your #house.
Failed:41. Your #chimney should have a z-index that puts it behind the house.(solved)

Although I already add a top value to #chimney

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="sky"></div>
    <div id="house">
        <div id="chimney">
            <div class="chimney-line1"></div>
            <div class="chimney-line2"></div>
        </div>
        <div id="roof"></div>
        <div id="window-1">
            <div class="window-line1"></div>
            <div class="window-line2"></div>
        </div>
        <div id="window-2">
            <div class="window-line1"></div>
            <div class="window-line2"></div>
        </div>
        <div id="door">
            <div id="doorlock"></div>
        </div>
    </div>
    <div id="grass"></div>


</body>
</html>

/* file: styles.css */
* {
  margin:0;
  box-sizing:content-box;
}

#sky {
  background-color:rgb(182, 237, 255);
  width:100%;
  height:60vh;
  position:absolute;
  z-index:0;
}

#grass {
  position:absolute;
  width:100%;
  height:40vh;
  top:60vh;
  background-color:rgb(9, 210, 9);
  z-index:0;
}

#house {
  position:relative;
  margin:auto;
  top:100px;
  left:0;
  bottom:0;
  right:0;
  width:500px;
  height:400px;
  background-color:rgb(217, 183, 118);
  border:5px solid rgb(141, 91, 0);
  z-index:2;
}

#house div {
  position:absolute;
  z-index:3;
}

#roof {
  top:0;
  background-color:rgb(170, 0, 0);
  width:100%;
  height:80px;
  border:2px solid rgb(141, 91, 0);
  box-sizing:border-box;
}

#window-1 {
  position:absolute;
  border:5px solid rgb(141, 91, 0);
  width:100px;
  height:100px;
  background-color:rgb(182, 237, 255);
  top:120px;
  left:50px;
}

#window-2 {
  position:absolute;
  border:5px solid rgb(141, 91, 0);
  width:100px;
  height:100px;
  background-color:rgb(182, 237, 255);
  top:120px;
  right:50px;
}

.window-line1 {
  height:100px;
  width:5px;
  background-color:rgb(141, 91, 0);
  display:absolute;
  left:47.5px;
}

.window-line2 {
  height:5px;
  width:100px;
  background-color:rgb(141, 91, 0);
  display:absolute;
  top:47.5px;
}

#door {
  position:absolute;
  width:100px;
  background-color:lightyellow;
  height:190px;
  top:210px;
  left:200px;
  border:5px solid rgb(141, 91, 0);
  box-sizing:border-box;
}

#door div {
  width:20px;
  height:20px;
  border-radius:100%;
  background-color:rgb(141, 91, 0);
  top:80px;
  left:65px;
}

#chimney {
  position:relative;
  top:-85px;
  left:400px;
  border:5px solid black;
  z-index:1;
  width:100px;
  height:160px;
  background-color:lightgrey;
  box-sizing:border-box;

}

.chimney-line1 {
  display:absolute;
  top:20px;
  width:100%;
  height:3px;
  background-color:black;
}

.chimney-line2 {
  display:absolute;
  top:50px;
  width:100%;
  height:3px;
  background-color:black;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

make sure to give to chimney a top that puts its bottom border exactly where the top border of the house is

with these values about half of the chimney is behind the house

1 Like
3

Tq very much.It works.