Tell us what’s happening:
steps 3, 4, 5, 6 aren’t “Solved” even though the displayed site says otherwise. Any 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">
<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 id='doorknob'></div></div>
</div>
<div id='landscape'></div>
</body>
</html>
/* file: styles.css */
* {box-sizing: border-box;}
body {
background-color: lightblue;
}
#house {position: relative;}
#house > div {
position: absolute;
}
#house {
border: 4px solid white;
width: 500px;
height: 400px;
background-color: rgb(221, 207, 164);
}
#door {
border: 3px solid white;
width: 25%;
height: 40%;
top: 60.5%;
background-color: darkblue;
left: 35%;
}
#roof {
width: 100%;
aspect-ratio: 1 / 1;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 215px solid red;
bottom: 100.7%;
z-index: 2;
}
#window-1, #window-2 {
width: 25%;
height: 25%;
border: 5px solid white;
background-color: rgb(123, 220, 230);
top: 30%;
}
#window-1 {
left: 9%
}
#window-2 {
left: 65%;
}
#chimney {
}
#doorknob {
position: absolute;
background-color: black;
width: 20%;
aspect-ratio: 1 / 1;
border-radius: 2vw;
margin-left: auto;
left: 75%;
top: 40%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 Edg/137.0.0.0
Challenge Information:
Build a House Painting - Build a House Painting