About Me #1

<!DOCTYPE html>

<!------
	ABOUT ME PAGE #1 by JAKEHELPS
		#1: Don't remove the credit.
		#2: Don't redistribute and claim as your own.
		#3: Customize as you like!

		© Copyright 2013 - Jake Helps | Tumblr
------>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>


</head>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: #202020;
	background-attachment: fixed;
	margin-bottom: 50px;
}

a {
	text-decoration: none;
	color: black;
}

::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: #0195ab; }

::-webkit-scrollbar-thumb:horizontal {
    height:30px;
    background-color: #0195ab; }

::-webkit-scrollbar {
    height: 10px;
    width: 5px;
    background-color: #101010; }

#content {
	float: left;
	width: 600px;
	height: auto;
	background-color: #FFFFFF;
	margin-left: 250px;
	margin-top: 60px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.name {
	display: block;
	padding: 25px 10px;
	background-color: #303030;
	height: 24px;
	font-family: 'Fjalla One';
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
	letter-spacing: 10px;
	text-transform: uppercase;
}

.name .general {
	text-align: center;
	font-family: arial unicode ms;
	font-size: 8px;
	color: #FFFFFF;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.photo1 img {
	width: 300px;
	height: 420px;
	background-color: #101010;
	float: left;
}

.photo2 img {
	width: 300px;
	height: 420px;
	background-color: #101010;
	float: right;
}

#description {
	float: left;
	width: 290px;
	height: 474px;
	background-color: #FFFFFF;
	margin-top: 60px;
	padding: 10px;
	font-family: arial unicode ms;
	font-size: 8px;
	color: #202020;
	text-transform: uppercase;
	letter-spacing: 1px;
	leight-height: 120%;
	overflow: auto;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#description:hover {
	opacity: 1;
}

#links {
	width: 580px;
	height: auto;
	margin-left: 250px;
	padding: 10px;
	text-align: center;
}

#links a {
	font-family: arial unicode ms;
	font-size: 8px;
	color: #FFFFFF;
	padding: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hovered {
	display: inline-block;
	margin-left: -170px;
	margin-top: 300px;
	font-size: 8px;
	text-transform: uppercase;
	color: #FFFFFF;
	opacity: 0.1;
}


</style>
<body>
<div id="content">
	<div class="name">Wesley Dracarys Burnwood
	<div class="general">Seth Kuhlmann | 22 | Nephilim</div>
	</div>

	<div class="photo1"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/tumblr_lokiau98Zn1qa9vqgo1_1280.png" /></div>
	<div class="photo2"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Untitled-1-3.png" /></div>
</div>
<div id="description">
	Wesley Dracarys Burnwood was born as the nephilim child of the angel Adam and his mortal mother Clarisse Halleway. For almost eighteen years of his life, his true nature has been kept hidden within him and from him. With no contact or knowledge about what happened to his father, and with hesitation to discuss the topic from his mother, he finally gave up on wondering about what his father was like.<br /><br />
	This is where you input your description or biography of your character. It can be as long as you want it to be because it's going to overflow in the box and act as a scrolling biography so feel free to put as much information as you want!
</div>
<div class="hovered">Hover</div>
<div id="links">
	<a href="/">Home</a>
	<a href="/">Message</a>
	<a href="/">Link 1</a>
	<a href="/">Link 2</a>
	<a href="/">Link 3</a>
	<a href="http://jakehelps.tumblr.com">Credit</a>
</div>


</body>
</html>