Snowman css challenge, how to put eyes in a head

user_16949049 0
Viewed 106

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

css html
3 Answers

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>

user_174983110

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:)

user_61095540 

        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>

user_176998970
Related