Steckbriefvorlage

<link href='http://fonts.googleapis.com/css?family=Poiret+One|Cutive+Mono' rel='stylesheet' type='text/css'><style>.tabs { position: relative; clear: both;} .tab { float: left; width: 100px; } .tab label { width: 100px; font-family: cutive mono; font-size: 15px; color: #2f3133; text-transform: uppercase; background: #eee; opacity: 0.8; padding: 0px 10px 0px 10px; position: relative;} .tab [type=radio] { display: none; } .content { height: 300px; position: absolute; background-color: #eee; top: 20px; left: 0; right: 0; bottom: 0; overflow: auto; font-family: tahoma; font-size: 10px; color: #555; text-align: justify; padding: 10px}  [type=radio]:checked ~ label { background-color: #2f3133; z-index: 2; color:#fff; } [type=radio]:checked ~ label ~ .content { z-index: 1; } .t1 { font-family: poiret one; font-style: italic; font-size: 18px; color: #2f3133; text-align: right; text-transform: uppercase; padding-right: 20px; } i1 { font-style: italic; color: #8e9699; font-family: tahoma; font-size: 10px}</style>

<center><div style="height: 570px; width: 400px; background-color: #eee; border-bottom: 10px solid #989ea3"><div style="width: 400px; height: 250px; background-image: url('LINK ZUM BILD'); margin-bottom: -20px"></div><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">PERSONAL</label><div class="content"><div class="t1">NAME</div>
Der volle Name deines Charas.
<div class="t1">ALTER & GEBURTSTAG</div>
Der Titel ist wohl selbsterklärend.
<div class="t1">WOHNORT</div>
Wo wohnt dein Charakter? Und wie findet er es dort?
Sowohl Stadt, als auch Stadtteil!  </div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">CHARACTER</label><div class="content"><div class="t1">Charakter</div>
Eine Charakterbeschreibung, mind. 800 Zeichen.
<div class="t1">Stärken</div>
Was sind die Stärken deines Charas?
<div class="t1">Schwächen</div>
Was kann dein Charakter nun doch nicht so gut?  </div></div><div class="tab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3">HISTORY</label><div class="content">
Die Hintergrundgeschichte deines Charakters. Mindestens 1500 Zeichen.  </div></div><div class="tab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4">OTHER</label><div class="content"><div class="t1">Avatarperson</div>
Wer stellt deinen Chara dar?
<div class="t1">Spielerinfo</div>
Dein Alter, Name und vielleicht noch mehr, falls du etwas hinzufügen möchtest.
<div class="t1">Zweitcharaktere</div>
Hast du noch mehr Charas? Wenn ja, wen?  </div></div></div></div><i1>code by <a href="http://peregrine.nobel-design.net/member.php?action=profile&uid=57">realis</a> @ TCP</i1></div></center>