Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

My code seemed to be working fine except for this “Your windows should be placed below your #roof and at least higher than one third of your #door’s height”.

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>
  </div>
</body>
</html>


/* file: styles.css */
/* Center the house on the page */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #d0e8ff;
  margin: 0;
}

/* The main house container */
#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #f5b971;
  border: 4px solid #333;
}

/* All direct children positioned absolutely */
#house > div {
  position: absolute;
  border: 2px solid #222;
}

/* Roof styling */
#roof {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(0deg) translateY(-70%);
  width: 600px;
  height: 200px;
  background-color: #8b3e2f;
  border: none;
}

/* Chimney styling */
#chimney {
  position: absolute;
  top: -100px;
  left: 330px;
  width: 40px;
  height: 100px;
  background-color: #5a2e1d;
  border: 2px solid #333; /* ✅ this line targets #chimney and sets its border */
  z-index: -1; /* behind the house */
}

#chimney:target{
  border: 1px solid grey;
}

/* Windows styling */
#window-1,
#window-2 {
  width: 80px;
  height: 80px;
  background-color: #87ceeb;
  border: 3px solid #333;
}

/* Left window */
#window-1 {
  top: 120px;  /* ✅ below roof, above door */
  left: 80px;
}

/* Right window */
#window-2 {
  top: 120px;  /* ✅ same height */
  right: 80px;
}


/* Door styling */
#door {
  width: 100px;
  height: 150px;
  background-color: #7b4b1d;
  border: 3px solid #442b14;
  bottom: 0;
  left: 200px;
  right: 200px;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Hi @nseekabit and welcome to our community!

You just need to tweak things a little I think.

It looks like the transform property in your #roof selector is causing that test to fail.

If you remove it and also change the height property so that it doesn’t vertically overlap the windows, all tests pass.

Obviously it looks ugly if you do that, but you should be able to tweak things without reapplying the transform property.