Code
The code for this template! Just copy and paste into the code editor. WYSIWYG friendly.
<!--- Background image -->
<div class="card" style="background-image:url('https://images.unsplash.com/photo-1593487806527-40dcc19864bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'); padding:30px;">
<div class="card">
<!-- Bio Box -->
<h2 class="card-inverse card card-header" style="background-color: rgb(72, 51, 141); text-align: center;"><span style='font-family: "times new roman", times; color: rgb(233, 221, 255); padding:10px;'>Character Name Here</span></h2>
<div class="card-block" style="background-color:#343338; padding:5px;">
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5">
<!-- Personality Box -->
<span style='font-family: "book antiqua", palatino; font-size: 18px; color: rgb(233, 221, 255);'>Personality</span>
<div class="ui-accordion card card-outline" style="border-color:rgb(72, 51, 141);">
<div class="ui-accordion-content card-block" style="background-color:#343338; height:350px; padding:10px;"><span style='color: rgb(233, 221, 255); font-family: "book antiqua", palatino;'>Write about your character here! What are they like? Are they quick to anger? Do they cry over movies and tv? How would it feel to travel with them? Are they hard on the outside, soft on the inside? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.<br><br> Pellentesque aliquet tellus nisi, in faucibus purus porttitor a. Aenean id sem magna. Mauris congue blandit felis vitae condimentum. Nulla malesuada felis at eros aliquam, ut lacinia dolor rhoncus. Sed sit amet augue in nibh eleifend blandit. Morbi sit amet dapibus dolor. Ut aliquet lorem semper aliquam iaculis. Maecenas efficitur eleifend mi a viverra. In sem risus, laoreet in gravida vitae, cursus quis risus. Curabitur euismod in magna ac tincidunt.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.<br><br> Pellentesque aliquet tellus nisi, in faucibus purus porttitor a. Aenean id sem magna. Mauris congue blandit felis vitae condimentum. Nulla malesuada felis at eros aliquam, ut lacinia dolor rhoncus. Sed sit amet augue in nibh eleifend blandit. Morbi sit amet dapibus dolor. Ut aliquet lorem semper aliquam iaculis. Maecenas efficitur eleifend mi a viverra. In sem risus, laoreet in gravida vitae, cursus quis risus. Curabitur euismod in magna ac tincidunt. </span></div>
</div>
<!-- Backstory Box -->
<br><span style='font-family: "book antiqua", palatino; font-size: 18px; color: rgb(233, 221, 255);'>Backstory</span>
<div class="ui-accordion card card-outline" style="border-color:rgb(72, 51, 141);">
<div class="ui-accordion-content card-block" style="background-color:#343338; height:350px; padding:10px;"><span style='color: rgb(233, 221, 255); font-family: "book antiqua", palatino;'>Write about your character's backstory here! This box scrolls so be as ong or as short as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.<br><br> Pellentesque aliquet tellus nisi, in faucibus purus porttitor a. Aenean id sem magna. Mauris congue blandit felis vitae condimentum. Nulla malesuada felis at eros aliquam, ut lacinia dolor rhoncus. Sed sit amet augue in nibh eleifend blandit. Morbi sit amet dapibus dolor. Ut aliquet lorem semper aliquam iaculis. Maecenas efficitur eleifend mi a viverra. In sem risus, laoreet in gravida vitae, cursus quis risus. Curabitur euismod in magna ac tincidunt.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.<br><br> Pellentesque aliquet tellus nisi, in faucibus purus porttitor a. Aenean id sem magna. Mauris congue blandit felis vitae condimentum. Nulla malesuada felis at eros aliquam, ut lacinia dolor rhoncus. Sed sit amet augue in nibh eleifend blandit. Morbi sit amet dapibus dolor. Ut aliquet lorem semper aliquam iaculis. Maecenas efficitur eleifend mi a viverra. In sem risus, laoreet in gravida vitae, cursus quis risus. Curabitur euismod in magna ac tincidunt. </span></div>
</div>
<!-- Art -->
<span style='font-size: 11px; font-family: "courier new", courier; color: rgb(233, 221, 255);'><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/48206060_QkyHKnDZo6GBaZe.png" class="fr-fic fr-dib" width="485.047" height="609.047"><!-- Art Credit --> Art by Greengrass</span></div>
<!-- Another Chibi -->
<div class="col-md-6 col-sm-3 text-center mb-5"><span style='font-family: "book antiqua", palatino; font-size: 18px; color: rgb(233, 221, 255);'>Details</span> <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/48206081_bsqQbNK54jTcyNe.png" class="fr-fic fr-dii" width="475.047" height="498.594">
<!-- Art Credit -->
<span style='font-size: 11px; font-family: "courier new", courier; color: rgb(233, 221, 255);'>Art by hahihuheho</span>
<br>
<div class="card card-inverse card" style="background-color:#48338D;">
<div class="card" style="background-color:#343338;">
<!-- Details Table -->
<table style="width: 100%;">
<tbody style="border:dotted; border-color:rgb(233, 221, 255);">
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Name</strong></span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span></td>
</tr>
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Age</strong></span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Number Years Old</span></td>
</tr>
<tr>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style="font-family: courier new,courier;"><strong><span style="color: rgb(233, 221, 255);">Birthday</span></strong>
</span>
</td>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style='color: rgb(233, 221, 255); font-family: "courier new", courier;'>11/11/11</span></td>
</tr>
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Species/Race</strong></span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Gender</strong></span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Orientation</strong></span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
<tr>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style="font-family: courier new,courier;"><strong><span style="color: rgb(233, 221, 255);">Relationship Status</span></strong>
</span>
</td>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Residence</strong></span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
<tr>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style='color: rgb(233, 221, 255); font-family: "courier new", courier;'><strong>Role</strong></span></td>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'><strong>Health Status</strong></span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
<tr>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><strong><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Story/Universe</span></strong></td>
<td style="border-color: rgb(255, 255, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Lorem Ipsum</span>
<br>
</td>
</tr>
</tbody>
</table>
<br><span style="font-family: book antiqua,palatino;"><span style="color: rgb(233, 221, 255); font-size: 18px;">Relationships</span></span>
<br>
<!-- Relationships -->
<!-- Box 1 -->
<div class="card" style="background-color: rgb(72, 51, 141); padding:0px;">
<div class="card-block" style="background-color: rgb(72, 51, 141); padding-bottom:0px;"><span style='font-family: "book antiqua", palatino; font-size: 18px;'>Name - Relationship</span>
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/76164?1593462635" class="fr-fic fr-dii fr-rounded" width="194.516" height="194.516"></div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="ui-accordion card card-outline" style="background-color:#343338;">
<div class="ui-accordion-content card-block" style=" height:200px; padding:10px;"><span style='color: rgb(233, 221, 255); font-family: "book antiqua", palatino;'>Write about your character and their relationship with the other character here! This box scrolls, so feel free to go into as much detail as you need. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.</span></div>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Box 2 -->
<div class="card" style="background-color: rgb(72, 51, 141);">
<div class="card-block" style="background-color: rgb(72, 51, 141);"><span style='font-family: "book antiqua", palatino; font-size: 18px;'>Name - Relationship</span>
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/76164?1593462635" class="fr-fic fr-dii fr-rounded" width="194.516" height="194.516"></div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="ui-accordion card card-outline" style="background-color:#343338;">
<div class="ui-accordion-content card-block" style=" height:200px; padding:10px;"><span style='color: rgb(233, 221, 255); font-family: "book antiqua", palatino;'>Write about your character and their relationship with the other character here! This box scrolls, so feel free to go into as much detail as you need. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.</span></div>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Box 3 -->
<div class="card" style="background-color: rgb(72, 51, 141);">
<div class="card-block" style="background-color: rgb(72, 51, 141);"><span style='font-family: "book antiqua", palatino; font-size: 18px;'>Name - Relationship</span>
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/76164?1593462635" class="fr-fic fr-dii fr-rounded" width="194.516" height="194.516"></div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="ui-accordion card card-outline" style="background-color:#343338;">
<div class="ui-accordion-content card-block" style=" height:200px; padding:10px;"><span style='color: rgb(233, 221, 255); font-family: "book antiqua", palatino;'>Write about your character and their relationship with the other character here! This box scrolls, so feel free to go into as much detail as you need. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices efficitur velit, id condimentum quam pulvinar at. Etiam vestibulum mattis nisi, ac efficitur ligula malesuada ut. Nunc pellentesque eget felis eu convallis. Maecenas non facilisis nunc, in tempor ex. Nulla suscipit, magna a fringilla fermentum, risus lorem vestibulum diam, et lacinia eros nisi in massa. In dictum condimentum tortor vel vehicula. Etiam egestas augue non tempor vulputate. Morbi imperdiet sem et nulla eleifend egestas. Ut sit amet velit nisl. Donec sagittis in metus a volutpat. Aliquam rhoncus accumsan mi. Integer vehicula leo aliquam nisi convallis feugiat. Fusce fermentum non dolor in pulvinar. Donec rutrum lacus ac diam imperdiet, nec vehicula odio finibus. Duis eu diam quis ex volutpat mollis at eu purus.</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- I put a mini pixel here for some visual interest. If you don't have an image that small you can replace it with an icon of some kind or commission one from crumpledletters, my gf and the artist of this one ;) -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/48017327_CL1tFiMr0jOXZYj.gif" class="fr-dib" width="50" height="50">
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="card">
<!-- Design Box -->
<h2 class="card-inverse card card-header" style="background-color:#48338D;"><span style='font-family: "times new roman", times; color: rgb(233, 221, 255);'>Design</span></h2>
<div class="card-block" style="background-color:#343338;">
<!-- Character Art. Chibi or small fullbody recommended -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/45465960_umigCBVe46mpprh.png" class="fr-fic fr-dii" width="419.047" height="589.312"><span style="font-size: 11px;"> </span>
<br>
<!-- Art Credit -->
<span style='font-size: 11px; font-family: "courier new", courier; color: rgb(233, 221, 255);'>Art by Mitsunba</span>
<!-- Key Colors; just change the hex code to the color of your choice -->
<div class="row">
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#F7F7F7;"> </div>
</div>
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#29507F;"> </div>
</div>
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#85DFA3;"> </div>
</div>
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#FFADD2;"> </div>
</div>
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#B9A4DF;"> </div>
</div>
<div class="col-md-2 col-sm-0 mb-1">
<div class="card" style="background-color:#FFEF93;"> </div>
</div>
</div>
<br>
<!-- Design Notes list -->
<ul style="list-style-type: square;">
<li><span style='color: rgb(233, 221, 255); font-family: "courier new", courier;'>Design note here</span></li>
<li><span style="font-family: courier new,courier;"><span style="color: #e9ddff;">Design note here</span></span>
</li>
<li><span style="font-family: courier new,courier;"><span style="color: #e9ddff;">Design note here</span></span>
</li>
<li><span style="font-family: courier new,courier;"><span style="color: #e9ddff;">Design note here</span></span>
</li>
<li><span style="font-family: courier new,courier;"><span style="color: #e9ddff;">Design note here</span></span>
</li>
<li><span style='color: rgb(233, 221, 255); font-family: "courier new", courier;'> Design note here </span></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="card">
<!-- Healer Class information box -->
<h2 class="card-inverse card card-header" style="background-color:#48338D;"><span style='font-family: "times new roman", times; color: rgb(233, 221, 255);'>Healer <i class="fas fa-mortar-pestle"></i> Class </span></h2>
<div class="card-block" style="background-color:#343338;">
<!-- This table holds stats. For a full star, use "fas fa-star" as your <i></i> class, for half-stars use "fas fa-star-half". I didn't use empty stars for this template, but if you want to add some, use "far fa-star". -->
<table style="width: 100%;">
<tbody style="border:dotted; border-color:rgb(233, 221, 255);">
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Attack</span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Defense</span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Magic</span></td>
<td style="width: 50%; border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Special Atk</span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Special Def</span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Dexterity</span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
<tr>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><span style='font-family: "courier new", courier; color: rgb(233, 221, 255);'>Charisma</span></td>
<td style="border-color: rgb(233, 221, 255); border-style: double; border-width: 1px;"><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star" style="color: rgb(233, 221, 255);"></i><i class="fas fa-star-half" style="color: rgb(233, 221, 255);"></i></td>
</tr>
</tbody>
</table>
<br>
<!-- Skill 1 box. -->
<div class="ui-accordion card card-inverse card" style="background-color:#48338D;">
<div class="ui-accordion-content card-block" style="height:150px; background-color:#48338D;"><i class="fas fa-flask"></i><span style='font-size: 18px; font-family: "book antiqua", palatino;'> Skill One</span>
<br><span style="font-family: courier new,courier;">Write a description of this skill here. This will scroll given enough text. Stuck on ideas? Consider the following: Healing spells, medicine creation, first aid training, Medical licensure, Divine favour... You can also check on roleplaying game classes for inspiration! For example, you could look at DND's Druid's goodberries and the like? I hope this is enough text to scroll on most screens now ehe.</span></div>
</div>
<!-- Skill 2 box. -->
<br>
<div class="ui-accordion card card-inverse card" style="background-color:#48338D;">
<div class="ui-accordion-content card-block" style="height:150px; background-color:#48338D;"><i class="fas fa-pills"></i><span style='font-size: 18px; font-family: "book antiqua", palatino;'> Skill Two</span>
<br><span style="font-family: courier new,courier;">Write a description of this skill here. This will scroll given enough text. Stuck on ideas? Consider the following: Healing spells, medicine creation, first aid training, Medical licensure, Divine favour... You can also check on roleplaying game classes for inspiration! For example, you could look at DND's Druid's goodberries and the like? I hope this is enough text to scroll on most screens now ehe.</span></div>
</div>
<!-- Skill 3 box. -->
<br>
<div class="ui-accordion card card-inverse card" style="background-color:#48338D;">
<div class="ui-accordion-content card-block" style="height:150px; background-color:#48338D;"><i class="fas fa-hand-sparkles"></i><span style='font-size: 18px; font-family: "book antiqua", palatino;'> Skill Three</span>
<br><span style="font-family: courier new,courier;">Write a description of this skill here. This will scroll given enough text. Stuck on ideas? Consider the following: Healing spells, medicine creation, first aid training, Medical licensure, Divine favour... You can also check on roleplaying game classes for inspiration! For example, you could look at DND's Druid's goodberries and the like? I hope this is enough text to scroll on most screens now ehe.</span></div>
</div>
</div>
</div>
</div>
</div>
</div>