about page 01

<head>
<title>ᴀʙᴏᴜᴛ ᴍᴇ</title>
<!--- change the title of the page here --->

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

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


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


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


--->


<style type="text/css">

::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}


body {
        background: #fff;  /*here you can put in a background */
        margin-left: 300px;
        padding: 0;
        position:absolute;
        }

a {
    text-decoration:none;
    outline:none;
    color:gray; /*change link colors here */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

a:hover {
    color:#eee; /*change link hover color */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#mainContainer {
    margin-top:40px;
    padding:80px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:50px;
    width:750px;
    height:400px;
}

.container {
    width:240px;
    height:320px;
    padding:5px;
    color:black;
    background-size:100%;
    border:10px solid #aacccc; /*large border color */
    font-family:helvetica;

             /* ----------- HERE IS YOUR IMAGE!!
                        try to make it about 250px by 330px -------- */

    background-image:url(http://25.media.tumblr.com/c94a11c8b088429b48cd3f3681f2d0ec/tumblr_myr4088qSm1qhxj7uo1_500.png);

             /* -----------  HERE IS YOUR IMAGE!! ---------*/

    font-size:9px;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

.extra{
    width:270px;
    height:350px;
    border:5px solid #eedddd; /*second border color - try make this the same as the one below the title */
}

.container:hover {
    border:10px solid #dd9999; /*border color on hover */
    box-shadow:inset -75px -75px 400px #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;
}

.title {
    font-family: helvetica;
    text-transform:lowercase;
    font-weight: bold;
    width:420px;
    margin-top:-350px;
    border-bottom:3px solid #eedddd; /*second border color, see note above! */
    padding-bottom:-0px;
    padding-left:15px;
    margin-left:275px;
    opacity:1;
    font-size:100px;
    text-align:left;
    letter-spacing:-5px;
    color:white;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent), center  url(http://data2.whicdn.com/images/34634049/tumblr_lox9lmq3l21r0xhyao1_500_large.jpg);/*here you can change the pattern in the text */
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-background-clip: text;

}


.links {
    font-family: georgia;
    font-style:italic;
    font-weight:0.6;
    margin-top:35%;
    padding:10px;
    margin-left:20px;
    font-size:11px;
    width:180px;
    overflow:auto;
    text-align:center;
    color:black;
    background:#f8f8f8;
    box-shadow: none;
    opacity:0;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

.container:hover .links{
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

}

.links a{
    color:black;
    margin-bottom:5px;
    display:inline-block;
    padding:3px;
    background:white; /*links color*/
    width:90%;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

}

.links a:hover {
    color:black;
    background:#aacccc; /* link hover color */
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

.text {
    font-family: georgia;
    width:420px;
    padding-top:5px;
    margin-left:285px;
    opacity:1;
    font-size:12px;
    text-align:justify;
    color:black;
    height:140px;
    overflow:auto;
}

.info {
    background:black;
    display:block;
    margin-bottom:5px;
    font-family:helvetica;
    font-size:9px;
    text-transform:uppercase;
    padding:4px;
    letter-spacing:2px;
    margin-top:5px;
    width:420px;
    margin-left:280px;
    color:white;
    -moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

.info:hover {
    background:#aacccc;
    -moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
em {
    color:#dd9999;
    text-transform:none;
    font-size:10px;
    letter-spacing:0px;

}


#credit {
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:hover {
opacity:1;
width:15px;
background:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}


</style>


</head>

<body>

<div id="mainContainer">
 <div class="extra">
      <div class="container">


 <div class="links">

    <a href="/">home</a>
    <a href="/">face</a>
    <a href="/">message</a>
    <a href="/">link</a>
    <a href="/">link</a>
    <a href="/">link</a>
 </div>


 </div>

 <div class="title">about.</div>

      <div class="info">
     name: <em>NAME</em><br>
     </div>
     <div class="info">
     age: <em>YOUR AGE</em><br>
     </div>
     <div class="info">
     location: <em>WHERE YOU LIVE</em>
 </div>


 <div class="text">

HERE IS WHERE YOU PUT IN YOUR ABOUT!

 </div>

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


</body>


</html>