Page 02: About Me (Centered)

<html>

<!--

page 02: about me (centered)
by jackie @ benizora.tumblr.com
please keep all of the credits
and don’t steal or distribute.
Thank you! :3

-->

<head>

<title>{Title}</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="shortcut icon" href="{Favicon}">

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

<style type="text/css">

@font-face {
font-family: "Loreena";
src: url('http://static.tumblr.com/e1ydrvt/klIm9snwb/lorena_medium.ttf') format("truetype");
}

a {
color: #fff;
text-decoration: none;
}

a:link, a:active, a:visited {
text-decoration: none;
color: #fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
color:#c9c9c9;
text-decoration: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

body {
background-image: url('PUT BACKGROUND LINK HERE');
background-attachment: fixed;
background-color: #000;
}

#imacorner1 {
border-bottom:10px solid #fff;
border-left:10px solid transparent;
position:fixed;
margin:-40px 0px 0px 290px;
}

#imacorner2 {
border-right:10px solid transparent;
border-bottom:10px solid #fff;
position:fixed;
margin:-40px 0px 0px 300px;
}

#about {
position:fixed;
border-bottom:1px dotted #000;
width:360px;
background-color:#fff;
font-family: 'Calibri', sans-serif;
color:#000;
font-size:11px;
margin:-30px 0px 0px 105px;
text-align:justify;
padding:10px 20px 10px 20px;
overflow-y: scroll;
height:150px;
}

::-webkit-scrollbar {
height:10px;
width:8px;
background:#fff;
}

::-webkit-scrollbar-thumb:vertical {
background:#eee;
height:100px;
}

#banner {
font-family:'Loreena', sans-serif;
font-size:25px;
letter-spacing:2px;
display:block;
width:400px;
line-height:130%;
margin: 0px 0px 55px 105px;
padding:6px 0px 6px 0px;
background-color:#222;
text-transform:uppercase;
text-align:none;
color:#fff;
}

#image {
width:400px;
height:200px;
margin:-100px 0px 0px 105px;
z-index:999;
overflow:hidden;
}

#leftlinks {
z-index:-999;
padding:5px;
padding-bottom:16px;
width: 80px;
display:block;
margin:50px 0px 0px 85px;
text-transform:uppercase;
}

.box {
width: 500px;
height: 300px;
margin: 40px auto auto auto;
}


#leftlinks a {
z-index:-999;
background-color:#fff;
color:#000;
font-size:8px;
font-family:'Calibri', sans-serif;
text-align:left;
width:90px;
letter-spacing:1px;
line-height:50%;
padding:5px;
height:5px;
display:block;
padding-left:13px;
margin:2px;
}

#leftlinks  a:hover {
background-color:#222;
color:#fff;
left:80px;
width:80px;
font-family:'Calibri', sans-serif;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
opacity:1;
margin-left:-55px;
}

</style>

</head>

<body>

</div>

<div class="box">

<div id="leftlinks">

<!-- PUT YOUR LINKS HERE! --!>

<a href="LINK HERE">LINK #1</a>

<a href="LINK HERE">LINK #2</a>

<a href="LINK HERE">LINK #3</a>

<a href="LINK HERE">LINK #4</a></div>

<!-- PUT TOP IMAGE LINK INTO CODE BELOW! --!>

<div id="image"><img src="http://img.photobucket.com/albums/1003/contendaz/image.jpg"/></div>

<div id="banner"><center>

<!-- TITLE HERE --!>

About This Page

<!-- END TITLE --!>

</center></div>

<div id="imacorner1"></div><div id="imacorner2"></div><center><div id="about"><p>

<!-- PUT YOUR ABOUT ME SECTION IN HERE!! --!>


</p></div></center>

</div>

<!-- DO NOT REMOVE CREDIT!!!! --!>

<font style="position: fixed; bottom: 10px; right: 20px;><font size="5px"><a href="http://benizora.tumblr.com"><b>❀</b></a></font>

</body>

</html>