Szablon karty postaci 2

Notka: wymiary szarych pól są tylko orientacyjne. Przesyłane obrazki mogą być większe.

Credits

Imię i nazwisko

Wiek: wiek postaci
Data urodzenia: data urodzenia
Płeć: płeć postaci
Rasa: rasa postaci
Pochodzenie: skąd postać pochodzi
Zawód: czym postać się zajmuje
Opis: krótki opis postaci, dosłownie w trzech zdaniach

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Opis aparycji

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Postać stworzona przez: i tu Twój nick
Ostatnia aktualizacja: i tu data ostatniej aktualizacji

Kod do skopiowania

<div class="kp2_grid1">
  <div class="kp2_Lflex">
    <div class="kp2_img"><img src="https://dummyimage.com/250x350/ddd/000000.png" /></div>
    <div class="kp2_credits"><a href="#" target="_blank">Credits</a></div>
  </div>
  <div class="kp2_Rflex">
  <div class="kp2_name">Imię i nazwisko</div>
  <div class="kp2_info">
    <b>Wiek:</b> wiek postaci<br />
    <b>Data urodzenia:</b> data urodzenia<br/>
    <b>Płeć:</b> płeć postaci<br/>
    <b>Rasa:</b> rasa postaci<br/>
    <b>Pochodzenie:</b> skąd postać pochodzi<br/>
    <b>Zawód:</b> czym postać się zajmuje<br/>
    <b>Opis:</b> krótki opis postaci, dosłownie w trzech zdaniach<br/>
  </div>
  </div>
  </div>
<!--more-->

  <div class="kp2_grid2">
  <div class="kp2_menu">
    <div class="kp2_button" onclick="javascript:CharacterInfo1()">Aparycja</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo2()">Osobowość</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo3()">Umiejętności</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo4()">Historia</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo5()">Relacje</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo6()">Ciekawostki</div>
  </div>
  <div class="kp2_text">
  <div id="CharacterInfo1" style="display: block;" class="kp2_character">
    Opis aparycji<br/>
  </div>
  <div id="CharacterInfo2" style="display: none;" class="kp2_character">
    Opis osobowości<br/>
  </div>
  <div id="CharacterInfo3" style="display: none;" class="kp2_character">
    Opis umiejętności<br/>
  </div>
  <div id="CharacterInfo4" style="display: none;" class="kp2_character">
    Historia postaci<br/>
  </div>
  <div id="CharacterInfo5" style="display: none;" class="kp2_character">
    Relacje postaci<br/>
  </div>
  <div id="CharacterInfo6" style="display: none;" class="kp2_character">
    Ciekawostki o postaci<br/>
  </div>
  </div>
  </div>
  <div class="kp2_author">
    <img src="https://dummyimage.com/50x50/ddd/000000.png"/>
    <b>Postać stworzona przez: i tu Twój nick</b> <br/>
    <b>Ostatnia aktualizacja: i tu data ostatniej aktualizacji</b>
  </div>

<script type="text/javascript">
function CharacterInfo1() {
  document.getElementById('CharacterInfo1').style.display='block';
  document.querySelectorAll('#CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5').forEach(el => el.style.display='none');
}
</script>