QR

by mmarcon

HTML

<header>
    <h1>Massimiliano Marcon</h1>
    <h2>Researcher<span>,</span>Developer<span>,</span>Innovator</h2>
</header>
<section id="qr">
    <img src="http://dl.dropbox.com/u/234787/qr.png" alt="Massimiliano Marcon's info"/>
</section>
<section id="wit" class="h">
    hello
</section>
<nav>
    <ul>
        <li><a href="#wit" class="local">What is this?</a></li>
        <li><a href="#wai" class="local">Who am I?</a></li>
        <li><a href="http://twitter.com/mmarcon">@mmarcon</a></li>
    </ul>
</nav>

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito);
@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);

body {
    background-color: #fff;
    font-size: 14px;
    position: relative;
}

header, nav {
    width: 640px;
    margin: 10px auto;
}

h1 {
    font-family: 'Nunito', helvetica, sans-serif;
    color: #3b85d1;
    font-size: 48px;
}

h2 {
    font-family: 'The Girl Next Door', serif;
    color: #111;
    font-size: 24px;
    font-style: italic;
}

h2 span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #3b85d1;
    margin: 0 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-indent: -999999px;
}

#qr {
    width: 220px;
    margin: 30px auto;
    border: 10px solid #fff;
    border-radius: 2px;
    box-shadow: 0 0 10px #ccc;
}

nav {
    font-family: 'Nunito', helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

nav li {
    display: inline-block;
}

nav a:link, a:visited {
    text-decoration: none;
    color: #cc0000;
    padding: 0 5px;
    display: inline-block;
}

nav a:hover, a:active {
    background-color: #cc0000;
    color: #fff;
}

section.h {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -100px;
    background-color: #cc0000;
    display: block;
}

JavaScript

$(function(){
    $('nav a.local').click(function(){
        var l = $(this).attr('href').substring(1);
        $('#' + l).animate({
            right: '10%'
        }, 1000);
    });
});