Created
March 20, 2012 09:39
-
-
Save mordonez/2133461 to your computer and use it in GitHub Desktop.
Homer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol,ul { | |
| list-style: none; | |
| } | |
| blockquote,q { | |
| quotes: none; | |
| } | |
| blockquote:before,blockquote:after,q:before,q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* End CSS Reset */ | |
| html { | |
| font-size: 62.5%; | |
| background: rgb(197,222,234) no-repeat center center fixed; | |
| background: -webkit-linear-gradient(-45deg, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%) no-repeat center center fixed; | |
| background: -moz-linear-gradient(-45deg, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%) no-repeat center center fixed; | |
| background: -o-linear-gradient(-45deg, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%) no-repeat center center fixed; | |
| background: -ms-linear-gradient(-45deg, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%) no-repeat center center fixed; | |
| background: linear-gradient(-45deg, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%) no-repeat center center fixed; | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=1 ); | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| background-size: cover; | |
| } | |
| body { | |
| color: #FFFFFF; | |
| text-align: center; | |
| font: 1.6rem/4rem 'AkbarPlain', Helvetica, Arial, sans-serif; | |
| } | |
| h1 { | |
| font-size: 4rem; | |
| } | |
| h2 { | |
| font-size: 3rem; | |
| } | |
| a:link,a:visited { | |
| text-decoration: none; | |
| display: block; | |
| color: #FFFFFF; | |
| } | |
| .container { | |
| max-width: 96rem; | |
| margin: 50px auto 0; | |
| } | |
| .homer { | |
| margin: auto; | |
| height: 32.6rem; | |
| width: 26rem; | |
| position: relative; | |
| } | |
| .homer div { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| display: block; | |
| position: absolute; | |
| } | |
| .skull,.brow,.nose,.ear,.neck,.hair,.eye,.mouth,.mouth:after,.smile { | |
| border: 0.3rem solid #000000; | |
| } | |
| .top-hair { | |
| -webkit-transform: rotate(-28deg); | |
| -moz-transform: rotate(-28deg); | |
| -o-transform: rotate(-28deg); | |
| -ms-transform: rotate(-28deg); | |
| transform: rotate(-28deg); | |
| height: 3.7rem; | |
| left: 5.4rem; | |
| top: 0.4rem; | |
| width: 7.7rem; | |
| z-index: 50; | |
| } | |
| .hair { | |
| background-color: transparent; | |
| border-bottom: none; | |
| border-left: 0.3rem solid #000000; | |
| border-right: 0.3rem solid #000000; | |
| -webkit-border-top-left-radius: 50% 100%; | |
| -moz-border-radius-topleft: 50% 100%; | |
| border-top-left-radius: 50% 100%; | |
| -webkit-border-top-right: 50% 100%; | |
| -moz-border-radius-topright: 50% 100%; | |
| border-top-right-radius: 50% 100%; | |
| border-top: 0.3rem solid #000000; | |
| height: 2.7rem; | |
| width: 5.3rem; | |
| } | |
| .hair:nth-child(2) { | |
| left: 1.9rem; | |
| top: 0.7rem; | |
| width: 5.1rem; | |
| } | |
| .hair:first-child:before { | |
| -webkit-transform: rotate(22deg); | |
| -moz-transform: rotate(22deg); | |
| -o-transform: rotate(22deg); | |
| -ms-transform: rotate(22deg); | |
| transform: rotate(22deg); | |
| background-color: #FCDB00; | |
| bottom: -0.1rem; | |
| content: ''; | |
| display: block; | |
| height: 0.4rem; | |
| position: absolute; | |
| right: -0.3rem; | |
| width: 0.5rem; | |
| } | |
| .hair:after { | |
| background-color: #FCDB00; | |
| bottom: -0.1rem; | |
| content: ''; | |
| display: block; | |
| height: 0.2rem; | |
| left: 0; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .skull { | |
| -webkit-transform: rotate(-20deg); | |
| -moz-transform: rotate(-20deg); | |
| -o-transform: rotate(-20deg); | |
| -ms-transform: rotate(-20deg); | |
| transform: rotate(-20deg); | |
| background-color: #FCDB00; | |
| border-bottom: none; | |
| -webkit-border-top-left-radius: 6.8rem 6.8rem; | |
| -moz-border-radius-topleft: 6.8rem 6.8rem; | |
| border-top-left-radius: 6.8rem 6.8rem; | |
| -webkit-border-top-right-radius: 6.8rem 6.6rem; | |
| -moz-border-radius-topright: 6.8rem 6.6rem; | |
| border-top-right-radius: 6.8rem 6.6rem; | |
| height: 14.2rem; | |
| left: 4rem; | |
| top: 1.9rem; | |
| width: 14rem; | |
| z-index: 5; | |
| } | |
| .face { | |
| top: 9rem; | |
| left: 8.6rem; | |
| z-index: 100; | |
| } | |
| .brow { | |
| background-color: #FCDB00; | |
| -webkit-border-bottom-right-radius: 100%; | |
| -moz-border-radius-bottomright: 100%; | |
| border-bottom-right-radius: 100%; | |
| border-bottom: none; | |
| border-left: none; | |
| -webkit-border-top-left-radius: 100%; | |
| -moz-border-radius-topleft: 100%; | |
| border-top-left-radius: 100%; | |
| -webkit-border-top-right-radius: 100%; | |
| -moz-border-radius-topright: 100%; | |
| border-top-right-radius: 100%; | |
| height: 2.6rem; | |
| left: 8.4rem; | |
| width: 2.4rem; | |
| } | |
| .brow:after { | |
| background-color: #FCDB00; | |
| content: ''; | |
| display: block; | |
| height: 1.5rem; | |
| left: -0.3rem; | |
| position: absolute; | |
| top: -0.3rem; | |
| width: 1.3rem; | |
| } | |
| .eye { | |
| top: 1.1rem; | |
| } | |
| .eye:after { | |
| background-color: #000000; | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| z-index: 60; | |
| } | |
| .eye.left { | |
| background-color: #FFFFFF; | |
| -webkit-border-bottom-left-radius: 3.7rem 3.5rem; | |
| -moz-border-radius-bottomleft: 3.7rem 3.5rem; | |
| border-bottom-left-radius: 3.7rem 3.5rem; | |
| -webkit-border-bottom-right-radius: 3.6rem 3.5rem; | |
| -moz-border-radius-bottomright: 3.6rem 3.5rem; | |
| border-bottom-right-radius: 3.6rem 3.5rem; | |
| -webkit-border-top-left-radius: 3.7rem 3.5rem; | |
| -moz-border-radius-topleft: 3.7rem 3.5rem; | |
| border-top-left-radius: 3.7rem 3.5rem; | |
| -webkit-border-top-right-radius: 3.5rem 3.3rem; | |
| -moz-border-radius-topright: 3.5rem 3.3rem; | |
| border-top-right-radius: 3.5rem 3.3rem; | |
| height: 6.7rem; | |
| width: 7.1rem; | |
| z-index: 50; | |
| } | |
| .eye.left:after { | |
| height: 0.8rem; | |
| left: 1.7rem; | |
| top: 2.9rem; | |
| width: 0.8rem; | |
| } | |
| .eye.right { | |
| background-color: #FFFFFF; | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| height: 6.3rem; | |
| left: 5.4rem; | |
| width: 6.3rem; | |
| z-index: 45; | |
| } | |
| .eye.right:after { | |
| height: 0.8rem; | |
| left: 3rem; | |
| top: 2.7rem; | |
| width: 0.8rem; | |
| } | |
| .nose { | |
| background-color: #FCDB00; | |
| border-left: none; | |
| -webkit-border-radius: 3rem; | |
| -moz-border-radius: 3rem; | |
| border-radius: 3rem; | |
| height: 3.1rem; | |
| left: 4.1rem; | |
| top: 5.5rem; | |
| -webkit-transform: rotate(-2deg); | |
| -moz-transform: rotate(-2deg); | |
| -o-transform: rotate(-2deg); | |
| -ms-transform: rotate(-2deg); | |
| transform: rotate(-2deg); | |
| width: 6.5rem; | |
| z-index: 48; | |
| } | |
| .nose:after { | |
| background: #FCDB00; | |
| bottom: 0; | |
| content: ''; | |
| display: block; | |
| height: 1rem; | |
| left: 0; | |
| position: absolute; | |
| width: 2rem; | |
| } | |
| .mouth { | |
| background-color: #BEAE7D; | |
| -webkit-border-bottom-left-radius: 4.8rem 4.2rem; | |
| -moz-border-radius-bottomleft: 4.8rem 4.2rem; | |
| border-bottom-left-radius: 4.8rem 4.2rem; | |
| -webkit-border-bottom-right-radius: 3.6rem 2.8rem; | |
| -moz-border-radius-bottomright: 3.6rem 2.8rem; | |
| border-bottom-right-radius: 3.6rem 2.8rem; | |
| -webkit-border-top-left-radius: 5.8rem 4.9rem; | |
| -moz-border-radius-topleft: 5.8rem 4.9rem; | |
| border-top-left-radius: 5.8rem 4.9rem; | |
| height: 9.2rem; | |
| left: 0.2rem; | |
| top: 8.3rem; | |
| width: 7.9rem; | |
| } | |
| .mouth:before { | |
| background-color: #BEAE7D; | |
| -webkit-border-bottom-right-radius: 1.6rem 1.5rem; | |
| -moz-border-radius-bottomright: 1.6rem 1.5rem; | |
| border-bottom-right-radius: 1.6rem 1.5rem; | |
| border-bottom: 0.3rem solid #000000; | |
| border-right: 0.3rem solid #000000; | |
| bottom: 1.7rem; | |
| content: ''; | |
| display: block; | |
| height: 1.4rem; | |
| left: 7.3rem; | |
| position: absolute; | |
| width: 1.6rem; | |
| z-index: 5000; | |
| } | |
| .mouth:after { | |
| background-color: #BEAE7D; | |
| -webkit-border-bottom-right-radius: 4rem 1.5rem; | |
| -moz-border-radius-bottomright: 4rem 1.5rem; | |
| border-bottom-right-radius: 4rem 1.5rem; | |
| border-left: none; | |
| -webkit-border-top-right-radius: 4rem 4.5rem; | |
| -moz-border-radius-topright: 4rem 4.5rem; | |
| border-top-right-radius: 4rem 4.5rem; | |
| content: ''; | |
| display: block; | |
| height: 6.4rem; | |
| left: 7.3rem; | |
| position: absolute; | |
| top: -1.7rem; | |
| width: 4.2rem; | |
| } | |
| .smile { | |
| background-color: #BEAE7D; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| height: 3.3rem; | |
| left: 1.3rem; | |
| top: 2.2rem; | |
| width: 11rem; | |
| z-index: 5000; | |
| } | |
| .smile:before { | |
| background-color: #BEAE7D; | |
| content: ''; | |
| display: block; | |
| height: 2rem; | |
| left: -0.4rem; | |
| position: absolute; | |
| top: -0.3rem; | |
| width: 10.2rem; | |
| } | |
| .smile:after { | |
| -webkit-transform: rotate(37deg); | |
| -moz-transform: rotate(37deg); | |
| -o-transform: rotate(37deg); | |
| -ms-transform: rotate(37deg); | |
| transform: rotate(37deg); | |
| -webkit-border-bottom-left-radius: 0.4rem; | |
| -moz-border-radius-bottomleft: 0.4rem; | |
| border-bottom-left-radius: 0.4rem; | |
| border-left: 0.3rem solid #000000; | |
| -webkit-border-top-left-radius: 0.4rem; | |
| -moz-border-radius-topleft: 0.4rem; | |
| border-top-left-radius: 0.4rem; | |
| content: ''; | |
| display: block; | |
| height: 1.3rem; | |
| left: -0.4rem; | |
| position: absolute; | |
| top: 1.7rem; | |
| width: 2rem; | |
| } | |
| .ear { | |
| background-color: #FCDB00; | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| height: 3.2rem; | |
| left: 5.3rem; | |
| top: 16.6rem; | |
| width: 3.2rem; | |
| z-index: 160; | |
| } | |
| .ear:after { | |
| -webkit-transform: rotate(-4deg); | |
| -moz-transform: rotate(-4deg); | |
| -o-transform: rotate(-4deg); | |
| -ms-transform: rotate(-4deg); | |
| transform: rotate(-4deg); | |
| background-color: #FCDB00; | |
| content: ''; | |
| display: block; | |
| height: 3.5rem; | |
| position: absolute; | |
| right: -0.6rem; | |
| top: -0.2rem; | |
| width: 1rem; | |
| } | |
| .ear-inner { | |
| -webkit-transform: rotate(10deg); | |
| -moz-transform: rotate(10deg); | |
| -o-transform: rotate(10deg); | |
| -ms-transform: rotate(10deg); | |
| transform: rotate(10deg); | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| border-top: 0.3rem solid #000000; | |
| display: block; | |
| height: 1.8rem; | |
| left: 0.4rem; | |
| position: absolute; | |
| top: 0.4rem; | |
| width: 1.8rem; | |
| } | |
| .ear-inner:after { | |
| -webkit-transform: rotate(25deg); | |
| -moz-transform: rotate(25deg); | |
| -o-transform: rotate(25deg); | |
| -ms-transform: rotate(25deg); | |
| transform: rotate(25deg); | |
| border-left: 0.3rem solid #000000; | |
| -webkit-border-radius: 100%; | |
| -moz-border-radius: 100%; | |
| border-radius: 100%; | |
| content: ''; | |
| display: block; | |
| height: 1.2rem; | |
| left: 0.4rem; | |
| position: absolute; | |
| top: 0; | |
| width: 1.2rem; | |
| } | |
| .neck { | |
| -webkit-transform: rotate(7deg); | |
| -moz-transform: rotate(7deg); | |
| -o-transform: rotate(7deg); | |
| -ms-transform: rotate(7deg); | |
| transform: rotate(7deg); | |
| background-color: #FCDB00; | |
| border-bottom: none; | |
| border-top: none; | |
| height: 13rem; | |
| left: 6.6rem; | |
| top: 15rem; | |
| width: 8.2rem; | |
| } | |
| .neck:before { | |
| -webkit-transform: rotate(7deg) skewX(20deg); | |
| -moz-transform: rotate(7deg) skewX(20deg); | |
| -o-transform: rotate(7deg) skewX(20deg); | |
| -ms-transform: rotate(7deg) skewX(20deg); | |
| transform: rotate(7deg) skewX(20deg); | |
| background-color: #FCDB00; | |
| border-right: 0.3rem solid #000000; | |
| bottom: 0; | |
| content: ''; | |
| height: 3rem; | |
| position: absolute; | |
| right: -1.4rem; | |
| width: 7rem; | |
| } | |
| .m-hair { | |
| -webkit-transform: skewY(47deg); | |
| -moz-transform: skewY(47deg); | |
| -o-transform: skewY(47deg); | |
| -ms-transform: skewY(47deg); | |
| transform: skewY(47deg); | |
| border-left: 0.3rem solid #000000; | |
| -webkit-border-top-left-radius: 0.8rem; | |
| -moz-border-radius-topleft: 0.8rem; | |
| border-top-left-radius: 0.8rem; | |
| border-top: 0.4rem solid #000000; | |
| height: 2.4rem; | |
| left: 4.4rem; | |
| top: 14.7rem; | |
| width: 2rem; | |
| z-index: 100; | |
| } | |
| .m-hair:before { | |
| -webkit-transform: translate(-0.2rem, -0.4rem); | |
| -moz-transform: translate(-0.2rem, -0.4rem); | |
| -o-transform: translate(-0.2rem, -0.4rem); | |
| -ms-transform: translate(-0.2rem, -0.4rem); | |
| transform: translate(-0.2rem, -0.4rem); | |
| border-left: 0.3rem solid #000000; | |
| -webkit-border-top-left-radius: 0.8rem; | |
| -moz-border-radius-topleft: 0.8rem; | |
| border-top-left-radius: 0.8rem; | |
| border-top: 0.4rem solid #000000; | |
| content: ''; | |
| height: 2.4rem; | |
| left: 100%; | |
| position: absolute; | |
| top: -2rem; | |
| width: 2rem; | |
| } | |
| .author { | |
| margin-top: 2rem; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="homer"> | |
| <div class="head"> | |
| <div class="top-hair"> | |
| <div class="hair"></div> | |
| <div class="hair"></div> | |
| </div> | |
| <div class="skull"></div> | |
| <div class="face"> | |
| <div class="brow"></div> | |
| <div class="eye left"></div> | |
| <div class="nose"></div> | |
| <div class="eye right"></div> | |
| <div class="mouth"> | |
| <div class="smile"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="neck" id="neck"></div> | |
| <div class="m-hair"></div> | |
| <div class="ear"> | |
| <div class="ear-inner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment