Simpson Lego Minifigure

HTML
<div class='container'> <div class='minifig-container'> <div class='minifigure'> <div id='head'> <div class='brew left'></div> <div class='brew right'></div> <div class='eye left'></div> <div class='eye right'></div> <div class='nose'></div> <div class='bread'></div> </div> <div id='ears'> <div class='ear left'></div> <div class='ear right'></div> </div> <div id='body'> <div class='shirt'></div> <div class='collar left'></div> <div class='collar right'></div> </div> <div class='shoulder left'></div> <div class='shoulder right'></div> <div class='arm left'></div> <div class='arm right'></div> <div class='hand left'> <div class='wrist left'></div> </div> <div class='hand right'> <div class='wrist right'></div> </div> <div id='belt'></div> <div id='down'> <div class='leg left'></div> <div class='leg right'></div> </div> </div> </div> </div>
SCSS
*, *:before, *:after{ box-sizing: border-box; } *:before, *:after{ display: block; position: absolute; content: ''; } $skin-color: #fccc29; $skin-color-dark: #c8a220; $bread-color: #d3a64b; $eye-color: #ffffff; $leg-color: #b7d6ef; html { height: 100%; width: 100%; } body{ background-color: rgb(44,76,121); } .minifig-container{ position: absolute; height: 300px; width: 75px; top: calc(50% - (300px / 2)); left: calc(50% - (75px / 2)); } .minifigure{ position: relative; width:75px; height:200px; #ears{ position:relative; top:56px; .ear{ z-index:-1; position:absolute; width:7px; height:14px; background-color: $skin-color; border:1px solid rgba(0,0,0,.1); border-radius:80%; } .ear.left{ left:0px; border-right:none; transform: rotate(-10deg); } .ear.right{ right:0; border-left:none; transform: rotate(10deg); box-shadow: inset -3px -5px 5px -4px rgba(0,0,0, .5); } } #head{ position: absolute; z-index:3; width: 65px; height:120px; top:5px; left: calc(50% - (65px / 2)); background-color: $skin-color; border-top-left-radius: 50% 25px; border-top-right-radius: 50% 25px; border-bottom-right-radius: 30%; border-bottom-left-radius: 30%; box-shadow: inset 0 -10px 30px -5px rgba(0,0,0, .4), inset -8px 0 20px -5px rgba(0,0,0,.4), 0 10px 15px -8px rgba(0,0,0,.6) ; /*&:before{ top:-2px; left: calc(50% - (40px / 2)); width:40px; height:10px; border-radius: 50%; background-color:$skin-color; box-shadow: inset 0 10px 10px -8px rgba(0,0,0, .2); }*/ .brew{ position:absolute; top:28px; z-index:1; width: 30px; height: 30px; background-color: $skin-color; border-radius: 50%; } .brew.left{ left: -1px; box-shadow: inset 2px 1px 3px 1px rgba(255,255,255,.4); } .brew.right{ right:-1px; box-shadow: inset 1px 2px 3px 1px rgba(255,255,255,.4); } .eye{ z-index: 10; position:absolute; top:33px; width:30px; height:30px; background-color: $eye-color; border-radius:50%; box-shadow: inset 3px 10px 8px -7px rgba(0,0,0,.2); &:before{ z-index:-10; width:6px; height: 6px; top: calc(50% - (6px / 2)); left: calc(50% - (6px / 2)); background-color: black; border-radius:50%; } &:after{ } } .eye.left{ right: 0px; } .nose{ z-index:12; position:absolute; top:58px; left: calc(50% - (12px / 2)); width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.1); border-top:none; background-color: $skin-color; box-shadow: inset -16px 0px 5px -15px rgba(0,0,0,.2); } .bread{ position: absolute; top:65px; left: calc(50% - (66px / 2)); width:66px; height: 54px; background-color: $bread-color; border-radius: 50%; box-shadow: inset 0 -4px 20px -5px rgba(0,0,0,.5), inset -4px 0 20px -5px rgba(0,0,0,.4); &:before{ top:17px; left: calc(50% - (50px / 2)); width:50px; height:20px; border-bottom: 1px solid rgba(0,0,0,.5); border-radius:40%; } &:after{ top:40px; left: calc(50% - (10px / 2 )); width:10px; height:8px; border-bottom: 1px solid rgba(0,0,0,.2); border-radius: 80%; } } } #body{ position: absolute; z-index:3; top:126px; left: calc(50% - ((80px ) / 2)); height:0; width:80px; border-color: transparent transparent #ffffff transparent; border-width: 0 10px 70px 10px; border-style:solid; &:before{ top:44px; left: calc(50% - (30px / 2)); width: 30px; height:7px; border:1px solid rgba(0,0,0, .3); border-bottom: none; border-radius:50%; } .shirt{ position:absolute; top: 4px; left: calc(50% - (40px / 2)); width: 40px; height:30px; background-color: $skin-color; -webkit-clip-path: polygon(50% 45%, 0% 0, 100% 0); &:before{ left: -10px; width: 30px; height: 20px; border:1px solid rgba(0,0,0, .5); background-color: #fff; border-radius: 1% 80% 1% 1%; } &:after{ right: -9px; width: 30px; height: 20px; border:1px solid rgba(0,0,0, .5); background-color: #fff; border-radius: 80% 1% 1% 1%; } } .collar{ position: absolute; top:4px; width:22px; height: 7px; } .collar.left{ left:1px; border: 1px solid rgba(0,0,0,.5); border-top: none; border-left:none; border-radius: 30% 1%; transform: rotate(30deg); } .collar.right{ right:1px; border: 1px solid rgba(0,0,0,.5); border-top: none; border-right:none; border-radius: 1% 30%; transform: rotate(-30deg); } } .shoulder{ position: absolute; z-index:2; top: 134px; width:18px; height:38px; background-color: #ffffff; border-radius: 36% 36% 20% 20%; } .shoulder.left{ left:-10px; -webkit-transform: rotate(27deg); box-shadow: inset -4px 0 10px -1px rgba(0,0,0, .2); } .shoulder.right{ right:-10px; -webkit-transform: rotate(-27deg); box-shadow: inset -6px 0px 15px -1px rgba(0,0,0, .2); } .arm{ position:absolute; z-index:1; bottom:15px; width:17px; height:25px; background-color: #ffffff; transform: rotate(9deg); box-shadow: inset -5px 0 10px -1px rgba(0,0,0, .2); } .arm.left{ left:-18px; transform: rotate(9deg); border-radius: 40% 0% 20% 20%; box-shadow: inset -5px 0 10px -1px rgba(0,0,0, .2); &:after{ width: 16px; height:12px; bottom:-4px; left:0px; border-top:7px solid rgba(0,0,0, .2); border-radius:50%; } } .arm.right{ right:-18px; transform: rotate(-9deg); border-radius: 0% 40% 20% 20%; box-shadow: inset -6px 0 15px -1px rgba(0,0,0, .3); &:after{ width: 16px; height:12px; bottom:-4px; left:0px; border-top:7px solid rgba(0,0,0, .2); border-radius:50%; } } .hand{ position:absolute; bottom: -9px; width:19px; height:21px; border: 3px solid $skin-color; border-bottom-color: transparent; border-radius:50%; z-index:3; &:before{ top:9px; left:-2px; width:3px; height:6px; background-color: $skin-color; border-radius: 50%; box-shadow: 13px 0px 0 0 $skin-color; } } .hand.left{ left:-24px; box-shadow: inset 3px 3px 0 -1px $skin-color-dark, 3px -1px 0 -1px $skin-color-dark; transform: rotate(-6deg); .wrist.left{ position: absolute; left:7px; bottom:17px; width:8px; height:7px; background-color: $skin-color; transform: rotate(15deg); box-shadow: inset -2px 3px 8px -1px rgba(0,0,0, .4); } } .hand.right{ bottom:-9px; right:-22px; box-shadow: inset 3px 3px 0 -1px $skin-color-dark, 3px -1px 0 -1px $skin-color-dark; transform: rotate(-6deg); .wrist.right{ position: absolute; right:2px; bottom: 18px; width:8px; height:7px; background-color: $skin-color; transform: rotate(-2deg); box-shadow: inset -2px 3px 8px -1px rgba(0,0,0, .4); } } #belt{ position:absolute; bottom:-6px; left: calc(50% - (78px / 2)); width:78px; height:10px; background-color: $leg-color;; } #down{ position:absolute; bottom:-36px; left: calc(50% - (78px / 2)); width:78px; height: 30px; background-color: $leg-color; box-shadow: inset 0 15px 15px -16px rgba(0,0,0, .5), inset 0 -15px 15px -16px rgba(0,0,0, .5); &:before{ left: calc(50% - (6px / 2)); width:6px; height:30px; border: 1px solid rgba(0,0,0, .3); border-top: none; box-shadow: inset 0 4px 5px 0 rgba(0,0,0, .3); } .leg{ position: absolute; bottom: -40px; height:40px; width:36px; background-color: $leg-color; &:before{ top: 28px; width:36px; height: 12px; background-color: rgba(0,0,0, .1); box-shadow: 0 -5px 8px -4px rgba(255,255,255, .9); } } .leg.right{ right:0; } } }
JAVASCRIPT
Expand for more options Login