<link href='http://fonts.googleapis.com/css?family=Lato|Quicksand' rel='stylesheet' type='text/css'>
<center>
<style type="text/css">

@font-face { font-family: 'recorda_script_personal_useRg';
src: url('http://burnoutforever.b1.jcink.com/uploads/burnoutforever/RecordaScript_webfont.eot');
src: url('http://burnoutforever.b1.jcink.com/uploads/burnoutforever/RecordaScript_webfont.eot') format('embedded-opentype'),
url('http://burnoutforever.b1.jcink.com/uploads/burnoutforever/RecordaScript_webfont.woff') format('woff'),
url('http://burnoutforever.b1.jcink.com/uploads/burnoutforever/RecordaScript_webfont.ttf') format('truetype'),
url('http://burnoutforever.b1.jcink.com/uploads/burnoutforever/RecordaScript_webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

.shibilookbooksophkat { max-width: 400px; height: auto; overflow: hidden; background-color: #000; padding: 10px; border: 15px solid #f3f3f3; box-shadow: 0px 1px 1px #666; font-family: 'Lato'; color: #fff; text-align: left; letter-spacing: 2px;}
.shibilookbooksophkat  h1 {font-family: 'recorda_script_personal_useRg'; font-size: 62px; color: #f1f2f3; text-align: left; line-height: 95%; padding: 5px;  letter-spacing: 1px; margin: 0px; text-align: center;}
.charimgshibicomo img { width: 100px; height: 100px; }
.shibilookbook { max-width: 400px; height: auto; overflow: hidden; background-color: #000; padding: 10px; border: 15px solid #f3f3f3; box-shadow: 0px 1px 1px #666; font-family: 'Lato'; color: #fff; text-align: center;}
.shibilookbook h1 { font-family: 'recorda_script_personal_useRg'; font-size: 40px; color: #f1f2f3; text-align: left; line-height: 90%; padding: 5px;  letter-spacing: 1px; margin: 0px;}
.shibilookbook i { width: 80%; float: right; font-family: 'Lato'; font-size: 10px; color: #fff; text-align: justify; line-height: 95%;  letter-spacing: 1px;  font-weight: 100;}  
.shibilookbook h3 { font-family: 'recorda_script_personal_useRg'; font-size: 35px; color: #f1f2f3; text-align: left; line-height: 90%; padding: 5px;  letter-spacing: 1px; margin: 0px; text-align: center;}

#magiclook { width: 100px; height: 100px; overflow: hidden; border-radius: 70px; display: inline-block; border: 5px solid #f3f3f3;}
.hovershibi { width: 100px; height: 100px; background-color: transparent; position: relative; top: 100px; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s; padding-top: 5px; }
.hovershibi #stufflove { background-color:#fff; font-family: 'Lato'; padding: 2px; font-size: 13px; color: #3d3d3d; position: relative; top:50px; }
#magiclook:hover .hovershibi { top: 0px; }

.sophkatcred {font-family: 'Lato'; font-size: 9px; color: #c0c0c0; text-align: center;}

</style>
<div class="shibilookbooksophkat">Characters First Middle Last Name<h1>Look Book</h1></div><br>
<img src="http://placehold.it/125" style="width: 125px; height: 125px; border-radius: 100px; padding: 10px; background-color: #f3f3f3;">
<img src="http://placehold.it/125" style="width: 125px; height: 125px; border-radius: 100px; padding: 10px; background-color: #f3f3f3;">
<img src="http://placehold.it/125" style="width: 125px; height: 125px; border-radius: 100px; padding: 10px; background-color: #f3f3f3;">

<br><br>

<div class="shibilookbook"><h3>Index</h3><hr>
Name of Outfit | Name of Outfit | Name of Outfit | Name of Outfit | Name of Outfit</div>

<br><div class="shibilookbook">
<h1>Go To Outfit~</h1>
<i>The outfit classification would be something like this: 'comfy-casual' 
or 'semi-formal' or well something along those lines. As for what 
goes here, these can just be your notes on the outfit or even how 
your character feels while wearing the outfit! It is totally up to 
you!</i></div>

<br>

<center>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Outerwear</div></div></div></div>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Blouse</div></div></div></div>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Pants</div></div></div></div>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Footwear</div></div></div></div><br>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Jewlery</div></div></div></div>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Makeup</div></div></div></div>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Jewelry</div></div></div></div><br>
<div id="magiclook"><div style="width: 100px; height: 100px; background-image: url(http://placehold.it/100);"><div class="hovershibi"><div id="stufflove">Accessory</div></div></div></div>
</center>