Draw Steel PC Code
created by:BigGayFish
HTMLCustom ColorsBootstrapCharacter
Copy
<!--DRAW STEEL PC CHARACTER CODE - BOOTSTRAPS VER
I may have a weeeeeee hyperfixation on Draw Steel and my new OC, so uuuuh here's a new code!
-->
<div class="container-fluid" style="font-size: 13pt;">
<div class="card p-3 rounded-0 border-0" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; height: 300px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card bg-primary rounded-0 border-0 p-3 text-center">
<p class="display-4 font-weight-bold">—————— <i class="far fa-sword"></i> Character Name <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
<p style="font-variant: small-caps;">Class | Sub Class | Level # | # Renown | # Wealth</p>
</div>
<div class="card bg-faded card-outline-primary p-3 rounded-0 mb-3" style="border-width: 3px;">
<div class="row">
<!--QUICK INFO-->
<div class="col-md-6">
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-id-card"></i> alias
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-dna"></i> ancestry
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-user-tie"></i> career
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-faded card-outline-primary mb-2 rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-faded card-outline-primary rounded-0" style="border-width: 2px;">
<div class="row no-gutters">
<div class="col-auto align-items-center bg-primary" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
</div>
</div>
<div class="card bg-faded card-outline-primary p-3 rounded-0 mb-3" style="border-width: 3px;">
<p class="display-4 text-center font-weight-bold">—————— <i class="far fa-sword"></i> Overview <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Cras eros nisi, fermentum nec egestas eu, eleifend sed orci. Suspendisse consectetur feugiat ligula et dignissim. Pellentesque sed purus accumsan, tincidunt mauris ac, molestie ligula. Maecenas eleifend venenatis odio id sagittis. Nullam egestas vel turpis sed aliquam. In nec dui et nisi pretium viverra. Maecenas interdum sem id pulvinar tristique. Sed aliquet ante turpis, id efficitur risus porttitor ut. Proin sed neque tempor, lobortis arcu eu, porta lectus. Fusce cursus ullamcorper neque sed egestas. Mauris id erat eu ligula pretium fringilla. Cras blandit commodo elit at consequat. </p>
</div>
<div class="card bg-faded card-outline-primary p-3 rounded-0 mb-3" style="border-width: 3px;">
<div class="row align-items-center justify-content-center">
<!--MIGHT-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-primary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Might</h1>
</div>
<div class="card bg-primary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF MIGHT-->
<!--AGILITY-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-primary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Agility</h1>
</div>
<div class="card bg-primary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF AGILITY-->
<!--REASON-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-primary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Reason</h1>
</div>
<div class="card bg-primary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF REASON-->
<!--INTUITION-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-primary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Intuition</h1>
</div>
<div class="card bg-primary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF INTUITION-->
<!--PRESENCE-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-primary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Presence</h1>
</div>
<div class="card bg-primary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF PRESENCE-->
<!--HEROIC RESOURCE-->
<div class="col-sm-2 mb-3" align="center">
<div class="card bg-secondary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Heroic Resource</h1>
</div>
<div class="card bg-secondary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF HEROIC RESOURCE-->
</div>
</div>
<div class="card p-3 bg-primary border-0 rounded-0 mb-3">
<a data-toggle="collapse" href="#drawsteel" style="color: #fff;">
<p class="display-4 text-center font-weight-bold">—————— <i class="far fa-sword"></i> Draw Steel <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
</a>
</div>
<div class="collapse mb-3" id="drawsteel">
<div class="row">
<div class="col-md-7 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 h-100" style="border-width: 3px;">
<div class="row align-items-center justify-content-center">
<!--SIZE-->
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Size</h3>
</div>
<div class="card w-75 bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<!--END OF SIZE-->
<!--SPEED-->
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Speed</h3>
</div>
<div class="card w-75 bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<!--END OF SPEED-->
<!--DISENGAGE-->
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Disengage</h3>
</div>
<div class="card w-75 bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<!--END OF DISENGAGE-->
<!--STABILITY-->
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Stability</h3>
</div>
<div class="card w-75 bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<!--END OF STABILITY-->
<!--STAMINA-->
<div class="col-md-6 mb-3" align="center">
<div class="card bg-secondary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Stamina</h1>
</div>
<div class="card bg-secondary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF STAMINA-->
<!--RECOVERIES-->
<div class="col-md-6 mb-3" align="center">
<div class="card bg-secondary text-white pt-3 mx-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Recoveries</h1>
</div>
<div class="card bg-secondary mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF RECOVERIES-->
<!--POTENCY-->
<div class="col-md-3 mb-3" align="center">
<div class="card bg-secondary text-white p-3 border-0 rounded-0">
<h1 class="font-weight-bold text-uppercase text-center">Potency</h1>
</div>
<div class="card bg-secondary mb-3 p-3 border-0 rounded-0 overflow-auto" style="max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">WEAK</h3>
</div>
<div class="card bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">AVERAGE</h3>
</div>
<div class="card bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">STRONG</h3>
</div>
<div class="card bg-faded card-outline-primary mx-3 mb-3 p-2 rounded-0 overflow-auto" style="max-height: 150px; border-width: 3px;">
<p>content</p>
</div>
</div>
<!--END OF POTENCY-->
</div>
<!--QUOTE-->
<h1 class="text-primary text-center display-4" style="font-style: oblique;"><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fas fa-quote-right"></i>
<br> — Character Name</h1>
<!--END OF QUOTE-->
</div>
</div>
<div class="col-md-5 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; height: 500px;">
<h1 class="text-primary display-3 font-weight-bold text-center">Skills & Perks</h1>
<div class="row justify-content-center">
<div class="col-md-4 mb-3">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Perks</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Crafting</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Exploration</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Interpersonal</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Intrigue</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4">
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Lore</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span class="text-primary">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; height: 500px;">
<h1 class="text-primary display-3 font-weight-bold text-center">Abilities</h1>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0 w-50">
<h3 class="font-weight-bold text-uppercase text-center">Sub-Class Aspect:</h3>
</div>
<p><span class="text-primary">Title:</span> Defintion/Explanation. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 1 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 2 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 3 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 4 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 5 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 6 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card bg-primary text-white p-2 my-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Level 7 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 class="font-weight-bold text-primary">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p class="text-primary font-weight-bold">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="bg-primary px-1 font-weight-bold">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span class="text-primary font-weight-bold">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 class="font-weight-bold text-primary">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span class="text-primary font-weight-bold">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-md-3 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 600px;">
<h1 class="text-primary display-3 font-weight-bold">Design Notes</h1>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<h1 class="text-primary display-3 font-weight-bold">Ancestry</h1>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Trait/Perk</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Trait/Perk</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<div class="col-md-6 mb-3">
<!--WARDROBE-->
<div class="row align-items-center no-gutters w-100">
<!--LB BUTTON - DESKTOP-->
<div class="col-sm-1 p-2 d-none d-sm-block">
<div class="col-md card bg-primary m-1 text-center font-weight-bold rounded-0 border-0 p-1 align-items-center" style="font-family: Georgia; font-size:30px; min-height:600px;"> <span style="position:absolute; top:50%;"><i class="fas fa-angle-left"></i></span>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<!--LB BUTTON - MOBILE-->
<div class="col-sm-1 p-2 d-md-none">
<div class="col-md card bg-primary m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="font-family: Georgia; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
<div class="col-lg-10 p-2">
<!--CHARACTER IMG-->
<div class="card my-2 rounded-0 border-0">
<div id="FORMS" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:urlhttps://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
</div>
<!--RB BUTTON - DESKTOP-->
<div class="col-sm-1 p-2 d-none d-sm-block">
<div class="col-md card bg-primary m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="font-family: Georgia; font-size:30px; min-height:600px;"> <span style="position:absolute; top:50%; left: 35%;"><i class="fas fa-angle-right"></i></span>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
<!--RB BUTTON - MOBILE-->
<div class="col-sm-1 p-2 d-md-none">
<div class="col-md card bg-primary m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="font-family: Georgia; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--WARDROBE END-->
</div>
<div class="col-md-3 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; height: 600px;">
<!--COLOR PALETTE-->
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 2: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 2: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-head-side"></i> skintone: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye-dropper-half"></i> details: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-clothes-hanger"></i> outfit 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-shirt"></i> outfit 2: #hex_code</div>
</div>
<!--END OF COLOR PALETTE-->
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 500px;">
<h1 class="text-primary display-3 font-weight-bold">Culture</h1>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Environment</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Organization</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Upbringing</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Languages</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<h1 class="text-primary display-3 font-weight-bold">Career</h1>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Benefit</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Inciting Incident</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="text-primary display-3 font-weight-bold">Complication</h1>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Name</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="text-primary display-3 font-weight-bold">Trivia</h1>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Likes</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="card bg-primary text-white p-2 mb-2 border-0 rounded-0">
<h3 class="font-weight-bold text-uppercase text-center">Dislikes</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-md-8 mb-3">
<div class="card bg-faded card-outline-primary p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 500px;">
<h1 class="text-primary display-3 font-weight-bold">Biography</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis vehicula odio, nec efficitur urna. Morbi ligula ante, malesuada efficitur laoreet vel, gravida non mi. Nullam eu risus eget dui luctus consequat ac non tortor. Proin erat ipsum, egestas vitae neque id, gravida porta sapien. Vestibulum a lacus auctor, sodales leo at, mollis erat. Phasellus id dapibus ipsum. Proin vel ullamcorper nisl. Cras eu augue ac orci interdum bibendum. Aliquam lectus enim, feugiat a mauris at, sollicitudin convallis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque ante id tempus interdum.</p>
<h1 class="text-muted font-weight-bold">Subheader</h1>
<p>Nullam sed sapien aliquam, faucibus sem nec, malesuada urna. Duis pretium posuere porta. Maecenas purus enim, mattis sit amet pharetra quis, sollicitudin at nunc. Aenean ut varius purus, et aliquet mi. Donec faucibus fermentum sem vitae hendrerit. Cras cursus turpis nec eros feugiat, eu fringilla nisl volutpat. Sed varius, dolor a molestie lacinia, orci eros blandit nunc, id euismod felis dui quis dui. Vivamus mattis tortor tellus, id placerat metus efficitur ut. Nunc mattis sem arcu, a malesuada quam ullamcorper vel. Vestibulum eget gravida mi, vitae faucibus tellus. Curabitur posuere, tellus quis facilisis pretium, sem risus imperdiet mauris, eu efficitur ante eros sit amet sapien. Nunc fermentum semper elementum. Vivamus elit ipsum, vulputate vel nisi at, convallis maximus mauris. In efficitur pretium velit. Mauris vel tempus mi, eget cursus felis.</p>
<p>Fusce in felis fermentum, cursus neque quis, scelerisque lectus. Vestibulum vitae neque vitae ex gravida varius sit amet eget lacus. Curabitur eget commodo erat. Nulla feugiat ullamcorper enim, a suscipit magna blandit in. Mauris molestie est et massa condimentum, nec feugiat lorem iaculis. Donec porta consectetur justo, ac imperdiet mi hendrerit sit amet. Aliquam ex quam, maximus ac mollis quis, ullamcorper ut purus. Vivamus a nisi ultricies, mattis lorem non, facilisis urna. Integer efficitur facilisis lectus ut convallis. Nam eget leo vitae diam ullamcorper cursus. Nam sem urna, faucibus vitae placerat non, lacinia eu ipsum. Suspendisse potenti. Duis blandit ornare ligula, vel pretium neque efficitur id. Vivamus gravida odio vitae lectus iaculis, eu ullamcorper leo porta. Proin fermentum nulla id nulla porta aliquam. Integer et ex pellentesque, fringilla lacus nec, efficitur metus.</p>
</div>
</div>
<!--CHARACTER LINK-->
<!--ICON-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 border-0" style="height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-3">
<div class="card card-outline-primary bg-faded rounded-0 p-3" style="border-width: 3px;">
<a href="#" class="font-weight-bold display-4" >
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 >Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="height: 150px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<!--ICON-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 border-0" style="height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-3">
<div class="card card-outline-primary bg-faded rounded-0 p-3" style="border-width: 3px;">
<a href="#" class="font-weight-bold display-4" >
Name
</a>
<div class="col-lg-12 mb-2 bg-primary" style="height:2px;"></div>
<h5 >Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="height: 150px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
</div>
</div>
<div class="bg-primary" style="height: 3px;">
<a href="https://toyhou.se/BigGayFish" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>Copy
<!--DRAW STEEL PC CHARACTER CODE - CUSTOM COLORS VER
I may have a weeeeeee hyperfixation on Draw Steel and my new OC, so uuuuh here's a new code!
COLOR KEY: #fff - Text
#902512 - Main Accent Color
#724b2c - Second Accent Color
#181110 - Background Color
-->
<div class="container-fluid" style="font-size: 13pt; color: #fff;">
<div class="card p-3 rounded-0 border-0" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; height: 300px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card rounded-0 border-0 p-3 text-center" style="background: #902512;">
<p class="display-4 font-weight-bold">—————— <i class="far fa-sword"></i> Character Name <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
<p style="font-variant: small-caps;">Class | Sub Class | Level # | # Renown | # Wealth</p>
</div>
<div class="card p-3 rounded-0 mb-3" style="background: #181110; border: #902512 3px solid;">
<div class="row">
<!--QUICK INFO-->
<div class="col-md-6">
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-id-card"></i> alias
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-dna"></i> ancestry
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-user-tie"></i> career
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card mb-2 rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #902512;">content</a></div>
</div>
</div>
<div class="card rounded-0" style="background: #181110; border: #902512 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background: #902512; font-weight: bold; padding: 5px; margin-right: 4px; min-width:180px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: transparent; text-align: right; border: none; border-radius: 0px;"> <a href="#" style="font-weight: bold; color: #902512;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
</div>
</div>
<div class="card p-3 rounded-0 mb-3" style="background: #181110; border: #902512 3px solid;">
<p class="display-4 text-center font-weight-bold">—————— <i class="far fa-sword"></i> Overview <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Cras eros nisi, fermentum nec egestas eu, eleifend sed orci. Suspendisse consectetur feugiat ligula et dignissim. Pellentesque sed purus accumsan, tincidunt mauris ac, molestie ligula. Maecenas eleifend venenatis odio id sagittis. Nullam egestas vel turpis sed aliquam. In nec dui et nisi pretium viverra. Maecenas interdum sem id pulvinar tristique. Sed aliquet ante turpis, id efficitur risus porttitor ut. Proin sed neque tempor, lobortis arcu eu, porta lectus. Fusce cursus ullamcorper neque sed egestas. Mauris id erat eu ligula pretium fringilla. Cras blandit commodo elit at consequat. </p>
</div>
<div class="card p-3 rounded-0 mb-3" style="background: #181110; border: #902512 3px solid;">
<div class="row align-items-center justify-content-center">
<!--MIGHT-->
<div class="col-sm-2 mb-3" align="center">
<div class="card pt-3 mx-3 border-0 rounded-0" style="background: #902512;">
<h1 class="font-weight-bold text-uppercase text-center">Might</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #902512; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF MIGHT-->
<!--AGILITY-->
<div class="col-sm-2 mb-3" align="center">
<div class="card pt-3 mx-3 border-0 rounded-0" style="background: #902512;">
<h1 class="font-weight-bold text-uppercase text-center">Agility</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #902512; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF AGILITY-->
<!--REASON-->
<div class="col-sm-2 mb-3" align="center">
<div class="card pt-3 mx-3 border-0 rounded-0" style="background: #902512;">
<h1 class="font-weight-bold text-uppercase text-center">Reason</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #902512; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF REASON-->
<!--INTUITION-->
<div class="col-sm-2 mb-3" align="center">
<div class="card pt-3 mx-3 border-0 rounded-0" style="background: #902512;">
<h1 class="font-weight-bold text-uppercase text-center">Intuition</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #902512; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF INTUITION-->
<!--PRESENCE-->
<div class="col-sm-2 mb-3" align="center">
<div class="card pt-3 mx-3 border-0 rounded-0" style="background: #902512;">
<h1 class="font-weight-bold text-uppercase text-center">Presence</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #902512; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>#</h1>
</div>
</div>
<!--END OF PRESENCE-->
<!--HEROIC RESOURCE-->
<div class="col-sm-2 mb-3" align="center">
<div class="card text-white pt-3 mx-3 border-0 rounded-0" style="background: #724b2c;">
<h1 class="font-weight-bold text-uppercase text-center">Heroic Resource</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #724b2c; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF HEROIC RESOURCE-->
</div>
</div>
<div class="card p-3 border-0 rounded-0 mb-3" style="background: #902512;">
<a data-toggle="collapse" href="#drawsteel" style="color: #fff;">
<p class="display-4 text-center font-weight-bold">—————— <i class="far fa-sword"></i> Draw Steel <i class="far fa-sword fa-flip-horizontal"></i> ——————</p>
</a>
</div>
<div class="collapse mb-3" id="drawsteel">
<div class="row">
<div class="col-md-7 mb-3">
<div class="card p-3 rounded-0 h-100" style="background: #181110; border: #902512 3px solid;">
<div class="row align-items-center justify-content-center">
<!--SIZE-->
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Size</h3>
</div>
<div class="card w-75 mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<!--END OF SIZE-->
<!--SPEED-->
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Speed</h3>
</div>
<div class="card w-75 mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<!--END OF SPEED-->
<!--DISENGAGE-->
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Disengage</h3>
</div>
<div class="card w-75 mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<!--END OF DISENGAGE-->
<!--STABILITY-->
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Stability</h3>
</div>
<div class="card w-75 mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<!--END OF STABILITY-->
<!--STAMINA-->
<div class="col-md-6 mb-3" align="center">
<div class="card text-white pt-3 mx-3 border-0 rounded-0" style="background: #724b2c;">
<h1 class="font-weight-bold text-uppercase text-center">Stamina</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #724b2c; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF STAMINA-->
<!--RECOVERIES-->
<div class="col-md-6 mb-3" align="center">
<div class="card text-white pt-3 mx-3 border-0 rounded-0" style="background: #724b2c;">
<h1 class="font-weight-bold text-uppercase text-center">Recoveries</h1>
</div>
<div class="card mx-3 mb-3 px-3 pb-3 border-0 rounded-0 overflow-auto" style="background: #724b2c; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<!--END OF RECOVERIES-->
<!--POTENCY-->
<div class="col-md-3 mb-3" align="center">
<div class="card text-white p-3 border-0 rounded-0" style="background: #724b2c;">
<h1 class="font-weight-bold text-uppercase text-center">Potency</h1>
</div>
<div class="card mb-3 p-3 border-0 rounded-0 overflow-auto" style="background: #724b2c; max-height: 150px; clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);">
<h1>content</h1>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">WEAK</h3>
</div>
<div class="card mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">AVERAGE</h3>
</div>
<div class="card mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<div class="col-sm-3 mb-3" align="center">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">STRONG</h3>
</div>
<div class="card mx-3 mb-3 p-2 rounded-0 overflow-auto" style="background: #181110; max-height: 150px; border: #902512 3px solid;">
<p>content</p>
</div>
</div>
<!--END OF POTENCY-->
</div>
<!--QUOTE-->
<h1 class="text-center display-4" style="font-style: oblique; color: #902512;"><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fas fa-quote-right"></i>
<br> — Character Name</h1>
<!--END OF QUOTE-->
</div>
</div>
<div class="col-md-5 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; background: #181110; border: #902512 3px solid; height: 500px;">
<h1 class= "display-3 font-weight-bold text-center" style="color: #902512;">Skills & Perks</h1>
<div class="row justify-content-center">
<div class="col-md-4 mb-3">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Perks</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Crafting</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Exploration</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Interpersonal</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Intrigue</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Lore</h3>
</div>
<div class="card-body overflow-auto" style="max-height: 150px;">
<p><span style="color: #902512;">Skill Name:</span> Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; border: #902512 3px solid; height: 500px;">
<h1 class= "display-3 font-weight-bold text-center" style="color: #902512;">Abilities</h1>
<div class="card p-2 mb-2 border-0 rounded-0 w-50" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Sub-Class Aspect:</h3>
</div>
<p><span style="color: #902512;">Title:</span> Defintion/Explanation. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 1 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 2 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 3 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 4 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 5 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 6 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
<div class="card p-2 my-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Level 7 Features</h3>
</div>
<!--FEATURE ABILITY-->
<blockquote class="my-2">
<h2 style="color: #902512; font-weight: bold;">Ability Name</h2>
<small><em>Mini ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></small>
<hr>
<p class="font-weight-bold mt-n2">Keyword, Keyword <span class="pull-right">Type</span></p>
<p class="mt-n2"><i class="fas fa-ruler-triangle"></i> Aura <span class="pull-right"><i class="fas fa-bullseye-arrow fa-flip-horizontal"></i> Target</span></p>
</blockquote>
<p style="color: #902512; font-weight: bold;">Power Roll + Potency</p>
<!--Because what happens when you roll is different per abilities, I'm simply offering different versions for you to copy & paste depending on ability. When using the description that involves your potency stat, then replace the p in <i class="fas fa-square-p"> for the letter of your stat (eg: m for might, a for agility, etc)-->
<ul class="mt-n3 ml-n4" style="list-style-type:none; font-size: 11pt;">
<li><span class="font-weight-bold">≤ 11:</span> # + <i class="fas fa-square-p"></i> damage type; <span class="px-1 font-weight-bold" style="background: #902512;">Stat < Average / Weak / Strong</span>, keyword effect</li>
<li><span class="font-weight-bold">12-16:</span> # damage type; keyword effect</li>
<li><span class="font-weight-bold">17+:</span> What happens upon roll.</li>
</ul>
<p><span style="color: #902512; font-weight: bold;">Effect:</span> Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF ABILITY FEATURE-->
<!--MINOR ABILITY-->
<h2 style="color: #902512; font-weight: bold;">Minor Ability</h2>
<p>Ability description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<p style="font-size: 11pt;"><span style="color: #902512; font-weight: bold;">Extra Effect:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!--END OF MINOR ABILITY-->
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3 rounded-0 border-0 h-100" style="background: url('https://dummyimage.com/350/ffffff/000000') top; background-size: cover; background-repeat: no-repeat; min-height: 350px;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-md-3 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; border: #902512 3px solid; max-height: 600px;">
<h1 class="display-3 font-weight-bold" style="color: #902512;">Design Notes</h1>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<h1 class="display-3 font-weight-bold" style="color: #902512;">Ancestry</h1>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Trait/Perk</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Trait/Perk</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<div class="col-md-6 mb-3">
<!--WARDROBE-->
<div class="row align-items-center no-gutters w-100">
<!--LB BUTTON - DESKTOP-->
<div class="col-sm-1 p-2 d-none d-sm-block">
<div class="col-md card m-1 text-center font-weight-bold rounded-0 border-0 p-1 align-items-center" style="background: #902512; font-size:30px; min-height:600px;"> <span style="position:absolute; top:50%;"><i class="fas fa-angle-left"></i></span>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<!--LB BUTTON - MOBILE-->
<div class="col-sm-1 p-2 d-md-none">
<div class="col-md m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="background: #902512; font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
<div class="col-lg-10 p-2">
<!--CHARACTER IMG-->
<div class="card my-2 rounded-0 border-0">
<div id="FORMS" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
</div>
<div class="carousel-item">
<div style="min-height:600px; background-image:urlhttps://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
</div>
<!--RB BUTTON - DESKTOP-->
<div class="col-sm-1 p-2 d-none d-sm-block">
<div class="col-md card m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="background: #902512; font-size:30px; min-height:600px;"> <span style="position:absolute; top:50%; left: 35%;"><i class="fas fa-angle-right"></i></span>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
<!--RB BUTTON - MOBILE-->
<div class="col-sm-1 p-2 d-md-none">
<div class="col-md card m-1 text-center font-weight-bold rounded-0 border-0 p-1" style="background: #902512; font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0 border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--WARDROBE END-->
</div>
<div class="col-md-3 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; border: #902512 3px solid; height: 600px;">
<!--COLOR PALETTE-->
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-user-hair"></i> hair 2: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye"></i> eyes 2: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-head-side"></i> skintone: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-eye-dropper-half"></i> details: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-clothes-hanger"></i> outfit 1: #hex_code</div>
</div>
<div class="card rounded-0 mb-3" style="background: #A1A1A1; padding: 5px;">
<div class="card-text text-center" style="letter-spacing: 3px;"> <i class="fa-solid fa-shirt"></i> outfit 2: #hex_code</div>
</div>
<!--END OF COLOR PALETTE-->
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; border: #902512 3px solid; max-height: 500px;">
<h1 class="display-3 font-weight-bold" style="color: #902512;">Culture</h1>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Environment</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Organization</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Upbringing</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Languages</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<h1 class="display-3 font-weight-bold" style="color: #902512;">Career</h1>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Benefit</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Inciting Incident</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="display-3 font-weight-bold" style="color: #902512;">Complication</h1>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Name</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="display-3 font-weight-bold" style="color: #902512;">Trivia</h1>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Likes</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<div class="card p-2 mb-2 border-0 rounded-0" style="background: #902512;">
<h3 class="font-weight-bold text-uppercase text-center">Dislikes</h3>
</div>
<ul class="my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-md-8 mb-3">
<div class="card bg-faded p-3 rounded-0 overflow-auto" style="background: #181110; border: #902512 3px solid; max-height: 500px;">
<h1 class="display-3 font-weight-bold" style="color: #902512;">Biography</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis vehicula odio, nec efficitur urna. Morbi ligula ante, malesuada efficitur laoreet vel, gravida non mi. Nullam eu risus eget dui luctus consequat ac non tortor. Proin erat ipsum, egestas vitae neque id, gravida porta sapien. Vestibulum a lacus auctor, sodales leo at, mollis erat. Phasellus id dapibus ipsum. Proin vel ullamcorper nisl. Cras eu augue ac orci interdum bibendum. Aliquam lectus enim, feugiat a mauris at, sollicitudin convallis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque ante id tempus interdum.</p>
<h1 class="text-muted font-weight-bold">Subheader</h1>
<p>Nullam sed sapien aliquam, faucibus sem nec, malesuada urna. Duis pretium posuere porta. Maecenas purus enim, mattis sit amet pharetra quis, sollicitudin at nunc. Aenean ut varius purus, et aliquet mi. Donec faucibus fermentum sem vitae hendrerit. Cras cursus turpis nec eros feugiat, eu fringilla nisl volutpat. Sed varius, dolor a molestie lacinia, orci eros blandit nunc, id euismod felis dui quis dui. Vivamus mattis tortor tellus, id placerat metus efficitur ut. Nunc mattis sem arcu, a malesuada quam ullamcorper vel. Vestibulum eget gravida mi, vitae faucibus tellus. Curabitur posuere, tellus quis facilisis pretium, sem risus imperdiet mauris, eu efficitur ante eros sit amet sapien. Nunc fermentum semper elementum. Vivamus elit ipsum, vulputate vel nisi at, convallis maximus mauris. In efficitur pretium velit. Mauris vel tempus mi, eget cursus felis.</p>
<p>Fusce in felis fermentum, cursus neque quis, scelerisque lectus. Vestibulum vitae neque vitae ex gravida varius sit amet eget lacus. Curabitur eget commodo erat. Nulla feugiat ullamcorper enim, a suscipit magna blandit in. Mauris molestie est et massa condimentum, nec feugiat lorem iaculis. Donec porta consectetur justo, ac imperdiet mi hendrerit sit amet. Aliquam ex quam, maximus ac mollis quis, ullamcorper ut purus. Vivamus a nisi ultricies, mattis lorem non, facilisis urna. Integer efficitur facilisis lectus ut convallis. Nam eget leo vitae diam ullamcorper cursus. Nam sem urna, faucibus vitae placerat non, lacinia eu ipsum. Suspendisse potenti. Duis blandit ornare ligula, vel pretium neque efficitur id. Vivamus gravida odio vitae lectus iaculis, eu ullamcorper leo porta. Proin fermentum nulla id nulla porta aliquam. Integer et ex pellentesque, fringilla lacus nec, efficitur metus.</p>
</div>
</div>
<!--CHARACTER LINK-->
<!--ICON-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 border-0" style="height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-3">
<div class="card rounded-0 p-3" style="background: #181110; border: #902512 3px solid;">
<a href="#" class="font-weight-bold display-4" style="color: #902512;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background: #902512;"></div>
<h5 >Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="height: 150px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<!--ICON-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 border-0" style="height:250px; background-image:url(https://dummyimage.com/350/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg-8 mb-3">
<div class="card rounded-0 p-3" style="background: #181110; border: #902512 3px solid;">
<a href="#" class="font-weight-bold display-4" style="color: #902512;">
Name
</a>
<div class="col-lg-12 mb-2" style="height:2px; background: #902512;"></div>
<h5 >Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<div class="card-body overflow-auto" style="height: 150px;">
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE ABOVE HERE-->
</div>
</div>
<div class="bg-primary" style="height: 3px;">
<a href="https://toyhou.se/BigGayFish" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>