Menu
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
915
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:)
157
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
