<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 border-dark" style="border: 2px solid;background-color: faded; background-image:url('https://file.toyhou.se/thumbnails/5006369_hJ0.png');width:200px;height:200px;">
</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">
<!-- Image should be a small pagedoll or add style="width:100px" to it, feel free to change the number up or down as you like, try not to make it too big!-->
<img src="https://file.toyhou.se/images/9617224_qvStPuALjgWQRrU.png" class="float-right m-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;">Breakdown</h3>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><div class="btn btn-link"><strong>Positive</strong></div></div>
<div class="col-2 d-flex justify-content-center">
<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-5" style="text-align:left;"><div class="btn btn-link"><strong>Negative</strong></div></div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><div class="btn btn-link"><strong>Humorous</strong></div></div>
<div class="col-2 d-flex justify-content-center">
<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-5" style="text-align:left;"><div class="btn btn-link"><strong>Stoic</strong></div></div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><div class="btn btn-link"><strong>Calm</strong></div></div>
<div class="col-2 d-flex justify-content-center">
<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-5" style="text-align:left;"><div class="btn btn-link"><strong>Ill-tempered</strong></div></div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><div class="btn btn-link"><strong>Kind</strong></div></div>
<div class="col-2 d-flex justify-content-center">
<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-5" style="text-align:left;"><div class="btn btn-link"><strong>Disagreeable</strong></div></div>
</div>
<div class="row">
<div class="col-5" style="text-align:right;"><div class="btn btn-link"><strong>Generous</strong></div></div>
<div class="col-2 d-flex justify-content-center">
<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-5" style="text-align:left;"><div class="btn btn-link"><strong>Greedy</strong></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;">Trivia</h3></div>
<div class="card-block">
<ul style="list-style-type: square;">
<li><b>Lampshade Hanging:</b> Pointing out something within the story, to strengthen the audience's Willing Suspension of Disbelief.</li>
<li><b>Up to Eleven:</b> Exceeding the previous maximum, to an exaggerated degree.</li>
<li><b>Large Ham:</b> Highly dramatic, pretentious, and over-the-top acting.</li>
<li><b>Ho Yay:</b> Fans enjoy homoerotic subtext and shipping.</li>
<li><b>It Makes Sense in Context:</b> Some story events can sound ridiculous if you didn't see the setup.</li>
<li><b>Arson, Murder, and Jaywalking:</b> Minimum three items: start dark, continue dark, finish weak.</li>
</ul>
</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;">Relationships</h3></div>
<!--The # in the a href="#" can be replaced by the named character's link, if you'd like.
Again, "fas fa-heart" for solid hearts, "far fa-heart" for empty ones.
I still recommend square-cropped thumbnails for the image.-->
<div class="row px-3">
<div class="card col-sm-4 align-content-center border-0">
<div class="card-block text-center">
<a href="#" class="btn btn-link"><strong>Name</strong></h4>
</div>
<div class="card d-inline-block p-0 border-0 d-block mx-auto">
<img src="https://file.toyhou.se/thumbnails/5006369_hJ0.png" class="bg-light rounded-circle border-success" style="border: 2px solid;">
</div>
<div class="card-block d-flex justify-content-center">
<div class="btn btn-success" style="width:100px;"><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></div>
</div>
</div>
<div class="card col-sm-4 align-content-center border-0">
<div class="card-block text-center">
<a href="#" class="btn btn-link"><strong>Name</strong></a>
</div>
<div class="card d-inline-block p-0 border-0 d-block mx-auto">
<img src="https://file.toyhou.se/thumbnails/5006369_hJ0.png" class="bg-light rounded-circle border-danger" style="border: 2px solid;">
</div>
<div class="card-block d-flex justify-content-center">
<div class="btn btn-success" style="width:100px;"><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></div>
</div>
</div>
<div class="card col-sm-4 align-content-center border-0">
<div class="card-block text-center">
<a href="#" class="btn btn-link"><strong>Name</strong></a>
</div>
<div class="card d-inline-block p-0 border-0 d-block mx-auto">
<img src="https://file.toyhou.se/thumbnails/5006369_hJ0.png" class="bg-light rounded-circle border-info" style="border: 2px solid;">
</div>
<div class="card-block d-flex justify-content-center">
<div class="btn btn-success" style="width:100px;"><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></div>
</div>
</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>
