<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style type="text/css">#sanstecki {margin:auto auto; width:500px; background:#e5d19a;color:#383836;border-bottom: 10px solid #632F2F;}/*
*/#sansteckiheadh {width:500px; height:200px;background:#632F2F;overflow: hidden;margin: auto;color:#ddd;position: relative;} #bild { width: 500px; height: 200px; background-image: url('https://placehold.it/500x200'); position: absolute; top: 0px; transition: 1s; }/*
*/#sansteckiheadh:hover #bild { top: -200px; transition: 1s; }/*
*/.sansteckiheadb {float:left;margin:11px;border: 4px solid #f1f1f1;}/*
*/.sansteckiheadt {margin:10px; color:#f1f1f1;height:180px;text-align: justify;}/*
*/#sansteckiueber {font-family: 'Playfair Display', serif;font-size: 40px;text-align:center; text-transform:uppercase; color:#632F2F;line-height: 38px;margin-top:15px;}#sansteckiueber .klein {font-size:8px;text-align:center; text-transform:uppercase; color:#632F2F;margin-top:-10px;letter-spacing: 2px;font-family: 'Raleway', sans-serif;} /*
*/#tabellebl {border-bottom:#632F2F solid 5px;width:25%;text-align:center;color:#632F2F;text-transform:uppercase; font-family: 'Raleway', sans-serif;font-size:9px;}/*
*/#tabellegr {border-bottom:#dedede solid 5px;width:25%;text-align:center;color:#632F2F;text-transform:uppercase; font-family: 'Raleway', sans-serif;font-size:9px;}/*
*/#sansteckitext {width:420px; margin:auto ; background:#e7e7e7;text-align: justify;padding:10px;font-size: 10px;font-family: Verdana, Arial, Sans-Serif;line-height: 13px;margin-top:15px;margin-bottom:15px;}#sansteckitext .stitel {color:#632F2F;font-family: 'Raleway', sans-serif; letter-spacing: 3px;text-transform:uppercase;font-weight:bold;font-size:9px;text-decoration:underline;text-decoration-style:dotted;}/*
*/#sansteckizw {width:500px; height:50px;background:#632F2F;margin: auto;color:#ddd;}#sansteckizw .ztitel {font-family: 'Playfair Display', serif;font-size: 25px;text-align:center; text-transform:uppercase; color:#ddd;line-height: 38px;margin-top:20px;}#sansteckizw .zklein {font-size:8px;text-align:center; text-transform:uppercase; color:#ddd;margin-top:-10px;letter-spacing: 2px;font-family: 'Raleway', sans-serif;}/*
*/.tabssan input[type=radio] {position: absolute; display: none;}/*
*/.tabssan {width: 440px;float: none;list-style: none;position: relative;padding: 0;margin:auto;height: 180px;}/*
*/.tabssan li{ float: left;}/*
*/.tabssan label {display: block;background: #e7e7e7;color: #383836;position: relative;top: 0;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;margin-left: 60px;padding: 2px;font-family: 'Playfair Display', serif;}/*
*/.tabs label:hover {background: #632F2F; color:#ddd;top: 0;}/*
*/[type=radio]:checked ~ label {background: #632F2F !important; color:#ddd !important; top: 0;padding: 2px;font-family: 'Playfair Display', serif !important;font-weight: normal; letter-spacing: normal; font-size: 13px !important;text-transform: none;}/*
*/[type=radio]:checked ~ label ~ .tab-contentsan {display: block;}/*
*/.tab-contentsan{z-index: 2;display: none;text-align: left;width: 100%;height: 150px;overflow: auto;font-size: 10px;padding-top: 10px;padding: 5px;color: #383836;background: #e7e7e7;position: absolute;top: 60px;left: 0;box-sizing: border-box;-webkit-animation-duration: 0.5s;-o-animation-duration: 0.5s;-moz-animation-duration: 0.5s;animation-duration: 0.5s;margin-top: -30px;font-family: Verdana, Arial, Sans-Serif;padding:10px;}/*
*/.tstitel {color:#632F2F;font-family: 'Raleway', sans-serif; letter-spacing: 3px;text-transform:uppercase;font-weight:bold;font-size:9px;text-decoration:underline;text-decoration-style:dotted;}/*
</style>
<div id="sanstecki"><div id="sansteckiheadh"><div id="bild"></div>
<div class="sansteckiheadb"><img src="https://placehold.it/200x100"></div><div class="sansteckiheadt">Hier kann ein kleiner schöner Text über euren Charakter stehen. Dieser Text darf aber nur 390 Zeichen haben. </div>
</div>
<center><span style="font-size:8px;letter-spacing: 3px;text-transform:uppercase;"> ^ kleine Zusammenfassung ^
</span>
<div id="sansteckiueber">Vorname Nachname <div class="klein">This is me and I'm proud of myself</div></div><table width="100%" style="background-color:#f1f1f1;border-spacing:10px;"><tr><td id="tabellegr"></td><td id="tabellebl"></td><td id="tabellegr"></td><td id="tabellebl"></td></tr></table><div id="sansteckitext"><span class="stitel">Name</span> Wie ist dein Name? Besitzt du Spitznamen oder einen Doppelnamen?
<span class="stitel">Geburtstag & Alter</span> Wann wurdest du geboren und wie alt bist du demnach?
<span class="stitel">Herkunft/Wohnort</span> Wo wurdest du geboren und wo wohnst du jetzt?
<span class="stitel">Blutstatus</span> Was für ein Blut fließt durch deine Adern? Bist du ein Reinblut, Halbblut oder stammst du doch von Muggeln ab?
<span class="stitel">Beruf</span> Was für einen Beruf übst du aus? <a href="http://allendshere.forumieren.de/t11-jobliste">Hier</a> findest du eine aktuelle Jobliste.</div>
<div id="sansteckizw"><div class="ztitel">We are Family</div><div class="zklein">Blood is thicker than water</div></div>
<div id="sansteckitext"><span class="stitel">Mutter</span> Name │ Alter │ Blutstatus │ Beruf
<span class="stitel">Vater</span> Name │ Alter │ Blutstatus │ Beruf
<span class="stitel">Geschwister</span> Name │ Alter │ Blutstatus │ Beruf
<span class="stitel">Haustiere</span> Besitzt du ein Haustier welches dich nach Hogwarts begleitet? <i>(optional, für Schüler pflicht)</i> <a href="http://allendshere.forumieren.de/t131-haustierliste">Hier</a> findest du die Haustierliste.</div>
<div id="sansteckizw"><div class="ztitel">Character</div><div class="zklein">Look in the Mirror and Show me what you see</div></div>
<div id="sansteckitext"> Hier passt ein wunderbarer Text über deinen Charakter hin. Wie bist du so drauf? </div>
<ul class="tabssan"> <li><input type="radio" checked name="tabssan" id="tab1"> <label for="tab1">Stärken & Schwächen</label>
<div id="tab-contentsan1" class="tab-contentsan animated fadeIn"><table style="width:100%;text-align:center;"><tr><td width="50%"><span class="tstitel">Stärken</span></td><td width="50%"><span class="tstitel">Schwächen</span></td></tr>
<tr><td width="50%">» 1. Stärke
» 2. Stärke
» 3. Stärke
» 4. Stärke
» 5. Stärke</td><td width="50%">» 1. Schwäche
» 2. Schwäche
» 3. Schwäche
» 4. Schwäche
» 5. Schwäche</td></tr></table></div></li> <li><input type="radio" name="tabssan" id="tab2"><label for="tab2">Abneigung & Vorlieben </label>
<div id="tab-contentsan2" class="tab-contentsan animated fadeIn"><table style="width:100%;text-align:center;"><tr><td width="50%"><span class="tstitel">Abneigungen</span></td><td width="50%"><span class="tstitel">Vorlieben</span></td></tr>
<tr><td width="50%">» 1. Abneigung
» 2. Abneigung
» 3. Abneigung
» 4. Abneigung
» 5. Abneigung</td><td width="50%">» 1. Vorliebe
» 2. Vorliebe
» 3. Vorliebe
» 4. Vorliebe
» 5. Vorliebe</td></tr></table></div></li></ul>
<div id="sansteckizw"><div class="ztitel">Magical Life</div><div class="zklein">It's a Kind of magic</div></div>
<div id="sansteckitext"><span class="stitel">Zauberstab</span> Holz │ Kern │ Zoll
» erzähle uns etwas über deinen Zauberstab. Wo hast du ihn her? <a href="http://allendshere.forumieren.de/t9-zauberstab-ubersicht">Hier</a> findest du die Zauberstabliste.
<span class="stitel">Patronus</span> Wenn du von Dementoren angegriffen wirst, welche Gestalt nimmt dein Patronus an und mit welcher Erinnerung verbindest du es? <a href="http://allendshere.forumieren.de/t10-patronus-ubersicht">Hier</a> findest du die Patronusliste.
<span class="stitel">Irrwicht</span> Vor was fürchtest du dich? Und wie würdest du deine Angst mit dem Riddikulus ins lächerliche ziehen?
<span class="stitel">Nerhegeb</span> Du schaust in den Spiegel Nerhegeb, was siehst du?
<span class="stitel">Gruppierungen</span> Gehörst zu einer Gruppe? Zum Beispiel zu den Todessern oder zu Grindelwalds Armee?
<span class="stitel">Fähigkeiten</span> Besitzt du eine spezielle Fähigkeit? <i>(max. 2)</i> <a href="http://allendshere.forumieren.de/t8-spezielle-fahigkeiten">Hier</a> findest du die Fähigkeitenliste.
</div>
<div id="sansteckizw"><div class="ztitel">My History</div><div class="zklein">What doesn't kill you, makes you stronger</div></div>
<div id="sansteckitext"><span class="stitel">Lebenslauf</span> Erzähl uns etwas über dein Leben. Was hast du alles erreicht? Wie war deine Kindheit und deine Schulzeit in Hogwarts. <i>(Fließtext oder Stichpunkte)</i>
</div>
<div id="sansteckizw"><div class="ztitel">Some Information</div><div class="zklein">Important for the team</div></div>
<div id="sansteckitext"><span class="stitel">Spielername</span> Wie möchtest du genannt werden?
<span class="stitel">Zweitcharaktere</span> Besitzt du mehrere Charaktere? Wenn ja, welche?
<span class="stitel">Regeln gelesen?</span> Hast du die Regeln gelesen?
<span class="stitel">Weitergabe</span> Darf der Charakter und/oder der Steckbrief weitergegeben werden, wenn du das Board verlässt?
<span class="stitel">Avatar</span> Wer schenkt deinem Charakter sein Gesicht?
<span class="stitel">Gesuch</span> Stammt dein Charakter aus einem Gesuch? Wenn ja welches?</div>
</div>
