<!--HTML-->

<center><div style="width: 300px; height: 100px;">

<div style="background: #B89D7F; font-family: georgia; font-size: 28px; font-style: italic; letter-spacing: -2px; text-transform: lowercase; padding: 4px; color: #2F364D; line-height: 18px;">

screenname is typing</div>
<div style="background: #416963; padding: 4px;">
<table><td><div style="width: 100px; height: 100px; background: #f2f2f2 url(image here. 100 by 100);"></div></td><td><div style="padding: 4px; width: 176px; height: 100px; overflow: auto; text-align: justify; line-height: 9px; font-family: arial narrow; font-size: 10px; background: #4E4166;">

TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE .

</div></td></table></div>
<div style="background: #121212; font-family: times new roman; font-size: 6px; letter-spacing: 4px; padding-bottom: 2px; text-transform: uppercase; color: #000000; line-height: 10px;">by jacc <a href="http://z10.invisionfree.com/shadowplay">shadowplay</a>

</div> </div></center>

<!--HTML-->
<center>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<style type="text/css">

.ybox { width:380px; margin-left:auto; margin-right:auto; }

.yboxtop { width:300px; padding-left:40px; padding-right:40px; padding-top:10px; padding-bottom: 10px; background:#000000; color:#ffdd00; }

.yboxtopicon img { width:60px; height:60px; margin-left: 20px; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; border-radius:100%; float: left; }

.yboxtoptext { float: right; font-family: 'Indie Flower', cursive; font-style: oblique; font-size:16px; margin-top:25px; margin-right:20px; }

.yboxmid { width:300px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:20px; background:#ffffff; color:#000000; background: url(http://burning-bright.net/codeimages/ybg.png); }

.yboxbot { width:300px; padding-left:40px; padding-right:40px; padding-top:10px; padding-bottom:10px; background:#000000; color: #ffdd00; font-family: tahoma; font-size:10px; }

.yboxtext { width:280px; height:200px; padding:10px; background:#ffffff; color:#000000; margin-right:auto; margin-left:auto; overflow-y:auto; font-family: tahoma; font-size:10px; }

.yboxtext p { text-align:justify; }

.yboxtext p::first-letter { font-size: 200%; font-family: 'Indie Flower', cursive; color: #ffdd00; margin-right:2px; }

.yboxtext::-webkit-scrollbar { width: 5px; height: 5px; }
.yboxtext::-webkit-scrollbar-track { width: 1px; background: #ffffff; }
.yboxtext::-webkit-scrollbar-thumb { background: #ffdd00; }

.yboxcright { font-family: tahoma; color: #ffdd00; font-size:7px; text-align:right; }
.yboxcright a { color: #ffdd00; }
</style>

<div class="ybox">
<div class="yboxtop">
<div class="yboxtopicon"><img src="YOUR ICON HERE"/></div>
<div class="yboxtoptext">YOUR TITLE HERE</div>
<br clear="all"/>
</div>

<div class="yboxmid">
<div class="yboxtext"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p></div>
</div>

<div class="yboxbot"><b>notes;</b></div>
<div class="yboxcright">© ana of <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=439">shadowplay</a> & <a href="http://athousandfireflies.jcink.net/index.php?showuser=15">atf</a></div>
</div>
</center>

<!--HTML-->

<head><link href='http://fonts.googleapis.com/css?family=Lato:300|Open+Sans|Alex+Brush' rel='stylesheet' type='text/css'></head><style>#gridbox {	position: relative; width: 450px; height: 450px; margin: 10px auto; BACKGROUND-COLOR: #FFFFFF; border: 3px double #BBBBBB; padding: 10px; text-align: center; COLORr: #555555; } #gridbox a:link, #gridbox a:active, #gridbox a:visited { padding: 0; margin: 0; COLOR: #888888; font-size: 20px; text-decoration: none; -webkit-transition: color ease 0.6s; -moz-transition: color ease 0.6s; -o-transition: color ease 0.6s; transition: color ease 0.6s; } #gridbox a:hover { COLOR: #666666;} .box { display: inline-block; width: 200px; height: 200px; margin: 11px; BACKGROUND-COLOR: #AAAAAA; z-index: 1; } .hov { opacity: 0; z-index: 3; margin: 0; padding: 0; width: 190px; height: 190px; overflow: auto; position: relative; border: 5px solid #AAAAAA; background-color: #DDDDDD; -webkit-transition: opacity ease 0.6s; -moz-transition: opacity ease 0.6s; -o-transition: opacity ease 0.6s; transition: opacity ease 0.6s; } .hov h1 { font-size: 24px; margin: 10px 0 5px 0; text-transform: capitalize; font-family: 'Alex Brush', cursive; } .hov h2 { margin: 0; font-size: 11px; text-transform: uppercase; font-family: 'Lato', sans-serif; } .hov p { padding: 7px; text-align: justify; line-height: 13px; font-family: 'Open Sans', sans-serif;} .hov:hover { opacity: 1; } .round { position: absolute; height: 176px; width: 176px; border-radius: 50%; BACKGROUND-COLOR: #BBBBBB; border: 10px solid #FFFFFF; top: 50%; margin-top: -103px; left: 50%; margin-left: -98px; opacity: 1; z-index: 2; } .round h1 { color: #888; font-size: 30px; letter-spacing: 3px; text-transform: uppercase; font-family: 'Lato', sans-serif; margin: 75px 0 5px 0; } .round h2 { margin: 0; padding: 0; font-size: 15px; letter-spacing: 1px; text-transform: lowercase; font-family: 'Lato', sans-serif; } hov h1, .hov h2, .round h1, .round h2 { font-weight: normal; } hr.styled { padding: 0; border: none; margin-top: 20px; border-top: medium double #333; color: #333; text-align: center; } hr.styled:after { content: "§"; display: inline-block; position: relative; top: -0.5em; font-size: 1.5em; padding: 0 0.25em; background: #DDDDDD; font-family: arial; }</style>

<div id='gridbox'>
<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>

<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>


<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>

<div class='box' style='background-image: url(http://i41.tinypic.com/dwyrz4.png);'>
 <div class='hov'>
 <h1>firstname surname</h1>
 <h2> - age, suggested pb - </h2>
 <hr class='styled'></hr>
 <p>info goes here
 </div>
</div>


<div class='round'>
 <h1>title</h1>
 <h2>brief subtitle</h2>
 <a href='http://z10.invisionfree.com/Shadowplay/index.php?showuser=7050'>ღ</a>
</div>
</div>

<!--HTML-->

<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<center>
<div class="hotsauce">
<div class="hots"><div class="hotsh"><div class="hotsh2">

Shipper stuff here.

</div></div></div>
<div class="hots2">character name</div>
<div class="hots3">list of traits goes here</div>
</div>
<span class="libcred"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">thanks!</a></span>
</center>



<style type="text/css">
.hotsauce {
   width: 302px;
   padding: 10px;
   background-color: #fcfcfc;
   border: 1px solid #eee
   }

.hots {
   width: 300px;
   height: 200px;
   background-image: url(http://placehold.it/300x200); /*IMAGE*/
   border: 1px solid #eee;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
   background-size:300px 200px;
   -webkit-background-size:300 200px;
   }

.hots:hover .hotsh {
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   -webkit-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   -webkit-transition-duration: 1s;
   transition-duration: 1s
   }

.hotsh {
   width: 170px;
   height: 120px;
   background-color: #fdfdfd;
   position: absolute;
   top: 25px;
   left: 50px;
   padding: 15px;
   -moz-transform: scale(2);
   -ms-transform: scale(2);
   -o-transform: scale(2);
   -webkit-transform: scale(2);
   transform: scale(2);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   -webkit-transition-duration: 1s;
   transition-duration: 1s
   }

.hotsh2 {
   width: 160px;
   padding-right: 10px;
   margin-left: 5px;
   height: 120px;
   overflow: auto;
   text-align: justify;
   font-family: arial;
   font-size: 9px;
   line-height: 100%;
   letter-spacing: 0.4px;
   color: #333
   }

.hots2 {
   width: 300px;
   font-family: "raleway";
   font-size: 22px;
   line-height: 100%;
   margin-top:-2px;
   color: #333;
   text-align: center;
   text-transform: uppercase;
   font-weight:700;
   letter-spacing:-2px;
   }

.hots3 {
   width: 300px;
   font-family: arial;
   text-transform: uppercase;
   color: #444;
   font-size: 9px;
   line-height: 100%;
   text-align: center;
   letter-spacing: -0.4px
   }

.libcred a {
   font-family: arial;
   font-size: 7px;
   color: #666;
   line-height: 8px;
   letter-spacing: 1px;
   width:319px;
   padding-right:5px;
   padding-top:2px;
   display:block; 
   text-align:right;
   text-transform:uppercase;
   text-decoration:none;
   }
</style>

<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Smythe' rel='stylesheet' type='text/css'>
<style type="text/css">
.hotbod { width: 430px; height: 210px; background-color: #5F5E63; padding: 10px; border: 10px solid #E4E9EC; outline: 1px solid #5F5E63;}
.thefirst { width: 200px; height: 200px; border: 5px solid #DECBCD; position: relative; float: left;}
.thesecond { width: 200px; height: 200px; border: 5px solid #E4E9EC; position: relative; float: right; background-color: rgba(245,240,237, .85); }
.inwards { width: 175px; height: 175px; padding: 10px; text-align: justify; color: #5F5E63; overflow: auto; font-size: 10px; font-family: actor; line-height: 95%;  }
.thethird { width: 200px; height: 200px; border: 5px solid #DECBCD; position: relative; float: right;}
.thefourth { width: 200px; height: 200px; border: 5px solid #E4E9EC; position: relative; float: left; background-color: rgba(245,240,237, .85); }
.inwards { width: 175px; height: 175px; padding: 10px; text-align: justify; color: #5F5E63; overflow: auto; font-size: 10px; font-family: actor; line-height: 95%;  }
</style>
<center>
<div style="width: 430px; text-align: center; color: #5F5E63; font-family: smythe; font-size: 42px; text-transform: lowercase;line-height: 95%;">character name - age -pb</div>
<div class="hotbod"><div class="thefirst"><img src="http://placehold.it/200x200"></div><div class="thesecond"><div class="inwards">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet velit ac erat eleifend commodo gravida libero ornare. Morbi erat lorem, elementum sed vulputate sed, laoreet et augue. Sed sodales massa euismod turpis tempor pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dolor nisl, bibendum a eleifend iaculis, elementum nec massa. Donec vehicula tincidunt varius. Nunc sem nibh, venenatis eget eleifend vitae, placerat at est. Integer porttitor, lorem vel suscipit ullamcorper, enim sapien dictum dui, sit amet condimentum felis sem sed lorem. Nulla posuere pretium nisl, ornare consectetur dui dictum eu. Etiam mollis rhoncus dui, a scelerisque erat vestibulum vel. Proin eget nisi nunc, nec vestibulum magna. Vivamus mattis sagittis suscipit. Pellentesque eu tellus felis. Nunc semper aliquet orci ac ornare. Pellentesque pulvinar elementum metus elementum blandit. </div></div></div><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>
<p>
<div style="width: 430px; text-align: center; color: #5F5E63; font-family: smythe; font-size: 42px; text-transform: lowercase;line-height: 95%;">character name - age -pb</div>
<div class="hotbod"><div class="thethird"><img src="http://placehold.it/200x200"></div><div class="thefourth"><div class="inwards">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet velit ac erat eleifend commodo gravida libero ornare. Morbi erat lorem, elementum sed vulputate sed, laoreet et augue. Sed sodales massa euismod turpis tempor pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dolor nisl, bibendum a eleifend iaculis, elementum nec massa. Donec vehicula tincidunt varius. Nunc sem nibh, venenatis eget eleifend vitae, placerat at est. Integer porttitor, lorem vel suscipit ullamcorper, enim sapien dictum dui, sit amet condimentum felis sem sed lorem. Nulla posuere pretium nisl, ornare consectetur dui dictum eu. Etiam mollis rhoncus dui, a scelerisque erat vestibulum vel. Proin eget nisi nunc, nec vestibulum magna. Vivamus mattis sagittis suscipit. Pellentesque eu tellus felis. Nunc semper aliquet orci ac ornare. Pellentesque pulvinar elementum metus elementum blandit. </div></div></div>
<a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=5361">❤</a>

</center>

<!--HTML-->

<style type="text/css">

.thb { width:260px; }
.thbg { width:200px; height:410px; background: url(http://i65.tinypic.com/9gg66c.png) #4B1B2D; color:#c798a9; padding:30px; font-family:Calibri; font-size:11px; line-height:110%; text-align:justify; }
.thbox { width:180px; height:180px; background:#673347; color:#c798a9; overflow-y:auto; padding:10px; }
.thbox p { margin-bottom:10px; margin-top:auto; margin-left:auto; margin-right:auto; line-height:110%; text-align:justify; }
.thbox p::first-letter { color:#dcacbd; font-weight:bold; }
.thbox::-webkit-scrollbar { width: 5px; height: 5px; }
.thbox::-webkit-scrollbar-track { width: 1px; background: #673347; }
.thbox::-webkit-scrollbar-thumb { background: #9C2552; }
.thav { width:200px; height:200px; background: url(http://placehold.it/200x200); }
.thavh { width:200px; height:200px; opacity:0; transition-duration:1s; -moz-transition-duration:1s; -webkit-transition-duration:1s; }
.thavh:hover { opacity:0.8; }
.thavb { position:relative; top:50px; left:25px; width:150px; height:100px; }
.thavhb { width:140px; padding:5px; background:#4B1B2D; color:#dcacbd; margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:5px; text-align:center; }
.thcred { text-align:right; font-size:9px; font-family:Calibri; letter-spacing:1px; color:#9C2552; }
.thcred a { color:#9C2552; }
</style>

<div align="center"><div class="thb"><div class="thbg">
<div class="thav"><div class="thavh">
<div class="thavb">
<div class="thavhb">name goes here</div>
<div class="thavhb">age goes here</div>
<div class="thavhb">occupation goes here</div>
<div class="thavhb">playby goes here</div>
</div>
</div></div>
<br />
<div class="thbox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div></div>
<div class="thcred">© ana of <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=439">shadowplay</a> & <a href="http://athousandfireflies.jcink.net/index.php?showuser=15">atf</a></div>
</div></div>