Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Good day, i have tried my best but my chimney top keeps giving me the nr 40 wrong. i have tried changing it making the sizes smaller and bigger but cannot get this right. please help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House Painting</title>
</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>

/* file: styles.css */
#house {
  width: 500px;
  height: 400px;
  background-color: #d2b48c;
  position: relative;
  border: 3px solid #a52a2a;
  
}

#house div {
  position: absolute;
}

#roof {
  top: 0;
  width: 500px;
  height: 80px;
  background-color: #2e8b57 ;
  border: 2px solid black;
  z-index: 2;
  left: 0;
}

#door {
  bottom: 0;
  width: 50px;
  height: 100px;
  background-color: #8b4513;
  border: 2px solid #a52a2a;
  left: 250px;
  z-index: 3; 
}

#window-1 {
  top: 175px;
  width: 80px;
  height: 80px;
  background-color: #a7c7e7;
  border: 2px solid #a52a2a;
  left: 50px;
}

#window-2 {
  top: 175px;
  width: 150px;
  height: 80px;
  background-color: #a7c7e7;
  border: 2px solid #a52a2a;
  left: 340px;
}

#chimney {
  top: -80px;
  width: 50px;
  height: 70px;
  background-color: #d2b48c;
  border: 2px solid  #a52a2a;
  left: 350px;
  z-index: -1;
}
#window-1, #window-2 {
  z-index: 3
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

the chimney bottom border must be in the same spot as the house top border, right now your chimney is floating above the house, if you look at top and height, and also at the preview

1 Like