Question

0

240

Views

Snowman css challenge, how to put eyes in a head

I want to draw snowman. I have the head done, but the eyes won't appear to me. should I use grid or flex ?

#e1 #e2 are the eyes and I put them with head circle in a container cnt-head.

body{
    height: 100%;
    width: 100%;
    }
    #container{
        width: 400px;
        height: 300px;
        background: #dd6b4d;
    }
    
    .sman{
        margin: auto; 
    }
    
    #hat{
        background: #0E1F2B;
        width: 30px;
        height: 12px;
    }
    #hat-white{
        background: #FFFFFF;
        width: 30px;
        height: 8px;
    }
    #hat-long{
        background: #0E1F2B;
        width: 45px;
        height: 4px;
    }
    
    #cnt-head{
        height: 30px;
        width: 45px;
        overflow: hidden; /* This hide the div under another */
    }
    #head{
        background: #FFFFFF;
        position: relative;
        width: 45px;
        height: 45px;
        border-radius: 50px;
        top: -5px;
    }
    
    
    #e1{
        height: 8px;
        width: 8px;
        border-radius: 50px;    
        background: #0E1F2B;
    }
    #e2{
        height: 8px;
        width: 8px;
        border-radius: 50px;    
        background: #0E1F2B;
    }

<html>
<body>
        <div id="container">
            <div id="hat" class="sman"></div>
            <div id="hat-white" class="sman"></div>
            <div id="hat" class="sman"></div>
            <div id="hat-long" class="sman"></div>
    
            <div id="cnt-head" class="sman">
                <div id="head" class="sman"></div>
                <div id="e1"></div>
                <div id="e2"></div>
            </div>
    
        </div>
    </body>
</html>

Every answer will be good thanks, and is it possible to draw the whole snowman in 1 div? Or at least 3 divs for every body part?

Current-Target

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

Hope it's work for you !!!

body{height: 100%;width: 100%;}
#container{width: 400px;height: 300px;background: #dd6b4d;}
.sman{
    margin: auto; 
}
#hat{
    background: #0E1F2B;
    width: 30px;
    height: 12px;
}
#hat-white{
    background: #FFFFFF;
    width: 30px;
    height: 8px;
}
#hat-long{
    background: #0E1F2B;
    width: 45px;
    height: 4px;
}
#cnt-head{
    height: 30px;
    width: 45px;
    overflow: hidden; /* This hide the div under another */
    position: relative;
}
#head{
    background: #FFFFFF;
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    top: -5px;
}
#e1{
    height: 8px;
    width: 8px;
    border-radius: 50px;    
    background: #0E1F2B;
    position: absolute;
    left: 10px;
    top: 10px;
}
#e2{
    height: 8px;
    width: 8px;
    border-radius: 50px;    
    background: #0E1F2B;
    position: absolute;
    right: 10px;
    top: 10px;
}

<div id="container">
        <div id="hat" class="sman"></div>
        <div id="hat-white" class="sman"></div>
        <div id="hat" class="sman"></div>
        <div id="hat-long" class="sman"></div>

        <div id="cnt-head" class="sman">
            <div id="head" class="sman"></div>
            <div id="e1"></div>
            <div id="e2"></div>
        </div>

    </div>

over 4 years ago · Santiago Trujillo Report

0

        body {
            height: 100%;
            width: 100%;
        }

        #container {
            width: 400px;
            height: 300px;
            background: #dd6b4d;
        }

        .sman {
            margin: auto;
        }

        #hat {
            background: #0E1F2B;
            width: 30px;
            height: 12px;
            position: absolute;
            left: 185px;
            top: 0px;
            z-index: 19;
        }

        #hat-middle {
            background: #0E1F2B;
            width: 30px;
            height: 12px;
            position: absolute;
            left: 185px;
            top: 16px;
            z-index: 18;
        }

        #hat-white {
            background: #FFFFFF;
            width: 30px;
            height: 8px;
            position: absolute;
            left: 185px;
            top: 8px;
            z-index: 17;
        }

        #hat-long {
            background: #0E1F2B;
            width: 45px;
            height: 4px;
            position: absolute;
            left: 178px;
            top: 28px;
            z-index: 16;
        }

        #cnt-head {
            height: 30px;
            width: 45px;
            overflow: hidden;
            /* This hide the div under another */
        }

        #head {
            background: #FFFFFF;
            width: 45px;
            height: 45px;
            border-radius: 50px;
            position: absolute;
            left: 177px;
            top: 25px;
            z-index: 3;
        }

        #scarf_Center {
            background-color: rgb(255 156 20);
            position: absolute;
            left: 168px;
            top: 59px;
            width: 65px;
            height: 16px;
            z-index: 15;
            border-radius: 10px 10px 10px 10px;
            border: 4px solid #dd6b4d;
        }

        #e1_right {
            height: 8px;
            width: 8px;
            border-radius: 50px;
            background: #0E1F2B;
            position: absolute;
            left: 205px;
            top: 40px;
            z-index: 5;
        }

        #e2_left {
            height: 8px;
            width: 8px;
            border-radius: 50px;
            background: #0E1F2B;
            position: absolute;
            left: 185px;
            top: 40px;
            z-index: 4;
        }

        #head_bottom {
            background-color: rgb(255, 255, 255);
            position: absolute;
            left: 164px;
            top: 60px;
            width: 80px;
            height: 80px;
            z-index: 1;
            border-radius: 50%;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   


</head>

<body>
    <div id="container">
        <div id="hat" class="sman"></div>
        <div id="hat-white" class="sman"></div>
        <div id="hat-middle" class="sman"></div>
        <div id="hat-long" class="sman"></div>
        <div id="scarf_Center"></div>
        <div id="e1_right"></div>
        <div id="e2_left"></div>
        <div id="head" class="sman"></div>
        <div id="head_bottom" class="sman"></div>
    </div>

    
</body>

</html>

over 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-03-07T22:27:36.220Z

If you right click on the element then select inspect, then in the code hover on your eye div you can see that they are there but below your snowmans head. In this case I would reccomend using a pseudo-element on your head to make the eyes start in the top left position inside that div. Plus that you now can remove the div if you dont wanted it.

body{
height: 100%;
width: 100%;
}
#container{
    width: 400px;
    height: 300px;
    background: #dd6b4d;
}

.sman{
    margin: auto; 
}

#hat{
    background: #0E1F2B;
    width: 30px;
    height: 12px;
}
#hat-white{
    background: #FFFFFF;
    width: 30px;
    height: 8px;
}
#hat-long{
    background: #0E1F2B;
    width: 45px;
    height: 4px;
}

#cnt-head{
    height: 30px;
    width: 45px;
    overflow: hidden; /* This hide the div under another */
}
#head::before, #head::after{
  content: "";
    height: 8px;
    width: 8px;
    left:12px;
    top:15px;
    border-radius: 50px;
    background: #0E1F2B;
    position: absolute;
}
#head::after{
    left:26px!important;
}
#head{
    background: #FFFFFF;
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    top: -5px;
}

 <div id="container">
        <div id="hat" class="sman"></div>
        <div id="hat-white" class="sman"></div>
        <div id="hat" class="sman"></div>
        <div id="hat-long" class="sman"></div>

        <div id="cnt-head" class="sman">
            <div id="head" class="sman"></div>
        </div>
    </div>

Sidenote: remember to make id's unique:)

0

240

Snowman css challenge, how to put eyes in a head

3 answers

0

0

0

Find remote jobs

Andres GPT