Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

  1. Your #chimney should have a top value that puts it at the top of your #house.

I don’t know where I’m making a mistake. The other steps are correct.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>House Painting</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div id="house">
  <div id="roof"></div>
  <div id="chimney"></div>

  <div id="window-1"></div>
  <div id="window-2"></div>

  <div id="door">
    <div id="mat">WELCOME</div>
  </div>

  <div class="smoke"></div>
  <div class="smoke delay1"></div>
  <div class="smoke delay2"></div>
</div>


</body>
</html>



/* file: styles.css */
body {
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;
}

#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #e0c097;
  border: 4px solid #a0522d;
  box-sizing: border-box;
  z-index: 2;
  border-radius: 10px;
}


#roof {
  position: absolute;
  top: 0;
  left: -3px;
  width: 495px;
  height: 100px;
  border: 1px solid #a0522d;
  z-index: 4;
  border-radius: 5px 5px 0 0;
  background-color: #a0522d;
}

#chimney {
  position: absolute;
  width: 40px;
  height: 100px;
  background-color: #5c4033;
  left: 130px;
  top: -105px;
  border: 1px solid #3e2f24;
  border-radius: 5px;
  z-index: 1; 
  box-shadow: inset 0 0 8px #3e2f24;
  top:
}

#door {
  position: absolute;
  bottom: 0;
  right: 210px;
  width: 80px;
  height: 180px; /* maior altura */
  background-color: #654321;
  border: 3px solid #3d2b1f;
  border-radius: 5px;
  box-shadow: inset 0 0 15px #3d2b1f;
  z-index: 5;
  right: 200px;
}

#mat {
  position: absolute;
  bottom: -30px;
  width: 100px;
  left: 5px;
  background-color: #d2b48c;
  text-align: center;
  font-weight: bold;
  border: 2px solid #a0522d;
  font-size: 14px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #a0522d;
  z-index: 6;
  left: -10px;
}

#window-1, #window-2 {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 4px solid #3d2b1f;
  background-color: #87ceeb;
  box-shadow: inset 0 0 10px #a0c8f0;
  border-radius: 8px;
  z-index: 4;
  top: 150px;
}

#window-1 {
  left: 50px;
}

#window-2 {
  right: 50px; 
}

.smoke {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: gray;
  border-radius: 50%;
  top: -128px;
  left: 140px;
  opacity: 0.6;
  animation: puff 3s infinite ease-in-out;
  filter: blur(1.2px);
  z-index: 7;
}

.smoke.delay1 {
  animation-delay: 1s;
}

.smoke.delay2 {
  animation-delay: 2s;
}

@keyframes puff {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-40px) scale(1.3);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-80px) scale(1.6);
    opacity: 0;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Challenge Information:

Build a House Painting - Build a House Painting
https://www.freecodecamp.org/learn/full-stack-developer/lab-house-painting/build-a-house-painting

1 Like
2

your height and top need to be slighly nearer (in absolute value), you can try decreasing top or increasing height

1 Like
3

I set both values to 110 (one negative, one positive), and it worked. Thanks a bunch!

2 Likes
4

It worked bro ..thanks :+1::+1:

5

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