<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#robot{
600px;
height: 500px;
margin: 50px auto;
border: 4px solid lightgrey;
position: relative;
}
#robot .header{
222px;
height: 117px;
background: #A5B12D;
position: absolute;
left: 189px;
top: 60px;
}
#robot .header .eyel{
position: absolute;
left: 55px;
top: 45px;
20px;
height: 20px;
background: #fff;
}
#robot .header .eyer{
position: absolute;
right: 55px;
top: 45px;
20px;
height: 20px;
background: #fff;
}
#robot .earl{
10px;
height: 26px;
position: absolute;
left: 229px;
top: 34px;
background: #A5B12D;
}
#robot .earr{
10px;
height: 26px;
position: absolute;
left: 371px;
top: 34px;
background: #A5B12D;
}
#robot .body{
222px;
height: 135px;
background: #A5B12D;
position: absolute;
top: 187px;
left: 189px;
}
#robot .arml{
30px;
height: 98px;
background: #A5B12D;
position: absolute;
left: 150px;
top: 187px;
}
#robot .armr{
30px;
height: 98px;
background: #A5B12D;
position: absolute;
left: 420px;
top: 187px;
}
#robot .legl{
30px;
height: 73px;
position: absolute;
background: #A5B12D;
top: 322px;
left: 230px;
}
#robot .legr{
30px;
height: 73px;
position: absolute;
background: #A5B12D;
top: 322px;
left: 340px;
}
</style>
</head>
<body>
<div id="robot">
<div class="header">
<div class="eyel"></div>
<div class="eyer"></div>
</div>
<div class="earl"></div>
<div class="earr"></div>
<div class="body"></div>
<div class="arml"></div>
<div class="armr"></div>
<div class="legl"></div>
<div class="legr"></div>
</div>
</body>
</html>