theme 04 about page

<!--

 ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
    please don't take off the credit it's really small!!!!


                    ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
                    ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
                    ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
                    ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
                    ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
                    ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
                    ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
                    ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
                    ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
                    ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
                    ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
                    ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯


               hardziam.tumblr.com // themesbyzsu.tumblr.com


-->
<head>
<title>about the blogger</title>
<link rel="shortcut icon" href="{Favicon}"><link rel="shortcut icon" href=
"http://25.media.tumblr.com/avatar_f924d83159cb_96.png">

<style type="text/css">
body {
        background: #fff; /*change background color here SEE NOTE*/
        background-image: url('put background image url here')  ;
        margin-left: 650px;
        padding: 0;
        position: fixed;
        left: 50%;
        margin-top:0px;
        margin-left: -250px;
        font-family: helvetica;
        font-weight:lighter;
        }

a {
    text-decoration:none;
    outline:none;
    color:black; /*link color*/
}

a:hover {
    color:blue; /*link hover color*/
}

#sidebar {
    position:absolute;
    margin-top:30px;
    margin-left:80px;
    width:180px;
    padding:5px;
    }


#sidebarpic img {
    margin-top:0px;
    margin-bottom:-10px;
    width:470px;
    height:auto;
    text-align:center;
    }

#title {
    font-family:helvetica;
    margin-left:30px;
    text-align:left;
    font-size:15px;
    background:white; /* NOTE!!! make sure that if you change the background color to change this one too!!!*/
    float:left;
    margin-top:20px;
    font-weight:lighter;
    color:black;
    padding-left:3px;
    padding-right:3px;

}


#links {
    background:none;
    margin-top:10px;
    margin-left:-10px;
    padding-left:3px;
    line-height:170%;
    margin-bottom:10px;
    width:450px;
    float:left;
    text-align:right;
    padding-right:3px;
}

/*-----navigation links---*/
#links a{
    color:black;
    font-size:11px;
    padding:2px;

}

#links a:hover{
     color:black;
     text-decoration:underline;
}


#description {
    margin-top: 30px;
    padding:10px;
    width: 450px;
    color:black;
    font-size:10px;
    text-align:justify;
    font-weight:lighter;
    font-family:helvetica;
    border:1px solid black;
    }
ul, li, ol {margin:2px 0px 0px 2px; color: #444; padding-left:5px}

/*----don't touch this!!!!---*/

#credit a{
position:fixed;
right:0px;
bottom:0px;
padding:4px;
width:15px;
text-transform:none;
font-family: helvetica;
font-weight:none;
letter-spacing:1px;
margin-bottom:3px;
font-size:9px;
margin-right:3px;
border:1px solid;
opacity:0.7;
border-color:#bbb;
background: #fff;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#credit a:hover {
opacity:1;
color:white;
width:15px;
background:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}


{CustomCSS}
</style>
</head>

<body>


<div id="sidebar">
<div id="sidebarpic"><img src="http://24.media.tumblr.com/d6c84dbe169adb8e5ef66b296ffec926/tumblr_mympqni7BN1rxwljfo1_500.jpg"><!--- put your image url in here!!! ----></div>
<div id="title">about the blogger</div>
<div id="description">
<!--- here goes your about ---->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <li>i like rainy days and winter</li>
    <li>boys are really cute</li>
    <li>girls are really cute</li>
the sidebar is 470px wide, height doesn't matter. if you're going to have a <i>really</i> long about then i suggest you use a shorter picture! :)<br>
<b>bold</b>, <i>italic</i>, <a href="link">link</a> and <u>underlined</u>.

 <!--- here goes your links ---->
<div id="links">
    <a href="/">home</a>
    <a href="/ask">message</a>
    <a href="link">link</a>
    <a href="link">link</a>
    <a href="link">link</a>

</div>
</div>
 </div>
 </div>
<div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>
</body>

</html>