(old) about page 1 : 細雪

<!--
/////////////////////////////////////////////////////////////////
about page by lauren (sinnohs) @ tumblr.com
/////////////////////////////////////////////////////////////////
-->

<!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">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style type="text/css">

/* BODY, SCROLLBAR */

body {
background: #fff url('') fixed repeat; /* background color and image */
font:10px consolas; /* font size and family */
color:#ccc; /* font color */
text-align:justify; /* aligning of the text: left, center, right, justify */
}

::-webkit-scrollbar-thumb{
background-color: #ccc; /* background of scrollbar thumb */
height:auto; /* height- auto determines height for you */
}

::-webkit-scrollbar {
height:auto; /* height- auto determines height for you */
width:2px; /* width of scrollbar AND thumb */
background-color: #fff; /* background of scrollbar */
}

/* TEXT LINKS */

a {
color:#aaa;
text-decoration:none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {
color:#eee;
}

/* IMAGE - keep max-width to 100% */

img {
max-width:100%; /* basically, how wide an image can be at most */
}

/* GENERAL LAYOUT FOR ABOUT PAGE */

#cardboard-box {
background:#fff; /* background of about page */
width:300px; /* IMAGE - keep max-width to 100% */
padding:15px; /* padding: top, right, bottom, left */
margin:50px auto 0px auto; /* margin: top, right, bottom, left */
border:1px solid #eee; /* border */
}

/* ABOUT TITLE */

h1 {
font:18px georgia; /* font size and family */
font-style:oblique; /*basically, it's italicized*/
color:#ccc; /* color of title */
text-align:center; /* aligning of the text: left, center, right, justify */
border-bottom:1px dashed #eee;
padding-bottom:5px;
}

/* DESCRIPTION */

.desc {
margin:-3px 3px 3px 3px; /* margin: top, right, bottom, left */
max-height:150px; /* the maximum height for the box */
overflow-y:scroll; /* what to do with overflow */
padding:0px 8px 0px 8px; /* margin: top, right, bottom, left */
}

/* LINKS */

.links {
padding-top:5px;
padding-bottom:0px;
}

.links a {
padding:3px;
font-size:9px;
background:#ccc;
color:#fff;
margin:0px;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.links a:hover {
background:#aaa;
}

</style>
</head>
<body>

<!-- beginning of about page -->
<div id="cardboard-box">

<!-- picture -->
<img src="http://media.tumblr.com/7dcdb462a229fc34e626f88476731fcc/tumblr_inline_mie1w1lfHx1qz4rgp.png">

<!-- title for about page -->
<h1>title</h1>

<!-- beginning of about section, this is where you put your bio -->
<div class="desc">
    You can <a href="http://drawr.net/user.php?id=113024">delete</a> this text when you're customizing this page. This is just a placeholder for right now, it shows how the scrollbar looks when the description is over 200px tall.
    </br></br>
    This is where your description goes! You can make it as long or as short as you please. When it gets to be over 150px tall, it will automatically have a scrollbar so you don't have to scroll down on the page itself but in the set perameters of the text box. Isn't that neat? I think so! ♪
    </br></br>
    This theme was really fun to make. I hope that you enjoy using it! It makes me so happy to see people using my codes and the way they customize it... You can tell a lot about someone from the way they decorate their page. I like to think this page gives off a 'simple and clean' type of feeling, since I was going for that!
</div><!-- desc -->
<div class="links">
<center>
<a href="/">index</a>
<a href="/ask">message</a>
<a href="/archive">memories</a>
<!-- extra links; you can add more if you'd like -->
<a href="/">link one</a>
<a href="/">link two</a>
<a href="http://sinnohs.tumblr.com/" target="_blank" title="theme by lauren">©</a>
</center>
</div><!-- links -->
</div><!-- cardboard-box -->

</body>
</html>