Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Hi I am unable to pass the

  1. Your windows should be placed below your #roof and at least higher than one third of your #door’s height.

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">
    <link rel="stylesheet" href="styles.css">
    <title>House Painting</title>
</head>
<body>
    <div id="house">
        <div id="chimney">
            <div id="smoke"></div>
        </div>
        <div id="roof"></div>
        <div id="window-1"></div>
        <div id="window-2"></div>
        <div id="door">
            <div class="door-bg"></div>
            <div id="door-knob"></div>
        </div>
        <div id="welcome">WELCOME</div>
    </div>
    <!-- ...existing code... -->
    <script>
      const door = document.getElementById('door');
      const knob = document.getElementById('door-knob');
      knob.addEventListener('click', function(e) {
        e.stopPropagation();
        door.classList.toggle('open');
      });
    </script>
<!-- ...existing code... -->
</body>
</html>


body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(#b3e6ff, #b3e6ff 60%, green 60%);
}

* {
    box-sizing: border-box;
}


/* ...existing code... */

#house {
    position: relative;
    border: 6px solid #8B4513;
    background-color: #ff9980;
    width: 500px;
    height: 400px;
    flex: 0 0 auto;
    transition: width 0.3s, height 0.3s;
}

#chimney {
    position: absolute;
    width: 90px;
    height: 100px;
    background: repeating-linear-gradient(#e6e6e6, #e6e6e6 10%, black 10%, black 12%);
    top: -100px;
    left: 65%;
    z-index: -1;
    border: 2px solid black;
}

#smoke {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    top: -20px;
    left: 20px;
    box-shadow: 0 -10px 10px 10px rgba(0, 0, 0, 0.3);
    border: none;
    animation: smokeAnimation 3s infinite ease-in-out;
}

#roof {
    border: 2px;
    width: 100%;
    height: 110px;
    position: absolute;
    top: 0;
    background: repeating-linear-gradient(45deg, #b35900, #b35900 2%, transparent 2%, transparent 5%), 
    repeating-linear-gradient(-45deg, #b35900, #b35900 2%, #ff9980 2%, #ff9980 5%);
}

#window-1 {
    left: 7.5%;
}

#window-2 {
    right: 7.5%;
}

#window-1, #window-2 {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #ffffb3, #ffffb3 48%, #b35900 48%, #b35900 52%, #ffffb3 52%, #ffffb3 100%);
    position: absolute;
    top: 40%;
    border: 6px solid #8B4513;
}

#door {
    width: 130px;
    height: 180px;
    position: absolute;
    bottom: 0%;
    left: 37%;
    background-color: #e6e6e6;
    border: 6px solid #8B4513;
    transform: translateY(1vw);
    transform-origin: left bottom;
    transition: transform 0.7s cubic-bezier(.77,0,.18,1);
    cursor: pointer;
    overflow: hidden;
}

#door.open {
    transform: translateY(1vw) rotateY(-75deg);
}

#door-knob {
    width: 20px;
    height: 20px;
    background-color: #8B4513;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    cursor: pointer;
}

.door-bg {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

#door.open .door-bg {
    opacity: 1;
}

#welcome {
    font-family: sans-serif;
    font-weight: bold;
    width: 130px;
    height: 40px;
    position: absolute;
    bottom: -47px;
    left: 178px;
    background-color: #85e085;
    border: 2px solid black;
    transform: skewX(-20deg);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
}

@media (max-width: 600px) {
    #house {
        width: 95vw;
        height: 70vw;
    }
    #roof, #chimney, #window-1, #window-2, #door, #welcome {
        font-size: 3vw;
    }
}

/* ...existing code... */

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

Challenge Information:

Build a House Painting - Build a House Painting

2

try to remove the transitions and the media query, and replace relative units with absolute units

3

Thank Bro, it was the transitions and media query that was blocking me

:call_me_hand: