transcendence

<!DOCTYPE html>
<head>

<!---transcendence by eurhipides. visit elisionthemes.tumblr.com for more info--->

    <title>title here</title><!---page title--->
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/9y86jzv/74ynmikto/fonts.css" />

<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>

<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 { /*edit the tooltips*/
    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;
    color:#000;
    z-index:99999999;
}

::-webkit-scrollbar {
    height:5px;
    width:15px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background:#ddd;/*scrollbar color*/
    border:14px solid #fff;/*make this the same as the container background color*/
    border-left:0px;
}

body {
    background-color: #f7f7f7;/*page background*/
    font-family:'Lato', sans-serif;
    font-size:12px;
    color:#666;/*text color*/
    margin:0px;
}

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

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

#universe {
    width:650px;
    height:430px;
    border-radius:3px;
    position:fixed;
    top:0;
    bottom:0;
    overflow:hidden;
    left:0;
    right:0;
    margin:auto;
    background:#fff;/*container background color*/
}

.desc {
    padding:0px 25px;
    text-align:justify;
    overflow:auto;
    position:absolute;
    box-sizing:border-box;
    right:20px;
    top:40px;
    bottom:40px;
    width:410px;
    line-height:190%;
}

.desc p:first-child {
    margin-top:0px;
}

#side {
    position:absolute;
    left:40px;
    top:40px;
    bottom:40px;
    padding:10px;
    overflow:hidden;
    box-sizing:border-box;
    width:170px;
}

#side img {
    width:100px;
    display:block;
    margin:0px auto 15px;
    height:100px;
    border-radius:50%;
}

#side li {
    margin:0px 0px;
    border-bottom:1px solid #ddd;/*sidebar details border color*/
    padding:5px;
    list-style:none;
}

#side li:last-child {
    border-bottom:0px;
}

.credit {
    position:fixed;
    bottom:8px;
    right:10px;
    font-family:arial;
}

.credit:hover {
    transform:rotate(135deg);
}

</style>
</head>
<body>

<div id="universe">

        <div id="side">
            <div style="display:table;width:100%;height:100%">
                <div style="display:table-cell;height:100%;vertical-align:middle">
                    <a href="/"><img src="https://40.media.tumblr.com/02c045e9a539116e808cea51d8dca715/tumblr_nqo8puww8G1rd2j8to6_250.png"></a><!---IMAGE HERE--->

                    <li><b>Name:</b> Name here</li><!--NAME--->
                    <li><b>Age:</b> Age here</li><!---AGE--->
                    <li><b>Location:</b> Location here</li><!---LOCATION-->
                    <li><b>Extra:</b> Extra space for whatever you want.</li>

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

        <div class="desc">

        <!---DESCRIPTION BEGINS HERE--->

            <p><b>About Me</b></p>

            <p>Remember to wrap each paragraph in < p > and < / p > tags. <a href="">Link</a>, <b>bolded,</b> <u>underlined</u> and <i>italicized.</i></p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper nisi at porta dapibus. Donec bibendum venenatis libero, vitae tempus metus fringilla et. Maecenas eget faucibus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec a nunc in magna ultricies condimentum. Nam congue nibh hendrerit nibh mollis vehicula sed sit amet elit. In volutpat libero et leo rutrum, ut vulputate nunc aliquam. Quisque massa erat, fringilla sed laoreet a, dictum sed nibh. Donec in arcu eu velit posuere dapibus.</p>

        </div><!---DESCRIPTION ENDS HERE--->


</div>

<!--please do not edit/remove--->
<a class="credit" href="http://astraeus.co.vu" title="eurhipides">+</a>


</body>
</html>