⋆ Biography Template ⋆

<center>
<style type="text/css">@font-face {
font-family: 'Neou Thin';
src: url('http://saratestsite.b1.jcink.com/uploads/saratestsite/Neou_Thin.ttf')  format('truetype');
}
.bio { width: 170px; height: 170px; background-image: url('http://media.tumblr.com/5f5ebe23ec58e0b151880111df7118f7/tumblr_inline_mjcnat4fp91qz4rgp.gif'); border-radius: 50%; -moz-radius: 50%; -webkit-radius: 50%; box-shadow: inset 0 0 0 0 rgba(99, 147, 143, 0.4), inset 0 0 0 10px rgba(255,255,255,0.6), 0 1px 1px rgba(0,0,0,0.1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;  -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.biocontent {width: 170px; height: 170px; border-radius: 50%; -moz-radius: 50%; -webkit-radius: 50%; opacity: 0; position: absolute;  -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0);-ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; }
.bio:hover { box-shadow: inset 0 0 0 110px rgba(0, 0, 0, 0.4), inset 0 0 0 14px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); }
.bio:hover .biocontent { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
.biocontent p { width: 100px; border-radius: 50%; -moz-radius: 50%; -webkit-radius: 50%; padding: 10px 5px; margin: 35 30px; color: #fff;  font-style: italic; font-size: 12px; text-align: center;  font-family: cambria;  }
</style>
<div style="width: 500px;"><div style="width: 450px; background-color: #fff; padding: 10px; border: 15px solid #f1f1f1;"><table cellspacing="1" cellpadding="0"><td><div class="bio"><div class="biocontent"><p>


</p></div></div></td><td> <div style="width: 10px;"></div></td>
<td> <div style="text-align: center; font-family: 'Neou Thin'; font-size: 30px; line-height: 100%; color: #000; text-align: center; text-transform: uppercase;">

First M. Last Name

</div><center> <div style="width: 230px; height: 1px; background-color: #ccc; margin: 5px 0px 5px 0px;"></div><div style="text-align: center; font-family: cambria; font-size: 9px; line-height: 100%; color: #000; text-transform: uppercase; letter-spacing: 1px;">

. Characters Age . Occupation . Hogwarts House .

</div></td> </center></table><center> <div style="width: 430px; height: 5px; background-color: #ccc; margin: 5px 0px 10px 0px;"></div></center><div style="width: 400px; text-align: justify; font-family: cambria; font-size: 10px; line-height: 100%; color: #000;">

<b><u>Personality</b></u>

This section must be at least a paragraph long.
Paragraphs consist of 7 or more sentences.

<hr>
<b><u>History</u></b>

This section needs to be at least 3 paragraphs long!
A paragraph consists of 7 or more sentences.

</div><center> <div style="width: 300px; height: 5px; background-color: #ccc; margin: 10px 0px 5px 0px;"></div><div style="text-align: center; font-family: cambria; font-size: 9px; line-height: 100%; color: #000; text-transform: uppercase; letter-spacing: 1px;">

Faceclaim - Pet (Banned pets must be purchased in the shop)
</div></center></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=165"> <div style="width: 490px; text-align: right; font-style: italic; font-family: calbir; font-size: 8px; text-transform: uppercase; color: #333; letter-spacing: 1px;"> SARA! </div> </a></center>