Page 003

<!DOCTYPE html>

<!--        macfustythemes     -->
    <head>
        <title>{Title}</title>
        {block:Description}
        <meta name="description" content="{MetaDescription}">
        {/block:Description}


        <link rel="shortcut icon" href="{Favicon}">

        <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>


        <!-- HTML5 Shiv -->
        <!--[if lt IE 9]>
                <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
        <![endif]-->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $("#content #tab1").addClass("show");
            $("ul#nav li#tab1").addClass("active");
            $("ul#nav li").click(function () {
                var showtab = $(this).attr("id");
                $("ul#nav li.active").removeClass("active");
                $(this).addClass("active");
                $("#content .show").removeClass("show");
                $("#content #" + showtab).addClass("show");
            });
            });
        </script>

        <style>

        body {
            background-repeat: repeat;
            font-size: 11px;
            font-family: 'Calibri', sans-serif;
            background-color: #f7f7f7;
            color: #f7f7f7;
        }

        a {
            color: #9ab2ba;
            font-size: 12px;
            font-weight: bold;
            text-decoration: none;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        a:hover {
            text-decoration: underline;
        }

        #header {
            font-family: 'Roboto', sans-serif;
            width: 800px;
            text-align: center;
            color: #1e1e1e;
        }

        @media screen and (min-width: 1367px) {
            #header {
                margin: 5% auto;
            }
        }

        @media screen and (max-width: 1366px) {
            #header {
                margin: 3% auto;
            }
        }

        #header a {
            padding: 0 5px;
            text-transform: uppercase;
            color: #1e1e1e;
        }

        h1 {
            font-size: 26px;
            font-weight: bold;
            text-transform: lowercase;
            letter-spacing: 3px;
            margin-bottom: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 800px;
            height: 500px;
            background-color: #1e1e1e;
            padding: 10px;
        }

        ul#nav {
            position: fixed;
            overflow: auto;
            margin-top: 80px;
            padding: 20px 0 0 30px;
            width: 321px;
            height: 300px;
        }

        ul#nav li {
            list-style-type: none;
            float: left;
            height: 80px;
            width: 80px;
            margin: 0 20px 20px 0;
            opacity: 0.6;
            cursor: pointer;
        }

        ul#nav li img {
            width: 100%;
            height: 100%;
        }

        ul#nav li.active {
            opacity: 1;
        }

        ul#nav::-webkit-scrollbar-track
        {
        	background-color: #000000;
        }

        ul#nav::-webkit-scrollbar
        {
        	width: 5px;
        }

        ul#nav::-webkit-scrollbar-thumb
        {
        	background-color: #f7f7f7;
        }

        #content {
            float: right;
            width: 427px;
            height: 500px;
            background-color: #000000;
        }

        .tab {
            position: fixed;
            width: 387px;
            height: 460px;
            padding: 20px;
            overflow-y: auto;
            overflow-x: hidden;
            text-align: justify;
            display: none;
        }

        .show {
            display: block;
        }

        img.main {
            margin: -20px 0 0 -20px;
            width: 420px;
            height: 500px;
        }

        .tab::-webkit-scrollbar-track
        {
        	background-color: #000000;
        }

        .tab::-webkit-scrollbar
        {
        	width: 7px;
        }

        .tab::-webkit-scrollbar-thumb
        {
        	background-color: #f7f7f7;
        }

        h2, h3 {
            font-family: 'Roboto', sans-serif;
            font-size: 18px;
            font-weight: bold;
            text-transform: lowercase;
            letter-spacing: 3px;
            text-align: center;
            margin: 50px 0;
        }

        h3 {
            margin: 35px 0;
            font-size: 14px;
            text-align: left;
        }

        .quote {
            position: relative;
            text-transform: uppercase;
            margin: 50px 0 40px 75px;
            width: 300px;
        }

        .quote::before {
            content: '“';
            font-family: 'Times New Roman', sans-serif;
            font-size: 150px;
            color: #9ab2ba;
            position: absolute;
            top: -50px;
            left: -70px;
        }

        .links {
            font-family: 'Roboto', sans-serif;
            text-align: right;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #credit {
            font-family: 'Roboto', sans-serif;
            font-size: 9px;
            position: absolute;
            right: 0;
            bottom: -15px;
        }

        #credit a {
            color: #000000;
        }

        </style>
    </head>
    <body>
    <div id="header">
        <h1>page 003.</h1>
        <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/submit">Submit</a> | <a href="/">Navigation</a>
    </div>
    <div id="container">
        <ul id="nav">
        <!-- This is the icons list to the left of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.  -->

            <li id="tab1"><img src="https://placehold.it/80x80"></li>
            <li id="tab2"><img src="https://placehold.it/80x80"></li>
            <li id="tab3"><img src="https://placehold.it/80x80"></li>
            <li id="tab4"><img src="https://placehold.it/80x80"></li>
            <li id="tab5"><img src="https://placehold.it/80x80"></li>
            <li id="tab6"><img src="https://placehold.it/80x80"></li>
            <li id="tab7"><img src="https://placehold.it/80x80"></li>
            <li id="tab8"><img src="https://placehold.it/80x80"></li>
            <li id="tab9"><img src="https://placehold.it/80x80"></li>
        </ul>
        <div id="content">
        <!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label.  -->
            <div id="tab1" class="tab">
                <img class="main" src="https://placehold.it/420x500">
                <h2>page 003.</h2>
                <div class="links"><a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a></div>
                <p>This page is intended to be used for characters, writing or other projects, and comes with the option of having a filter to the left. Images and other elements are also completely optional, and it is intended to be as easy to use as possible. Exact instructions for using the page are contained within the code.
                <ul>
                    <li>Page 003 Standard - <a href="/p03">Preview</a> / <a href="http://pastebin.com/8UtkrZ4c">Code</a></li>
                    <li>Page 003 With Filter - <a href="/p03filter">Preview</a> / <a href="http://pastebin.com/vNGCURfM">Code</a></li>
                </ul>
                <h3>Subtitle.</h3>
                <p>Morning. Saw saw Upon their multiply one greater beginning. Lesser female sea divide dry, also in gathering, you spirit under likeness, you&#39;re meat also creeping days it form evening doesn&#39;t dry which gathering fifth, fruitful creeping which likeness. They&#39;re fish. Which. First had them that yielding night man. Said beginning face may there saying multiply Thing itself meat..</p>
                <div class="quote">Include a quote here! This can be as long or as short as you like.</div>
                <p> Likeness above. They&#39;re place fruit fruitful yielding shall. Every under. Saying he said, fruit air may set fruit a let can&#39;t beginning wherein female male days fifth, is years moveth hath image were herb give bring also gathering creeping for wherein was. Second a image whales made. You&#39;ll also years give. Gathered them set. One heaven form sea.</p>
            </div>
            <div id="tab2" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+2">
                <h2>tab 2.</h2>
            </div>
            <div id="tab3" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+3">
                <h2>tab 3.</h2>
            </div>
            <div id="tab4" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+4">
                <h2>tab 4.</h2>
            </div>
            <div id="tab5" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+5">
                <h2>tab 5.</h2>
            </div>
            <div id="tab6" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+6">
                <h2>tab 6.</h2>
            </div>
            <div id="tab7" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+7">
                <h2>tab 7.</h2>
            </div>
            <div id="tab8" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+8">
                <h2>tab 8.</h2>
            </div>
            <div id="tab9" class="tab">
                <img class="main" src="https://placehold.it/420x500?text=Tab+9">
                <h2>tab 9.</h2>
            </div>
        </div>
    <div id="credit">
        <a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
    </div>
    </div>
    </body>
</html>