Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I can’t seem to cross step 40. I need some assistance please.

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">
    <link rel="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>

/* file: styles.css */
#house {position:relative;width:500px;height:400px;background-color:#5544fb;border:2px solid black;border-top-left-radius:30px;
border-top-right-radius:30px; z-index: auto;}
#house div{position:absolute;}
#roof{width:500px;height:60px;top:0;z-index:2;border:2px solid black;
border-top-left-radius:30px;
border-top-right-radius:30px;
background-color:grey;}
#window-1, #window-2{width:80px;height:80px;background:linear-gradient(90deg,black,white);}
#window-1{position:absolute; top:100px;left:30px;border:2px solid black;}
#window-2{top:100px;right:30px;border:2px solid black;}
#door{background-color:white;width:100px;height:150px;top:245px;left:233px;background:linear-gradient(90deg,black,white);border:2px solid black;bottom:0;}
#chimney{width:10px;height:40px;left: 40px;background-color:brown;top:-10px;z-index:-1;border:2px solid black;}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

it would be great if you could use standard format for your css, like that it is a bit unreadable

this is your chimney

image
image116×138 644 Bytes

most of it is behind the roof, it needs to be all visible above the roof

3

#house {position:relative;

width:500px;

height:400px;

background-color:#5544fb;

border:2px solid black;

border-top-left-radius:30px;

border-top-right-radius:30px;

z-index: auto;}

#house div{position:absolute;}

#roof{width:500px;

height:60px;

top:0;

border:2px solid black;

border-top-left-radius:30px;

border-top-right-radius:30px;

background-color:grey;}

#window-1, #window-2{width:80px;

height:80px;

background:linear-gradient(90deg,black,white);}

#window-1{position:absolute;

top:100px;

left:30px;

border:2px solid black;}

#window-2{top:100px;

right:30px;

border:2px solid black;}

#door{background-color:white;

width:100px;

height:150px;

top:245px;

left:233px;

background:linear-gradient(90deg,black,white);

border:2px solid black;

bottom:0;}

#chimney{width:10px;

height:40px;

left: 40px;

background-color:brown;

top:-10px;

z-index:-1;

border:2px solid black;}

4

I’m sorry I got to realize how bad my code looked after I had shared it. Can you suggest a value that can place it above the roof?

5

it depends on how it is positioned, you can try with negative height, or move it higher and higher until you pass the test

6

I used 10px and it worked. Thank you so much for your assistance