Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

my #window-1 wont move , it’s still on the same level and window-2

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="sky"></div>
    <div id="background"></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>
</body>
</html>

/* file: styles.css */
#house {
  position: relative;
  top: 100px;
  border-right: 50px solid rgba(157, 157, 157, 0.634);
  border-left: 50px solid rgba(157, 157, 157, 0.634);
  margin: auto;
  width: 500px;
  height: 400px;
  background: linear-gradient(to bottom, hsl(0, 0%, 30%), hsl(180, 10%, 95%));
}

#house > div {
  position: absolute;
  top: -30px;
}

#roof {
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: -100px;
  height: 200px;
  width: 700px;
  border-bottom: 20px solid rgb(171, 0, 0);
  border-left: 20px solid rgb(171, 0, 0);
  border-right: 20px solid rgb(171, 0, 0);
  background: linear-gradient(to bottom, hsl(0, 100%, 80%), hsl(0, 100%, 50%))
}
}

#chimney {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: -1;
  height: 50px;
  width: 20px;
  border-radius: 10px;
  background-color: blue;
}

#window-1 {
  position: absolute;
  top: 500px;
  left: 45px;
  height: 100px;
  width: 100px;
  border: 5px solid rgb(169, 90, 90);
  background-color: rgba(132, 214, 255, 0.847);
}

#window-2 {
  position: absolute;
  top: 230px;
  right: 45px;
  height: 100px;
  width: 100px;
  border: 5px solid rgb(169, 81, 81);
  background-color: rgba(132, 214, 255, 0.847);
}

#door {
  position: absolute;
  top: 400px;
  left: 200px;
  height: 150px;
  width: 100px;
  border: 5px solid rgb(147, 69, 69);
  background-color: rgb(176, 125, 42);
}

#background {
  position: absolute;
  top: 400px;
  width: 100%;
  height: 30vh;
  background-color: rgb(0, 156, 0);
}

#sky {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: linear-gradient(#b3e6ff, #b3e6ff 60%, green 60%);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.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

2

try fixing the extra } here

Build a House Painting - Build a House Painting
3

Tell us what’s happening:

I have problems with it not ticking the requirements.

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 rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="sky"></div>
    <div id="background"></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>
</body>
</html>

/* file: styles.css */
#house {
  position: relative;
  top: 100px;
  border-right: 50px solid rgba(157, 157, 157, 0.634);
  border-left: 50px solid rgba(157, 157, 157, 0.634);
  margin: auto;
  width: 500px;
  height: 400px;
  background: linear-gradient(to bottom, hsl(0, 0%, 30%), hsl(180, 10%, 95%));
}

#house > div {
  position: absolute;
}

#roof {
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: -100px;
  height: 200px;
  width: 700px;
  border: none;
  border-bottom: 20px solid rgb(171, 0, 0);
  border-left: 20px solid rgb(171, 0, 0);
  border-right: 20px solid rgb(171, 0, 0);
  background: linear-gradient(to bottom, hsl(0, 100%, 80%), hsl(0, 100%, 50%))
}

#chimney {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: -1;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  background-color: grey;
}

#window-1 {
  position: absolute;
  top: 230px;
  left: 45px;
  height: 100px;
  width: 100px;
  border: 5px solid rgb(169, 90, 90);
  background-color: rgba(132, 214, 255, 0.847);
}

#window-2 {
  position: absolute;
  top: 230px;
  right: 45px;
  height: 100px;
  width: 100px;
  border: 5px solid rgb(169, 81, 81);
  background-color: rgba(132, 214, 255, 0.847);
}

#door {
  position: absolute;
  top: 255px;
  left: 200px;
  height: 150px;
  width: 100px;
  border: 5px solid rgb(147, 69, 69);
  background-color: rgb(176, 125, 42);
}

#background {
  position: absolute;
  top: 300px;
  height: 50vh;
  width: 100%;
  background-color: green;
}

#sky {
  position: absolute;
  z-index: -2;
  height: 60vh;
  width: 100%;
  background-color: rgba(144, 215, 251, 1);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.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

4

let’s do one test at a time

what’s the first failed test? what is the code you have written that you think matches the requirements?

5

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