all in one page #3

<!DOCTYPE html>
<head>

<!---okay guys dont steal, theme by amywiiliams prev. clarascapaldis, you know the drill, instructions are in the code, okay enjoy--->

    <title>Navigation</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:100,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>


<script>
$(document).ready(function(){
  $(".t1, .close1").click(function(){
if ($( ".b.one" ).hasClass( "big" )) {
  setTimeout(function() {
    $('.four, .two, .three').toggleClass('small');
     }, 700);
  setTimeout(function() {
    $('.b.one').toggleClass('big');
    $('.t1').fadeToggle(300);
     }, 400);
    $('.stuff').fadeToggle(300);
} else {
  setTimeout(function() {
    $('.b.one').toggleClass('big');
     }, 200);
  setTimeout(function() {
    $('.stuff').fadeToggle(300);
     }, 600);
    $('.four, .two, .three').toggleClass('small');
    $('.t1').fadeToggle(300);
}
  });
});
</script>

<script>
$(document).ready(function(){
  $(".t2, .close2").click(function(){
if ($( ".b.two" ).hasClass( "big" )) {
  setTimeout(function() {
    $('.four, .one, .three').toggleClass('small');
     }, 700);
  setTimeout(function() {
    $('.b.two').toggleClass('big');
    $('.t2').fadeToggle(300);
     }, 400);
    $('.stuff').fadeToggle(300);
} else {
  setTimeout(function() {
    $('.b.two').toggleClass('big');
     }, 200);
  setTimeout(function() {
    $('.stuff').fadeToggle(300);
     }, 600);
    $('.four, .one, .three').toggleClass('small');
    $('.t2').fadeToggle(300);
}
  });
});
</script>

<script>
$(document).ready(function(){
  $(".t3, .close3").click(function(){
if ($( ".b.three" ).hasClass( "big" )) {
  setTimeout(function() {
    $('.four, .two, .one').toggleClass('small');
     }, 700);
  setTimeout(function() {
    $('.b.three').toggleClass('big');
    $('.t3').fadeToggle(300);
     }, 400);
    $('.stuff').fadeToggle(300);
} else {
  setTimeout(function() {
    $('.b.three').toggleClass('big');
     }, 200);
  setTimeout(function() {
    $('.stuff').fadeToggle(300);
     }, 400);
    $('.four, .two, .one').toggleClass('small');
    $('.t3').fadeToggle(300);
}
  });
});
</script>

<script>
$(document).ready(function(){
  $(".t4, .close4").click(function(){
if ($( ".b.four" ).hasClass( "big" )) {
  setTimeout(function() {
    $('.one, .two, .three').toggleClass('small');
     }, 700);
  setTimeout(function() {
    $('.b.four').toggleClass('big');
    $('.t4').fadeToggle(300);
     }, 400);
    $('.stuff').fadeToggle(300);
} else {
  setTimeout(function() {
    $('.b.four').toggleClass('big');
     }, 200);
  setTimeout(function() {
    $('.stuff').fadeToggle(300);
     }, 600);
    $('.one, .two, .three').toggleClass('small');
    $('.t4').fadeToggle(300);
}
  });
});
</script>

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/css">

.b.one.big, .b.two.big, .b.three.big, .b.four.big {
    width:510px;
    height:510px;
    background:#eee; /*background of the tabs after they expand*/
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.b.one.big {
    left:0;
    top:0;
}

.b.two.big {
    right:0;
    top:0;
}

.b.three.big {
    left:0;
    bottom:0;
}

.b.four.big {
    right:0;
    bottom:0;
}

.b.small {
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
}

#s-m-t-tooltip {
    max-width:150px;
    padding:5px 8px;
    margin:20px 14px 7px 10px;
    background-color:#fff;
    font-family:Calibri;
    font-size:10px;
    line-height:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    border:1px solid #777;
    z-index:99999999;
}

::-webkit-scrollbar {
    height:3px;
    width:2px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    background-color: #555; /*scrollbar color*/
    height:auto;
    border-bottom:none;
}

::selection {
    background-color: #000;
    color: #fff;
}

body {
    background-color: #f7f7f7; /*change whole page background color*/
    font-family:arial;
    color:#777;
}

a {
    text-decoration:none;
    color:#bbb; /*color of link*/
}

a:hover {
    color:#777; /*color of hovered link*/
}

b {
    color:#555; /*color of bolded text*/
}

