Page 03 (All In One): Erratum

<!DOCTYPE html>
<head>

<!--

ALL IN ONE PAGE THEME BY FOUNDCAS/CAPECODING
- If you have any questions or experience troubles send a message to http://capecoding.tumblr.com/ask
- Do not remove the credit
- Do not use this as a base code

-->

<title>erratum</title>

<link rel="shortcut icon" href="http://media.tumblr.com/2b148019c54956fd0d919edc585ced6c/tumblr_inline_njt9fvTvu31solj92.png"> <!--you can replace the url here with an icon image that you want-->

<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.iconic').click(function(){
            $('.panel').addClass('woohoo');
        });
        $('.close').click(function(){
            $('.panel').removeClass('woohoo');
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.inq').click(function(){
            $('#ask_form').slideToggle();
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.a').click(function(){
            $('.about').show('slow');
            $('.links, .contact,.blogroll').hide('slow');
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.c').click(function(){
            $('.contact').show('slow');
            $('.links, .about,.blogroll').hide('slow');
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.l').click(function(){
            $('.links').show('slow');
            $('.about ,.contact,.blogroll').hide('slow');
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.b').click(function(){
            $('.blogroll').show('slow');
            $('.about ,.contact,.links').hide('slow');
        });
    });
</script>


<style type="text/css">
#s-m-t-tooltip{
    max-width:300px;
    margin:15px;
    padding:3px;
    background:#999; /** tooltip background color **/
    color:#fff; /** toolip color **/
    z-index:999999;
    font-size:11px;
    text-transform:lowercase;
}

::-webkit-scrollbar{
    width:4px;
    height:auto;
}

::-webkit-scrollbar-thumb{
    width:4px;
    height:auto;
    background:#d3d3d3 /*scrollbar color*/
}

::selection{
    background:#9999aa; /*selection background*/
    color:#aabbbb; /*selection color*/
}

a{
    text-decoration:none;
    color:#333; /*color of links*/
    cursor:help;
}

body{
    font-family: 'Montserrat', sans-serif;
    font-size:12px;
    color:#333; /*color of text*/
    cursor:crosshair;
    background:#f4f2f4; /*background color*/
    line-height:100%;
    word-wrap:break-word;
}

