Tell us what’s happening:
Hi. I have given the door a position so that it can be on the bottom of the house and it does display as such but the test doesn’t pass. Please help.
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">
<link rel="stylesheet" href="styles.css"/>
<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{
position: relative;
border:1px solid black;
background-color: #012478;
width: 500px;
height: 600px;
left: 100px;
top: 500px;
}
#chimney{
position: absolute;
width: 150px;
height: 300px;
border: 5px solid brown;
background-color: firebrick;
top: -300px;
left: 135px;
bottom: 500px;
z-index: -1;
}
#roof{
position: absolute;
height: 100px;
width: 600px;
border: 3px solid brown;
top: 0;
left:-60px;
bottom: 00px;
background-color: burlywood;
border-radius: 10%;
}
#window-1{
position: absolute;
height: 80px;
width: 100px;
border: 1px dashed gray;
background-color:#348fff;
left: 100px;
top: 180px;
}
#window-2{
background-color:#348fff;
position: absolute;
height: 70px;
width: 90px;
border: 1px dashed gray;
background-color:#348fff;
left: 400px;
top: 250px;
}
#door{
position: relative;
height: 150px;
width: 90px;
border: 3px solid red;
background-color: goldenrod;
top: 445px;
bottom: 25px;
border-radius: 30%;
left: 200px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Challenge Information:
Build a House Painting - Build a House Painting