Tell us what’s happening:
Hello everyone. I completed the build a house painting lab and everything passes except the final one where the windows need a left or right value assigned and they need to be inside the borders of the house, as far as I can see that is the case. If someone could point out where the problem lies in my code I would be very grateful.
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">
<meta name="description" content="Painting of a castle made entirely with code"/>
<link rel="stylesheet" href="styles.css"/>
<title>House Painting</title>
</head>
<body>
<div id="moon"></div>
<div class="water"></div>
<div class="path"></div>
<div class="star" id="star-1"></div>
<div class="star" id="star-2"></div>
<div class="star" id="star-3"></div>
<div class="star" id="star-4"></div>
<div class="star" id="star-5"></div>
<div class="star" id="star-6"></div>
<div class="star" id="star-7"></div>
<div class="star" id="star-8"></div>
<div class="star" id="star-9"></div>
<div class="star" id="star-10"></div>
<div class="star" id="star-11"></div>
<div class="star" id="star-12"></div>
<div class="star" id="star-13"></div>
<div class="star" id="star-14"></div>
<div class="star" id="star-15"></div>
<div class="star" id="star-16"></div>
<div class="star" id="star-17"></div>
<div class="star" id="star-18"></div>
<div class="star" id="star-19"></div>
<div class="star" id="star-20"></div>
<div class="star" id="star-21"></div>
<div class="star" id="star-22"></div>
<div class="star" id="star-23"></div>
<div id="house">
<div id="window-1">
<div class="top-window-vertical-line"></div>
<div class="top-window-horizontal-line"></div>
</div>
<div id="window-2">
<div class="top-window-vertical-line"></div>
<div class="top-window-horizontal-line"></div>
</div>
<div class="triangle-spacer triangle-spacer-left"></div>
<div class="triangle-border triangle-border-left"></div>
<div class="tower-top-behind left-tower-top-behind"></div>
<div class="border-behind border-left-behind"></div>
<div class="tower-balcony-behind tower-balcony-left-behind"></div>
<div class="tower-top left-tower-top">
<div class="tower-balcony">
<div class="balcony-top">
<div class="spacer" id="tower-one"></div>
<div class="spacer" id="tower-two"></div>
<div class="spacer" id="tower-three"></div>
<div class="spacer" id="tower-four"></div>
<div class="tower-block tb-1 "></div>
<div class="tower-block tb-2 "></div>
<div class="tower-block tb-3 "></div>
<div class="tower-block tb-4 "></div>
<div class="tower-block tb-5 "></div>
</div>
<div class="balcony-bottom">
<div class="balcony-border balcony-border-left"></div>
</div>
</div>
</div>
<div class="border border-left"></div>
<div class="block-top left"></div>
<div class="small-block-top middle-left">
<div class="spacer" id="one"></div>
<div class="spacer" id="two"></div>
<div class="spacer" id="three"></div>
</div>
<div class="top-balcony">
<div class="balcony-top">
<div class="spacer" id="balcony-one"></div>
<div class="spacer" id="balcony-two"></div>
<div class="spacer" id="balcony-three"></div>
<div class="tower-block tb-balcony-1"></div>
<div class="tower-block tb-balcony-4"></div>
</div>
<div class="balcony-bottom">
<div class="balcony-border balcony-border-top"></div></div>
</div>
<div class="top-middle-window">
<div class="middle-window">
<div class="top-window-middle-vertical-line"></div>
<div class="top-window-middle-horizontal-line"></div>
</div>
</div>
<div class="small-block-top middle-right">
<div class="spacer" id="one"></div>
<div class="spacer" id="two"></div>
<div class="spacer" id="three"></div>
</div>
<div class="block-top right" ></div>
<div class="tower-top right-tower-top">
<div class="tower-balcony">
<div class="balcony-top">
<div class="spacer" id="tower-one"></div>
<div class="spacer" id="tower-two"></div>
<div class="spacer" id="tower-three"></div>
<div class="spacer" id="tower-four"></div>
<div class="tower-block tb-1"></div>
<div class="tower-block tb-2"></div>
<div class="tower-block tb-3"></div>
<div class="tower-block tb-4"></div>
<div class="tower-block tb-5"></div>
</div>
<div class="balcony-bottom">
<div class="balcony-border balcony-border-right"></div></div>
</div>
<div class="triangle-spacer triangle-spacer-right"></div>
<div class="triangle-border triangle-border-right"></div>
</div>
<div class="border border-right"></div>
<div class="tower-top-behind right-tower-top-behind"></div>
<div class="border-behind border-right-behind"></div>
<div class="tower-balcony-behind tower-balcony-right-behind"></div>
<div id="chimney">
</div>
<div class="roof"></div>
<div id="roof"></div>
<div class="tower-dividers left-tower">
<div class="top-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="middle-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
</div>
<div class="middle-dividers">
<div class="divider-one">
<div class="top-divider"></div>
<div class="middle-divider">
<div class="middle-bottom-window">
<div class="middle-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-divider"></div>
</div>
<div class="divider-two">
<div class="top-divider"></div>
<div class="middle-divider">
<div class="middle-bottom-window">
<div class="middle-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-divider"></div>
</div>
<div class="divider-three">
<div class="top-divider"></div>
<div class="middle-divider">
<div class="middle-bottom-window">
<div class="middle-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-divider"></div>
</div>
<div class="divider-four">
<div class="top-divider"></div>
<div class="middle-divider">
<div class="middle-bottom-window">
<div class="middle-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-divider"></div>
</div>
<div class="divider-five">
<div class="top-divider"></div>
<div class="middle-divider">
<div class="middle-bottom-window">
<div class="middle-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-divider"></div>
</div>
</div>
<div id="door"></div>
<div class="tower-dividers right-tower">
<div class="top-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="middle-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
<div class="bottom-tower-divider">
<div class="tower-window">
<div class="tower-window-inner"></div>
<div class="vertical-window-line"></div>
<div class="horizontal-window-line"></div>
</div>
</div>
</div>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: rgb(35,35,35)
}
/* Castle */
#house {
position: relative;
width: 500px;
height: 400px;
background-color: rgba(109,25,25);
border: 2px solid rgba(10,10,10, 0.9);
border-radius: 2px, 3px, 1px, 2px;
margin: 50vh auto;
transform: translateY(-50%);
}
#roof {
position: absolute;
background-color: transparent;
border: 0px solid transparent;
width: 0;
height: 0;
}
.roof {
position: absolute;
top: 96px;
left: 70px;
background-color: rgba(35,35,35, 0.4);
width: 358px;
height: 36px;
z-index: 5;
border: 2px solid rgb(10,10,10);
}
#chimney {
position: absolute;
background-color: transparent;
border: 0px solid transparent;
width: 0;
height: 0;
z-index: -1;
}
/* The spacing between the two watch towers and the central watch tower*/
.block-top {
position: absolute;
top: -1.509px;
background-color: rgb(35,35,35);
width: 72.428571429px ;
height: 100px;
border-bottom: 2px solid rgba(10,10,10, 0.9);
}
.left {
left: 70.128571429px ;
border-right: 2px solid rgba(10,10,10, 0.9);
}
.right {
right: 70.428571429px ;
border-left: 2px solid rgba(10,10,10, 0.9);
}
/*adding spacing to make the middle*/
.small-block-top {
position: absolute;
top: -1.509;
width: 71.428571429px;
height: 50px;
background-color: rgb(35,35,35);
border-bottom: 2px solid rgba(10,10,10, 0.9);
}
.middle-left {
left: 141.428571429px;
border-right: 2px solid rgba(10,10,10, 0.9);
}
.middle-right {
right: 141.428571429px;
z-index: 1;
border-left: 2px solid rgba(10,10,10, 0.9);
}
/*Making the tower top part*/
.tower-top {
width: 71.428571429px;
height: 100px;
position: absolute;
border-left: 35.714285715px solid transparent;
border-right: 35.714285715px solid transparent;
border-bottom: 120px solid rgb(28,28,28);
top: -38.509;
border-top-left-radius: 5px;
border-top-right-radius:5px;
z-index: 6;
}
.left-tower-top {
left: -1;
}
.right-tower-top {
right: -1px;
}
.border {
width: 73.428571429px;
height: 102px;
position: absolute;
border-bottom: 120px solid rgb(10,10,10);
top: -40;
border-top-left-radius: 5px;
z-index: 5;
}
.border-right {
border-right: 35.714285715px solid rgb(35,35,35);
border-left: 35.714285715px solid transparent;
right: -1.95;
}
.border-left {
border-right: 35.714285715px solid transparent;
border-left: 35.714285715px solid rgb(35,35,35);
left: -1.95;
}
/*spacers*/
.triangle-spacer {
position: absolute;
border-bottom: 10px solid rgb(35,35,35);
transform: rotate(180deg);
z-index: 6;
}
.triangle-spacer-left {
top: 96.491px;
left: 65px;
border-right: 10px solid transparent;
border-left: 40px solid transparent;
}
.triangle-spacer-right {
top: 135px;
right: 25px;
border-right: 40px solid transparent;
border-left: 10px solid transparent;
z-index: 2;
}
.triangle-border {
position: absolute;
border-bottom: 10px solid rgb(10,10,10);
transform: rotate(180deg);
z-index: 1;
}
.triangle-border-left {
top: 98.291px;
left: 65px;
border-right: 10px solid transparent;
border-left: 40px solid transparent;
}
.triangle-border-right {
top: 136.291px;
right: 25px;
border-right: 40px solid transparent;
border-left: 10px solid transparent;
z-index: 1;
}
.spacer {
position: absolute;
width: 6.675324675px;
height: 12.675324675px;
bottom: -12;
background-color: rgb(35,35,35);
border-bottom: 2px solid rgba(10,10,10, 0.9);
border-right: 2px solid rgba(10,10,10, 0.9);
border-left: 2px solid rgba(10,10,10, 0.9);
}
#one {
left: 13.35064935;
}
#two {
left: 33.376623375;
}
#three {
left: 53.4025974;
}
.tower-balcony {
position: absolute;
width: 91.428571429px;
height: 50px;
bottom: -165px;
left: -45px;
z-index: 6;
}
.balcony-top {
width: 100%;
height: 80%;
background-color: rgba(109,25,25);
border: 2px solid rgb(10,10,10);
border-radius: 3px 3px 1px 1px;
}
.balcony-bottom {
background-color: transparent;
}
.balcony-border {
border-bottom: 10px solid rgba(10,10,10, 0.9);
z-index: 6;
}
.balcony-border-left {
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform: rotate(180deg);
}
.balcony-border-right {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: rotate(180deg);
}
.top-balcony {
z-index: 2;
top: -1.509;
left: 206.5;
position: absolute;
width: 81.428571429px;
height: 25px;
background-color: rgb(35,35,35);
}
.balcony-border-top {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transform: rotate(180deg);
}
#tower-one {
top: 0;
left: 13.35064935;
}
#tower-two {
top: 0;
left: 33.376623375;
}
#tower-three {
top: 0;
left: 53.4025974;
}
#tower-four {
top: 0;
left: 73.4025974
}
#balcony-one {
top: 0;
left: 17.35064935;
}
#balcony-two {
top: 0;
left: 37.376623375;
}
#balcony-three {
top: 0;
left: 57.4025974;
}
.tower-block {
position: absolute;
z-index: 8;
border-radius: 2px;
background-color: rgb(10,10,10);
width: 17.375324675px;
height: 6.34525151234525px;
top: -2.15225125052505115225125px;
}
.tb-1 {
left: -1
}
.tb-2 {
left: 17.94
}
.tb-3 {
left: 38.2
}
.tb-4 {
left: 58.2
}
.tb-5 {
left: 76.5
}
.tb-balcony-1 {
left: 1px;
}
.tb-balcony-4 {
left: 63.5px;
}
/* Making the spires on the back side of the castle*/
.tower-top-behind {
z-index: 3;
width: 45.714285715px;
height: 50px;
position: absolute;
border-left: 24.857142857px solid transparent;
border-right: 24.857142857px solid transparent;
border-bottom: 105px solid rgb(28,28,28);
top: -8.509;
border-top-left-radius: 5px;
border-top-right-radius:5px;
}
.left-tower-top-behind {
left: 47px;
}
.right-tower-top-behind {
right: 47px;
top: -10;
}
.border-behind {
width: 47.714285715px;
height: 52px;
position: absolute;
border-left: 27.857142857px solid rgb(35,35,35);
border-right: 27.857142857px solid rgb(35,35,35);
border-bottom: 110px solid rgb(10,10,10);
top: -12;
border-top-left-radius: 5px;
z-index: 2;
}
.border-right-behind {
right: 44;
}
.border-left-behind {
left: 43.5;
}
.tower-balcony-behind {
position: absolute;
z-index: 7;
width: 50px;
height: 10px;
}
.tower-balcony-left-behind {
border-bottom: 17px solid transparent;
border-right: 7px solid rgba(109,25,25);
border-left: 5px solid transparent;
transform: rotate(270deg);
top: 114px;
left: 64px;
}
.tower-balcony-right-behind {
border-bottom: 14px solid transparent;
border-right: 7px solid rgba(109,25,25);
border-left: 5px solid transparent;
transform: rotate(90deg) scalex(-1);
top: 115.3px;
right: 62.5px;
z-index: 7;
}
/* Making the top windows*/
.top-middle-window {
position: absolute;
z-index: 7;
border-left: 2px solid rgb(10,10,10);
border-right: 2px solid rgb(10,10,10);
width: 73.428571429px;
height: 51px;
left: 211.4px;
top: 47px;
}
.middle-window {
width: 50px;
height: 50px;
position: absolute;
background: radial-gradient(circle, rgb(85,85,85) 50%, rgb(10,10,10), 60%, transparent 62%);
top: -8.109px;
left: 10px;
}
#window-1 {
position: absolute;
z-index: 7;
width: 40px;
height: 35px;
background: radial-gradient(circle, rgb(85,85,85) 40%, rgb(10,10,10), 50%, transparent 52%);
top: 62px;
border: 1px solid transparent;
left: 158.3;
}
#window-2 {
position: absolute;
z-index: 7;
width: 40px;
height: 35px;
background: radial-gradient(circle, rgb(85,85,85) 40%, rgb(10,10,10), 50%, transparent 52%);
top: 62px;
border: 1px solid transparent;
right: 158.3;
}
.top-window-middle-vertical-line {
position: absolute;
width: 2px;
height: 77%;
background-color: rgb(10,10,10);
top: 10%;
left: 50%;
transform: translatex(-50%) rotate(45deg);
}
.top-window-middle-horizontal-line {
position: absolute;
height: 2px;
width: 80%;
background-color: rgb(10,10,10);
top: 53%;
left: 9%;
transform: translatey(-50%) rotate(45deg);
}
.top-window-vertical-line {
position: absolute;
width: 2px;
height: 75%;
background-color: rgb(10,10,10);
top: 10%;
left: 50%;
transform: translatex(-50%) rotate(45deg);
}
.top-window-horizontal-line {
position: absolute;
height: 2px;
width: 65%;
background-color: rgb(10,10,10);
top: 50%;
left: 16%;
transform: translatey(-50%) rotate(45deg);
}
/* Making the left and right towers more detailed*/
.tower-dividers {
position: absolute;
z-index: 6;
width: 70px;
height: 270px;
bottom: 0px;
}
.left-tower {
left: 0px;
}
.right-tower {
right: 0px;
}
.top-tower-divider {
position: absolute;
top: 0%;
width: 100%;
height: 25%;
border: 2px solid rgb(10,10,10)
}
.middle-tower-divider {
position: absolute;
top: 25%;
width: 100%;
height: 25%;
border: 2px solid rgb(10,10,10)
}
.bottom-tower-divider {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
border: 2px solid rgb(10,10,10)
}
.tower-window {
position: absolute;
top: 16px;
left: 18px;
width: 30px;
height: 30px;
background-color: rgb(10,10,10);
border-radius: 15px 15px 2px 2px;
}
.tower-window-inner {
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: rgb(85,85,85);
border-radius: 15px 15px 2px 2px;
}
.vertical-window-line {
position: absolute;
width: 2px;
height: 100%;
background-color: rgb(10,10,10);
left: 50%;
transform: translatex(-50%);
}
.horizontal-window-line {
position: absolute;
height: 2px;
width: 100%;
background-color: rgb(10,10,10);
top: 50%;
transform: translatey(-50%);
}
/**/
.middle-dividers {
position: absolute;
width: 356px;
height: 264px;
top: 132px;
left: 70px;
}
.divider-one {
position: absolute;
width: 20%;
height: 100%;
left: 0;
top: 0;
}
.divider-two {
position: absolute;
width: 20%;
height: 100%;
left: 20%;
top: 0;
}
.divider-three {
position: absolute;
width: 20%;
height: 100%;
left: 40%;
top: 0;
}
.divider-four {
position: absolute;
width: 20%;
height: 100%;
left: 60%;
top: 0;
}
.divider-five {
position: absolute;
width: 20%;
height: 100%;
left: 80%;
top: 0;
}
.top-divider {
position: absolute;
top: 0%;
width: 100%;
height: 21.5%;
border: 2px solid rgb(28,28,28)
}
.middle-divider {
position: absolute;
top: 21.5%;
width: 100%;
height: 37%;
border: 2px solid rgb(28,28,28)
}
.bottom-divider {
position: absolute;
top: 58.5%;
width: 100%;
height: 42%;
border: 2px solid rgb(28,28,28)
}
.middle-bottom-window {
position: absolute;
top: 16px;
left: 8px;
width: 50px;
height: 60px;
background-color: rgb(10,10,10);
border-radius: 2px;
}
.middle-window-inner {
position: absolute;
top: 2px;
left: 2px;
width: 46px;
height: 56px;
background-color: rgb(85,85,85);
border-radius: 2px;
}
#door {
position: absolute;
z-index: 6;
bottom : 0px;
left: 250px;
width: 59px;
height: 100px;
transform: translatex(-54%);
background-color: rgb(35,35,35);
border: 1px solid rgb(10,10,10);
border-radius: 28px 28px 2px 2px;
}
/* Castle End */
/* Background */
#moon {
position: absolute;
top: -180px;
left: 50%;
width: 390px;
height: 390px;
transform: translatex(-50%);
background: radial-gradient(circle closest-side, rgb(100,100,100) 40%, rgb(175,175,175) 48%, rgb(175,175,175) 69%, rgb(10,10,10) 70%, rgb(130,130,130) 70% , transparent 78%)
}
.water {
position: absolute;
z-index: -1;
background-color: rgba(25,25,130,0.18);
width: 100%;
height: 105px;
border-top: 2px solid rgb(10,10,10);
border-bottom: 1px solid rgb(10,10,10);
top: 420px;
border-radius: 0 0 50px 40px;
}
.path {
width: 45.714285715px;
height: 50px;
position: absolute;
border-left: 104.857142857px solid transparent;
border-right: 104.857142857px solid transparent;
border-bottom: 305px solid rgb(105,105,105);
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
.star {
position: absolute;
width: 20px;
height: 20px;
transform: translatex(-50%);
background: radial-gradient(circle closest-side, rgb(175,175,175) 48%, rgb(175,175,175) 64%, rgb(10,10,10) 64%, rgb(130,130,130) 80% , transparent 89%)
}
#star-1 {
top: 25;
left: 30;
}
#star-2 {
top: 105;
left: 86;
}
#star-3 {
top: 205;
left: 150;
}
#star-4 {
top: 305;
left: 223;
}
#star-5 {
top: 290;
left: 37;
}
#star-6 {
top: 100;
left: 300;
}
#star-7 {
top: 20;
left: 290;
}
#star-8 {
top: 25;
left: 380;
}
#star-9 {
top: 130;
left: 395;
}
#star-10 {
top: 150;
left: 536;
}
#star-11 {
top: 136;
left: 786;
}
#star-12 {
top: 115;
left: 856;
}
#star-13 {
top: 25;
left: 920;
}
#star-14 {
top: 70;
left: 940;
}
#star-15 {
top: 25;
left: 1050;
}
#star-16 {
top: 40;
left: 1150;
}
#star-17 {
top: 150;
left: 1040;
}
#star-18 {
top: 200;
left: 970;
}
#star-19 {
top: 310;
left: 1040;
}
#star-20 {
top: 230;
left: 1140;
}
#star-21 {
top: 280;
left: 1240;
}
#star-22 {
top: 120;
left: 1280;
}
#star-23 {
top: 25;
left: 1230;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0
Challenge Information:
Build a House Painting - Build a House Painting
