character page 001

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

© Character Page 001 "Europa" by brittnaymatthewsx.tumblr.com
remove the credit and i'll cut off your genitals and
staple them to your face :)

-->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<style type="text/css">

/* BASICS */

body { color:#424242; background-image: url('http://25.media.tumblr.com/cd89325bbcc35735c1ed4a5e54ed3f7a/tumblr_mlgt24ZMxf1s4d1u5o1_1280.png'); background-position: center; background-attachment:fixed; background-repeat: no-repeat; font-family:georgia; font-size:12px; line-height:110%; text-align:justify; }

/* LINKS */

a:link, a:active, a:visited { color: {color:link}; text-decoration:none; }

a:hover { color: font-style:italic; -moz-transition-duration:0.2s; -webkit-transition-duration:0.2s; -o-transition-duration:0.2s; }

/* CHARACTERS PICTURE */

.rome {
    background-image: url('YOURPICTURESURLHERE');
    width: 458px; height: 445px; margin-left:420px; margin-top:135px; }

/* BIOGRAPHY PART */

#paris { padding:2.5px;width: 400px; height: 400px; margin-left:450px; margin-top: -430px;background-color:white; border:1px solid #ccc; overflow:auto; opacity:0; }

#paris:hover { -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; opacity:1;}

/* ETC */

 #venice { font-family: 'Satisfy', cursive; font-size: 50px; margin-left: 480px; color: #0A0A2A; margin-top: 70px;}

#links a { padding:5px; color:#fff; background-color: #030303; margin:0 2px; margin-left: 4px; font-size: 8px; line-height: 300%; letter-spacing: 1px; font-family: calibri; text-transform: uppercase; }

p { margin-top:3px; margin-bottom:3px; }

blockquote { margin:2px 5px 2px 5px; padding: 1px 0 3px 6px; opacity:0.8; border-left: 3px solid {color:solid};}

#credit { position:fixed; font-size:9px; font-weight:normal; line-height:150%; letter-spacing:2px;border: 1px dotted #9c9a9a; bottom: 10px; right:5px; text-transform:uppercase; text-align:center; }

#cred a { padding:5px; color:#FFFFFF; -moz-transition-duration:0.5s; -webkit-transition-duration:0.5s; -o-transition-duration:0.5s;}

</style>

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

</head>
<body>

<div class="rome"></div>
<div id="paris"> <p>

<!-- LINKS GO HERE -->

<div id="links"><a href="/">link 1</a> <a href="/">link 2</a> <a href="/">link 3</a> <a href="/">link 4</a> <a href="/">link 5</a> <a href="/">link 6</a>

</div>
<p>

<!-- BIOGARPHY GOES IN HERE -->

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>

<div id="venice">Characters Name</div>

<div id="credit"><div style="text-align: right;"><small><a href="http://leonardodicaprihoes.tumblr.com/rofl">&nbsp;CREDIT&nbsp;</div></small></div>

</body>
</html>