Android Bot

by dreamdealer

HTML

<div class="android">
    <div class="head">
        <div class="eyes"></div>
    </div>
    <div class="body">
        <div class="arms"></div>
    </div>
</div>

CSS

.android {
    position: relative;   
    left: 100px;
    top: 100px;
}
/**** BODY ****/
.body {
    width: 126px;
    height: 103px;
    background-color: #72C400;
    border-radius: 0px 0px 10px 10px;
    position: absolute;
}
.body:before,
.body:after {
    background-color: #72C400;
    content: '';
    width: 30px;   
    height: 62px;
    bottom: -62px;
    position: absolute;
    border-radius: 0px 0px 20px 20px;
}
.body:before { left: 10px; }
.body:after{ right: 10px; }
/**** HEAD ****/
.head {
    width: 126px;
    height: 59px;
    background-color: #72C400;
    border-radius: 100px 100px 0px 0px;
    position: absolute;
    top: -62px;
}
.head:before,
.head:after {
    background-color: #72C400;
    content: '';
    width: 5px;   
    height: 30px;
    position: absolute;
    top: -30px;
    border-radius: 20px 20px 0px 0px; 
}
.head:before {-webkit-transform: translate(-15px, -45px) rotate(30deg); -moz-transform:translate(108px, 15px) rotate(30deg);  }
.head:after{ -webkit-transform: translate(15px, 15px) rotate(-30deg); -moz-transform:translate(13px, 15px) rotate(-30deg);  }
/**** ARMS ****/
.arms:before,
.arms:after {
    background-color: #72C400;
    content: '';
    width: 30px;   
    height: 97px;
    top: -2px;
    position: absolute;
    border-radius: 20px 20px 20px 20px;  
}
.arms:before { left: -34px; }
.arms:after{ right: -34px; }
/**** EYES ****/
.eyes:before,
.eyes:after {
    background-color: #FFFFFF;
    content: '';
    width: 10px;   
    height: 10px;
    top: 23px;
    position: absolute;
    border-radius: 10px; 
}
.eyes:before { left: 41px; }
.eyes:after{ right: 41px; }