Boy Who Lived (About 01)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-----ABOUT PAGE 01 BY WCRMTAILS (http://wcrmtails.tumblr.com/). DON'T STEAL OR REDISTRIBUTE. THANKS.----->

<head>


    <title>about me</title> <!-----CHANGE THE TITLE ON THE TAB HERE----->
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">


    <style type="text/css">


::-webkit-scrollbar-thumb {
    background-color: #eee; /*CHANGE THE SCROLLBAR*/
    height:auto;
    border-bottom:none;
}
::-webkit-scrollbar {
    height:9px;
    width:5px;
    background-color: #fcfcfc; /*MATCH THIS TO THE BG COLOR*/

}

::selection {
    background-color: #7d7d7d; /*SELECTION BG*/
    color: #fcfcfc; /*SELECTION TEXT*/
}

body {
      background-color: #fcfcfc; /*BACKGROUND COLOR*/
      background-image: url(/); /*BACKGROUND URL*/
      background-repeat: repeat;
      color: #9c9c9c;
      font-family: arial;
      line-height: 110%;
}


a {

    color: #000; /*CHANGE THE LINK COLOR*/
    text-decoration: none;
}

a:hover {
    letter-spacing: 2px;
    -webkit-transition: 0.8s;
      -moz-transition: 0.8s;
      transition: 0.8s;
}

b {
    color: #7d7d7d; /*CHANGE THE BOLD COLOR*/
}

}

#face {
    width: 200px;
}


#face img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 5px;
    border: 2px solid #eee; /*CHANGE THE PICTURE BORDER*/
    margin-top: 50px;

}

#face:hover #links {
    width: 200px;
    height: 200px;
    opacity: .8;
    -webkit-transition: 0.8s;
      -moz-transition: 0.8s;
      transition: 0.8s;
}

#links {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 5px;
    background-color: #fcfcfc; /*CHANGE THE BG COLOR OF THE HOVER*/
    opacity: 0;
    margin-top: -215px;
    margin-left: 0px;
    font-size: 12px;
    letter-spacing: 2px;
}

#links a {
    color: #7d7d7d; /*CHANGE THE COLOR OF THE CUSTOM LINKS*/
}

#links a:hover {
    color: #000; /*CHANGE THE CUSTOM LINK HOVER*/
    -webkit-transition: 0.8s;
      -moz-transition: 0.8s;
      transition: 0.8s;
}

#title {
    text-transform: uppercase;
    color: #000; /*CHANGE THE TITLE COLOR*/
    margin-top: 50px;
    letter-spacing: 5px;
    font-size: 12px;
}

#info {
    width: 200px;
    height: 200px;
    font-size: 10px;
    text-transform: lowercase;
    line-height: 150%;
    color: #9c9c9c; /*CHANGE THE INFO COLOR*/
}

#info b {
    text-transform: uppercase;
    color: #7d7d7d;
    border-bottom: 2px solid #7d7d7d; /*CHANGE THE INFO TITLE COLOR*/
    letter-spacing: 5px;
}

#about {
    width: 170px;
    height: 270px;
    border: 2px solid #eee; /*CHANGE THE ABOUT BORDER*/
    padding: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: -40px;
    border-radius: 0px;
    text-align: justify;
    font-size: 10px;
    border-radius: 5px
}


</style>
</head>

<body>

<center>

<div id="face">
    <img src="https://41.media.tumblr.com/cd1d6d92a5622cdcc208870f7f11d34b/tumblr_nswelr38wO1tpb7s5o1_250.jpg"> <!--CHANGE THE PICTURE-->

    <div id="links">

        <div id="title">about me</div> <!--CHANGE THE TITLE-->

        <a href="/" title="return">I</a><br><br>
        <a href="/ask" title="message">II</a><br><br>
        <a href="/navi" title="navigation">III</a> <!--CUSTOM LINK-->

    </div>

</div>

<div id="info" style="margin-top: -130px; margin-left: -450px; text-align: right">

    <b>Name:</b> name<br> <!--CHANGE YOUR NAME-->
    <b>Age:</b> age<br> <!--AGE-->
    <b>Location:</b> location <!--LOCATION-->

</div>

<div id="info" style="margin-top: -200px; margin-left: 450px; text-align: left">

    <!--ADD WHATEVER YOU WANT HERE. FOR EXAMPLE, I HAVE MY HOGWARTS HOUSE, MYERS-BRIGGS TYPE, AND PRONOUNS. YOU CAN DO WHATEVER YOU WANT.-->

    <b>extra:</b>info<br>
    <b>extra:</b>info<br>
    <b>extra:</b>info

</div>

<div id="about">

write whatever you want here. a scrollbar appears if it's too long. <i>italics</i> <b>bold</b> <a href="/">link</a> <u>underline</u>

<br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.


</div>


</center>


<!--DON'T TOUCH ANYTHING HERE EXCEPT FOR #000 TO CHANGE LINK COLOR-->

    <div style="position:fixed;bottom:8px; right:3px; font-size:9px; font-family:calibri; height: 15px;"><a style="color:#000; text-decoration:none;" href="http://wcrmtails.tumblr.com/">W</a></center></div>

</body>