.con {
    background:#fff; /*change color of the borders around the four squares*/
    width:510px;
    height:510px;
    position:fixed;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.b {
    width:230px;
    height:230px;
    background-color: #f7f7f7; /*change background of the tabs before they are expanded */
    position:absolute;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.b:hover {
    background:#f1f1f1; /*change tabs background color on hover*/
}

.b.one {
    top:15px;
    left:15px;
}

.b.two {
    top:15px;
    right:15px;
}

.b.three {
    bottom:15px;
    left:15px;
}

.b.four {
    bottom:15px;
    right:15px;
}

.top {
    background:#aaa; /*change background color of the top bar where the close button is*/
    position:absolute;
    left:0;
    right:0;
    top:0;
    padding:8px;
}

.t {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;
    padding:100px 0px;
    letter-spacing:3px;
    font-size:30px;
    font-weight:300;
    font-family:'Raleway', sans-serif;
    text-transform:uppercase;
    cursor:pointer;
}

.stuff {
    display:none;
}

.top a {
    padding:5px;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff; /*change color of close button*/
    float:right;
    border:2px solid #fff; /*change color of close button border*/
}

.side {
    position:absolute;
    top:60px;
    bottom:15px;
    width:170px;
    right:15px;
}

.side img {
    width:120px;
    margin-bottom:5px;
    height:120px;
    padding:25px;
    background:#fff;
}

.q {
    padding:15px;
    background:#fff; /*change content background*/
    font-size:10px;
    margin-bottom:6px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
}

.content, .ccontent {
    position:absolute;
    top:60px;
    bottom:15px;
    overflow:auto;
    padding:15px;
    box-sizing:border-box;
    left:15px;
    width:300px;
    text-transform:uppercase;
    font-size:11px;
    line-height:180%;
    letter-spacing:1px;
    background:#fff; /*change content background*/
}

.ccontent {
    right:15px;
    width:auto;
}

.tt {
    font-size:15px;
    letter-spacing:2px;
    margin:10px 0px;
    color:#555; /*change tags title text color*/
}

.c1 a {
    padding:1px 5px;
    display:inline-block;
    width:90px;
    margin:5px 3px;
    color:#666; /*change tags text color*/
    border:1px solid #bbb; /*change tags border color*/
}

.c1 a:hover {
    border-bottom:1px solid #777; /*change tags border hover color*/
}

.links {
    position:absolute;
    bottom:-20px;
    text-align:right;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:10px;
    left:10px;
    right:10px;
}

.links a {
    margin:0px 5px;
}

</style>
</head>
<body>

<div class="con">

    <div class="b one">
        <div class="t t1">about</div>
        <div class="stuff">
            <div class="top">
                <a href="javascript:;" class="close1">close</a>
            </div>
            <div class="side">
                <!---about image--->
                <img src="https://33.media.tumblr.com/e93b7a69c5f84cda6159ca4df28b3b34/tumblr_ngyempsyr11u692uio5_250.png">
                <!---end about image--->

                <div class="q">
                <!---quote--->
                here is a quote about something you fancy
                </div>

                <!---change these accordingly--->
                <div class="q">name: steph</div>
                <div class="q">age: fourteen</div>
                <div class="q">location: canada</div>

            </div>
            <div class="content">

            <!---description--->
                <p><b>bold</b> <i>italic</i> <u>underline</u> <a href="/">link</a>. remember to wrap each paragraph in  < p > and < /p > tags!!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at quam tellus. Nullam interdum ligula ac malesuada accumsan. Proin cursus rhoncus fringilla. Phasellus eget mauris lectus. Sed egestas porta libero, vel sollicitudin urna porttitor nec. Quisque eget nisi vel nulla maximus interdum a quis dolor. Morbi eget eros risus. Donec id leo ut justo mollis consequat a id est.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at quam tellus. Nullam interdum ligula ac malesuada accumsan. Proin cursus rhoncus fringilla. Phasellus eget mauris lectus. Sed egestas porta libero, vel sollicitudin urna porttitor nec. Quisque eget nisi vel nulla maximus interdum a quis dolor. Morbi eget eros risus. Donec id leo ut justo mollis consequat a id est.</p>
            <!--end description--->
            </div>
        </div>
    </div>


    <div class="b two">
        <div class="t t2">tags</div>
        <div class="stuff">
            <div class="top">
                <a href="javascript:;" class="close2">close</a>
            </div>
            <div class="ccontent c1">

                <!---copy and paste from here--->
                <div class="tt">tags title</div>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <!---to here to add a new tags section--->

                <div class="tt">tags title</div>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>

                <div class="tt">tags title</div>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>
                <a href="/">tag</a>

            </div>
        </div>
    </div>


    <div class="b three">
        <div class="t t3">faq + ask</div>
        <div class="stuff">
            <div class="top">
                <a href="javascript:;" class="close3">close</a>
            </div>
            <div class="ccontent" style="text-align:center">
                here is where you put your faq.
                <!---question--->
                <p><b>Questions about life and the depth of our reality?</b> Answers that somewhat satisfy your curiosity.</p>
                <!---end question. remember to wrap each q&a in <p> and </p> tags, and wrap each question in <b> and </b> tags like shown above.--->

                <p><b>Question?</b> Answers.</p>
                <p><b>There are more questions?</b> There are more answers.</p>


                <!---ask box (remember to change YOURURLHERE to your actual url or it won't work!)--->
<iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" style="overflow:auto; margin-top:10px" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->

            </div>
        </div>
    </div>


    <div class="b four">
        <div class="t t4">blogroll</div>
        <div class="stuff">
            <div class="top">
                <a href="javascript:;" class="close4">close</a>
            </div>
            <div class="ccontent" style="text-align:center">
                        {block:Following}{block:Followed}
       <div style="display:inline-block; margin:7px" class="following">
       <a target="_blank" href='{FollowedURL}' title='{FollowedName}'><img src='{FollowedPortraitURL-40}'></a>
       </div>
       {block:Followed}{/block:Following}
            </div>
        </div>
    </div>

    <div class="links">
        <a href="/" style="float:left">back</a>
        <a href="http://tumblr.com/dashboard">dash</a>
        <!---here are your two custom links, feel free to add more if ya feel like it--->
        <a href="/">one</a>
        <a href="/">two</a>
        <!---do not remove or I swear i will fucking shank you--->
        <a href="http://gloriousponds.co.vu" title="amywiiliams">©</a>
    </div>


</div>


</body>
</html>