Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

the chimney and door properties seems to not be going through

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>

</body>
</html>

/* file: styles.css */
/*file:styles.css*/
body{display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #66c4f2 60%, #008000 60%);}

#house{position: relative;
border: 7px solid #b35900;
width: 500px;
height: 400px;
background-color: #ff9980;}

#chimney{position: absolute;
width: 350px;
height: 400px;
 border: 1px solid black;
 background-color: midnightblue;
 z-index: -1;
 top: -20px;
 }

 #roof{position: absolute;
 width: 495px;
 height: 60px;
 border: 3px solid black;
 background-color: brown;
 top: 0;}

 #window-1{position: absolute;
 width: 100px;
 height: 100px;
 border: 4px solid black;
 background-color: pink;
 top: 95px;
 left: 20px;
 z-index: 3;}

 #window-2{position: absolute;
 width: 100px;
 height: 100px;
 border: 4px solid black;
 background-color: pink;
 top: 95px;
 right: 20px;
 z-index: 3;}

 #door{position: absolute;
 width: 150px;
 height: 400px;
 border: 3px solid black;
 background-color: lightblue;
 left: 175px;
 bottom: 0px;}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Please start by fixing your HTML:

What are you missing here? If necessary, you can use an HTML Validator.

Next, your house is 400px high. Do you really want your door to be the same height? Same with the chimney height and width.

Does it make sense to use display: flex when you are using absolute positioning to place elements relative to the house? If you want to center the house, try using the margin property in the house selector.