asthete

<!DOCTYPE html>
<head>

<!---about page by eurhipides. standard rules apply, visit elisionthemes if you have any questions! :) ----->

    <title>about me</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(){
  $(".what").click(function(){
        $('.img').toggleClass('top');
        $(this).toggleClass('rotate')
  });
});
</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">

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

::-webkit-scrollbar {
    height:0px;
    width:3px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #555; /*scrollbar color*/
}

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

body {
    background-color: #eee; /*page background color*/
    font-family:arial;
    font-size:12px;
}

a {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: #bbb; /*link color*/
}

a:hover {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color:#666; /*link hover color*/
}

#con {
    width:750px;
    height:550px;
    overflow:hidden;
    margin:auto;
    position:fixed;
    background:#fff; /*content background*/
    left:0;
    border-radius:3px;
    right:0;
    top:0;
    bottom:0;
}

.img {
    background:url(https://40.media.tumblr.com/f21c9f3d37e218a1833d4924cd828427/tumblr_nauhel1S8Z1s3oysco1_1280.jpg); /*display image*/
    background-size:cover;
    height:450px;
    opacity:0.9;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.img.top {
    margin-top:-450px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.title {
    height:100px;
    line-height:100px;
    font-size:35px;
    padding:0px 50px;
    font-style:italic;
    font-family:'Raleway', sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    overflow:hidden;
    box-sizing:border-box;
    color:#555; /*title color*/
    word-spacing:5px;
}

.what {
    float:right;
    cursor:pointer;
    font-size:40px;
    color:#777; /*arrow color*/
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.what:hover {
    color:#aaa; /*arrow hover color*/
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}

.what.rotate {
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}

.content {
    height:450px;
    padding:0px 50px 50px;
    overflow:auto;
    color:#777; /*content color*/
    line-height:170%;
}

.content p {
    margin:25px 0px;
}

.content p:first-of-type {
    margin-top:5px;
}

.credit {
    position:fixed;
    bottom:10px;
    right:10px;
    background:#eee;
    padding:0px 2px;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

</style>
</head>
<body>

<div id="con">
        <div class="img"></div>
        <div class="title">about me <!---title--->
        <div class="what"><i class="fa fa-angle-down"></i></div>
        </div>

    <div class="content">
    <!---here is where your content begins.----->
        <p>Remember to wrap each paragraph in < p > and < / p > tags. <b>bold</b>, <u>underline</u>, <i>italics</i> and <a href="/">link</a>.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi quam, gravida quis elementum et, viverra ut ante. Suspendisse dignissim efficitur dui, vitae volutpat risus dictum vel. Etiam sagittis metus consectetur arcu iaculis facilisis. Cras tortor sem, rhoncus id tellus at, iaculis vehicula nisi. Cras auctor, mauris in maximus congue, purus lectus pharetra dui, in pretium velit magna quis sem. Nunc eget ligula mi. Sed aliquet sagittis ante, ac luctus orci. Morbi non commodo quam, sit amet imperdiet diam.</p>

        <p>In eu nisl sollicitudin turpis ornare ornare et vitae libero. Proin nulla ipsum, finibus quis ipsum a, dignissim ultricies tortor. Quisque in hendrerit libero. Cras nec consectetur sem. Aenean nec purus nec metus interdum accumsan eu at lectus. Donec placerat nunc a rutrum dignissim. Aenean iaculis ante nec maximus accumsan.</p>

        <p>Nulla vehicula et sem sit amet viverra. Nulla iaculis lacus ligula, ultrices sollicitudin quam iaculis mollis. Mauris nunc odio, lobortis a lectus at, ornare condimentum tortor. Pellentesque eu est fringilla, volutpat nunc vel, dapibus mi. In blandit nibh vitae hendrerit gravida. Vestibulum est quam, blandit vel ligula tristique, congue condimentum enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam finibus ut libero rhoncus dapibus.</p>

        <!---here is where your content ends--->
    </div>

</div>
    <!----please please PLEASE do not touch!--->
     <a class="credit" title="eurhipides" href="http://astraeus.co.vu">©</a>


</body>
</html>