Page 03: About Me Page (2)

<html>

<!--

page 03: about me (2)
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}">

<style type="text/css">

@font-face {
font-family: "Tommaso";
src: url('http://static.tumblr.com/e1ydrvt/1g8mah461/tommaso.ttf') format("truetype");
}

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

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

a:hover {
color:#f8a519;
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('http://static.tumblr.com/e1ydrvt/Yrpma9u6t/1benizora.jpg');
background-attachment: fixed;
background-color: #fff;
}

#about {
position:fixed;
width:455px;
background-color:#fff;
font-family: 'Georgia', sans-serif;
font-style:italic;
color:#000;
font-size:11px;
text-align:justify;
padding:20px 20px 20px 25px;
}

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

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

#banner {
font-family:'Tommaso', sans-serif;
font-size:45px;
letter-spacing:1px;
background-color:#FFF;
display:block;
position:fixed;
width:480px;
margin-top:10px;
padding:2px 10px;
opacity:.8;
text-transform:uppercase;
text-align:right;
color:#000;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
}

#banner:hover {
opacity:1.1;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
}

#image {
width:500px;
height:300px;
margin-top:75px;
overflow:hidden;
}

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

#navigation {
margin-top:-20px;
height: 20px;
width:500px;
position: fixed;
text-align:center;
z-index:99;
}

#sidelinks {
text-align: center;
width: 500px;
display:block;
font-family: 'Georgia', sans-serif;
font-style:italic;
z-index:999;
}

#sidelinks a {
display:inline-block;
width: 105px;
padding: 3px;
font-family: 'Georgia', sans-serif;
font-size: 9px;
text-transform: lowercase;
text-align: center;
font-style:italic;
letter-spacing: 1px;
background-color:#fff;
color:#000;
z-index:999;
}

#sidelinks a:hover{
background-color:#e3b7b2;
color:#fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
z-index:999;
}

</style>

</head>

<body>

</div>

<div class="box">
<div id="navigation"><div id="sidelinks">

<a href="PUT LINK HERE" id="sidelinks">link #1</a>
<a href="PUT LINK HERE" id="sidelinks">link #2</a>
<a href="PUT LINK HERE" id="sidelinks">link #3</a>
<a href="PUT LINK HERE" id="sidelinks">link #4</a>

</div></div>

<div id="banner">

<!-- TITLE HERE --!>

<font color="#e3b7b2">{</font> About This Blog <font color="#e3b7b2">}</font>

<!-- END TITLE --!>
</div>

<!-- PUT YOUR IMAGE IN HERE --!>

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

<!-- END IMAGE --!>
<div id="about">

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

<p>Here's some random text lalalala delete me when you go to put your own in!</p>


</div></div>

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