Build a House Painting - Build a House Painting step 45

HTML-CSS
1

Tell us what’s happening:

  1. Your windows should be placed below your #roof and at least higher than one third of your #door’s height.

I’ve read the forums and watched the video. I’ve changed the size and position of the windows but I still can’t seem to get it to work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="styles.css" rel="stylesheet">
    <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" class="parts"></div>
    <div id="roof" class="parts"></div>
    <div id="window-1" class="parts"></div>
    <div id="window-2" class="parts"></div>
    <div id="door" class="parts"></div>
    <div id="mat" class="parts"></div>
    <div id="knob" class="parts"></div>
<div id="grass" class="parts"></div>
    
</div>
</body>
</html>

/* file: styles.css */
body {
  width: 100%;
  background-color: lightblue;
  transform: scale(0.4);
    
}
#house {
  flex: 0 0 auto;
  top: 100px;
  position: relative;
  width: 500px;
  height: 400px;
  background-color: yellow;
  border: 1px solid #C0D14B;
  left: 170px;
}
#house > .parts {
  position: absolute;
}
#roof {
  top: 0;
  bottom: 15px;
  margin: -200px auto;
  background-color: red;
  border: 3px solid #BA2222;
  right: -100px;
  width: 700px;
  height: 230px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
border-radius:50px;
  z-index: 1;
}
#door {
background-color: #B44FD6;
border: 6px solid #67267A;
width: 100px;
height: 175px;
top: 213px;
left: 200px;
border-radius: 125px 125px 0 0;
z-index: 2;
}
#chimney {
  z-index: -1;
  top: -215px;
  left: 35px;
width: 100px;
height: 215px;
background-color: #C0D14B;
  border: 15px solid #D3D635;
transform: rotate(-45deg);
}
#window-1, #window-2 {
background-color: #B44FD6;
top: 50px;
border: 7px solid red;
width: 70px;
height:80px;
z-index: 3;
}
#window-1 {
  left: 75px;
}
#window-2 {
right: 75px;
}
#mat {
background-color: lavender;
width: 60px;
height: 45px;
z-index: 4;
top: 330px;
left: 230px;
}

#knob {
  background-color: #67267A;
  width: 20px;
  height: 20px;
  z-index: 4;
  border-radius: 45px;
  top: 280px;
  left: 280px;

}

#grass {
  left: -180px;
  z-index: -2;
  width: 600px;
  height: 0;
  top: 300px;
  border-bottom: 500px solid green;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

Challenge Information:

Build a House Painting - Build a House Painting

2

I was looking at the tests, and now I am confused at what they do because it’s checking the window top against the roof height…

oh you have moved the roof above the house using margin, the tests do not expect that, so yeah, the window is technically overlapping the roof, so the test fails

3

Ohhh I was trying to make it aesthetically pleasing but that’s what broke it lol. I took it off and it looks wonky but it worked thank you!!

4

yeah, I don’t know how to have the tests work to accept your code, but you can try ask for a change by opening an issue on github to have the tests more flexible