Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

I am stuck in step 43, It says that I have to assign a left or right value for #door and it needs to be with in the house limits. I have already done it several times but it is still not working. I need some help. Thank you in advance.

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 id="door-knob"></div>
      </div>
      <div id="welcome">Welcome</div>
   </div>
   
</body>
</html>

/* file: styles.css */
body {margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 120vh; background: linear-gradient(#87ceeb, #87ceeb 60%, green 60%);}
#house {position: relative; width: 500px; height: 400px; background-color: #bc244a; border: 6px solid #750037;}
#chimney {position: absolute; top: -100px; left: 65%; width: 90px; height: 100px; border: 2px solid black; z-index: -1; background: repeating-linear-gradient(#e6e6e6, #e6e6e6 10%, black 10%, black 12%); }
#roof {position: absolute; top: 0; width: 100%; height: 110px; border: 2px; background-color: green; background: repeating-linear-gradient(45deg, #750037, #750037 2%, transparent 2%, transparent 5%), repeating-linear-gradient(-45deg, #750037, #750037 2%, #cb2650 2%, #cb2650 5%);}
#window-1, #window-2 {position: absolute; top: 30%; border: 6px solid #750037; width: 100px; height: 80px; background: linear-gradient(to right, #ffd, #ffd 48%, #750037 48%, #750037 52%, #ffd 52%, #ffd 100%);}
#window-1 {left: 7.5%;}
#window-2 {right: 7.5%;}
#door {width: 130px; height: 180px; position: absolute; bottom: 0%; left: 185px; background-color: #e6e6e6; border: 6px solid #750037; transform: translateY(6px);}
#door-knob {width: 20px; height: 20px; background-color: #b35900; border-radius: 50%; position: absolute; top: 50%; right: 5%;}
#welcome {font-family: sans-serif; font-weight: bold; width: 130px; height: 40px; position: absolute; bottom: -47px; left: 178px; background-color: #85e085; border: 2px solid black; transform: skewX(-20deg); display: flex; align-items: center; justify-content: center; }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a House Painting - Build a House Painting

2

I see you have copied the code from the example.
Why don´t you try to write a CSS code on your own first?
Just try to strictly follow the user stories.
I know it looks like a hard challenge, but It´s actually easier, than it seems.

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.