Skip to content

Instantly share code, notes, and snippets.

@Lane
Created December 31, 2012 16:30
Show Gist options
  • Save Lane/4421074 to your computer and use it in GitHub Desktop.
Save Lane/4421074 to your computer and use it in GitHub Desktop.
Untitled
body {
margin: 0em;
padding: 0em;
font-family: Helvetica;
font-weight: lighter;
font-size: 1em;
background: #000022 url(http://www.laneolson.ca/files/img/rusty-pattern.png);
color: #fff;
}
a {
color: #aef;
}
header {
padding: 0em;
position: absolute;
left: 4.5%;
bottom: 0em;
margin: 0;
width: 26%;
text-align: center;
}
header h1 {
font-size: 4.5em;
font-weight: 200;
letter-spacing: 0em;
text-transform: uppercase;
text-shadow:1px 1px 16px #000022;
font-family: Copystruct;
margin: 0;
padding: 0;
}
header h2 {
text-transform: uppercase;
font-size:1em;
letter-spacing: 0.2em;
font-weight: 700;
margin: 0;
padding:0.85em 1.5em 0.65em;
text-shadow: -1px -1px 2px rgba(0,0,0,0.35);
text-align:left;
background:#FF0047; color:#fff;
}
header nav {
}
header nav ul {
list-style: none;
margin: 1em 0em;
padding: 0;
text-align:left;
}
header nav ul li {
}
header nav ul li a {
background: #fff;
color:#1f2a42;
text-transform: uppercase;
font-size:1em;
letter-spacing: 0em;
font-weight: 700;
margin: 0;
padding: 0.85em 1.5em 0.65em;
text-align:left;
display:block;
text-decoration:none;
}
header nav ul li a:hover {
background:#24cdf5;
color:#fff;
text-shadow: -1px -1px 2px rgba(0,0,0,0.35);
}
#picture {
position: absolute;
right: 0px;
bottom: 0px;
width: 65%;
margin: 0;
padding: 0;
text-align: right;
}
#picture img {
width: 100%;
}
<header id="main">
<h1 id="site">Rusty</h1>
<h2>Musician // Edmonton, AB</h2>
<nav>
<ul>
<li><a href="#shows">Shows</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</nav>
</header>
<div id="picture">
<img src="http://www.laneolson.ca/files/img/rusty-img.png" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<script>
jQuery("#site").fitText(0.4);
</script>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment