<!--- Notes ---
- This profile uses theme colors, meaning the color of each item will change depending on the theme the user viewing the profile has selected.
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<!-------------------------------- Basics Section -------------------------------->
<div class="container-fluid">
<div class="row mb-4">
<div class="col-lg-5 card card-block card-inverse card-primary rounded-0 text-center text-white display-1">
<p style="margin-top:25px;letter-spacing:5px">
<!-- Put Name Here -->
Full Name
</p>
</div>
<div class="col-lg-7 card card-block card-primary rounded-0 bg-faded" style="border-width:5px">
<div class="row justify-content-between no-gutters">
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Class Here -->
Their Class
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Class</span>
</li>
</ul>
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Background Here -->
Their Background
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Background</span>
</li>
</ul>
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Level Here -->
Their Level
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Level</span>
</li>
</ul>
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Race Here -->
Their Race
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Race</span>
</li>
</ul>
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Alignment Here -->
Their Alignment
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Alignment</span>
</li>
</ul>
<ul class="col-lg-4 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put MBTI Here -->
Their MBTI
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">MBTI</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-------------------------------- Basics Section End -------------------------------->
<div class="row justify-content-between mb-3">
<div class="col-lg-4">
<div class="row justify-content-between">
<!------------------------------ Abilities Section ------------------------------>
<div class="col-4">
<!--------- Strength --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Strength</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
<!--------- Dexterity --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Dexterity</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
<!--------- Constitution --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Constitution</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
<!--------- Intelligence --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Intelligence</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
<!--------- Wisdom --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Wisdom</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
<!--------- Charisma --------->
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<h3>Charisma</h3>
<p class="display-2">
<!-- Total Score -->
10
</p>
</div>
<div class="row justify-content-center">
<div class="col-6 card card-primary bg-faded text-primary rounded-0 mb-2">
<h3 class="mb-2 mt-2">
<!-- Modifier -->
+0
</h3>
</div>
</div>
</div>
</div>
<!-------------------------------- Basics Section -------------------------------->
<div class="col-8">
<div class="card card-primary text-primary text-center rounded-0 bg-faded display-4 mb-3" style="border-width:5px;">
<div class="row justify-content-between no-gutters">
<div class="col-4 card card-block card-inverse card-primary text-white rounded-0">
<!-- Proficiency -->
+0
</div>
<div class="col-8 card-block">
Proficiency
</div>
</div>
</div>
<div class="card card-primary text-primary text-center rounded-0 bg-faded display-4 mb-3" style="border-width:5px;">
<div class="row justify-content-between no-gutters">
<div class="col-4 card card-block card-inverse card-primary text-white rounded-0">
<!-- Inspiration -->
0
</div>
<div class="col-8 card-block">
Inspiration
</div>
</div>
</div>
<!---------------------------- Saving Throws Section ---------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Saving Throws
</div>
<div class="card card-primary bg-faded rounded-0 h5 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<!------- Str ------->
<tr>
<!-- Toggle -->
<td width="5%"><i class="col-1 fas fa-circle"></i></b></td>
<!-- Mod -->
<td width="5%">+0</td>
<td width="90%">Strength</td>
</tr>
<!------- Dex ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-circle"></td>
<!-- Mod -->
<td>+0</td>
<td>Dexterity</td>
</tr>
<!------- Con ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-circle"></td>
<!-- Mod -->
<td>+0</td>
<td>Constitution</td>
</tr>
<!------- Int ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-circle"></td>
<!-- Mod -->
<td>+0</td>
<td>Intelligence</td>
</tr>
<!------- Wis ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-circle"></td>
<!-- Mod -->
<td>+0</td>
<td>Wisdom</td>
</tr>
<!------- Cha ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-circle"></td>
<!-- Mod -->
<td>+0</td>
<td>Charisma</td>
</tr>
</tbody>
</table>
</div>
<!-------------------------- Saving Throws Section End -------------------------->
<!-------------------------------- Skills Section -------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Skills
</div>
<div class="card card-primary bg-faded rounded-0 mb-3 h5" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<!------- Acrobatics ------->
<tr>
<!-- Toggle -->
<td width="5%"><i class="col-1 fas fa-star"></i></b></td>
<!-- Mod -->
<td width="5%">+0</td>
<td width="90%">Acrobatics (Dex)</td>
</tr>
<!----- Animal Handling ----->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Animal Handling (Wis)</td>
</tr>
<!--------- Arcana --------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Arcana (Int)</td>
</tr>
<!------- Athletics ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Athletics (Str)</td>
</tr>
<!------- Deception ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Deception (Cha)</td>
</tr>
<!-------- History -------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>History (Int)</td>
</tr>
<!-------- Insight -------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Insight (Wis)</td>
</tr>
<!------ Intimidation ------>
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Intimidation (Cha)</td>
</tr>
<!------ Investigation ------>
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Investigation (Int)</td>
</tr>
<!-------- Medicine -------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Medicine (Wis)</td>
</tr>
<!--------- Nature --------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Nature (Int)</td>
</tr>
<!------- Perception ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Perception (Wis)</td>
</tr>
<!------- Performance ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Performance (Cha)</td>
</tr>
<!------- Persuasion ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Persuasion (Cha)</td>
</tr>
<!------- Religion ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Religion (Int)</td>
</tr>
<!---- Sleight of Hand ---->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Sleight of Hand (Dex)</td>
</tr>
<!------- Stealth ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Stealth (Dex)</td>
</tr>
<!------- Survival ------->
<tr>
<!-- Toggle -->
<td><i class="col-1 far fa-star"></td>
<!-- Mod -->
<td>+0</td>
<td>Survival (Wis)</td>
</tr>
</tbody>
</table>
</div>
<!------------------------------ Skills Section End ------------------------------>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row justify-content-between">
<div class="col-4">
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<p class="display-2 mb-1">
<!-- Armor -->
10
</p>
<h3>Armor</h3>
</div>
</div>
</div>
<div class="col-4">
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<p class="display-2 mb-1">
<!-- Initiative -->
+0
</p>
<h3>Initiative</h3>
</div>
</div>
</div>
<div class="col-4">
<div class="card card-inverse card-primary text-white text-center rounded-0 mb-3">
<div class="card-block mb-0">
<p class="display-2 mb-1">
<!-- Speed -->
10ft
</p>
<h3>Speed</h3>
</div>
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-6">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Hit Points
</div>
<div class="card card-block card-primary bg-faded text-primary text-center rounded-0 display-3 mb-3" style="border-width:5px;">
<!-- Hit Points -->
10
</div>
</div>
<div class="col-6">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Hit Dice
</div>
<div class="card card-block card-primary bg-faded text-primary text-center rounded-0 display-3 mb-3" style="border-width:5px;">
<!-- Hit Dice -->
1d6
</div>
</div>
</div>
<!----------------------------- Favorite Attacks Section ----------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Favorite Attacks
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr class="font-weight-bold">
<td width="30%">Name</td>
<td width="20%">Bonus</td>
<td width="25%">Damage</td>
<td width="25%">Type</td>
</tr>
<!------ Attack 1 ------>
<tr>
<!-- Name -->
<td>Attack Name</td>
<!-- Bonus -->
<td>+0</td>
<!-- Damage -->
<td>1d6</td>
<!-- Type -->
<td>Piercing</td>
</tr>
<!------ Attack 2 ------>
<tr>
<!-- Name -->
<td>Attack Name</td>
<!-- Bonus -->
<td>+0</td>
<!-- Damage -->
<td>1d10</td>
<!-- Type -->
<td>Blugdeoning</td>
</tr>
<!------ Attack 3 ------>
<tr>
<!-- Name -->
<td>Attack Name</td>
<!-- Bonus -->
<td>+0</td>
<!-- Damage -->
<td>1d8</td>
<!-- Type -->
<td>Slashing</td>
</tr>
<!------ Attack 4 ------>
<tr>
<!-- Name -->
<td>Attack Name</td>
<!-- Bonus -->
<td>+0</td>
<!-- Damage -->
<td>1d4</td>
<!-- Type -->
<td>Thunder</td>
</tr>
</tbody>
</table>
</div>
<!--------------------------- Favorite Attacks Section End --------------------------->
<!--------------------------------- Equipment Section --------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Equipment
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr class="font-weight-bold">
<td width="30%">Name</td>
<td width="55%">Summary</td>
<td width="25%">Attuned</td>
</tr>
<!------ Item 1 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Suspendisse lobortis ex at libero porttitor elementum.</td>
<!-- Attune Toggle -->
<td class="text-center"><i class="fas fa-circle"></td>
</tr>
<!------ Item 2 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Suspendisse non vulputate nulla.</td>
<!-- Attune Toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
<!------ Item 3 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Quisque ipsum elit, ultrices vitae justo eu.</td>
<!-- Attune Toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
<!------ Item 4 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Maecenas ac vulputate quam.</td>
<!-- Attune Toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
<!------ Item 5 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Maecenas ac vulputate quam.</td>
<!-- Attune Toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
</tbody>
</table>
</div>
<!------------------------------- Equipment Section End ------------------------------->
<!----------------------------------- Money Section ----------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Money
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary text-center" style="border:transparent;">
<tbody>
<tr class="font-weight-bold">
<td width="20%">CP</td>
<td width="20%">SP</td>
<td width="20%">EP</td>
<td width="20%">GP</td>
<td width="20%">PP</td>
</tr>
<tr>
<!-- Copper Pieces -->
<td>0</td>
<!-- Silver Pieces -->
<td>0</td>
<!-- Electrum Pieces -->
<td>0</td>
<!-- Gold Pieces -->
<td>10</td>
<!-- Platinum Pieces -->
<td>0</td>
</tr>
</tbody>
</table>
</div>
<!--------------------------------- Money Section End --------------------------------->
<!-------------------------------- Proficiency Section -------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-3">
Proficiencies
</div>
<div class="row justify-content-between">
<div class="col-6">
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr>
<!-- Light Armor Toggle -->
<td width="10%"><i class="col-1 fas fa-circle"></td>
<td width="90%"> Light Armour</td>
</tr>
<tr>
<!-- Medium Armor Toggle -->
<td><i class="col-1 far fa-circle"></td>
<td>Medium Armour</td>
</tr>
<tr>
<!-- Heavy Armor Toggle -->
<td><i class="col-1 far fa-circle"></td>
<td>Heavy Armour</td>
</tr>
<tr>
<!-- Simple Weapons Toggle -->
<td><i class="col-1 far fa-circle"></td>
<td>Simple Weapons</td>
</tr>
<tr>
<!-- Martial Weapons Toggle -->
<td><i class="col-1 far fa-circle"></td>
<td>Martial Weapons</td>
</tr>
<tr>
<!-- Shields Toggle -->
<td><i class="col-1 far fa-circle"></td>
<td>Shields</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6">
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<!----- Other Proficiencies ----->
<tbody>
<tr><td>Language</td></tr>
<tr><td>Language</td></tr>
<tr><td>Tool set</td></tr>
<tr><td>Tool set</td></tr>
<tr><td>Game Set</td></tr>
<tr><td>Instrument</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!------------------------------ Proficiency Section End ------------------------------>
</div>
<div class="col-lg-4">
<!----------------------------------- About Section ----------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
About
</div>
<div class="card card-block card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<h4 class="text-primary">Personality Traits</h4>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Personality -->
<p style="text-align: justify;">Nulla arcu dolor, elementum vitae rhoncus et, tristique in lorem. Donec a ex nec erat rhoncus iaculis. Suspendisse sit amet imperdiet dolor, eu consectetur nisl. Phasellus massa massa, elementum id tincidunt quis, iaculis vitae magna.</p>
<h4 class="text-primary">Ideals</h4>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Ideals -->
<p style="text-align: justify;">Etiam eget vestibulum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis aliquet lacus nec egestas cursus.</p>
<h4 class="text-primary">Bonds</h4>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Bonds -->
<p style="text-align: justify;">Phasellus bibendum, mauris a porttitor pellentesque, odio leo rhoncus metus. Integer eget nulla vel massa gravida venenatis nec id quam. Nunc justo erat, maximus eu enim placerat.</p>
<h4 class="text-primary">Flaws</h4>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Flaws -->
<p style="text-align: justify;">Aenean sit amet viverra ante. Vestibulum lobortis volutpat arcu eu hendrerit. Proin a nisi lacus. Nullam viverra vehicula diam. Ut mollis, lorem non convallis hendrerit, ex lacus commodo augue.</p>
</div>
<!--------------------------------- About Section End --------------------------------->
<!---------------------------------- Storage Section ---------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Storage
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
</tbody>
</table>
</div>
<!-------------------------------- Storage Section End -------------------------------->
<!-------------------------------- Racial Traits Section -------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Racial Traits
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr><td>Trait</td></tr>
<tr><td>Trait</td></tr>
<tr><td>Trait</td></tr>
<tr><td>Trait</td></tr>
<tr><td>Trait</td></tr>
</tbody>
</table>
</div>
<!------------------------------ Racial Traits Section End ------------------------------>
</div>
</div>
<div class="row justify-content-between mb-3">
<div class="col-lg-7">
<!---------------------------------- Backstory Section ---------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Backstory
</div>
<div class="card ui-accordion card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<div class="ui-accordion-content card-block" style="height:250px;">
<!-- Paragraphs: Backstory -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie augue eleifend vehicula facilisis. Cras tristique, libero a pellentesque pellentesque, nulla diam sodales sapien, vel mattis nisi nunc vitae felis. Aenean dignissim mi mauris, id tincidunt purus egestas sit amet. Etiam porta erat vel mollis ultricies. In nibh massa, interdum nec est ac, mattis scelerisque nisl. Mauris quis diam faucibus sapien consequat finibus auctor euismod eros. Pellentesque ac ornare tortor, eu iaculis ligula.</p>
<p style="text-align: justify;">Curabitur sagittis rutrum laoreet. Integer ut magna in nisi placerat ullamcorper. Cras mattis, ex id malesuada vehicula, velit augue congue metus, a facilisis nisl ante eget nulla. Quisque et quam ligula. Phasellus ornare neque mauris, et bibendum erat gravida et. Integer mollis id augue vel dignissim. Vestibulum interdum libero nec purus viverra, eu eleifend libero aliquam. Sed ac mattis nibh, ut euismod leo. Nunc quis nisl bibendum, suscipit sem quis, elementum dolor. Sed tempus vel velit ut ultricies. Donec dapibus vitae libero at egestas. Cras a odio eget odio pretium porta vel vel neque.</p>
<p style="text-align: justify;">Praesent a varius enim. Nullam sed iaculis dui, sit amet egestas est. Etiam et turpis ac nibh aliquam dictum. Vivamus sed vulputate nisl. Nullam at enim cursus, ultricies metus a, condimentum orci. Cras vel dignissim ipsum, ac efficitur purus. Proin ac dapibus erat. Phasellus lectus lorem, tempor vitae ullamcorper nec, tristique nec magna. Nulla interdum, purus vel vulputate maximus, nisl ligula interdum felis, non sagittis dolor nisl eu orci. Curabitur eget enim turpis. Curabitur a dignissim arcu. Vestibulum non nunc ex. Duis dictum vehicula urna at scelerisque.</p>
</div>
</div>
<!-------------------------------- Backstory Section End -------------------------------->
<!---------------------------------- Appearance Section ---------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Appearance
</div>
<div class="card ui-accordion card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<div class="ui-accordion-content card-block" style="height:250px;">
<div class="row justify-content-between no-gutters">
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Age Here -->
Their Age
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Age</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Height Here -->
Their Height
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Height</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Weight Here -->
Their Weight
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Weight</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Marks Here -->
Their Marks
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Distinguishing Marks</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Eyes Here -->
Their Eyes
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Eyes</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Skin Here -->
Their Skin
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Skin</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Hair Here -->
Their Hair
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Hair</span>
</li>
</ul>
<ul class="col-lg-3 list-unstyled text-primary text-center">
<li>
<span class="mb-0">
<!-- Put Scars Here -->
Their Scars
</span>
<hr class="mt-1 mb-0" style="border:0.5px solid;">
</li>
<li>
<span class="mb-0 font-weight-bold">Scars</span>
</li>
</ul>
</div>
<!-- Paragraphs: Appearance -->
<p style="text-align: justify;">Praesent a varius enim. Nullam sed iaculis dui, sit amet egestas est. Etiam et turpis ac nibh aliquam dictum. Vivamus sed vulputate nisl. Nullam at enim cursus, ultricies metus a, condimentum orci. Cras vel dignissim ipsum, ac efficitur purus. Proin ac dapibus erat. Phasellus lectus lorem, tempor vitae ullamcorper nec, tristique nec magna. Nulla interdum, purus vel vulputate maximus, nisl ligula interdum felis, non sagittis dolor nisl eu orci. Curabitur eget enim turpis. Curabitur a dignissim arcu. Vestibulum non nunc ex. Duis dictum vehicula urna at scelerisque.</p>
</div>
</div>
<!-------------------------------- Appearance Section End -------------------------------->
</div>
<!--------------------------------- Class Features Section --------------------------------->
<div class="col-lg-5">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Class Features
</div>
<div class="card ui-accordion card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<div class="ui-accordion-content card-block" style="height:600px;">
<!-------------- Feature 1 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">1st lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Suspendisse lobortis ex at libero porttitor elementum. Suspendisse non vulputate nulla. Quisque ipsum elit, ultrices vitae justo eu, dignissim tincidunt eros. Maecenas ac vulputate quam. Sed id mi laoreet, auctor elit ac, bibendum ante. Donec a risus vel turpis dictum tristique ac in lorem. Nulla fringilla magna lorem, id dictum dolor dignissim id. Morbi mattis, risus vel rutrum egestas, lacus dolor congue ante, rutrum rutrum lectus eros efficitur enim.</p>
<!-------------- Feature 2 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">1st lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In feugiat maximus ornare. Duis a condimentum tortor. Phasellus a semper felis. In volutpat eget massa a pellentesque. Duis at libero vitae libero ultricies venenatis.</p>
<!-------------- Feature 3 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">3rd lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Maecenas faucibus dolor nibh, nec suscipit enim ornare ut. Integer in justo arcu. Nulla et facilisis nibh. In aliquam ante nibh, ut placerat eros interdum non. Morbi porta tellus sit amet tincidunt sollicitudin. Integer suscipit mauris rhoncus, varius dolor vel, sagittis massa. Proin et arcu lacus. Phasellus semper nulla in mi accumsan tempor. Integer varius ullamcorper urna at pharetra.</p>
<!-------------- Feature 4 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">5th lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Quisque cursus tellus et est molestie, eget lacinia nunc semper. Sed vel augue magna. Donec nisl nulla, sagittis nec finibus vitae, tempor at mi. Mauris suscipit mi molestie, vestibulum odio at, ullamcorper urna.</p>
<!-------------- Feature 5 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">8th lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Nunc placerat mauris sit amet mi ultrices pellentesque. Donec ac luctus lorem. Aliquam lacus nulla, auctor sed blandit sit amet, malesuada viverra neque. Quisque at ex felis. Ut eu varius turpis. Nulla id dictum purus. Etiam tempor venenatis leo. Sed dignissim dignissim dui quis rhoncus. Morbi vel quam laoreet, molestie nibh sed, hendrerit diam. Praesent tincidunt eu orci id eleifend.</p>
<!-------------- Feature 6 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">15th lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Aliquam varius lobortis ullamcorper. Etiam hendrerit sapien fermentum risus euismod ullamcorper. Pellentesque hendrerit lacinia elit. In hac habitasse platea dictumst. Sed porttitor a nisl volutpat volutpat. Vivamus ac dapibus dolor, a lobortis tortor. Etiam fringilla purus sem, at volutpat risus aliquet ut. Proin at ipsum et quam sagittis consectetur eget in nisi. Vestibulum sed finibus arcu. Vestibulum eu tortor sed tortor ornare ornare.</p>
<!-------------- Feature 7 -------------->
<ul class="list-unstyled mb-1">
<li class="h4 text-primary font-weight-bold">
<!-- Name -->
<span>Feature Name</span>
<!-- Level Unlocked -->
<span class="pull-right">20th lvl</span>
</li>
</ul>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Feature -->
<p style="text-align: justify;">Aliquam et nisi ac mi vulputate hendrerit a in mi. Mauris at nulla tellus. Vestibulum consectetur aliquet magna ac viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut iaculis finibus urna. Phasellus sit amet lorem porta, dignissim erat in, rhoncus tortor. Nulla sed orci varius, pulvinar diam quis, cursus erat. Quisque sed faucibus sapien.</p>
</div>
</div>
</div>
<!--------------------------------- Class Features Section --------------------------------->
</div>
<!--------------------------- Spell Section, Remove if Unneccessary --------------------------->
<div class="row justify-content-between">
<div class="col-lg-4">
<div class="row justify-content-between">
<div class="col-4">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 h3 mb-0">
Spell ATK Bonus
</div>
<div class="card card-block card-primary bg-faded text-primary text-center rounded-0 display-3 mb-3" style="border-width:5px;">
<!-- Spell ATK Bonus -->
2
</div>
</div>
<div class="col-4">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 h3 mb-0">
Spell Save DC
</div>
<div class="card card-block card-primary bg-faded text-primary text-center rounded-0 display-3 mb-3" style="border-width:5px;">
<!-- Spell Save DC -->
4
</div>
</div>
<div class="col-4">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 h3 mb-0">
Cantrips Known
</div>
<div class="card card-block card-primary bg-faded text-primary text-center display-3 rounded-0 mb-3" style="border-width:5px;">
<!-- Cantrips Known -->
3
</div>
</div>
</div>
<!---------------------------------- Magic Items Section ---------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Magic Item
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr class="font-weight-bold">
<td width="30%">Name</td>
<td width="55%">Summary</td>
<td width="25%">Attuned</td>
</tr>
<!------ Item 1 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Suspendisse lobortis ex at libero porttitor elementum.</td>
<!-- Attune toggle -->
<td class="text-center"><i class="fas fa-circle"></td>
</tr>
<!------ Item 2 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Suspendisse non vulputate nulla.</td>
<!-- Attune toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
<!------ Item 3 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Quisque ipsum elit, ultrices vitae justo eu.</td>
<!-- Attune toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
<!------ Item 4 ------>
<tr>
<!-- Name -->
<td>Item Name</td>
<!-- Description -->
<td>Maecenas ac vulputate quam. </td>
<!-- Attune toggle -->
<td class="text-center"><i class="far fa-circle"></td>
</tr>
</tbody>
</table>
</div>
<!-------------------------------- Magic Items Section End -------------------------------->
</div>
<!------------------------------- Cantrips and Spells Section ------------------------------->
<div class="col-lg-4">
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Cantrips and Spells Known
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="col-lg-6 table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<!------- Spell 1 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 2 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 3 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 4 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 5 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 6 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 7 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 8 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 9 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 10 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 11 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 12 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 13 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 14 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 15 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 16 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
<!------- Spell 17 ------->
<tr>
<!-- Spell Level -->
<td width="10">0</td>
<!-- Spell Name -->
<td width="90%">Spell Name</td>
</tr>
</tbody>
</table>
</div>
</div>
<!----------------------------- Cantrips and Spells Section End ----------------------------->
<div class="col-lg-4">
<!----------------------------------- Spells Slots Section ----------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Spell Slots Available
</div>
<div class="card card-primary bg-faded text-primary rounded-0 mb-3" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<!------- 1st Level ------->
<tr>
<td width="35%">1st lvl</td>
<td width="15%"><i class="fas fa-circle"></td>
<td width="15%"><i class="far fa-circle"></td>
<td width="15%"><i class="far fa-circle"></td>
<td width="15%"><i class="far fa-circle"></td>
<td width="5%"></td>
</tr>
<!------- 2nd Level ------->
<tr>
<td>2nd lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td>
</tr>
<!------- 3rd Level ------->
<tr>
<td>3rd lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td>
</tr>
<!------- 4th Level ------->
<tr>
<td>4th lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td>
</tr>
<!------- 5th Level ------->
<tr>
<td>5th lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td>
</tr>
<!------- 6th Level ------->
<tr>
<td>6th lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td><td></td>
</tr>
<!------- 7th Level ------->
<tr>
<td>7th lvl</td>
<td><i class="far fa-circle"></td>
<td><i class="far fa-circle"></td>
<td></td><td></td><td></td>
</tr>
<!------- 8th Level ------->
<tr>
<td>8th lvl</td>
<td><i class="far fa-circle"></td>
<td></td><td></td><td></td><td></td>
</tr>
<!------- 9th Level ------->
<tr>
<td>9th lvl</td>
<td><i class="far fa-circle"></td>
<td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
<!--------------------------------- Spells Slots Section End --------------------------------->
<!---------------------------------- Component Pouch Section ---------------------------------->
<div class="card card-block card-primary card-inverse text-white text-center rounded-0 display-4 mb-0">
Component Pouch
</div>
<div class="card card-primary bg-faded text-primary rounded-0" style="border-width:5px;">
<table class="table table-striped mb-0 text-primary" style="border:transparent;">
<tbody>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
<tr><td>Item</td></tr>
</tbody>
</table>
</div>
</div>
<!-------------------------------- Component Pouch Section End -------------------------------->
</div>
<!------------------------------------- Spell Section End ------------------------------------->
<!-- Credits, Don't Remove -->
<a class="tooltipster text-primary pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>