Steckbriefvorlage

<!--

/// CSS TEIL ///

--><link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'><style type="text/css">/*

OBEN
*/ #leopoldrahmen { box-sizing: border-box; width: 500px; margin: 0 auto; background: #ffffff; } /*
*/ .leopoldheader { box-sizing: border-box; width: 500px; height: 185px; margin: 0 auto; background: url('http://placehold.it/500x185'); position: relative; } /*
*/ .leopoldheaderstreifen { box-sizing: border-box; width: 450px; border-bottom: 3px solid #ffffff; position: absolute; right: 25px; bottom: 55px; z-index: 1; } /*
*/ .leopoldSteckbriefbild { width: 120px; height: 120px; border: #ffffff solid 3px; border-radius: 90px; background-image:url('http://placehold.it/120x120'); position: absolute; right: 40px; bottom: -40px; z-index: 2; } /*
*/ .leopoldheadertext { box-sizing: border-box; width: 300px; color: #ffffff; font-size: 30px; font-family: 'Slabo 27px', serif; text-transform: lowercase; letter-spacing: 2px; text-shadow: 1.2px 1.2px 1px #67747A; position: absolute; left: 40px; bottom: -7px; z-index: 3; } /*

TEXTELEMENTE
*/ .leopoldtext { box-sizing: border-box; width: 500px; padding: 10px 40px 20px 40px; font-size: 10px; background: #ffffff; color: #67747A; text-align: justify; } /*
*/ .leopoldtext  b { font-family: 'Slabo 27px', serif; font-size: 16px; color: #89857A; } /*
*/ .leopoldlebenslauf { box-sizing: border-box; margin: 0 auto; width: 430px; max-height: 300px; overflow: auto; padding: 3px; } /*

LISTE
*/ .leopoldfakten { box-sizing: border-box; margin: 0 auto; width: 500px; padding: 25px 0px 5px 50px; background: #67747A; color: #ffffff; font-size: 10px; line-height: 10px; column-count:2; column-gap: 20px; -moz-column-count:2; -moz-column-gap: 20px; -webkit-column-count:2; -webkit-column-gap: 20px; } /*
*/ .leopoldfakten b { color: #D9D9D7; font-size: 9px; text-transform: uppercase; } /*

CHARAKTEREIGENSCHAFTEN
*/ .leopoldcharakter { box-sizing: border-box; margin: 0 auto; width: 500px; padding: 5px; background: #22252E; } /*
*/ td.leopold { padding: 3px; color: #ffffff; font-size: 11px; } /*
*/ .leopoldcharakter b { font-family: 'Slabo 27px', serif; font-size: 16px; color: #D9D9D7; } /*

*/</style>


<div id="leopoldrahmen">
<div class="leopoldheader">
<div class="leopoldheaderstreifen"><div class="leopoldheadertext">Name des Charakters</div><div class="leopoldSteckbriefbild"></div></div>
</div>
<div class="leopoldfakten"> <b>Name</b>
# Vorname Name

<b>Alter & Geburstag</b>
# Alter Geburtstag

<b>Gruppe</b>
# Gruppe [i]( findet ihr in der Wer ist online Anzeige )[/i]

<b>Familienstand</b>
# Familienstand
</div>
<div class="leopoldtext"><b>wissenswertes über xy</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div><div class="leopoldcharakter">
<table cellspacing="4" cellpadding="4" border="0" align="center" style="border-collapse: collapse;" width="450px" >
<tr><td align="center" width="50%"><b>stärken</b></td><td align="center" width="50%"><b>schwächen</b></td></tr>
<tr><td class="leopold"># Info # Info # Info # Info # Info # Info # Info # Info </td>
<td class="leopold"># Info # Info # Info # Info # Info # Info # Info # Info 
</td></tr>
<tr><td align="center" width="50%"><b>vorlieben</b></td><td align="center" width="50%"><b>abneigungen</b></td></tr>
<tr><td class="leopold"># Info # Info # Info # Info # Info # Info # Info # Info </td>
<td class="leopold"># Info # Info # Info # Info # Info # Info # Info # Info
</td></tr>
</table>
</div>
<div class="leopoldtext"><b>lebenslauf</b>
<div class="leopoldlebenslauf">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div class="leopoldfakten"> <b>Spieler</b>
# Spielername

<b>Regeln gelesen</b>
# Regeln?

<b>Avatarperson</b>
# Avatarperson

<b>Weitergabe</b>
# ja, nein, vielleicht?

<b>Gesuch</b>
# ?

<b>Zweitcharakter</b>
# Name
</div>
</div>