Character Masterlist #1 v.2

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

<!--------

			CHARACTER MASTERLIST #1 v.2 - 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=Roboto+Condensed' rel='stylesheet' type='text/css'>

</head>

<style type="text/css">
body {
	padding: 0;
	margin: 0;
	list-style: none;
	background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png');
	background-attachment: fixed;
}

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

::-webkit-scrollbar-thumb:vertical {
    height:10px;
	border-radius: 2px;
    background-color: #303030; }

::-webkit-scrollbar-thumb:horizontal {
    height:10px;
    background-color: #f3f3f3; }

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

#heaven {
	display: block;
	width: 100%;
	height: 50px;
	font-family: 'roboto condensed';
	font-size: 18px;
	color: #EEEEEE;
	background-color: #303030;
	box-shadow: 3px 4px 7px #505050;
}

.title {
	float: right;
	margin-right: 80px;
	margin-top: 13px;
	text-transform: uppercase;
}

.back a {
	color: #EEEEEE;
	float: left;
	margin-left: 50px;
	margin-top: 13px;
}

#earth {
	position: relative;
	width: 933px;
	height: auto;
	margin-top: 2px;
	margin-left: 210px;
	margin-bottom: -9px;
}

.info {
	display: inline-block;
	background-color: #EEEEEE;
	height: 305px;
	width: 220px;
	padding: 5px;
	margin-top: 4px;
}

.name {
	width: 210px;
	height: 20px;
	padding: 5px;
	margin-bottom: 4px;
	text-align: center;
	font-family: 'roboto condensed';
	font-size: 12px;
	color: #EEEEEE;
	background-color: #505050;
}

.description {
	position: absolute;
	top: 43px;
	width: 200px;
	height: 250px;
	background-image:url('http://media.tumblr.com/tumblr_m20pw8bB8H1r9ly5j.png');
	font-family: arial unicode ms;
	font-size: 11px;
	color: #202020;
	overflow: auto;
	opacity: 0;
	padding: 10px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.info:hover .description {
	opacity: 1;
}

.button {
	text-align: center;
	margin-top: 5px;
	background-color: #202020;
	padding: 3px;
}

.button a {
	color: #EEEEEE;
	padding: 5px 10px 5px 10px;
}


</style>
<body>
<div id="heaven">
	<div class="back">
	<a href="/">Back</a>
	<a href="http://jakehelps.tumblr.com">Credit</a>
	</div>
	<div class="title">Characters</div>
</div>
<!----- BOX 1 ------>
<div id="earth">
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Candice Swanepoel - VS Model</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/fdsfdsfs.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. Candice Swanepoel has been modeling for Victoria's Secret since she came into the agency in 2007. Since then, she has been on the cover of countless magazines, named one of the world's hottest women, and is one of the top earning models in the world, not to mention one of the most famous. Candice Swanepoel has been modeling for Victoria's Secret since she came into the agency in 2007. Since then, she has been on the cover of countless magazines, named one of the world's hottest women, and is one of the top earning models in the world, not to mention one of the most famous.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Taylor Lautner - Actor</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/tretretetr.png" />
	<div class="description">
	Taylor Lautner has been famous mostly for his role as the young Jacob Black in the Twilight series. Some of his notable works are The Adventures of SharkBoy and LavaGirl, Cheaper by the Dozen 2, Abduction, and Valentine's Day. He is one of the world's hottest men and is known for his seductive yet romantic stare/gaze.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Jennifer Lawrence - Actress</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/gffdgd.png" />
	<div class="description">
	Jennifer Lawrence has been named, hands down, one of the most influential people in the world. From X-Men: First Class to The Hunger Games Trilogy, Lawrence has risen up to fame especially at such a young age. Being the second youngest winner of an Academy Award, Jennifer has been known to take breathes away just from her amazing and remarkable acting.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Candice Accola - Actress</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/gfdgfdgfd.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
</div>

<!------ BOX 2 ------>
<div id="earth">
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Miranda Kerr - VS Model</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/tretertrer.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Justin Bieber - Singer/Actor</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/dsfdsf.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Paul Wesley - Actor</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/gfdgfdgdg.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Francisco Lachowski - Model</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/rewrer.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
</div>

<!------ BOX 3 ------>
<div id="earth">
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Alexander Ludwig - Actor</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/sdfsfs.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Nolan Gerard Funk - Actor/Singer</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/xzzcxczx.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
<!----- CHARACTER HERE ------>
	<div class="info">
	<div class="name">Max Irons - Actor</div>
	<img src="http://i93.photobucket.com/albums/l78/andrew_jason12/fdgdsagds.png" />
	<div class="description">
	This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography. This is the description. This is where you put in the character biography.
	<div class="button"><a href="#">Character Profile Link</a></div>
	</div>
	</div>
</div>


</body>
</html>