<div id="wrap">
<div id="body"></div>
<div id="head">
<div id="hair1"></div>
<div id="hair2"></div>
<div id="glasses">
<div id="frame1"></div>
<div id="frame2"></div>
<div id="bridge"></div>
</div>
<div id="lbrow"></div>
<div id="rbrow"></div>
<div id="leye"></div>
<div id="reye"></div>
<div id="lpupil"></div>
<div id="rpupil"></div>
<div id="lear"></div>
<div id="rear"></div>
<div id="nosebridge"></div>
<div id="nose"></div>
<div id="lstache"></div>
<div id="rstache"></div>
<div id="lburn"></div>
<div id="rburn"></div>
<div id="beard1"></div>
<div id="beard2"></div>
<div id="beard3"></div>
</div>
</div>
@green: green;
@black: #090806;
@brown: #6A4E42;
@skin: #DEAB7F;
@eyeglasscolor: @green;
@haircolor: @black;
@eyecolor: @brown;
@skintone: @skin;
html {
background: darkgray;
}
#frame1 {
position: absolute;
top: 175px;
left: 15px;
height: 45px;
width: 70px;
border: 7px solid @eyeglasscolor;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
z-index: 3;
}
#frame2 {
position: absolute;
top: 175px;
right: 15px;
height: 45px;
width: 70px;
border: 7px solid @eyeglasscolor;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
z-index: 3;
}
#bridge {
position: absolute;
top: 175px;
left: 95px;
height: 50px;
width: 50px;
border-top: 12px solid @eyeglasscolor;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
z-index: 2;
}
#head {
position: absolute;
left: 50%;
top: 50%;
margin: -180px -120px;
background: @skintone;
width: 240px;
height: 380px;
border-radius: 100px;
border-top-left-radius: 50px;
box-shadow: inset 0px 0px 0px 12px @haircolor;
}
#hair1 {
position: absolute;
background-color: @haircolor;
height: 130px;
width: 180px;
right: -5px;
top: -20px;
border-top-left-radius: 150%;
border-top-right-radius: 400%;
border-bottom-left-radius: 400%;
z-index: 1;
}
#hair2 {
position: absolute;
background-color: @haircolor;
height: 120px;
width: 200px;
left: 9px;
top: -30px;
border-radius: 200%;
}
#nose {
position: absolute;
border-bottom: 90px solid darken(@skintone, 8%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
width: 20px;
left: 100px;
top: 160px;
}
#lear {
position: absolute;
background-color: @skintone;
width: 30px;
height: 90px;
top: 160px;
left: -20px;
border-top-left-radius: 50%;
border-top-right-radius: 70%;
border-bottom-left-radius: 80%;
z-index: -3;
}
#rear {
position: absolute;
background-color: @skintone;
width: 30px;
height: 90px;
top: 160px;
right: -20px;
border-top-left-radius: 70%;
border-top-right-radius: 50%;
border-bottom-right-radius: 80%;
z-index: -3;
}
#lbrow {
position: absolute;
background-color: @haircolor;
width: 70px;
height: 20px;
top: 155px;
left: 20px;
z-index: 2;
}
#rbrow {
position: absolute;
background-color: @haircolor;
width: 70px;
height: 20px;
top: 155px;
right: 20px;
z-index: 2;
}
#leye {
position: absolute;
background-color: white;
width: 50px;
height: 40px;
top: 165px;
left: 30px;
border-radius: 100px/50px;
box-shadow: 0px 3px 0px 2px grey;
}
#reye {
position: absolute;
background-color: white;
width: 50px;
height: 40px;
top: 165px;
right: 30px;
border-radius: 100px/50px;
box-shadow: 0px 3px 0px 2px grey;
}
#lpupil {
position: absolute;
background-color: @eyecolor;
width: 25px;
height: 25px;
top: 170px;
left: 45px;
border-radius: 100%;
}
#rpupil {
position: absolute;
background-color: @eyecolor;
width: 25px;
height: 25px;
top: 170px;
right: 45px;
border-radius: 100%;
}
#lburn {
position: absolute;
background-color: @haircolor;
bottom: 50px;
left: 5px;
width: 45px;
height: 100px;
border-top-right-radius: 70px;
border-bottom-left-radius: 60px;
}
#rburn {
position: absolute;
background-color: @haircolor;
bottom: 50px;
right: 5px;
width: 45px;
height: 100px;
border-top-left-radius: 70px;
border-bottom-right-radius: 60px;
}
#lstache {
position: absolute;
background-color: @haircolor;
bottom: 80px;
left: 59px;
width: 60px;
height: 30px;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
}
#rstache {
position: absolute;
background-color: @haircolor;
bottom: 80px;
right: 59px;
width: 60px;
height: 30px;
border-top-right-radius: 200px;
border-bottom-left-radius: 200px;
}
#beard1 {
position: absolute;
background-color: @haircolor;
bottom: 10px;
left: 20px;
width: 200px;
height: 50px;
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
}
#beard2 {
position: absolute;
background-color: @skintone;
bottom: 40px;
left: 50px;
width: 140px;
height: 40px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
}
#beard3 {
position: absolute;
bottom: 50px;
left: 100px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid @haircolor;
border-radius: 100%;
}
xxxxxxxxxx