01 * Jack the Ripper

<!-- JACK THE RIPPER * a-thaisce @ tumblr.com * DO NOT REMOVE CREDIT -->

<html>
<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'>

<style>

body {
    background-color:#111111;
    margin: 0;}

h1, h2, h3 {
    margin:5px 0px 5px 20px;
    font-family:Cuprum;
    font-weight:normal;
    color:#790000;
    }

#content {
    width:910px;
    margin:auto;
    text-align:center;
    font-family:Yanone Kaffeesatz, arial;
    font-size:40px;
    background-color:transparent;
    padding-top:5px;
    color:#eeeeee;
    }

#nav {
    width:600px;
    margin:auto;
    background-color:transparent;
    font-family:Cuprum;
    font-size:12px;
    }

#nav a {
    display:inline-block;
    width: 90px;
    background-color:#dddddd;
    margin:10px 5px 5px 5px;
    color:#790000;
    text-decoration:none;
    padding:2px;
    opacity:0.5;
    }

#nav a:hover{
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

.box {
    width:420px;
    height:290px;
    display:inline-block;
    margin:15px;
}

.header {
    background-color:#020202;
    height:20px;
    width:400px;
    color:#eeeeee;
    font-family:Cuprum;
    font-size:20px;
    text-align:right;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:5px 10px;
    margin:0px;}

.header a {
	color:#eeeeee;
	text-decoration:none;}

.imagewrap {
    height:240px;
    background-color:#eeeeee;
    opacity:0.7;
    width:100px;
    padding:10px;
    margin:0px;
    display:inline-block;
    float:left;}

.imagewrap img {
    height:240px;
    width:100px;
    }

.imagewrap:hover{
    opacity:1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s; ease-in-out}

.text {
    height:250px;
    width:290px;
    padding:5px;
    float:right;
    background-color:#050505;
    display:inline;
    font-family:calibri;
    font-size:12px;
    color:#eeeeee;
    text-align:justify;
    overflow:hidden;}

.text a {
    color:#790000;
    text-decoration:none;
    }

.text a:hover{
    color:#eeeeee;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

#credit {
    position:fixed;
    bottom:0px;
    right:0px;
    height:40px;
    width:50px;
    color:#eeeeee;
    text-align:center;
    font-size:20px;
    }

#credit a {
    color:#eeeeee;
    opacity:0.3;
    text-decoration:none;
    }

#credit a:hover {
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

</style>

</head><body>

<div id="content">
Relationships

<div id="nav">
    <a href="/">Back</a>
    <a href="/ask">Ask</a>
    <a href="/tags">Tags</a>
    </div>

<!--START-->
<div class="box">
<div class="header"><a href="/">HEAD</a></div>
<div class="imagewrap"><img src="IMAGE URL"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor sagittis libero, eget sodales massa elementum ac. Morbi congue felis vel nisl iaculis viverra. Donec tincidunt dapibus enim, vitae pretium orci condimentum et.
</div>
</div>
<!--FINISH-->


</div>
<!-- CREDIT, DO NOT REMOVE -->
<div id="credit"><a href="http://a-thaisce.tumblr.com">★</a></div>

</body></html>