Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

  1. Your #door should be placed at the bottom of the house.
  2. You should set either left or right on your #door and arrange it within the house borders.
    I don’t know what to do to make these right, the final design looks amazing and very accurate to the original one, but I just can’t seem to solve the #42 and #43, I mean my door is centered and at the bottom of the house, what seems to be the problem?

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">
    <title>House Painting</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
     <div id="house">
    <div id="chimney">
      <div id="brick-line">
        <div id="brick-1"></div>
        <div id="brick-2"></div>
      </div>
      
      <div id="brick-line">
         <div id="brick-2"></div>
        <div id="brick-1"></div>
      </div>
      
      <div id="brick-line">
        <div id="brick-1"></div>
        <div id="brick-2"></div>
      </div>
      
      <div id="brick-line">
        <div id="brick-2"></div>
        <div id="brick-1"></div>
      </div>
    </div>
    <div id="roof"></div>
    <div id="window-1">
      <div id="seperator"></div>
    </div>
    <div id="window-2">
      <div id="seperator"></div>
    </div>
    <div id="door">
      <div id="door-knob"></div>
    </div>
  </div>
<div id="welcome-mat">WELCOME</div>
</body>
</html>

/* file: styles.css */
*{
  box-sizing: border-box;
}
body{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #66c4f2 60%, #008000 60%);
}

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

#house > div{
  position: absolute;
}

#door{
  width: 100px;
  height: 150px;
  background-color: #e6e6e6;
  bottom: -6px;
  left: 200px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border: 7px solid #b35900;
}
#door-knob{
  width: 20px;
  height: 20px;
  background-color: #b35900;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  right: 5px;
}

#window-1{
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #ffffb3;
  top: 150px;
  left: 50px;
  border: 7px solid #b35900;
}

#window-2{
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #ffffb3;
  top: 150px;
  right: 50px;
  border: 7px solid #b35900;
}
#seperator{
  width: 5px;
  height: 100%;
  background-color: #b35900;
}

#roof{
  height: 150px;
  width: 100%;
  height: 120px;
  border: 0px solid transparent;
  background:
    repeating-linear-gradient(
      45deg,
      #b35900 0px,
      #7a2e1d 10px,
      transparent 10px,
      transparent 25px
    ),
    repeating-linear-gradient(
      -45deg,
      #b35900 0px,
      #7a2e1d 10px,
      transparent 10px,
      transparent 25px
    );
}
#chimney{
  diplsay: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background-color: #e7e7e7;
  top: -100px;
  right: 50px;
  z-index: -1;
  border: 3px solid black;
}
#brick-line{
  display: flex;
  width: 100%;
  height: 25%;
  border: 1px solid black;
}
#brick-1{
  width: 60%;
  border: 1px solid black;
}
#brick-2{
  width: 41%;
  border: 1px solid black;
}

#welcome-mat{
  display: flex;
  position: relative;
  top: 222px;
  left: -305px;
  width: 100px;
  height: 40px;
  background-color: #85e085;
  transform: skew(-15deg);
  align-items: center;
  justify-content: center;
  font-weight: bold;
  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/145.0.0.0 Safari/537.36

Challenge Information:

Build a House Painting - Build a House Painting

2

Does a flex display make sense when you are using absolute positioning?

Everything is positioned relative to the house, which puts the top of the house at 0. So, what would the bottom of the house be?

3

I used flex on the body to center the house vertically and horizontally (bcz margins only centers in horizontally but I couldn’t find anything to center it vertically), and for positioning the door I just felt it would be easier to use bottom since It’s at the bottom of the house and I used -6px bcz using 0 would make the door’s border popout a little below the house.

4

so should I center the house using position? and position the door with top property

5

Do you need to center it vertically? Couldn’t you just use top to position it vertically?

Try resizing the preview window with display: flex in place. What happens to your house?

6

the house collapses on it self by using flex, I removed display flex and positioned it with top and gave it horizontal margin of auto now when resizing the house doesn’t shrink, it just goes off screen and has a scroll bar , and I positioned the door with the top property, and changed a bit with the door matt (it’s now inside the house div). But #42 our #door should be placed at the bottom of the house, still gives me a fail. Here’s my updated css:

*{
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: linear-gradient(180deg, #66c4f2 60%, #008000 60%);
}

#house{
  margin: auto;
  position: relative;
  top: 100px;
  width: 500px;
  height: 400px;
  background-color: #ff9980;
  border: 7px solid #b35900;
}

#house > div{
  position: absolute;
}

#door{
  width: 100px;
  height: 150px;
  background-color: #e6e6e6;
  top: 243px;
  left: 200px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border: 7px solid #b35900;
}
#door-knob{
  width: 20px;
  height: 20px;
  background-color: #b35900;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  right: 5px;
}

#window-1{
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #ffffb3;
  top: 150px;
  left: 50px;
  border: 7px solid #b35900;
}

#window-2{
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #ffffb3;
  top: 150px;
  right: 50px;
  border: 7px solid #b35900;
}
#seperator{
  width: 5px;
  height: 100%;
  background-color: #b35900;
}

#roof{
  height: 150px;
  width: 100%;
  height: 120px;
  border: 0px solid transparent;
  background:
    repeating-linear-gradient(
      45deg,
      #b35900 0px,
      #7a2e1d 10px,
      transparent 10px,
      transparent 25px
    ),
    repeating-linear-gradient(
      -45deg,
      #b35900 0px,
      #7a2e1d 10px,
      transparent 10px,
      transparent 25px
    );
}
#chimney{
  diplsay: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  background-color: #e7e7e7;
  top: -100px;
  right: 50px;
  z-index: -1;
  border: 3px solid black;
}
#brick-line{
  display: flex;
  width: 100%;
  height: 25%;
  border: 1px solid black;
}
#brick-1{
  width: 60%;
  border: 1px solid black;
}
#brick-2{
  width: 41%;
  border: 1px solid black;
}

#welcome-mat{
  display: flex;
  bottom: -48px;
  left: 197px;
  width: 100px;
  height: 40px;
  background-color: #85e085;
  transform: skew(-15deg);
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid black;
}
7
  1. Your #door should be placed at the bottom of your house.
8

0? bottom: 0px? It worked!! it’s just the borders are a bit off that’s why I didn’t do it in the first place, thank you for your help!