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