All In One Page

<!--

theme by septim

╔╔ ══ ══        Rules:
║║                     -do not use as base
╚╚ ══ ╗╗               -do not steal bits of code
      ║║               -do not remove credits
══ ══ ╝╝


-->


<!DOCTYPE html>
<head>

<title>{Title}</title>

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/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:30,

tip_fade_speed:300,

attribute:"title"

});

});

})(jQuery);

</script>

<script src="http://static.tumblr.com/747hq6z/UECmpnu4l/jquery.scrollto-1.4.3.1-min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/747hq6z/58Qmpnv3a/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $.localScroll();
	});
</script>

<style type="text/css">


body {
font-family:lato;
text-align:justify;
line-height:normal;
font-size:14px;
color:black;/*font color*/
margin:0;
}
a {color:black;
text-decoration:none;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
a:hover {    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s; }
#t {padding-top:200px;}
#title {font-size:28px;
font-weight:300;
color:black;
line-height:70px;
height:70px;
width:70px;
border:2px solid black;
border-radius:100%;
text-transform:uppercase;
text-align:center;
margin:0 auto 50px auto;
cursor:pointer;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
 }
#title:hover {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
background:black;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;  }

.con {margin:0;}
.about {width:100%;
width:100%;
padding:0 0 200px 0;
/* first background color */
background:white;}
.about #title:hover {color:white;}

.links{
width:100%;
padding:0 0 200px 0;
/* second background color */
background:#e6e6e6;}
.links #title:hover {color:#e6e6e6;}

.tags {
width:100%;
padding:0 0 200px 0;
/* third background color */
background:#ccc;}
.tags #title:hover {color:#ccc;}

.roll {
width:100%;
padding:0 0 200px 0;
/* fourth background color */
background:black;}
.roll #title {background:black;
color:white;
border:2px solid white;}
.roll #title:hover {color:black;
background:white;}
.ha {width:100%;
padding:100px 0;
background:black;
border-top:1px solid #a8a8a8;
text-align:center;
font-size:10px;
color:white;
text-transform:uppercase;
letter-spacing:1px;}
.ha a {color:white;}
#about {width:500px;
margin:0 auto 0 auto;
color:#a8a8a8;
text-align:justify;}
#links {width:500px;
min-height:600px;
margin:0 auto 0 auto;
text-align:justify;}
#tags {width:500px;
min-height:400px;
margin:0 auto 0 auto;
text-align:left}
#roll {width:500px;
min-height:400px;
margin:0 auto 0 auto;
text-align:justify;}

#s-m-t-tooltip{
    font-size:9px;
    position:absolute;
    margin:-15px 45px;
    letter-spacing:1px;
    z-index:9999;
    background:black;
    color:white;
    text-transform:uppercase;
    border:1px solid white;
    padding:10px 15px;
}

#links a {width:196px;
margin:25px;
float:left;
text-align:center;
color:white;
padding:25px 0;
border:2px solid white;}

#links a:hover {background:white;
color:black;}

.category {width:227px;
margin:0 10px 10px 10px;
display:inline-block;
text-align:center;
color:white;
padding:15px 0;}

.category a {display:block;
border:2px solid white;
margin:10px 0;
font-size:11px;
text-transform:uppercase;
padding:10px 0;
letter-spacing:2px;
color:white;}

.c {background:white;
text-transform:uppercase;
padding:10px 0;
margin-bottom:10px;
color:black;}

.category a:hover {
color:black;
border-left:50px solid white;}

#bo {height:270px;
overflow-y:auto;}

#bo img {width:46px;
height:46px;
border:2px solid white;
margin:10px;
border-radius:100%;
float:left;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;}

#bo img:hover {-webkit-filter: brightness(0.3);
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;}

.bar {position:fixed;
left:20px;
top:20px;
z-index:5;}

.bar a{width:15px;
height:15px;
border:1px solid #a8a8a8;
border-radius:100%;
display:block;
margin-bottom:10px;}

.pip {
position:absolute;
text-transform:uppercase;
font-size:11px;
letter-spacing:1px;
font-weight:bold;
left:15px;
margin-top:-25px;
text-shadow:2px 2px 2px white;
opacity:0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;}

.lol:hover .pip {opacity:1;
left:25px;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;}

</style>


</head>


<body>

<div class="con">
<div class="bar">
<div class="lol"><a href="#about" style="background:white"></a><div class="pip">about</div></div>
<div class="lol"><a href="#links" style="background:#e6e6e6"></a><div class="pip">links</div></div>
<div class="lol"><a href="#tags" style="background:#ccc"></a><div class="pip">tags</div></div>
<div class="lol"><a href="#roll" style="background:black"></a><div class="pip">blogroll</div></div>
</div>

    <div class="about">
    <div id="about">
    <div id="t" name="about"></div>
    <div id="title" >A</div>
      <!--about text-->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!--end about text-->
</div>
</div>

<div class="links">
    <div id="links">
    <div id="t" name="links"></div>
    <div id="title" >L</div>
    <!--links here-->
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
    <a href="">Link Five</a>
    <a href="">Link Six</a>
    <!--end links-->
    </div>
</div>

<div class="tags">
    <div id="tags">
    <div id="t" name="tags"></div>
    <div id="title">T</div>
    <!--tags here-->
    <div class="category">
    <!--category name-->
    <div class="c">category</div>
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
    </div>
    <div class="category">
    <!--category name-->
    <div class="c">category</div>
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
    </div>
    <div class="category">
    <!--category name-->
    <div class="c">category</div>
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
    </div>
    <div class="category">
    <!--category name-->
    <div class="c">category</div>
    <a href="">Link One</a>
    <a href="">Link Two</a>
    <a href="">Link Three</a>
    <a href="">Link Four</a>
    </div>
    <!--end tags-->
    </div>
</div>

<div class="roll">
    <div id="roll">
    <div id="t" name="roll"></div>
    <div id="title">B</div>
    <div id="bo">
    {block:Following}
{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>{/block:Followed}
{/block:Following}
    </div>
    </div>
</div>
<div class="ha">Theme by <a href="http://farahmir.tumblr.com" target="_blank">septim</a></div>
</div>
</body>
</html>