About 01

<!DOCTYPE html>

<head>
<title>NAVIGATION</title> <!-- This is the text on your browser tab-->
<link rel="shortcut icon" href="{Favicon}">

<!----

about 01 by franz @ lestranqe.tumblr.com/
DO NOT REMOVE THE CREDIT OR DIE AT THE BARRICADE
instructions included :)

--->

<style type="text/css">

/*Scrollbar*/

::-webkit-scrollbar {
    width:5px;
    height:auto;
    background:#fff;} /*Change scrollbar background colour here*/
::-webkit-scrollbar-corner {background:#fff;} /*Change scrollbar background colour here*/
::-webkit-scrollbar-thumb:vertical {background:#f2f2f2;} /*Change scrollbar colour here*/
::-webkit-scrollbar-thumb:horizontal {background:#f2f2f2;} /*Change scrollbar colour here*/

/*Main Structure*/

body {
    background:#fff; /*Change background colour here*/
    color:#000; /*Change font colour here*/
    font-family:times; /*Change font here*/
    font-size:11px; /*Change font size here*/
    line-height:180%;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#6a6a6a; /*Change links colour here*/
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

a:hover {
    color:#e6e6e6; /*Change hovered links colour here*/
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

/*Header*/

#header {
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    background:transparent;
    width:680px;
    border-bottom:1px solid #e6e6e6;
}

#title {
    text-align:center;
    font-family:times;
    font-size:25px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:8px;
}

#description {
    margin:15px;
    text-align:center;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:3px;
}

/*Content*/

#container {
    margin: 0 auto;
    width: 680px;
    border-bottom:1px solid #e6e6e6;
    border-right:1px solid #e6e6e6;
}

#left {
    width:200px;
    height:275px;
    border-left:1px solid #e6e6e6;
    border-right:1px solid #e6e6e6;
    position:absolute;
    padding:15px 5px 35px 13px;
}

#leftimage img {
    height:275px;
    width:170px;
    padding:10px;
    text-align:center;
    opacity:.9;
}

#content {
    position:relative;
    width:414px;
    height:290px;
    margin-left:220px;
    padding:15px 23px 20px 23px;
    overflow:auto;
    text-align:justify;
    line-height:150%;
}

/*Links*/

#navigation {
    text-align:center;
    margin:15px 0;
}

#navigation a {
    color:#000;
    padding:20px;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:3px;
}

#navigation a:hover {
    color:#e6e6e6;
}

/*Credit - DON'T TOUCH THIS PART*/

#credit {
    position:fixed;
    float:right;
    bottom:5px;
    right:5px;
    background:transparent;
    font-size:20px;
    text-align:right;
}

#credit a {
    color:#000;
}

#logo {
    font-size:10px;
    font-family:baskerville;
    font-style:italic;
    opacity:0;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

#credit:hover #logo {
    opacity:1;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}


</style>
</head>

<body>
<div id="header">
<div id="title">About Me</div> <!-- Page Title-->
<div id="description">Meet the blogger</div> <!-- Description-->
</div>

<div id="container">

<div id="left">
<div id="leftimage"><img src="http://static.tumblr.com/wyul8xf/rl8n6a391/about.jpg"></div> <!-- Insert link to your image-->
</div>

<div id="content">
<p>This is where you type everything you want others to know about you. You can <b>bold things</b> like this, <i>italicise them</i>, <small>make them tiny</small>, <strike>strike them out</strike> or change the font colour, <font color="#207301">like so</font>. </p>
<p>Start a new paragraph like this. You might want to make a list:</p>
<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Hola</li></ul>
<center><p>Make things go to the center.</p></center>
<p>Oh and by the way, don't worry about space limit. Put as many things here as you want. A scrollbar will appear automatically when your texts go beyond the size of the box.
<p>Now GO WILD.</p>
</div>

</div>

<div id="navigation"> <!-- The links at the bottom, duplicate to add more links-->
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>
<a href="/">Link 4</a>
</div>

<div id="credit"> <!-- DON'T TOUCH-->
<div id="logo">franztheme</div>
<a href="http://lestranqe.tumblr.com">☺</a>
</div>

</body>
</html>