Szablon karty postaci 2,5

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

Notka 2: na dobrą sprawę jest to Karta Postaci 2, tylko wzbogacona o pola Wątki, Indywidualne i Eventy.

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

Wątki

Indywidualne

Eventy

Opis aparycji

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Wątki postaci

Indywidualne opowiadania postaci

Opowiadania eventowe postaci

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

Kod do skopiowania

 <style type="text/css">
h6.chaos {
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--color8);
  text-align-last: center;
  margin-bottom: 0px;
  font-variant: small-caps;
}
</style>

<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 class="kp2_button" onclick="javascript:CharacterInfo7()">Wątki</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo8()">Indywidualne</div>
    <div class="kp2_button" onclick="javascript:CharacterInfo9()">Eventy</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 id="CharacterInfo7" style="display: none;" class="kp2_character">
    Wątki postaci<br/>
  </div>
  <div id="CharacterInfo8" style="display: none;" class="kp2_character">
    Indywidualne opowiadania postaci<br/>
  </div>
  <div id="CharacterInfo9" style="display: none;" class="kp2_character">
    Eventowe opowiadania 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, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo2() {
  document.getElementById('CharacterInfo2').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo3() {
  document.getElementById('CharacterInfo3').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo4() {
  document.getElementById('CharacterInfo4').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo5() {
  document.getElementById('CharacterInfo5').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo6() {
  document.getElementById('CharacterInfo6').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo7, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo7() {
  document.getElementById('CharacterInfo7').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo8, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo8() {
  document.getElementById('CharacterInfo8').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo9').forEach(el => el.style.display='none');
}
function CharacterInfo9() {
  document.getElementById('CharacterInfo9').style.display='block';
  document.querySelectorAll('#CharacterInfo1, #CharacterInfo2, #CharacterInfo3, #CharacterInfo4, #CharacterInfo5, #CharacterInfo6, #CharacterInfo7, #CharacterInfo8').forEach(el => el.style.display='none');
}
</script>

Kod dla osób, które przychodzą z poradnika (odnośnik)

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