ClickHoarder Capture Page

A simple page with animated elements.

by Pete Fecteau

HTML

<div id="wrapper">
    <div class="boxCap"></div>
    <h2>Don't think.<br />Hoard away.</h2>
    <p class="a">If something piques your interest,<br />even the slightest, just grab it.</p><p class="b">You never know when you might need it!</p>
    <div id="simpleNav">
        <ul>
            <li><a href="http://jsfiddle.net/Buttonpresser/P9YrC/show/light/">Welcome</a></li>
            <li><a class="active">Capture</a></li>
            <li><a href="http://jsfiddle.net/Buttonpresser/YMWsf/show/light/">Organize</a></li>
            <li><a href="http://jsfiddle.net/Buttonpresser/G3qsk/show/light/">Anywhere</a></li>
        </ul>
    </div>
</div>
<div class="fwd"><a href="http://jsfiddle.net/Buttonpresser/YMWsf/show/light/"></a></div>
<div class="bkw"><a href="http://jsfiddle.net/Buttonpresser/P9YrC/show/light/"></a></div>
<div class="skp"><a></a></div>

CSS

html, body {
    padding:0;
    margin:0;
}
body
{
    font-family: 'aleoregular', Aleo, Helvetica, san-serif;
    background-color:#FFFFFF;
}
a, a:link, a:hover, a:visited, a:active {text-decoration:none;}
#wrapper {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-480px;
    width:960px;
    height:100%;
    color:#B4B4B4;
    overflow:visible;
}
#wrapper .boxCap {
    height:315px;
    width:1056px;
    background-image:url(http://buttonpresser.com/img/boxCap.gif);
    background-position:center top;
    background-repeat:no-repeat;
    margin:37px 0 0 -79px;
}
#wrapper h2 {
    font-family: Aleo;
    font-size:64px;
    font-weight:300;
    width:100%;
    text-align:center;
    margin:-30px 0 40px 0;
    opacity:0;
}
#wrapper h2 strong {font-family:Aleo;font-weight:700;}
#wrapper h2 strong span{color:#55ff9e;}
#wrapper p {
    width:460px;
    text-align:center;
    line-height:140%;
    font-size:22px;
    margin:0 auto 30px;
    opacity:0;
}
#wrapper p span {font-weight:700;font-style:italic;}
#wrapper #simpleNav {
    position:absolute;
    bottom:60px;
    left:0;
}
#wrapper #simpleNav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
#wrapper #simpleNav ul li {
    float:left;
    width:230px;
    text-align:center;
}
#wrapper #simpleNav li a {
    font-size:28px;
    color:#E2E2E2;
    -ms-transition: all 0.4s ease-in-out;    
    transition: all 0.4s ease-in-out;
    border-radius:60px;
    border:4px solid #FFFFFF;
    padding:5px 18px 8px;
    cursor:pointer;
}
#wrapper #simpleNav li a:hover,
#wrapper #simpleNav li a.active {
    color:#55ff9e;
    border:4px solid #55ff9e;
}
.fwd a {
    position:absolute;
    display:block;
    bottom:53px;
    right:40px;
    width:44px;
    height:43px;
    background: url('http://buttonpresser.com/img/fwd.png') 0 0 no-repeat;
    cursor:pointer;
}
.bkw a {
    position:absolute;
    display:block;
    bottom:53px;
    left:40px;
    width:44px;
    height:43px;
    background:...

JavaScript

$('#wrapper h2').css('opacity', '1');
$('#wrapper p').css('opacity', '1');