Szablon karty autora

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

Tu Twój nick

Tu Twój discord

Tu możesz wpisać trochę tekstu tak ogólnie o sobie. Możesz opowiedzieć o swoich zainteresowaniach, czy masz jakiegoś zwierzaka, jakie książki lubisz czytać, co tam ostatnio oglądasz i tym podobne. Wszystko dozwolone.

Preferencje pisarskie

Tu dla odmiany opisz, jakie masz oczekiwania wobec prowadzonych wątków i jakie są twoje przyzwyczajenia. Odpisujesz raczej często, czy na odpis od Ciebie trzeba dłużej poczekać? Wolisz krótsze czy dłuższe odpisy? Stawiasz na akcję, przeżycia wewnętrzne postaci, czy może wolisz opisywać ładne miejsca? Czy są tematy, których nie chcesz poruszać w wątkach, a może masz jakieś preferowane? Jak wygląda Twój staż blogowy? Piszesz od zawsze na PBP, może wcześniej zdarzyło Ci się pisać na forach, discordach albo PBC, a może wracasz do pisania po długiej przerwie?

Postaci

	Imię postaci – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.
	Imię postaci – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.
	Imię postaci – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.

Kod do skopiowania

<img class="author" src="https://dummyimage.com/450x350/ddd/000000.png" />

<blockquote class="author-blockquote">
  <h4>Tu Twój nick</h4>
  <h6>Tu Twój discord</h6>
</blockquote>

<div>Tu możesz wpisać trochę tekstu tak ogólnie o sobie. Możesz opowiedzieć o swoich zainteresowaniach, czy masz jakiegoś zwierzaka, jakie książki lubisz czytać, co tam ostatnio oglądasz i tym podobne. Wszystko dozwolone.</div>

<h3>Preferencje pisarskie</h3>
<div>Tu dla odmiany opisz, jakie masz oczekiwania wobec prowadzonych wątków i jakie są twoje przyzwyczajenia. Odpisujesz raczej często, czy na odpis od Ciebie trzeba dłużej poczekać? Wolisz krótsze czy dłuższe odpisy? Stawiasz na akcję, przeżycia wewnętrzne postaci, czy może wolisz opisywać ładne miejsca? Czy są tematy, których nie chcesz poruszać w wątkach, a może masz jakieś preferowane? Jak wygląda Twój staż blogowy? Piszesz od zawsze na PBP, może wcześniej zdarzyło Ci się pisać na forach, discordach albo PBC, a może wracasz do pisania po długiej przerwie?</div>

<h3>Postaci</h3>
<table class="characters">
  <tbody>
  <tr>
   <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
   <td><b class="author-b">Imię postaci</b> – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
  </tr>
  <tr>
   <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
   <td><b class="author-b">Imię postaci</b> – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
  </tr>
  <tr>
   <td><img src="https://dummyimage.com/150x200/ddd/000000.png" /></td>
   <td><b class="author-b">Imię postaci</b> – krótki opis. Możesz dodać informację o tym, czy pozwalasz nią sterować, albo czy szukasz dla niej jakiejś konkretnej relacji.</td>
  </tr>
