Created
March 29, 2012 19:57
-
-
Save fedemp/2243059 to your computer and use it in GitHub Desktop.
css1k submission
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
html { | |
background: #333; | |
} | |
nav, | |
body { | |
width: 320px; | |
} | |
h1, | |
footer { | |
background: linear-gradient(top, #999 0%,#666 100%); | |
} | |
footer, | |
nav h2, | |
nav { | |
position: absolute; | |
} | |
* { | |
font: normal 14px/1.5 sans-serif; | |
margin: 0; | |
list-style: none; | |
} | |
nav ul, | |
article { | |
overflow-y: auto; | |
} | |
body { | |
background: #fff; | |
position: relative; | |
border: 30px solid; | |
border-radius: 20px; | |
height: 480px; | |
overflow: hidden; | |
margin: auto; | |
} | |
a { | |
color: #18c; | |
} | |
h1 { | |
color: #fff; | |
font-size: 11px; | |
line-height: 2em; | |
font-weight: bold; | |
box-shadow: 0 6px 6px -3px #ccc; | |
text-align: center; | |
} | |
h1:before { | |
content: "3:45"; | |
text-align: right; | |
padding: 0 1em 0 0; | |
} | |
h1:before, | |
nav:hover ul, | |
nav ul:hover, | |
nav h2:hover + ul { | |
display: block; | |
} | |
nav { | |
z-index: 4; | |
bottom: 1%; | |
height: 2em; | |
} | |
nav:hover { | |
background: #111; | |
top: 2.9em; | |
height: 439px; | |
} | |
nav ul { | |
display: none; | |
height: 380px; | |
padding: 0 5%; | |
} | |
nav li { | |
padding: 0.5em 0; | |
border-bottom: 1px solid; | |
} | |
nav a { | |
text-decoration: none; | |
} | |
nav a+a { | |
color: #999; | |
} | |
nav a+a:before { | |
content: " - "; | |
} | |
nav h2 { | |
bottom: 1%; | |
left: 3%; | |
z-index: 2; | |
text-align: center; | |
width: 94%; | |
border-radius: 5px; | |
border: 1px solid #111; | |
background: linear-gradient(top, #ccc 0%,#999 100%); | |
} | |
article { | |
padding: 2em 5%; | |
height: 285px; | |
} | |
article header, | |
section { | |
margin: 0.5em 0; | |
} | |
article header:before, | |
section:before { | |
content: ""; | |
float: left; | |
width: 45px; | |
height: 45px; | |
border: 3px solid #fff; | |
box-shadow: 0 0 5px #666; | |
margin: 0 1em 0 0; | |
background: #666; | |
} | |
section h2 { | |
font-weight: 700; | |
} | |
section h2:after { | |
content: ": "; | |
} | |
section p, | |
section h2, | |
ol, | |
ol li { | |
display: inline; | |
padding: 0; | |
} | |
footer { | |
bottom: 0; | |
height: 100px; | |
} | |
footer p { | |
background: #fff; | |
border: 5px solid #CB6824; | |
border-radius: 5px; | |
margin: 2% 3%; | |
padding: 1%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment