Finn from Adventure Time

HAML
.container .head .left-ear .right-ear .clean-up-l .clean-up-r .face .eye-l .eye-r .mouth .arm-l .left-arm .line .left-arm-2 .clean-elbow-l .elbow-l .top-arm-l .finger-1 .finger-2 .finger-3 .arm-r .right-arm .line .right-arm-2 .clean-elbow-r .elbow-r .top-arm-r .finger-1 .finger-2 .finger-3 .pants .leg-l .boot-top-l .boot-bottom-l .sock-l .clean-up-l-leg .line-leg .leg-r .boot-top-r .boot-bottom-r .line-leg .sock-l .clean-up-r-leg .clean-up-legr .clean-up-legl
SASS
body background: #65BFFD .container margin: 50px auto position: relative background: #048AD1 width: 136px height: 250px border: 2px solid #000 z-index: 99 .head position: relative background: white height: 100px width: 136px border-top: 2px solid #000 border-bottom: 2px solid #000 border-radius: 50% / 20% top: -20px .left-ear position: absolute top: -15px left: -2px border-radius: 28px 20px 0 0 border-left: 2px solid #000 border-right: 2px solid #000 border-top: 2px solid #000 background: #fff height: 30px width: 20px z-index: 1 .right-ear position: absolute top: -15px right: -2px border-radius: 28px 20px 0 0 border-left: 2px solid #000 border-right: 2px solid #000 border-top: 2px solid #000 background: #fff height: 30px width: 20px z-index: 1 .clean-up-l position: absolute width: 20px height: 20px background: #fff left: 10px top: 5px border-radius: 50% z-index: 2 .clean-up-r position: absolute width: 20px height: 20px background: #fff right: 10px top: 5px border-radius: 50% z-index: 2 .face position: relative margin: 0 auto top: 15px height: 60px width: 100px border-radius: 170px / 100px border-color: #000 border: 2px solid background: #F8C8B5 .eye-l position: absolute top: 20px left: 20px height: 5px width: 4px background: #000 border-radius: 50% z-index: 3 .eye-r position: absolute top: 20px right: 20px height: 5px width: 4px background: #000 border-radius: 50% z-index: 3 .mouth position: absolute height: 10px width: 25px border-radius: 50% top: 25px left: 38px border-bottom: 3px solid #000 .arm-l position: absolute top: 60px left: -16px height: 50px width: 12px border-top: 2px solid #000 border-left: 2px solid #000 border-bottom: 2px solid #000 border-radius: 25px 20px 10px 40px background: linear-gradient(to bottom, #9ACF8D 0%,#9ACF8D 50%,#519330 51%,#519330 100%) .arm-r position: absolute top: 60px right: -16px height: 50px width: 12px border-top: 2px solid #000 border-right: 2px solid #000 border-bottom: 2px solid #000 border-radius: 20px 25px 40px 10px background: linear-gradient(to bottom, #9ACF8D 0%,#9ACF8D 50%,#519330 51%,#519330 100%) .pants position: relative background: #396BA9 height: 60px width: 136px border: 2px solid #000 border-radius: 50% / 20% left: -2px bottom: -112px .leg-l position: absolute background: linear-gradient(to bottom, #396BA9 0%,#396BA9 30%,#F8C8B5 31%,#F8C8B5 100%) height: 100px width: 26px border-left: 2px solid #000 border-right: 2px solid #000 border-bottom: 2px solid #000 border-radius: 0 0 50px 50px top: 47px left: -6px -webkit-transform: rotate(5deg) .leg-r position: absolute background: linear-gradient(to bottom, #396BA9 0%,#396BA9 30%,#F8C8B5 31%,#F8C8B5 100%) height: 100px width: 26px border-left: 2px solid #000 border-right: 2px solid #000 border-bottom: 2px solid #000 border-radius: 0 0 20px 20px top: 45px right: -6px -webkit-transform: rotate(-5deg) .clean-up-legr position: absolute width: 40px height: 20px right: 20px top: 40px background: #396BA9 border-radius: 50% .clean-up-legl position: absolute width: 40px height: 20px left: 15px top: 38px background: #396BA9 border-radius: 50% .left-arm position: absolute width: 13px height: 100px background: linear-gradient(to bottom, #048AD1 0%,#048AD1 50%,#F8C8B5 51%,#F8C8B5 100%) left: -20px top: 10px z-index: -1 border-left: 2px solid #000 border-right: 2px solid #000 -webkit-transform: rotate(20deg) .right-arm position: absolute width: 13px height: 100px background: linear-gradient(to bottom, #048AD1 0%,#048AD1 50%,#F8C8B5 51%,#F8C8B5 100%) right: -20px top: 10px z-index: -1 border-left: 2px solid #000 border-right: 2px solid #000 -webkit-transform: rotate(-20deg) .line position: relative top: 50px border-radius: 50% background: #000 height: 3px width: 13px .elbow-l position: absolute top: 102px left: -52px background: #F8C8B5 width: 30px height: 20px border-radius: 0 0 20px 10px border-right: 2px solid #000 border-bottom: 2px solid #000 z-index: -2 .elbow-r position: absolute top: 99px right: -53.9px background: #F8C8B5 width: 30px height: 20px border-radius: 0 0 20px 10px border-left: 2px solid #000 border-bottom: 2px solid #000 z-index: -2 -webkit-transform: rotate(5deg) .top-arm-l position: absolute top: 3px left: -66px background: #F8C8B5 width: 16px height: 120px -webkit-transform: rotate(-16deg) border-left: 2px solid #000 border-right: 2px solid #000 border-top: 2px solid #000 border-radius: 20px / 20px .finger-1 position: absolute background: #F8C8B5 border-left: 2px solid #000 border-top: 2px solid #000 border-radius: 20px / 20px height: 20px width: 8px left: -4px top: -10px .finger-2 position: absolute background: #F8C8B5 border-right: 2px solid #000 border-left: 2px solid #000 border-top: 2px solid #000 border-radius: 20px 20px 0 0 height: 20px width: 6px right: 4px top: -13px .finger-3 position: absolute background: #F8C8B5 border-right: 2px solid #000 border-top: 2px solid #000 border-radius: 20px / 20px height: 20px width: 6px right: -3px top: -10px .top-arm-r position: absolute top: 2px right: -71px background: #F8C8B5 width: 16px height: 120px -webkit-transform: rotate(23deg) border-left: 2px solid #000 border-right: 2px solid #000 border-top: 2px solid #000 border-radius: 20px / 20px .clean-elbow-r position: absolute width: 12px height: 17px border-radius: 50% background: #F8C8B5 top: 102px right: -42px z-index: 4 .clean-elbow-l position: absolute width: 11px height: 17px background: #F8C8B5 top: 105px left: -42px border-radius: 50% z-index: 9999 .line-leg position: relative top: 30px border-radius: 50% background: #000 height: 3px width: 25px .sock-l background: white position: absolute width: 35px height: 20px left: -6px top: 85px border-radius: 50% border: 2px solid #000 .boot-top-l position: absolute width: 25px height: 45px top: 105px background: #000 border-radius: 0 0 10px 0 .boot-bottom-l position: absolute width: 45px height: 25px top: 125px left: -45px border-radius: 20px 0 0 20px background: #000 .boot-top-r position: absolute width: 25px height: 45px top: 105px background: #000 border-radius: 0 0 0 10px .boot-bottom-r position: absolute width: 45px height: 25px top: 125px right: -43px border-radius: 0 20px 20px 0 background: #000 .clean-up-l-leg position: absolute width: 26px height: 24px background: #F8C8B5 border-radius: 50% border-bottom: 3px solid #000 top: 70px .clean-up-r-leg position: absolute width: 26px height: 24px background: #F8C8B5 border-radius: 50% border-bottom: 3px solid #000 top: 71px
JAVASCRIPT
Expand for more options Login