</tbody>
</table>

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>

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Opis aparycji. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nulla suscipit, accumsan ligula in, vehicula felis. Proin lobortis tellus nisi, semper elementum nisi pulvinar sed. Nunc ultrices enim dui, ac aliquet tortor commodo in. Vestibulum fringilla eleifend ante quis scelerisque. Aliquam aliquam cursus congue. Morbi efficitur ante eget lacus efficitur, vel fringilla leo varius. Etiam commodo magna in dolor pellentesque, nec ultricies libero tincidunt. Nam consectetur justo non accumsan lobortis. Phasellus efficitur ultrices libero, tristique malesuada turpis vehicula ut. Aenean auctor, mauris eget mollis ullamcorper, leo tellus consectetur metus, vel elementum nunc purus quis urna. Phasellus vel tincidunt erat, quis feugiat ante. Praesent consequat lorem non finibus feugiat. Morbi sagittis nunc non ipsum tempor, vitae lacinia risus maximus. Proin egestas eu nisl non tincidunt. Phasellus metus purus, sodales quis nunc eleifend, tristique interdum dolor. Quisque gravida ornare eros non laoreet. Nam vel sollicitudin justo. Sed ullamcorper fermentum lorem ac molestie. Cras venenatis porttitor enim quis facilisis. Pellentesque id dolor nunc. Vivamus imperdiet vel neque non semper. Maecenas lobortis finibus fringilla. Aenean vitae nulla sit amet dui cursus ullamcorper blandit eget odio. Etiam lacinia libero arcu, quis aliquet nisl lobortis a. Cras semper luctus mi vel venenatis.

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Postać stworzona przez: Twój nick
Ostatnia aktualizacja: 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"><i class="ph-light ph-at"></i> Credits</a></div>
  </div>
  <div class="kp2_Rflex">
   <div class="kp2_name"><div>Imię i <br/>nazwisko</div></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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.<br/>
  </div>
  </div>
  </div>
  <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nulla suscipit, accumsan ligula in, vehicula felis. Proin lobortis tellus nisi, semper elementum nisi pulvinar sed. Nunc ultrices enim dui, ac aliquet tortor commodo in. Vestibulum fringilla eleifend ante quis scelerisque. Aliquam aliquam cursus congue. Morbi efficitur ante eget lacus efficitur, vel fringilla leo varius. Etiam commodo magna in dolor pellentesque, nec ultricies libero tincidunt. Nam consectetur justo non accumsan lobortis. Phasellus efficitur ultrices libero, tristique malesuada turpis vehicula ut.
Aenean auctor, mauris eget mollis ullamcorper, leo tellus consectetur metus, vel elementum nunc purus quis urna. Phasellus vel tincidunt erat, quis feugiat ante. Praesent consequat lorem non finibus feugiat. Morbi sagittis nunc non ipsum tempor, vitae lacinia risus maximus. Proin egestas eu nisl non tincidunt. Phasellus metus purus, sodales quis nunc eleifend, tristique interdum dolor. Quisque gravida ornare eros non laoreet. Nam vel sollicitudin justo. Sed ullamcorper fermentum lorem ac molestie. Cras venenatis porttitor enim quis facilisis. Pellentesque id dolor nunc. Vivamus imperdiet vel neque non semper. Maecenas lobortis finibus fringilla. Aenean vitae nulla sit amet dui cursus ullamcorper blandit eget odio. Etiam lacinia libero arcu, quis aliquet nisl lobortis a. Cras semper luctus mi vel venenatis.<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">
  <!-- opcjonalne -->
  <div class="kp2_Lauthor">
   <div class="kp2_playlist">
    <a href="..." target="_blank"><i class="ph-fill ph-spotify-logo"></i></a>
   </div>
   <div class="kp2_divider"></div>
   <div class="kp2_pinterest">
    <a href="..." target="_blank"><i class="ph-fill ph-pinterest-logo"></i></a>
   </div>
  </div>
  <!---->
  <div class="kp2_Rauthor">
   <img src="https://dummyimage.com/50x50/ddd/000000.png" />
   <div class="kp2_Rauthor_text">
    <b>Postać stworzona przez:</b> Twój nick <br />
    <b>Ostatnia aktualizacja:</b> data ostatniej aktualizacji
   </div>
  </div>
</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>

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.

Aparycja

Osobowość

Umiejętności

Historia

Relacje

Ciekawostki

Opis aparycji. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nulla suscipit, accumsan ligula in, vehicula felis. Proin lobortis tellus nisi, semper elementum nisi pulvinar sed. Nunc ultrices enim dui, ac aliquet tortor commodo in. Vestibulum fringilla eleifend ante quis scelerisque. Aliquam aliquam cursus congue. Morbi efficitur ante eget lacus efficitur, vel fringilla leo varius. Etiam commodo magna in dolor pellentesque, nec ultricies libero tincidunt. Nam consectetur justo non accumsan lobortis. Phasellus efficitur ultrices libero, tristique malesuada turpis vehicula ut. Aenean auctor, mauris eget mollis ullamcorper, leo tellus consectetur metus, vel elementum nunc purus quis urna. Phasellus vel tincidunt erat, quis feugiat ante. Praesent consequat lorem non finibus feugiat. Morbi sagittis nunc non ipsum tempor, vitae lacinia risus maximus. Proin egestas eu nisl non tincidunt. Phasellus metus purus, sodales quis nunc eleifend, tristique interdum dolor. Quisque gravida ornare eros non laoreet. Nam vel sollicitudin justo. Sed ullamcorper fermentum lorem ac molestie. Cras venenatis porttitor enim quis facilisis. Pellentesque id dolor nunc. Vivamus imperdiet vel neque non semper. Maecenas lobortis finibus fringilla. Aenean vitae nulla sit amet dui cursus ullamcorper blandit eget odio. Etiam lacinia libero arcu, quis aliquet nisl lobortis a. Cras semper luctus mi vel venenatis.