.iconic{
    position:absolute;
    background:url(https://ununsplash.imgix.net/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050);
    background-size: auto 100px;
    background-repeat:no-repeat;
    height:100px;
    width:100px;
    margin-left:-50px;
    left:50%;
    margin-top:-50px;
    top:50%;
    border:10px solid #bbbbcc;
    border-radius:100%;
    z-index:1;
}

.panel{
    position:absolute;
    height:100px;
    width:100px;
    margin-left:-50px;
    left:50%;
    margin-top:-50px;
    top:50%;
    border:10px solid #bbbbcc;
    border-radius:100%;
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    -moz-transform:scale(0);
    transform:scale(0);
    z-index:2;
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.nav{
    position:absolute;
    bottom:0px;
    width:100%;
    height:10%;
    border-top:3px solid #d3d3d3;
    background:#ddd;
    text-align:center;
    z-index:9;
    overflow:hidden;
}

.nav a{
    border-right:3px solid #d3d3d3;
    font-size:12px;
    text-transform:uppercase;
    padding:10px;
    line-height:40px;
}

.close{
    border-right:none !important;
}

.woohoo{
    width:500px;
    height:400px;
    margin-left:-250px;
    left:50%;
    margin-top:-200px;
    top:50%;
    background: #bbbbcc;
    border:1px solid #ddd;
    border-radius:0%;
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.click{
    display:none;
    height:90%;
    top:0px;
    background:#bbbbcc;
    overflow-y:auto;
}

.yrbookd{
    position:fixed;
    background:url(http://31.media.tumblr.com/07a32f31225195350e20e6f3e781b1e7/tumblr_inline_nf6lteUpJb1solj92.png);
    background-size: auto 130px;
    background-repeat:no-repeat;
    height:130px;
    width:130px;
    margin:13% 90%;
    top:-19.5px;
    left:-130px;
    border:3px solid #ddd;
}

.vita{
    position:fixed;
    margin:40% 90%;
    left:-130px;
    width:130px;
    line-height:20px;
}

.scriptum{
    position:fixed;
    margin:9% 10%;
    width:230px;
    height:270px;
    overflow-y:auto;
}

.contact #ask_form{
    display:none;
    margin-top:20px;
    margin-left:25px;
}

.contact{
    padding:20px;
    max-height:80%;
}

.inq{
    padding:5px;
    width:100px;
    margin-top:10px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    text-transform:uppercase;
    background:#f3f3f3;
}

.question{
    padding:5px;
    margin:10px 0px;
    width:450px;
    text-transform:uppercase;
    background:#f3f3f3;
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.question:hover{
    box-shadow:inset #fff 460px 0px;
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.answer{
    padding:5px;
    margin:10px 0px;
    width:450px;
    text-transform:uppercase;
    background:#f3f3f3;
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.answer:hover{
    box-shadow:inset #fff 460px 0px;
    -webkit-transition-duration:.6s;
    -moz-transition-duration:.6s;
    -o-transition-duration:.6s;
    -ms-transition-duration:.6s;
}

.links{
    padding:25px 0px;
    max-height:80%;
    overflow-y:auto;
}

.go{
    width:450px;
    margin-left:auto;
    margin-right:auto;

}

.links a{
    display:inline-block;
    padding:5px;
    margin:6px;
    text-transform:uppercase;
    background:#fff;
}

.blogroll{
    max-height:85%;
    padding:15px;
    overflow-y:auto;
}

.blogroll img{
    border-radius:5%;
    margin:5px;
}

</style>
</head>
<body>


<div title="(click)" class="iconic"></div>


<div class="panel">
    <div class="nav">
        <a href="/">index</a>
        <a class="a">about</a>
        <a class="c">faq</a>
        <a class="l">links</a>
        <a class="b">blogroll</a>
        <a href="https://capecoding.tumblr.com">credit</a>
        <a class="close">close</a>
    </div>

    <div class="click about" style="display:block">
        <div class="yrbookd"></div>
        <div class="vita">
            <b>Name:</b> Aristophanes <br>
            <b>Theory:</b> Atomic <br>
            <b>Quote:</b> Rough winds do shake the darling buds of May
        </div>
        <div class="scriptum">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum, erat faucibus tempus auctor, enim tortor facilisis enim, sodales rhoncus turpis augue sed ligula. Vestibulum ac iaculis lacus. Sed pretium lacus sit amet eros finibus tristique. Nulla quis magna tristique, ultricies elit eget, condimentum ex. Nullam malesuada, libero sit amet tempus fringilla, nibh arcu malesuada ex, eget ultrices lacus nunc a purus. Aliquam nec nibh sed tellus imperdiet suscipit. Nam id ipsum volutpat, auctor ligula vel, tempus erat. Vivamus cursus orci eget arcu dictum, at eleifend metus aliquam. Morbi tellus nibh, mollis at metus id, sagittis rutrum mauris. Quisque vitae erat sapien. Quisque non enim at dui ornare suscipit. Nulla facilisi. Quisque eu pellentesque massa. Proin sit amet porta enim, in rhoncus neque. Suspendisse eu nibh suscipit, semper eros id, tempor leo. Mauris in neque ultricies, imperdiet purus sed, fermentum dolor.
        </div>
    </div>


    <div class="click contact">

    <!--copy and paste from here-->
        <div class="together">
            <div class="question">
            1.) question?
                </div>
            <div class="answer">
                answer 1.
            </div>
        </div>
    <!--to here to add another question and answer (simply delete these if you do not wish to have the questions or answers)-->

        <div class="together">
            <div class="question">
                2.) question?
            </div>

            <div class="answer">
                answer 2.
            </div>
        </div>

        <div class="inq">
            inquire
        </div>
            <iframe frameborder="0" height="200px" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="400px"></iframe>

    </div>


    <div class="click links">
        <div class="go">
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        <a href="url here">link title</a>
        </div>
    </div>

<div class="click blogroll">
        {block:Following}
            {block:Followed}
                <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}">
            {/block:Followed}
        {/block:Following}
    </div>
</div>


</body>
</html>