about page

<!DOCTYPE html>
<head>

<!---about page by eurhipides. basic theme rules apply, visit elisionthemes if you have any questions. enjoy!--->

    <title>about me</title><!---page 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>

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' 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 { /*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:#e74c3c;
    z-index:99999999;
}

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

::-webkit-scrollbar-thumb {
    background-color: #e74c3c; /*scrollbar color*/
    border-right:4px solid #fff;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;
}

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

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

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

.con {
    width:780px;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    height:500px;
    background:#fff; /*box color*/
}

.content {
    position:absolute;
    top:25px;
    left:25px;
    right:25px;
    bottom:25px;
    padding:25px;
    overflow:auto;
    border:4px solid #e74c3c; /*border color*/
    font-family:'Montserrat', sans-serif;
}

.title {
    font-size:22px;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:15px;
    color:#e74c3c; /*color of title*/
}

.d {
    font-size:14px;
    color:#777; /*details color*/
    display:inline;
    margin-left:15px;
}

.text {
    font-size:14px;
    color:#777;/*description color*/
    margin-top:15px;
    line-height:145%;
}

.a {
    margin-top:5px;
    font-size:14px;
    margin-right:15px;
    color:#999;/*details answer color*/
    display:inline;
}

.links {
    position:absolute;
    right:20px;
    bottom:-25px;
    font-family:'Montserrat', sans-serif;
}

.links a {
    color:#fff; /*color of four bottom links*/
    margin:0px 5px;
    text-transform:capitalize;
}

</style>
</head>
<body>

<div class="con">
    <div class="content">
        <div class="title">about me</div> <!---title--->

        <center><!---begin details--->
        <div class="d">Name:</div>
        <div class="a">John Smith</div>

        <div class="d">Location:</div>
        <div class="a">Earth</div>

        <!---if you want to add another detail copy and paste from here-->
        <div class="d">Age:</div>
        <div class="a">Unknown</div>
        <!---to here--->

        </center><!---end details--->

        <div class="text">
        <!--here if your description--->
            <p>Make sure to wrap each paragraph in < p > and < / p > tags. <a href="/">Link</a>, <u>underline</u>, <b>bolded</b> and <i>italicized.</i></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet laoreet augue. Quisque vitae tellus ut dui ultrices laoreet. Nunc porttitor turpis massa, nec mattis dolor porttitor eget. Cras in tellus quis magna dapibus rutrum in sed quam. Vivamus nec aliquet mi. Aliquam nibh nibh, venenatis ac pellentesque ut, viverra id eros. Sed efficitur nulla sem, vitae condimentum neque maximus nec. Vestibulum eu vestibulum nunc. Integer nulla sem, ornare id dapibus vitae, lacinia eget dolor. Vestibulum mi ante, venenatis eget elementum in, ultrices nec enim. Morbi pharetra ullamcorper orci, a fringilla leo accumsan at. Pellentesque ut nisi non lacus dignissim euismod ut a est. Sed eleifend lectus commodo libero rutrum convallis. Praesent dignissim, odio vitae tincidunt lacinia, mi dolor ultrices eros, sed elementum sem neque vitae libero. </p>

<p>Pellentesque in dapibus lectus. Cras ultrices faucibus metus facilisis congue. Duis venenatis justo et feugiat tempus. Nulla rhoncus, purus a bibendum convallis, turpis felis eleifend lacus, tempus interdum nunc velit ac urna. Sed a metus est. Suspendisse quis mi justo. Quisque pulvinar nulla consequat, condimentum urna id, pellentesque neque. Mauris ex libero, porta tristique posuere eu, semper ac ligula. Morbi pellentesque convallis nunc et tristique. Aliquam sed pulvinar quam. Phasellus augue risus, laoreet quis diam id, gravida tincidunt arcu. </p>
        </div>

    </div>

    <div class="links">
        <a href="http://astraeus.co.vu" title="eurhipides">credit</a>
        <a href="http://tumblr.com/dashboard">dash</a>
        <a href="/">link 1</a><!---first link-->
        <a href="/">link 2</a><!---second link--->
    </div>


</div><!---con--->


</body>
</html>