about page - stillness

<!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">

<!--------------------

about page by lavvie@bluenaegi.tumblr.com
please do not steal thanks
message me if you have any problems

------------------->

<head>

<link href="http://static.tumblr.com/xkion9m/Ybpmm6rx4/style-my-tooltips.css" rel="stylesheet" type="text/css" />

<title>{Title} | about</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 */

body {
background-image: url('');
background-attachment: fixed;
background-color: #fff;
font-family: consolas;
font-size: 10px;
line-height: 14px;
text-align: justify;
}

/* ABOUT TEXT */

#text {
width: 420px;
left: 220px;
position: fixed;
background-color: #fff;
color: #bbb;
letter-spacing: 1px;
padding: 5px;
border: 3px solid #fafafa;
text-align: left;
top: 150px;
}

#text a {
color: #ccc;
text-transform: uppercase;
font-family: monospace;
letter-spacing: 0px;
text-decoration: none;
}

/* TITLE */

#cins {
left: 220px;
position: fixed;
background-color: #fafafa;
color: #bbb;
font-family: trebuchet ms;
padding: 10px;
top: 120px;
letter-spacing: 1px;
font-size: 25px;
width: 458px;
z-index: 99;
}

/* ICON */

#cin {
position: fixed;
top: 70px;
left: 90px;
background: #fff;
border: 8px solid #fafafa;
z-index: 100;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}

#cin img {
width: 80px;
height: 80px;
padding: 20px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

#cin img:hover {
opacity: 0.3;
}

#cin:hover #sins {
opacity: 0.8;
}

/* LINKS */

#sins {
position: fixed;
top: 90px;
left: 114px;
z-index: 1000;
opacity: 0;
width: 90px;
font-size: 8px;
height: 90px;
text-align: center;
background-color: #fff;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

#sins a {
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
}

/* BARS */

#one {
background-color: #fafafa;
position: absolute;
z-index: 999;
top: 150px;
left: 655px;
width: 10px;
height: 80px;
}

#two {
background-color: #fafafa;
position: absolute;
z-index: 999;
top: 150px;
left: 665px;
width: 10px;
height: 60px;
}

#three {
background-color: #fafafa;
position: absolute;
z-index: 999;
top: 150px;
left: 675px;
width: 10px;
height: 40px;
}

#none {
background-color: #fafafa;
position: absolute;
z-index: 99;
top: 160px;
left: 210px;
width: 10px;
height: 100px;
}

#ntwo {
background-color: #fafafa;
position: absolute;
z-index: 99;
top: 160px;
left: 200px;
width: 10px;
height: 80px;
}

#nthree {
background-color: #fafafa;
position: absolute;
z-index: 99;
top: 160px;
left: 190px;
width: 10px;
height: 60px;
}

</style>
</head>
<body>

<div id="none"></div>

<div id="ntwo"></div>

<div id="nthree"></div>

<div id="one"></div>

<div id="two"></div>

<div id="three"></div>

<!--------------------

please put a icon here!

------------------->

<div id="cin">
<img src="IMAGE URL HERE">

<!--------------------

please put links here! (but please don't remove credit ;~;)

------------------->

<div id="sins"><br />
<a href="/">home</a><br />
<a href="/ask">ask</a><br />
<a href="/">link one</a><br />
<a href="/">link two</a><br />
<a href="http://bluenaegi.tumblr.com">credit</a>
</div>
</div>

<!--------------------

please put a title here!

------------------->

<div id="cins">
A TITLE GOES HERE
</div>

<!--------------------

please put your about here!

------------------->

<div id="text">

Lorem <b>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</b> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <i>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</i> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

</body>
</html>