PageOne - About

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!---
PAGE: 1 - About
BY: Heidi (Previously Crayoned & Zohne  of Zojoh)
--->

<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<style type="text/css">

/*Body & General Link*/

body {
    margin:0;
    padding:0;
    background-color:#fff; /*Background color*/
    background-image:url('BACKGROUND URL'); /*Background image*/
    font-family:consolas;
    font-size:9px;
    }


a {
    color:#999; /*Link color*/
    text-decoration:none;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    }

a:hover {
    color:#fff; /*Link color when hovering*/
    }

/*Box & Content*/

#box {
    border-left:1px solid #ddd; /*Outer container border*/
    border-right:1px solid #ddd; /*Outer container border*/
    padding:20px;
    width:450px; /*!Width of the content!*/
    margin:100px auto;
    }

#content {
    background-color:#fff; /*Inner container/Content Background Color*/
    background-image:url('http://static.tumblr.com/bc7znss/5hpma27py/brillant.png'); /*Inner container/Content Background Image*/
    color:#aaa; /*Text color*/
    font-family:consolas;
    font-size:9px;
    letter-spacing:1px;
    line-height:9px;
    padding:2px 8px;
    max-width:400px;
    }

/*Leftie Image*/
#photo img {
    border:3px double #ddd; /*Image border*/
    background:#fff; /*Image background*/
    padding:5px;
    max-width:70px;
    float:left;
    margin-top:5px;
    margin-right:5px;
    }

/*Title for example "Name:"*/
span.l {
    color:#999;
    font-family:courier new;
    font-size:10px;
    line-height:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    }

/*List style no need to touch*/
ul, li {
    list-style-type:none;
    margin:0px;
    padding:0 5px 0 0;}


/*Linkbox to the right*/

#links {
    background:#fff; /*Linkbox Background*/
    border:3px double #ddd; /*Linkbox borders*/
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
    }


#links li {
    list-style-type:square; /*Links in Linksboxs list style*/
    margin:2px 14px;
    }

/*Navigation, back, ask & dashboard icons*/

#navigation {
    position:absolute;
    margin-left:-15px; /*Move navigation icons left or right*/
    margin-top:8px; /*Move navigation icons up or down*/
    }

#navigation a {
    display:block;
    margin-top:3px;
    opacity:0.5;
    }

#navigation a:hover {
    opacity:1;
    }

</style>
</head>
<body>

<div id="box">
<!---START: Navigation Images---->
<div id="navigation">
    <a href="http://{name}.tumblr.com">
        <img src="http://static.tumblr.com/3yblkz0/yaome0hh0/1335651127_045.png" />
    </a>
    <a href="http://{name}.tumblr.com/ask">
        <img src="http://static.tumblr.com/3yblkz0/RoUme0hmq/1335651096_004.png" />
    </a>
    <a href="http://tumblr.com">
        <img src="http://static.tumblr.com/3yblkz0/5TYmecsz3/1335651109_101.png" />
    </a>
</div>
<!---END: Navigation Images---->

<!---START: Leftie Image---->
<div id="photo">
    <img src="http://static.tumblr.com/3yblkz0/oKSmecswu/tumblr_ly35jjlv9p1qce38f.gif"/>
</div>
<!---END: Leftie Image---->

<table id="content">
<tr>
<td valign="top" width="50%" style="border-right:1px solid #ddd;">

<ul>
<li><span class="l">Name:</span> your name</li>
<li><span class="l">Age:</span> your age</li>
<li><span class="l">Location:</span> your location</li>
<li><span class="l">Contact Me:</span><a href="URL HERE">your contact link</a></li>
<li><span class="l">Interests:</span> your interests</li>
<li><span class="l">Bio:</span> more information can be written here</li>
<ul>
</td>

<td valign="top" style="padding-left:8px;">

<!---- START: Cute pixel & title to links---->
<span class="l"><img src="http://static.tumblr.com/3yblkz0/rFMme0fw6/mini-icone19.gif"/> Links</span>
<!---- END: Cute pixel & title to links ---->
<ul id="links">
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
</ul>

<!---- START: Cute pixel & title to more links---->
<span class="l"><img src="http://static.tumblr.com/3yblkz0/rFMme0fw6/mini-icone19.gif"/> Tags</span>
<!---- END: Cute pixel & title to more links---->
<ul id="links">
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
<li><a href="URL HERE">link</a></li>
</ul>

<!--- INFO: If you want more link-boxes, add the following BEFORE </td>.

<span class="l"><img src="PIXEL URL"/> TITLE</span>
<ul id="links">
<li><a href="URL HERE">link</a></li>
(..)
</ul>
----->
</td>
</tr>
</table>
</div>

<div style="top:5px; left:5px; position:absolute"><a href="http://ladmilk.tumblr.com" title="page by heidi" >©</a></div>
</body>
</html>