Opis osobowości

Opis umiejętności

Historia postaci

Relacje postaci

Ciekawostki o postaci

Postać stworzona przez: Twój nick
Ostatnia aktualizacja: 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"><i class="ph-light ph-at"></i> Credits</a></div>
  </div>
  <div class="kp2_Rflex">
   <div class="kp2_name"><div>Imię i <br/>nazwisko</div></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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.<br />
  </div>
  </div>
  </div>
  <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan vehicula viverra. Duis gravida blandit nibh, ac scelerisque diam. Suspendisse ut metus quis purus tincidunt ullamcorper. Nulla volutpat porttitor eros, feugiat rhoncus magna ultrices eget. Cras vitae turpis vestibulum, egestas ante ut, mattis sem. Curabitur quis nisl tempor, ultrices dolor vel, dapibus nunc. Aenean mattis purus facilisis eleifend dapibus. Etiam vehicula posuere nibh. Cras non arcu id dui blandit pretium id sit amet dolor. Nulla in enim id eros mollis laoreet. Etiam in lorem enim. Aenean posuere neque a mauris faucibus pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nulla suscipit, accumsan ligula in, vehicula felis. Proin lobortis tellus nisi, semper elementum nisi pulvinar sed. Nunc ultrices enim dui, ac aliquet tortor commodo in. Vestibulum fringilla eleifend ante quis scelerisque. Aliquam aliquam cursus congue. Morbi efficitur ante eget lacus efficitur, vel fringilla leo varius. Etiam commodo magna in dolor pellentesque, nec ultricies libero tincidunt. Nam consectetur justo non accumsan lobortis. Phasellus efficitur ultrices libero, tristique malesuada turpis vehicula ut.
Aenean auctor, mauris eget mollis ullamcorper, leo tellus consectetur metus, vel elementum nunc purus quis urna. Phasellus vel tincidunt erat, quis feugiat ante. Praesent consequat lorem non finibus feugiat. Morbi sagittis nunc non ipsum tempor, vitae lacinia risus maximus. Proin egestas eu nisl non tincidunt. Phasellus metus purus, sodales quis nunc eleifend, tristique interdum dolor. Quisque gravida ornare eros non laoreet. Nam vel sollicitudin justo. Sed ullamcorper fermentum lorem ac molestie. Cras venenatis porttitor enim quis facilisis. Pellentesque id dolor nunc. Vivamus imperdiet vel neque non semper. Maecenas lobortis finibus fringilla. Aenean vitae nulla sit amet dui cursus ullamcorper blandit eget odio. Etiam lacinia libero arcu, quis aliquet nisl lobortis a. Cras semper luctus mi vel venenatis.<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">
  <!-- opcjonalne -->
  <div class="kp2_Lauthor">
   <div class="kp2_playlist">
    <a href="..." target="_blank"><i class="ph-fill ph-spotify-logo"></i></a>
   </div>
   <div class="kp2_divider"></div>
   <div class="kp2_pinterest">
    <a href="..." target="_blank"><i class="ph-fill ph-pinterest-logo"></i></a>
   </div>
  </div>
  <!---->
  <div class="kp2_Rauthor">
   <img src="https://dummyimage.com/50x50/ddd/000000.png" />
   <div class="kp2_Rauthor_text">
    <b>Postać stworzona przez:</b> Twój nick <br />
    <b>Ostatnia aktualizacja:</b> data ostatniej aktualizacji
   </div>
  </div>
</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>