Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

step 44 and step 14 contradicts. when one is right the other becomes wrong.

Your code so far

<!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="chimney-bricks">
                    <div id="line-1">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4" ></div>

                    </div>
                    <div id="line-2">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4"></div>
                    </div>
                    <div id="line-3">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4" ></div>
                    </div>
                    <div id="line-4">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4" ></div>
                    </div>
                    <div id="line-5">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4" ></div>
                    </div>
                    <div id="line-6">
                        <div class="brick brick-1"></div>
                        <div class="brick brick-2"></div>
                        <div class="brick brick-3"></div>
                        <div class="brick brick-4" ></div>
                    </div>
                </div>
            </div>
            <div id="roof">
                <div class="roof-line roof-line-1"></div>
                <div class="roof-line roof-line-2"></div>
                <div class="roof-line roof-line-3"></div>
                <div class="roof-line roof-line-4"></div>
                <div class="roof-line roof-line-5"></div>
                <div class="roof-line roof-line-6"></div>
                <div class="roof-line roof-line-7"></div>
                <div class="roof-line roof-line-8"></div>
            </div>
            <div id="window-1">
                <div class="small-inside-window"></div>
                <div class="big-inside-window"></div>
            </div>
            <div id="window-2">
                <div class="small-inside-window"></div>
                <div class="big-inside-window"></div>
            </div>
            <div id="door">
                <div class="door-handle"></div>
                <div class="door-box box-1"></div>
                <div class="door-box box-2"></div>
                <div class="door-box box-3"></div>
                <div class="door-box box-4"></div>
            </div>
        </div>
        <div id="grass"></div>
    </body>
</html>


html {
  background-color: rgb(143, 218, 247);
}

#grass {
  align-self: flex-end;
  margin-top: -500px;
  width: 100%;
  height: 500px;
  background-color: green;
}

#house {
  position: relative;
  box-sizing: border-box;
  width: 500px;
  height: 400px;
background-color: #a5aaf1;
  border: 3px solid #555;
  margin: 400px auto 300px;
  z-index: 2;
}

#house div {
  position: absolute;
}

#chimney {
  top: 0;
  width: 121px;
  z-index: 1;
  height: 90px;
  border: 1px solid black;
  background-color: brown;
  bottom: 500px;
  transform: translate(300px,-240px);
}


/*   width: 121px;
  z-index: 1;
  height: 90px;
  border: 1px solid black;
  background-color: brown;
  bottom: 500px;
  transform: translate(300px,-240px); */

#chimney-bricks {
  width: 100%;
  height: 100%;
}

#chimney-bricks .brick {
  position: absolute;
  overflow: hidden;
  width: 28px;
  height: 10px;
  border: 2px solid brown;
  background: linear-gradient(to right, rgb(200,50,50),rgb(200,50,50), rgb(160,45,45), rgb(200,50,50), rgb(200,50,50));
  box-shadow: 2px 2px 5px coral;
}

.brick-2 {
  left: 34px
}

.brick-3 {
  left: 68px
}

.brick-4 {
  width: 15px;
  left: 102px
}

#line-2, #line-3, #line-4, #line-5, #line-6 {
  position: absolute;
}

#line-2 {
  top: 15px;
}

#line-3 {
  top: 30px;
}

#line-4 {
  top: 45px;
}

#line-5 {
  top: 60px;
}

#line-6 {
  top: 75px;
}

:is(#line-1, #line-3, #line-5) .brick-4 {
  width: 15px;
}

:is(#line-2, #line-4, #line-6) .brick-1 {
  width: 15px;
}

:is(#line-2, #line-4, #line-6) .brick-2 {
  left: 22px;
}

:is(#line-2, #line-4, #line-6) .brick-3 {
  left: 56px;
}

:is(#line-2, #line-4, #line-6) .brick-4 {
  left: 90px;
}

#house #roof {
  top: 0;
}

#roof {
  left: -100px;
  margin-top: -300px; 
  bottom: 100px;
  width: 400px;
  height: 1px;
  border: 150px solid coral;
  background-color: transparent;
  z-index: 3;
  align-self: flext-start;
}

#roof {
  border-color: transparent transparent coral transparent;
}

#roof div {
  position: absolute;
}

.roof-line {
  top: -22px;
  width: 2px;
  height: 198px;
  border-radius: 90px;
  box-shadow:1px 1px 8px 2px black;
  transform: rotate(44deg);
}

.roof-line-1 {
  visibility: hidden;
}

.roof-line-2 {
  left: 80px;
}

.roof-line-3 {
  left: 160px;
}

.roof-line-4 {
  left: 240px;
}

.roof-line-5 {
  left: 320px;
}

#roof .roof-line-6 {
  height: 143px;
  top: 25px;
  left: 380px;
}

#roof .roof-line-7 {
  left: 440px;
  top: 65px;
  height: 97px;
}

#window-1, #window-2 {
  top: 40px;
  width: 140px;
  height: 100px;
  border: 10px solid #555;
  background: linear-gradient(55deg,hsl(240,50%,95%), hsl(240,50%,90%),  hsl(240,50%,95%));
  z-index: 4;
}

#window-1 {
  left: 10px;
}

#window-2 {
  left: 320px;
}

.small-inside-window {
  width: 65px;
  height: 55px;
  border-right: 3px solid black;
}

.big-inside-window {
  top: 55px;
  width: 100%;
  height: 55px;
  border-top: 3px solid black;
}

#door {
  bottom: 0;
  top:227px;
  left: 160px;
  width: 150px;
  height: 160px;
  border: 5px solid #555;
  background-color: rgb(200,80,80);
  align-self: flex-end;
  z-index: 5;
}

.door-handle {
  top: 65px;
  left: 110px;
  width: 35px;
  height: 15px;
  background-color: coral;
  border-radius: 60%;
  border: 1px solid black;
}

.door-box {
  top: 5px;
  width:70px;
  height: 70px;
  border-radius: 5px;
  box-shadow: 0 0 10px 1px coral;
}

.box-1, .box-3 {
  left: 3px;
}

.box-2, .box-4 {
  left: 77px;
}

.box-3, .box-4 {
  top: 85px;
}

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

Challenge Information:

Build a House Painting - Build a House Painting

2

they don’t contradict each other, you need to coordinate top and height

right now, top is 0, that means that the chimney is not on top of the house.

the result must be that the bottom border of chimney matches the top border of the house

3

I tried that, but the problem persist. I made sure the borders align when the chimney is on top of the house but still the code doesn’t pass.

4

what is the css for chimney in this case?

5 
#chimney {
  top: -254px;
  left: 300px;
  width: 121px;
  z-index: -2;
  height: 247px;
  border: 3px solid black;
  background-color: brown;
  bottom: 500px;
}
6

I think you are outside the range of tolerance by a small amount of pixels, try with values that are nearer (in absolute)

7

I changed the top value to:

top:  -2552px;

which aligns the borders perfectly but it is not enough I guess.

8

Was 2552 a typo? that seems a bit match?

try making them even nearer in absolute value

9

Yes that was a mistake., sorry about that.

I also tried :

  top: -6.4cm;
  left: 300px;
  z-index: -2;
  width: 121px;
  height: 237px;
  border: 3px solid black;
  background-color: brown;
  bottom: 500px;
10

just try the same absolute value for both top and height, why are you using cm now?

11

It finally worked!!

I used :

top:  -244px;
height: 244px;

Thanks a lot. But I don’t understand why it had to be so complex.

12

the test has some leeway, but it wants all the chimeny to be above the house while still touching the house, those two values make that so

1 Like