Built To Love

by lukerichison

HTML

<header>
    <h1>Built to Love.net</h1>
</header>
<nav>
    <a href="#">Home</a>
    <a href="#">Bio</a>
    <a href="#">Connect</a>
    <a id="portrait"><img src="http://thumb1.shutterstock.com/display_pic_with_logo/1615823/138833834/stock-photo-young-happy-couple-hugging-and-laughing-138833834.jpg"/><span>menu</span></a>
    <a href="#">Give</a>
    <a href="#">Media</a>
    <a href="#">Blog</a>
</nav>
<main>
    <article>
        <header style="background-image: url(http://edebock.files.wordpress.com/2012/04/img_9341.jpg)">
            <h2>Back Where We Belong</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam augue sit amet congue tincidunt. Aliquam feugiat tortor nec metus blandit, in mattis elit euismod. Nunc odio nisi, pulvinar non elit vel, faucibus placerat ipsum. Suspendisse dapibus massa gravida hendrerit pretium. Morbi eu massa quam. Integer scelerisque sed mauris ac vulputate. Ut at dui ac magna venenatis euismod. Aenean fringilla adipiscing rutrum. Fusce eleifend ultrices mi, ut malesuada mauris. Maecenas eget neque gravida, dignissim purus quis, hendrerit ante. Sed venenatis justo in sodales pulvinar. Mauris est quam, gravida nec lacinia id, consequat ut elit.<p>
            <p>Maecenas quis neque eu nunc accumsan viverra vitae eu diam. Suspendisse placerat, dolor vitae ultricies dapibus, mi arcu congue leo, quis ultrices enim sapien vitae nunc. Aliquam quis scelerisque augue, sed iaculis turpis. Vestibulum facilisis dignissim aliquet. Vivamus dictum lorem vitae est volutpat, sed convallis nulla aliquam. Morbi eget luctus mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus purus nunc, malesuada et tempor nec, convallis eu magna.<p>
            <p>Donec vehicula, elit eget vehicula ultricies, nulla metus convallis est, vel dignissim dui lectus non sapien. Aliquam metus diam, accumsan a metus nec, bibendum congue turpis. Phasellus vitae urna velit. Phasellus tristique justo...

CSS

</style>
    <meta
        name="viewport"
        content="width=device-width,
                initial-scale=1.0" />
<style>

@media all and (min-width: 1600px) {
    article > p {font-size: 1.5em;}
    body > header > h1 {font-size: 6em;}
    article > header > h2 {font-size: 4em;}
    body > nav > a {font-size: 2em;}
}
@media all and (min-width: 1080px) and (max-width: 1600px) {
    article > p {font-size: 1.25em;}
    body > header > h1 {font-size: 5em;}
    article > header > h2 {font-size: 3em;}
    body > nav > a {font-size: 1.5em;}
}
@media all and (max-width: 1080px) and (min-width: 760px) {
    body > header > h1 {font-size: 4em;}
    article > header > h2 {font-size: 2em;}
    body > nav > a {font-size: 1.25em;}
}
@media all and (min-width: 760px) {
    body > header > h1 {
        font-size: 4em;
        padding: 0.25em 0 20%;
    }
    body > nav {
        position: relative;
        text-align: center;
        margin-bottom: 15%
    }
    body > nav > a {
        margin: 0 2%;
        padding: 0.25em 0.5em;
        display: inline-block;
    }
    #portrait {
        width: 20%;
        position: relative;
    }
    #portrait img {
        position: absolute;
        margin: -65% 0 0 -50%;
        top: -10%;
    }
    #portrait span {
        display: none;
    }
}
@media all and (max-width: 760px) {
    body > header {
        margin-bottom: 15%
    }
    body > header > h1 {
        font-size: 2em;
        padding-bottom: 0.25em;
    }
    article > header > h2 {
        font-size: 1.5em;
    }
    body > nav {
        position: absolute;
        top: 3.5em;
        right: 4em;
        background-color: #CCC;
        width: 60%;
        text-align: center;
        
        border-radius: 1em;
    }
    body > nav > a {
        display: none;
        padding: 0.5em;
        font-size: 1.5em;
        border-bottom: 1px solid #777;
    }
    body > nav > a:last-child,
    #portrait {
        border-bottom: none;
    }
    body > nav.touch > a {
     ...

JavaScript

$('#portrait').click(function(){
    $('body').children('nav').toggleClass('touch');
});