Created
March 20, 2012 09:39
-
-
Save mordonez/2133461 to your computer and use it in GitHub Desktop.
Homer
This file contains 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 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 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