Наказания!!!!

[dohtml]<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
<center><div style="width: 300px;background-image: url(https://2img.net/h/oi45.tinypic.com/24llutf.png);border-right: 15px solid #000;border-left: 15px solid #000; "><div style="font-family: wire one;text-transform: lowercase;font-style: italic;font-size: 32px;letter-spacing: 1.5px;text-align: center;line-height: 100%; margin-top: 7px;">mal's rules</div><hr><div style="width: 265px;text-align: justify;font-family: times;font-size: 10.5px;line-height: 95%;padding: 5px;">Minor edits and all of that are cool with me. Credit is mandatory and links appreciated<33</div></div></center>[/dohtml]


[dohtml]
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>

<style type="text/css">
#dickens {
width: 400px;
height: 300px;
overflow: hidden;
position: relative; }

#dickens .char {
width: 400px;
z-index: 4;
height: 150px;
position: absolute;
right: 0px;
top: 0px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens:hover .char {
top: -150px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens .les {
width: 400px;
height: 150px;
position: absolute;
z-index: 3;
left: 0px;
bottom: 0px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens:hover .les {
bottom: -150px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens .copper {
width: 200px;
height: 300px;
position: absolute;
z-index: 2;
right: 0px;
top: 0px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens:hover .copper {
right: -200px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out;
transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s; }

#dickens .field {
width: 200px;
height: 300px;
position: absolute;
left: 0px;
z-index: 1;
bottom: 0px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out; }

#dickens:hover .field {
left: -200px;
transition: 0.8s all ease-in-out;
-webkit-transition: 0.8s all ease-in-out;
-moz-transition: 0.8s all ease-in-out;
-o-transition: 0.8s all ease-in-out;
transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s; }

#dickens .david {
width: 370px;
height: 300px;
background-image: url(https://2img.net/h/oi45.tinypic.com/24llutf.png);
border-right: 15px solid #000;
border-left: 15px solid #000; }

#dickens .oliver {
font-family: wire one;
text-transform: lowercase;
font-style: italic;
font-size: 32px;
letter-spacing: 1.5px;
text-align: center;
line-height: 100%;
margin-top: 7px;}

#dickens .twist {
font-family: wire one;
text-align: center;
font-size: 15px;
word-spacing: 8px;
text-transform: lowercase;
letter-spacing: 1.5px;}

#dickens .pip {
width: 325px;
text-align: justify;
font-family: times;
font-size: 10.5px;
line-height: 95%;
overflow: auto;
padding: 5px;
height: 195px;
background-color: rgba (247, 247, 247, 0.; }
</style>

<center>
<div id="dickens">
<div class="char">
<img src="http://placehold.it/400x150">
</div>
<div class="les">
<img src="http://placehold.it/400x150">
</div>

<div class="copper">
<img src="http://placehold.it/200x300">
</div>
<div class="field">
<img src="http://placehold.it/200x300">
</div>
<div class="david"><div class="oliver">character name here</div><hr>
<div class="twist">age - group - trait - trait - trait</div><br>
<div class="pip">INFO HERE.
</div>
</div>
</div><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=5184"></a></center>[/dohtml]