[Page] → Role Plays #01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<!--
THEME: ROLE PLAYS PAGE #01
BY: jyuubi.org / manatopia.org

Please do not redistribute or use to make your own!
You may edit whatever you please, but leave credit.
-->

<head>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<style type="text/css">
/* BODY */
body {
background-image: url('http://s5.postimage.org/9kgxecbuf/rppage01_bg.png');
background-attachment: fixed;
background-color: #ebedea;
}

#container {
width: 700px;
margin: auto;
}

/* MAIN HEADER (MY ROLE PLAYS) */
#header {
background-color: #5E494E;
height: 40px;
width: 688px;
margin-left: 3px;
margin-bottom: 10px;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #1d1416;
text-transform: uppercase;
line-height: 40px;
text-align: center;
letter-spacing: 8px;
}

/* ROLE PLAY HEADER (SUBJECT) */
.roleplay {
background-color: #5b8774;
display: block;
width: 220px;
height: 30px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
line-height: 30px;
}

.roleplay a {
color: #314c40;
text-decoration: none;
}

/* MAIN INFO BOX (BORDER, FONT) */
.info {
background-color: #171717;
width: 200px;
padding: 10px;
font-family: calibri;
font-size: 10px;
color: #5d5d5d;
letter-spacing: 1px;
text-align: justify;
line-height: 12px;
margin-bottom: 20px;
margin-right: 10px;
}

.info img {
opacity: .7;
max-width: 200px;
}

/* INFORMATION BOX */
.desc {
background-color: #121212;
padding: 5px;
}

.desc b, strong {
color: #755e64;
}

/* CREDITS */
#credit {
position: fixed;
bottom: 10px;
right: 10px;
font-family: calibri;
font-size: 9px;
text-transform: uppercase;
text-align: right;
letter-spacing: 1px;
}

#credit a {
color: #755e64;
text-decoration: none;
}
</style>
</head>
<body>

<div id="container">

<!-- MAIN HEADER -->
<div id="header">my role plays</div>
<!-- MAIN HEADER -->

<table><tr>

<!-- FIRST COLUMN -->
<td valign="top">

<!-- ROLE PLAY HEADER -->
<div class="roleplay"><a href="ROLE PLAY URL HERE">SUBJECT</a></div>
<!-- ROLE PLAY HEADER -->

<div class="info">
<!-- IMAGE -->
<img src="IMAGE URL HERE">
<!-- IMAGE -->

<!-- INFORMATION BOX -->
<div class="desc">
PUT YOUR INFORMATION HERE. OR DELETE IT.
</div>
<!-- INFORMATION BOX -->
</div>
</td>
<!-- FIRST COLUMN -->


<!-- SECOND COLUMN -->
<td valign="top">

<!-- ROLE PLAY HEADER -->
<div class="roleplay"><a href="ROLE PLAY URL HERE">SUBJECT</a></div>
<!-- ROLE PLAY HEADER -->

<div class="info">
<!-- IMAGE -->
<img src="IMAGE URL HERE">
<!-- IMAGE -->

<!-- INFORMATION BOX -->
<div class="desc">
PUT YOUR INFORMATION HERE. OR DELETE IT.
</div>
<!-- INFORMATION BOX -->
</div>
</td>
<!-- SECOND COLUMN -->


<!-- THIRD COLUMN -->
<td valign="top">

<!-- ROLE PLAY HEADER -->
<div class="roleplay"><a href="ROLE PLAY URL HERE">SUBJECT</a></div>
<!-- ROLE PLAY HEADER -->

<div class="info">
<!-- IMAGE -->
<img src="IMAGE URL HERE">
<!-- IMAGE -->

<!-- INFORMATION BOX -->
<div class="desc">
PUT YOUR INFORMATION HERE. OR DELETE IT.
</div>
<!-- INFORMATION BOX -->
</div>
</td>
<!-- THIRD COLUMN -->

</tr></table>

</div>

<div id="credit">
<a href="/">go back?</a><br />
<!-- DO NOT REMOVE OR EDIT -->
<a href="http://jyuubi.org">&copy; jyuubi.org</a>
</div>

</body>
</html>