You should target #roof and set its border property

HTML-CSS
1

#house {
position: relative;
width: 500px;
height: 400px;
background-color: #f5a6a6;
border: 4px solid #8b5a2b;
margin: 40px auto;
z-index: 1;
}

#roof {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90px;
background-color: #c1440e;
border-bottom: 10px solid #a67c52;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
z-index: 2;
}

#chimney {
position: absolute;
top: -100px;
left: 370px;
width: 50px;
height: 100px;
background-color: #fff;
background-image: repeating-linear-gradient(
to bottom,
#000 0,
#000 5px,
#fff 5px,
#fff 10px
);
border: 2px solid #000;
z-index: 0;
}

/* Door */
#door {
position: absolute;
width: 80px;
height: 120px;
left: 210px;
bottom: 0;
background-color: #f5f5f5;
border: 4px solid #8b5a2b;
z-index: 3;
}

#door::after {
content: ‘’;
display: block;
position: absolute;
right: 15px;
top: 60px;
width: 12px;
height: 12px;
background: #8b4513;
border-radius: 50%;
}

#window-1, #window-2 {
position: absolute;
width: 70px;
height: 70px;
background-color: #ffff99;
border: 4px solid #cc8400;
top: 130px;
z-index: 3;
}

#window-1 {
left: 100px;
}

#window-2 {
right: 100px;
}

#welcome-mat {
position: absolute;
bottom: -20px;
left: 200px;
width: 100px;
height: 30px;
background-color: lightgreen;
color: black;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: sans-serif;
transform: skewX(-20deg);
border: 2px solid #000;
}

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will use HTML to create the structure of a house. Then, you will use CSS positioning to arrange the elements of your house like windows and doors.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should have a div with an id of house.
  2. Your #house should have a position set to relative so its children can be positioned with respect to it.
  3. Your #house should have a width of 500px and a height of 400px.
  4. Your #house should have a background color and a border set.
  5. You should have five div elements inside #house with the following id values: chimney, roof, window-1, window-2, and door.
  6. All of the immediate children of the #house should have a position of absolute.
  7. #roof, #chimney, #window-1, #window-2, and #door should have a width, height, border, and background color set.
  8. Your #roof should have a top value of 0.
  9. Your #door should be placed at the bottom of your house.
  10. Your windows should be placed below your #roof and at least higher than one third of your #door’s height.
  11. Both your windows and your door should have either left or right set to a value that places them within the house borders.
  12. Your #chimney should have a top value that puts it at the top of your #house.
  13. Your #chimney should have a z-index that puts it behind the house.
    14.THIS what am trying to work on have literally done every thing just as u see the code but when ever i try to pass the code to the next level am told that You should target #roof and set its border property. so thats were am stack
4

You do not need to copy-paste the instructions. If you post a link to the project, we can just read the instructions there.

5

What code do you believe does this and why?

6

dose that mean its correct oh just wanted to seek help

7

You said you are having trouble getting test 14 to pass.

Please show what code you wrote specifically for test 14.