Build a House Painting - Steps 42 and 44

HTML-CSS
1

Messing up on tests #42 and #44, both read as such;

  1. Your #door should be placed at the bottom of the house.
  1. Your #chimney should have a top value that puts it at the top of your #house.

Codes in question are as follows:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rsl="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>

styles.css

* {
  box-sizing: border-box;
}

#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: violet;
  border: 25px solid violet;
  top: 30px;
  z-index: 1;
}

#chimney {
position: absolute;
width: 30px;
height: 40px;
border: 30px solid brown;
background-color: brown;
top: -84px;
right: -26px;
z-index: -1;
}

#roof {
position: absolute;
width: 447px;
height: 57px;
border: 27px solid gray;
background-color: gray;
}

#window-1 {
position: absolute;
width: 50px;
height: 40px;
border: 50px solid rgb(116, 195, 219);
background-color: lightblue;
top: 150px;
left: 10px;
}

#window-2 {
position: absolute;
width: 50px;
height: 40px;
border: 50px solid rgb(116, 195, 219);
background-color: lightblue;
top: 150px;
right: 100px;
}

#door {
position: absolute;
width: 20px;
height: 60px;
border: 30px solid rgb(123, 94, 64);
background-color: rgb(114, 68, 38);
top: 314px;
right: 20px;
z-index: 3;
}
2

Can you post a link to the exercise as well?

3

Sure, let me get that for you

Exercise Link:

4

discord response for ref:

1 Like
5

Try to change the values of these things and by the output see if the output seems ok.

1 Like
6

Since only the CSS changed, I will link that here because even with this, I get the same ones missed:

styles.css

* {
  box-sizing: border-box;
}

#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: violet;
  border: 25px solid violet;
  top: 10px;
  z-index: 1;
}

#chimney {
position: absolute;
width: 30px;
height: 40px;
border: 30px solid brown;
background-color: brown;
top: -400px;
right: 26px;
z-index: -1;
}

#roof {
position: absolute;
width: 447px;
height: 57px;
border: 27px solid gray;
background-color: gray;
}

#window-1 {
position: absolute;
width: 50px;
height: 40px;
border: 50px solid rgb(116, 195, 219);
background-color: lightblue;
top: 150px;
left: 10px;
}

#window-2 {
position: absolute;
width: 50px;
height: 40px;
border: 50px solid rgb(116, 195, 219);
background-color: lightblue;
top: 150px;
right: 100px;
}

#door {
position: absolute;
width: 20px;
height: 60px;
border: 30px solid rgb(123, 94, 64);
background-color: rgb(114, 68, 38);
bottom: -26px;
right: 25px;
z-index: 3;
}