Szablon karty postaci 1

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>
  <br />
  <div class="kp1_frame2">
  <div class="kp1_menu">
    <div class="kp1_button" onclick="javascript:CharacterInfo1()">Aparycja</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo2()">Osobowość</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo3()">Umiejętności</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo4()">Historia</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo5()">Relacje</div>
    <div class="kp1_button" onclick="javascript:CharacterInfo6()">Ciekawostki</div>
  </div>
  <div class="kp1_text">
  <div class="kp1_character" id="CharacterInfo1" style="display: block;">
    Opis aparycji<br />
  </div>
  <div class="kp1_character" id="CharacterInfo2" style="display: none;">
    Opis osobowości<br />
  </div>
  <div class="kp1_character" id="CharacterInfo3" style="display: none;">
    Opis umiejętności<br />
  </div>
  <div class="kp1_character" id="CharacterInfo4" style="display: none;">
    Historia postaci<br />
  </div>
  <div class="kp1_character" id="CharacterInfo5" style="display: none;">
    Relacje postaci<br />
  </div>
  <div class="kp1_character" id="CharacterInfo6" style="display: none;">
    Ciekawostki o postaci<br />
  </div>
  </div>
  </div>

<div class="kp2_author">
  <img src="https://dummyimage.com/50x50/ddd/000000.png" />
  <b>Postać stworzona przez:</b> i tu Twój nick <br />
  <b>Ostatnia aktualizacja:</b> i tu data ostatniej aktualizacji
</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>