Cartman CSS3

Cartman CSS3

by Henrique Marques Fernandes

HTML

<div class="table-w">
  <div class="table-c">
    <div class="cartman">
      <div class="head">
        <div class="hat">
          <div class="hat-top"></div>
        </div>
        <div class="eyes">
          <div></div>
          <div></div>
        </div>
        <div class="mouth"></div>
      </div>
      <div class="body">
        <div class="hand left"></div>
        <div class="hand right"></div>
        <div class="buttons">
          <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="foot"></div>
    </div>
  </div>
</div>

SCSS

$bodyColor: #feedc5;
$blueHat: #00bac6;
$yellow: #ffe11d;
$brown: #79472e;
$shoes: #2c2c34;
$red: #EC3458;
$headSize: 200px;
body,
html {
  background: #eee;
  height: 100%;
}

.table-w {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
  .table-c {
    display: table-cell;
    vertical-align: middle;
  }
}

.cartman {
  position: relative;
  display: inline-block;
  .head {
    width: 200px;
    height: 180px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: $bodyColor;
    position: relative;
    display: inline-block;
    &:after {
      content: " ";
      width: 100px;
      height: 30px;
      border-bottom: solid 1px #333;
      -webkit-border-radius: 45%;
      -moz-border-radius: 45%;
      border-radius: 45%;
      position: absolute;
      left: calc(50% - 50px);
      bottom: 6px;
    }
    .hat {
      border-top: solid 50px $blueHat;
      width: 200px;
      height: 130px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      position: relative;
      &:after {
        content: " ";
        width: 200px;
        height: 70px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border-top: solid 10px #ffe11d;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-box-shadow: 0px -1px 0px 0px rgba(51, 51, 51, 1);
        -moz-box-shadow: 0px -1px 0px 0px rgba(51, 51, 51, 1);
        box-shadow: 0px -1px 0px 0px rgba(51, 51, 51, 1);
      }
      &:before {
        content: " ";
        height: 20px;
        width: 60px;
        background: $yellow;
        position: absolute;
        top: -55px;
        left: calc(50% - 30px);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
    }
    .eyes {
      position: absolute;
      top: 36%;
      width: 100%;
      >div {
        width: 50px;
        height:...