Neue Steckbriefvorlage für HTML-Fortgeschrittene!

<center><div class="fightmain" style="background-image: url('http://img3.fotos-hochladen.net/uploads/echostvbild93xvujqlyg.jpg');">
<div class="fightname">Name des Charakters</div>
<div class="fighttext"><span class="fightpoint"><font color="#1b212a">•</font><font color="#414F66">•</font><font color="#7791bb">•</font></span><span class="fightfirst" style="font-family: 'Great Vibes', cursive;">A</span><span class="fightnext" style="font-family: 'Great Vibes', cursive;">llgemeines</span>
<div style="padding-left: 100px; margin-top: -5px;">Some short facts</div><i>Name:</i>
<i>Geschlecht:</i>
<i>Alter:</i>
<div class="pad-l"><i>Clan:</i>
<i>Rang:</i></div>
<span class="fightpoint"><font color="#1b212a">•</font><font color="#414F66">•</font><font color="#7791bb">•</font></span><span class="fightfirst" style="font-family: 'Great Vibes', cursive;">A</span><span class="fightnext" style="font-family: 'Great Vibes', cursive;">ussehen</span>
<div style="padding-left: 100px; margin-top: -5px;">Look into the mirror</div>
mind. 80 Wörter
<span class="fightpoint"><font color="#1b212a">•</font><font color="#414F66">•</font><font color="#7791bb">•</font></span><span class="fightfirst" style="font-family: 'Great Vibes', cursive;">C</span><span class="fightnext" style="font-family: 'Great Vibes', cursive;">harakter</span>
<div style="padding-left: 100px; margin-top: -5px;">My character with all the rough and edges</div><i>Persönlichkeit:</i> mind. 70 Wörter

<table cellpadding="0" cellspacing="0" style="padding-left: 25px;"><tr><td class="fighttd"><i>Stärken:</i>
#min. 3
</td><td class="fighttd"><i>Schwächen:</i>
#min.3
</td></tr><tr class="fighttd"><td><i>Vorlieben:</i>
#min. 3
</td><td class="fighttd"><i>Abneigungen:</i>
#min. 3</td></tr></table>

<span class="fightpoint"><font color="#1b212a">•</font><font color="#414F66">•</font><font color="#7791bb">•</font></span>><span class="fightfirst" style="font-family: 'Great Vibes', cursive;">F</span><span class="fightnext" style="font-family: 'Great Vibes', cursive;">amilie</span>
<div style="padding-left: 100px; margin-top: -5px;">My family</div><i>Mutter:</i>
<i>Vater:</i>
<i>Geschwister:</i>

<i>Gefährte:</i>
<i>Jungen:</i>

<i>Mentor:</i>
<i>Schüler:</i>

<span class="fightpoint"><font color="#1b212a">•</font><font color="#414F66">•</font><font color="#7791bb">•</font></span><span class="fightfirst" style="font-family: 'Great Vibes', cursive;">V</span><span class="fightnext" style="font-family: 'Great Vibes', cursive;">ergangenheit</span>
<div style="padding-left: 100px; margin-top: -5px;">From long time ago...</div>
mind. 100 Wörtern (bei Jungen keine Pflicht)
</div></div><div style="text-align: center;font-size: 9px; font-family: playfair display; text-transform: uppercase; letter-spacing: 1px; color: #545453;"><a href="http://imaginary.forumieren.org/">© by Crazy.Jo 2015</a></div>

</center>

<style>.fightmain { height: 450px; width: 500px; position: relative; overflow: hidden; } .fightname { position: absolute; top: 20px; left: 15px; width: 471px; background:url('http://i55.servimg.com/u/f55/18/62/59/60/transp10.png'); text-align:center; font-size: 37px; line-height: 10px; font-family: 'Great Vibes', cursive; text-shadow: 2px 1px 2px #000000; color: #2e3747;} .fighttext { position: absolute; top: -705px; left: 10px; padding: 15px; width: 450px; height: 365px; background-color: rgba(255,255,255,0.5); line-height: 28px; font-size: 11px; font-family: playfair display; text-align: justify; color: #333333; overflow: auto;  -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; } .fightmain:hover .fighttext { position: absolute; top: 45px; left: 10px;  -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; }.fighttext::-webkit-scrollbar {width: 05px;}.fighttext::-webkit-scrollbar-track {background-color: #fafafa;}.fighttext::-webkit-scrollbar-thumb {background-color: #ffffff;} i {text-transform: uppercase; Color: #0F0F0F;} .l-pad {padding-left: 50px;} .fightpoint {font-size: 60px; letter-spacing: -12px; line-height: 12px;} .fightfirst { line-height: 15px; font-size: 50px; letter-spacing: -6px; color: #272f3d; } .fightnext { font-family: 'Great Vibes', cursive; line-height: 6px; font-size: 35px; color: #2e3747; } .fighttd{line-height: 28px; font-size: 11px; font-family: Georgia; text-align: center; width: 200px; }</style><link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>