Minion - Virtual Helper

by Ronny Amarante

HTML

<body>
  <div class="minion">
    <div class="hands">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="glasses">
      <div class="glassesline1"></div>
      <div class="glassesline2"></div>
      <div class="glass1">
        <div class="eye1"></div>
      </div>
      <div class="glass2">
        <div class="eye2"></div>
      </div>
    </div>
    <div class="mouth">
      <ul class="teeth">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="belt-left"></div>
    <div class="belt-right"></div>
    <div class="pants"></div>
    
    <div class="legs">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
  
</body>

SCSS

body{
  background-color: #5CA4FF;
}
.minion{
  position:absolute;
  background-color: #ffed41;
  height: 360px;
  width: 218px;
  border-radius: 218px 218px 130px 130px;
  position:absolute;
	  left:50%;
  	top:50%;
	  margin:-180px 0 0 -109px;
}
.glassesline1{
  background-color: #494949;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin : 0 -10px;
}
.glassesline2{
  background-color: #2d2d2d;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin : 0 -10px;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow:    0px 3px 0px 0px rgba(0, 0, 0, 0.15);
  box-shadow:         0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}

.glass1,.glass2{
  background-color: #e2e2e0;
  height: 102px;
  width: 102px;
  border-radius: 102px;
  position: absolute;
  top: 55px;
  -webkit-box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow:    -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
  box-shadow:         -4px 4px 0px 0px rgba(50, 50, 50, 0.15),1px -1px 0px 0px rgba(255, 255, 255, 1);
}
.glass1{
  left: 10px;
  right: auto;
  z-index: 2;
}
.glass2{
  right: 10px;
  left: auto;
  z-index: 1;
}

.glass1:before,.glass2:before{
  background-color: #e5bf36;
  height: 78px;
  width: 78px;
  border-radius: 78px;
  display: block;
  position: relative;
  top: 12px;
  left: 12px;
  content: "";
}

.glass1:after,.glass2:after{
  background-color: #FFF;
  height: 58px;
  width: 78px;
  border-radius: 78px;
  position: absolute;
  top: 22px;
  left: 12px;
  content: "";
}

.eye1,.eye2{
  background-color: #724c25;
  height: 28px;
  width: 28px;
  border-radius: 28px;
  position: absolute;
  top: 44px;
  z-index: 3;
}
.eye1{
  left: 46px;
}
.eye2{
  right: 46px;
}
.eye1:before,.eye2:before{
  background-color: #2c2d2f;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  display: block;
 ...