Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

hello how are you please i need help with my code task ,21. You should target #roof and set its border property.
44. Your #chimney should have a top value that puts it at the top of your #house.

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

i don’t really understand what it’s mean

4

it means that your post did not have the code automatically inserted, and we need your code to be able to help you, so please share your code

5

ok thanks you i do it

6 
<!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>
  <div id="ground"></div>
    <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 id="welcome-mat">WELCOME</div>
    </div>
</body>
</html>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }

body {
    background-color: #add8e6; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    padding-bottom: 20px;
    }

        
#house {
    position: relative;
    width: 500px;
    height: 400px;
    background-color: #ff9999; 
    border: 5px solid #b35900; 
    }

        
 #house > div {
    position: absolute;
    }

#roof {
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #ff9933;

  border-bottom: 5px solid #b35900;
 
  background-image: linear-gradient(45deg, #b35900 25%, transparent 25%, transparent 75%, #b35900 75%, #b35900),
                    linear-gradient(45deg, #b35900 25%, transparent 25%, transparent 75%, #b35900 75%, #b35900);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

#chimney {
  
top: 30px;
left: 300px;
width: 80px;
 height: 120px;
  background-color: #e6e6e6;
  border: 3px solid #333;
  z-index: -1; 
  background-image: repeating-linear-gradient(#333 0px, #333 3px, transparent 3px, transparent 15px);
}

#door {
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 180px;
background-color: #e6e6e6; 
border: 5px solid #b35900;
border-radius: 5px 5px 0 0;
}

        
#door::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: #b35900;
border-radius: 50%;
}

        
#window-1 {
top: 120px; 
left: 60px;
width: 120px;
height: 120px;
background-color: #ffffcc; 
border: 5px solid #b35900;
display: flex;
}

        
#window-2 {
top: 120px;
right: 60px;
width: 120px;
height: 120px;
background-color: #ffffcc;
border: 5px solid #b35900;
display: flex;
}

        
#window-1::before, #window-1::after,
#window-2::before, #window-2::after {
content: '';
flex: 1;
border-right: 3px solid #b35900;
}

#window-1::after, #window-2::after {
border-right: none;
}

        
#welcome-mat {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 30px;
background-color: #90ee90; 
border: 2px solid #006400;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

       
#ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #008000; 
z-index: -2;
}* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }

body {
    background-color: #add8e6; 
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    padding-bottom: 20px;
    }

        
#house {
    position: relative;
    width: 500px;
    height: 400px;
    background-color: #ff9999; 
    border: 5px solid #b35900; 
    }

        
 #house > div {
    position: absolute;
    }

#roof {
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #ff9933;

  border-bottom: 5px solid #b35900;
 
  background-image: linear-gradient(45deg, #b35900 25%, transparent 25%, transparent 75%, #b35900 75%, #b35900),
                    linear-gradient(45deg, #b35900 25%, transparent 25%, transparent 75%, #b35900 75%, #b35900);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

#chimney {
  
top: 30px;
left: 300px;
width: 80px;
 height: 120px;
  background-color: #e6e6e6;
  border: 3px solid #333;
  z-index: -1; 
  background-image: repeating-linear-gradient(#333 0px, #333 3px, transparent 3px, transparent 15px);
}

#door {
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 180px;
background-color: #e6e6e6; 
border: 5px solid #b35900;
border-radius: 5px 5px 0 0;
}

        
#door::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: #b35900;
border-radius: 50%;
}

        
#window-1 {
top: 120px; 
left: 60px;
width: 120px;
height: 120px;
background-color: #ffffcc; 
border: 5px solid #b35900;
display: flex;
}

        
#window-2 {
top: 120px;
right: 60px;
width: 120px;
height: 120px;
background-color: #ffffcc;
border: 5px solid #b35900;
display: flex;
}

        
#window-1::before, #window-1::after,
#window-2::before, #window-2::after {
content: '';
flex: 1;
border-right: 3px solid #b35900;
}

#window-1::after, #window-2::after {
border-right: none;
}

        
#welcome-mat {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 30px;
background-color: #90ee90; 
border: 2px solid #006400;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000;
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

       
#ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #008000; 
z-index: -2;
}
7 
21. You should target #roof and set its border property.
44. Your #chimney should have a top value that puts it at the top of your #house.
8

image
image1387×677 4.51 KB

9

i don’t know why the chimney doesn’t appear

10

Maybe it’s hidden behind other elements. Could you change something to make sure it’s up front and visible?

11

If the top of the house is at 0 and your chimney’s height is 120, what should your top setting be to put the bottom of the chimney flush with the top of the house?

12

and for these questions what is the answer ??

13

so how to correct it ??

14

for #roof try setting the border all around not only at the bottom

and then try to answer this yourself

if you have doubts please let us know your questions