<div class="container-fluid">
<div class="row">
<div class="card card-block card-success card-inverse col-12">
<h2 class="text-white" style="text-align: center;"><i class="fas fa-forward"></i> NAME <i class="fas fa-backward"></i></h2>
</div>
</div>
<div class="row">
<div class="card card-outline-danger p-0 col-md-5">
<div class="card-inverse card-danger card-header">
<h2 class="d-inline mt-1 text-white" style="padding-bottom:0;border:none;">Info</h2>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-block mx-auto" style="text-align:center;">
<!-- Use a square-cropped art thumbnail for best results-->
<div class="card d-inline-block " style="border: 2px solid danger;background-color: faded; background-image:url('https://file.toyhou.se/thumbnails/5006369_hJ0.png');width:200px;height:200px;">
<div class="card-block" style="padding: 0px; text-align: center; vertical-align:bottom;"><div class="badge badge-pill badge-warning" >HP 400/400</div><div class="badge badge-pill badge-success"> MP 200/200</div></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Name:</strong></div>
<div class="col-7" style="text-align:left;">What they're Called</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Gender:</strong></div>
<div class="col-7" style="text-align:left;">Male/Female/Genderless</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Alignment:</strong></div>
<div class="col-7" style="text-align:left;">Lawful/Neutral/Chaotic Good/Neutral/Evil</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Species:</strong></div>
<div class="col-7" style="text-align:left;">Or race it could be race</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Home:</strong></div>
<div class="col-7" style="text-align:left;">Where they live / Universe etc</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Occupation:</strong></div>
<div class="col-7" style="text-align:left;">Work? Student? Hobby?</div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>Status:</strong></div>
<div class="col-7" style="text-align:left;">In/Active, Price, whatever</div>
</div>
</div>
</div>
<div class="card card-outline-warning col-md-7 p-0">
<div class="card-inverse card-warning card-header">
<h2 class="d-inline mt-1 text-white" style="padding-bottom:0;border:none;">Description</h2>
</div>
<div class="card-block">
<img src="https://file.toyhou.se/images/9617224_qvStPuALjgWQRrU.png" class="fr float-right p-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod turpis in iaculis. Mauris sed massa egestas, maximus velit sed, faucibus nulla. Sed vel lectus non arcu consequat accumsan. Mauris at arcu id metus venenatis consequat. Nam quis ex eu sapien condimentum tincidunt. Phasellus accumsan vitae ex sit amet congue. Duis purus diam, ullamcorper iaculis iaculis vitae, elementum nec turpis. Mauris mauris quam, mollis et felis vitae, accumsan imperdiet felis.</p>
<p>Nulla mollis lobortis eros, a pretium mauris faucibus a. Quisque nec fermentum urna. Donec sodales odio sed mi lobortis blandit. Praesent sed nisl nisl. Quisque cursus arcu id lectus feugiat finibus at at nisl. Curabitur est risus, elementum vitae magna sed, eleifend convallis enim. Praesent a tortor sagittis, ultricies leo eget, sodales ex. In condimentum eget ex ut eleifend.</p>
<p>Phasellus a mauris ut ex hendrerit ultricies ac et diam. Proin sit amet mattis arcu, non efficitur lectus. Mauris hendrerit arcu ut arcu accumsan dictum. Mauris lectus elit, faucibus tempor viverra non, ultrices id eros. Quisque non justo non leo mattis vehicula. Duis rhoncus scelerisque mattis. Donec placerat orci magna, vel tincidunt justo gravida ut. Donec et nunc id ipsum venenatis commodo.</p>
<p>Sed at nibh et orci semper rhoncus a in massa. Pellentesque in pretium diam, in vehicula est. Nulla a tincidunt enim, vel aliquam tellus. Cras libero diam, ornare id orci sit amet, gravida gravida quam. Nam fermentum metus vitae lectus vehicula venenatis. Vestibulum fringilla sem lorem, eu mattis nulla venenatis sit amet. In ut lacinia augue.</p>
</div>
</div>
</div>
<div class="row">
<div class="card card-outline-success col-md-3 p-0">
<div class="card-inverse card-success card-header">
<h3 class="text-white" style="text-align:center;">Likes</h3>
</div>
<ul>
<li>you'll</li>
<li>never</li>
<li>see it</li>
<li>coming</li>
<li>!</li>
</ul>
</div>
<div class="card card-outline-danger col-md-3 p-0">
<div class="card-inverse card-danger card-header">
<h3 class="text-white" style="text-align:center;">Dislikes</h3>
</div>
<ul>
<li>are you sure</li>
<li>your next move's</li>
<li>the right one</li>
<li>for you</li>
<li>?</li>
</ul>
</div>
<div class="card card-outline-warning col-md-6 p-0">
<div class="card-inverse card-warning card-header">
<!-- Use <i class="fas fa-square"></i> for full squares, and <i class="far fa-square"></i> for empty ones. I have five squares in each "button", you can just change fas or far to swap out. !-->
<h3 class="text-white" style="text-align:center;">Stats</h3>
</div>
<div class="row">
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>HP:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px;"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>MP:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
<div class="row">
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>STR:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>DEF:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
<div class="row">
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>INT:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>RES:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
<div class="row">
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>DEX:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
<div class="col-2" style="text-align:right;"><div class="btn btn-link"><strong>LUK:</strong></div></div>
<div class="col-4">
<div class="btn btn-success" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card card-outline-danger card col-md-5 p-0">
<div class="card-inverse card-success card-header text-white"><h3 style="text-align:center;">Equipment</h3></div>
<div class="card-block">
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Main Weapon:</strong></div>
<div class="col-8">Dragontooth Sword</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Sub Weapon:</strong></div>
<div class="col-8">Thief's Dagger</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Main Armor:</strong></div>
<div class="col-8">Dragon Gear</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Sub Armor:</strong></div>
<div class="col-8">Scaled Helmet</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Accessory:</strong></div>
<div class="col-8">Scaled Wristlet</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Accessory:</strong></div>
<div class="col-8">Mage's Orb</div>
</div>
</div>
</div>
<div class="card card-outline-warning col-md-7 p-0">
<div class="card-inverse card-danger card-header text-white"><h3 style="text-align:center;">Skills</h3></div>
<div class="card-block">
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Heraldry - Fire:</strong></div>
<div class="col-8">Imbues equipped Main Weapon with Fire for five turns. Damage is calculated on both Strength and Intelligence stats; 40MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Quickstep:</strong></div>
<div class="col-8">Doubles Evasion for five turns; 15MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Crushing Blow:</strong></div>
<div class="col-8">Severe strength triple hit using both Main and Sub Weapons; 35MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Sneaking Blow:</strong></div>
<div class="col-8">Uses sub weapon to attack, cannot miss and has high critical; 15MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Focused Flame:</strong></div>
<div class="col-8">High strength Fire element attack; 30MP</div>
</div>
</div>
</div>
</div>
</div>
<p style="text-align:right;"><span style='font-family: "courier new", courier; font-size: 9px;'>layout by @pepperly, please don't edit or redistribute without permission</span></p>
