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>