Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Can anybody tell me what I’m doing wrong with the windows?

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>
    <h1>RYASSS</h1>
    <div id="house">
        <div id="roof"></div>
        <div id="chimney"></div>
        <div id="window-1"></div>
        <div id="window-2"></div>
        <div id="door"></div>
    </div>

    <footer>
        <p>Created by: Romel Panopio</h2>
        
    </footer>
</body>
</html>

/* file: styles.css */
*{
  box-sizing: border-box;
}

hmtl, body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

body{
  background-color: #E5E9C5;
}

#house{
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 400px;
  background-color: #9ECFD4;
  border: 2px solid #547792;
}

#roof{
  position: absolute;
  top: 0;
  left: 28px;
  z-index: 2;
  height: 125px;
  width: 500px;
  background-color: #018790;
  transform: skew(25deg);
  border: 3px solid #213448;
}

#chimney{
  position: absolute;
  top: -50px;
  right: 100px;
  z-index: -1;
  height: 50px;
  width: 50px;
  background-color: #C1785A;
  border: 3px solid #E97F4A;
}

#door{
  z-index: -2;
  position: absolute;
  bottom: 0;
  left: 2px;
  height: 180px;
  width: 110px;
  background-color: #C1785A;
  border: 2px solid #954C2E;
}

#window-1{
  z-index: 2;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 130px;
  left: 140px;
  background-color: #7F8CAA;
  border: 2px solid #333446;
}

#window-2{
  z-index: 2;
  position: absolute;
  top: 130px;
  right: 90px;
  height: 100px;
  width: 100px;
  background-color: #7F8CAA;
  border: 2px solid #333446;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

don’t use flex, you don’t know at which height of the viewport the tests are run

if it’s something like this, it’s going to fail

image
image540×365 7.33 KB

1 Like