.default-position { position:absolute; } .default-radius { border-radius:50%; } .default-border { border:5px solid #111; } $skin-color: #FFC538; $skin-color-dark: #C97C00; body { background: #D9D7AB; } .container { height:400px; width:400px; } .hair_top { @extend .default-position; @extend .default-radius; height:25px; width:25px; background:#111; margin-left:178px; margin-top:75px; overflow:hidden; } .head { @extend .default-position; @extend .default-radius; @extend .default-border; background: $skin-color-dark; height:55px; width:55px; margin-left:157px; margin-top:92px; overflow:hidden; z-index:2; } .head_shade { @extend .default-position; @extend .default-radius; background: $skin-color; width:47px; height:65px; margin-left:4px; margin-top:-5px; z-index:4; } .inner_hair { @extend .default-position; @extend .default-radius; background:#111; height:50px; width:60px; margin-top:-30px; margin-left:-3px; z-index:5; } .left_eye { @extend .default-position; background:#111; height:5px; width:10px; margin-top:25px; margin-left:10px; z-index:10; transform:rotate(20deg); } .right_eye { @extend .left_eye; margin-left:36px; transform:rotate(-20deg); } .mouth { @extend .left_eye; width:25px; margin-top:38px; margin-left:15px; transform:rotate(0deg); } .nips { @extend .default-position; background:#111; height:5px; width:10px; margin-top:55px; margin-left:30px; border-radius:50%; } .torso { @extend .default-position; @extend .default-border; background: $skin-color; height:110px; width:120px; margin-top:115px; margin-left:125px; z-index:0; border-radius:50%; overflow:hidden; box-shadow: inset 0px -9px 0px $skin-color-dark; } .left_boob { @extend .nips; @extend .default-border; @extend .default-position; height:70px; width:70px; background: $skin-color; border-radius:50%; margin-top:-17px; margin-left:-19px; box-shadow: 0px 5px 1px $skin-color-dark, inset 6px 25px 0px 7px #fff; } .right_boob { @extend .left_boob; margin-left:60px; box-shadow: 0px 5px 1px $skin-color-dark, inset -7px 25px 0px 7px #fff; } .belt { @extend .default-position; @extend .default-radius; @extend .default-border; height:110px; width:117px; margin-top:135px; margin-left:127px; z-index:-1; background:#A9CB10; } .buckle { @extend .default-position; @extend .default-border; margin-top:90px; margin-left:44px; z-index:1; height:25px; width:18px; background:#A9CB10; } .left_shoulder { @extend .default-position; @extend .default-border; @extend .default-radius; width:60px; height:60px; margin-left:100px; margin-top:120px; z-index:-1; background: $skin-color-dark; box-shadow: inset -1px 5px 1px #fff; overflow:hidden; } .left_shoulder_inner { @extend .default-position; border-radius:50%; height:50px; width:50px; margin-top:3px; background:$skin-color; } .left_arm { @extend .default-position; @extend .default-border; @extend .default-radius; border-radius:50%; height:30px; width:30px; margin-top:3px; background:$skin-color; margin-top:105px; margin-left:101px; z-index:-4; box-shadow: inset 0px 5px 0px $skin-color-dark; } .right_arm { @extend .left_arm; margin-left:238px; } .right_shoulder { @extend .default-position; @extend .default-border; @extend .default-radius; width:60px; height:60px; margin-left:210px; margin-top:120px; z-index:-1; background: $skin-color-dark; box-shadow: inset -1px 5px 1px #fff; overflow:hidden; } .right_shoulder_inner { @extend .default-position; border-radius:50%; height:50px; width:55px; margin-top:3px; margin-left:6px; background:$skin-color; } .left_leg_top { @extend .default-position; @extend .default-border; @extend .default-radius; width:60px; height:60px; margin-left:105px; margin-top:210px; z-index:-2; background: $skin-color-dark; box-shadow: inset 0px 12px 1px #fff; overflow:hidden; } .left_leg_top_inner { @extend .default-position; border-radius:50%; height:40px; width:55px; margin-top:11px; margin-left:-1px; background:$skin-color; transform:rotate(-30deg) } .left_leg_bottom { @extend .default-position; @extend .default-border; @extend .default-radius; width:45px; height:40px; margin-left:115px; margin-top:245px; z-index:-3; background:$skin-color-dark; } .right_leg_top { @extend .default-position; @extend .default-border; @extend .default-radius; width:60px; height:60px; margin-left:205px; margin-top:210px; z-index:-2; background: $skin-color-dark; box-shadow: inset 0px 12px 1px #fff; overflow:hidden; } .right_leg_top_inner { @extend .default-position; border-radius:50%; height:40px; width:55px; margin-top:11px; margin-left:7px; background:$skin-color; transform:rotate(-150deg) } .right_leg_bottom { @extend .default-position; @extend .default-border; @extend .default-radius; width:45px; height:40px; margin-left:210px; margin-top:245px; z-index:-3; background:$skin-color-dark; } .left_foot { @extend .default-position; @extend .default-border; width:25px; height:14px; border-radius:10px; z-index:-5; background:$skin-color-dark; margin-top:285px; margin-left:120px; transform:rotate(-50deg); } .right_foot { @extend .default-position; @extend .default-border; width:25px; height:14px; border-radius:10px; z-index:-5; background:$skin-color-dark; margin-top:285px; margin-left:225px; transform:rotate(50deg); } .shadow { @extend .default-position; width:140px; height:2px; margin-top:310px; margin-left:120px; box-shadow:0px 5px 5px #111; } .football { @extend .default-position; border:4px solid #111; width:150px; height:75px; border-radius:50%; margin-top:50px; margin-left:111px; z-index:-2; background-image: url('http://www.prowebix.com/img/football2.png'); background-position:-5px; background-size:160px 91px; }