<div class="card-block mx-auto" style="width:1100px;">
<h1 class="display-3"><i class="fas fa-person-sign"></i> <i>Person</i></h1>
<!-- Summary Block ---------------------------------------------------------------------------------------------------->
<div class="row mx-auto">
<div class="card card-block bg-faded w-50 m-2" style="height:650px">
<h1 style="text-align:center;" class="display-4"><i class="far fa-file-alt"></i> <i>Summary</i></h1><br>
<div class="card-block table-responsive" style="height:575px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo est metus, non rhoncus lorem vehicula posuere. Vivamus nulla ex, vestibulum et blandit sit amet, convallis a quam. Donec eget ornare enim. Fusce finibus ligula lorem. Nunc interdum elit at faucibus laoreet. Nunc vehicula, nisl nec condimentum rhoncus, ante ante auctor nunc, sit amet laoreet nibh est ultrices ex. Maecenas vitae magna ut magna cursus pretium at in nibh. Praesent in porta mi. Sed egestas est nunc, nec fermentum felis tincidunt nec. Ut convallis lorem diam, ut eleifend erat porta at. Phasellus tempor in neque sit amet sagittis. Integer aliquet maximus ante id condimentum. Duis pulvinar vehicula quam, in eleifend lacus auctor nec. Nunc justo risus, bibendum pulvinar arcu ac, posuere egestas eros.</p>
<p>Cras quis libero scelerisque, ultricies leo eu, rhoncus ante. Suspendisse interdum elit vitae tortor mollis sagittis at quis tortor. Quisque sit amet erat eget tortor gravida volutpat nec a ligula. Phasellus enim ipsum, elementum sed volutpat et, lobortis eu purus. Sed gravida eget nibh a molestie. Nam porta dolor mattis, laoreet magna vel, aliquam nunc. Praesent egestas libero id faucibus feugiat. Sed lorem mi, interdum eget dui in, maximus blandit dolor. Ut efficitur tincidunt lectus, efficitur maximus enim egestas ut. Fusce cursus metus metus, lacinia congue ligula egestas in. Vestibulum tempus urna sit amet magna fermentum finibus. Praesent tempus, nibh et tempus fringilla, eros augue congue ante, vel tempor eros dui vel leo. Suspendisse eu mauris sit amet est interdum consectetur. Aliquam quis lectus gravida, ultricies massa in, vestibulum tellus.</p>
<img alt="" class="fr-fir fr-dii" src="https://file.toyhou.se/images/9617224_qvStPuALjgWQRrU.png" style="width: 100px;">
<p>Praesent pharetra, odio ut iaculis laoreet, nisl erat ultrices arcu, quis commodo elit ante vel lorem. Donec tristique eget neque in consequat. Donec semper facilisis lacinia. Maecenas sit amet dignissim dui, at gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo, massa ornare convallis faucibus, nisl nunc ultricies nunc, id cursus magna purus non velit. Suspendisse in erat a tortor blandit blandit nec sed sem. Quisque vitae accumsan turpis. Cras tempus tellus quam, et sollicitudin nibh placerat fermentum. Curabitur at ante vel eros sodales pharetra. Duis ut tortor nulla. Sed dictum metus orci, vel pellentesque purus hendrerit sed. Quisque in tortor finibus, scelerisque tellus id, bibendum arcu. Quisque at ornare quam. Cras sit amet felis eget nunc convallis varius sed ut ante. Morbi mi lacus, elementum id suscipit sagittis, iaculis non nisi.</p>
</div>
</div>
<!-- End of Summary Block --------------------------------------------------------------------------------------------->
<div class="card card-block bg-faded w-25 m-2" style="height:650px">
<h1 style="text-align:center;" class="display-4"><i class="far fa-file-image"></i> <i>Info</i></h1><br>
<!-- Header Image and start of Info --- Try not to use a very thin image. --------------------------------------------->
<div class="card-block mx-auto" style="text-align:center;">
<img src="http://file.toyhou.se/images/5006369_hJ0hYDRHoxYeHA1.png" class="d-block mx-auto rounded">
</div>
<!-- Info Text --- You may need to trim lines if you use a very long header image. ------------------------------------>
<div class="row">
<div class="col-5" style="text-align:right;"><strong>HP: 350/350</strong></div>
<div class="col-7" style="text-align:left;"><strong>MP: 700/780</strong></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/Non-Binary</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</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? Hobbiest?</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, Value, Whatever.</div>
</div>
<p style="text-align:right" class="text-muted font-italic"><small>Art: <a href="https://en.wikipedia.org/wiki/Henohenomoheji">Wikipedia</a></small></p>
</div>
</div>
<!-- End of Stats and Leading Block ------------------------------------------------------------------------------------>
<!-- Quote ------------------------------------------------------------------------------------------------------------->
<div class="card-block mx-auto">
<blockquote class="blockquote">
<p class="mb-0 lead">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<p style="text-align:right" class="text-muted font-italic"><small>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</small></p>
</blockquote>
</div>
<!-- Likes and Dislikes Block ----------------------------------------------------------------------------------------->
<div class="row mx-auto">
<div class="card card-block bg-faded w-25 m-2">
<h1 style="text-align:center;" class="display-4"><i class="fas fa-check"></i> <i>Likes</i></h1><br>
<div class="w-75 mx-auto">
<ul>
<li>Toyhouse</li>
<li>Original Characters</li>
<li>Good Jokes</li>
<li>Yummy Food</li>
</ul>
</div>
</div>
<div class="card card-block bg-faded w-25 m-2">
<h1 style="text-align:center;" class="display-4"><i class="fas fa-times-circle"></i> <i>Dislikes</i> </h1><br>
<div class="w-75 mx-auto">
<ul>
<li>Reddit</li>
<li>Bad Fanart</li>
<li>NSFW Images</li>
<li>Stepping in Mud</li>
</ul>
</div>
</div>
</div>
<!-- Stats Block ------------------------------------------------------------------------------------------------------>
<!-- Image -- Will fit and center itself, not all images will behave but it should work for most. --------------------->
<div class="row mx-auto">
<div>
<div class="card-block d-inline-block m-2 border-0 rounded" style="width:350px; height:350px; background-image:url('http://file.toyhou.se/images/5006369_hJ0hYDRHoxYeHA1.png'); background-size:cover; background-position: center;">
<div class="card-block" style="padding:0;">
<p style="text-align:right;"><span class="badge font-italic" style="background-color:#333;color:#ddd;">Art: <a href="https://en.wikipedia.org/wiki/Henohenomoheji">Wikipedia</a></span></p>
</div>
</div>
</div>
<!-- Stats -- If the text in this is too tall, you may have to adjust the previous image's height manually. ---------->
<div class="card card-block bg-faded m-2 w-50">
<!-- Stats ------------------------------------------------------------------------------------------------------------>
<!-- Use fas for solid and far for unfilled. -------------------------------------------------------------------------->
<!-- You can replace square with circle, star, or other things from font-awesome for custom shapes. ------------------->
<!-- https://fontawesome.com/icons?d=gallery -------------------------------------------------------------------------->
<!-- You can clone chunks if needed, and you can use short-ish words in place of RPG stats. --------------------------->
<!-- Strength, Resiliance, Energy, Willpower, Confidence, etc all make good replacements. ----------------------------->
<!-- If text in this block is too long you may have to change the height for the left image manually. ----------------->
<!-- height:400px; is a good start if it's only a small amount of text. ----------------------------------------------->
<h3 class="display-4" style="text-align:center;"><i class="fas fa-signal"></i> <i>Stats</i></h3><br><br>
<div class="row">
<div class="col-3" style="text-align:right;"><div class="btn btn-link"><strong>HP:</strong></div></div>
<div class="col-3">
<div class="btn btn-secondary" style="width:100px;"><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far 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-secondary" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
<div class="row">
<div class="col-3" style="text-align:right;"><div class="btn btn-link"><strong>STR:</strong></div></div>
<div class="col-3">
<div class="btn btn-secondary" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far 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-secondary" 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-3" style="text-align:right;"><div class="btn btn-link"><strong>INT:</strong></div></div>
<div class="col-3">
<div class="btn btn-secondary" 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-secondary" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="far fa-square"></i></div>
</div>
</div>
<div class="row">
<div class="col-3" style="text-align:right;"><div class="btn btn-link"><strong>DEX:</strong></div></div>
<div class="col-3">
<div class="btn btn-secondary" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas 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-secondary" style="width:100px"><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i><i class="fas fa-square"></i></div>
</div>
</div>
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat orci nec lacinia rhoncus. Cras volutpat pulvinar augue, a volutpat nunc convallis id. Ut at consectetur turpis. Nulla facilisi.
</div>
</div>
<!-- Split Information ------------------------------------------------------------------------------------------------>
<!-- Strengths and Flaws with short discriptions make fantastic alternate options for this section -------------------->
<div class="row mx-auto">
<div class="card card-block bg-faded w-25 m-2">
<!-- Alternate options ------------------------------- <i class="far fa-plus-hexagon"></i> <i>Strengths</i> ----------->
<h1 style="text-align:center;" class="display-4"><i class="far fa-hand-paper"></i> <i>Equipment</i> </h1><br>
<div class="card-block">
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Main Weapon:</strong></div>
<div class="col-8">Butter Knife</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Sub Weapon:</strong></div>
<div class="col-8">Better Knife</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Main Armor:</strong></div>
<div class="col-8">Great Armor</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Sub Armor:</strong></div>
<div class="col-8">Great Leggings</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Accessory:</strong></div>
<div class="col-8">Left Handed Scissors</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Accessory:</strong></div>
<div class="col-8">Right Handed Pen</div>
</div>
</div>
</div>
<div class="card card-block bg-faded w-25 m-2">
<!-- Alternate options ----------------------------------- <i class="far fa-minus-hexagon"></i> <i>Flaws</i> ---------->
<h1 style="text-align:center;" class="display-4"><i class="far fa-hand-rock"></i> <i>Skills</i> </h1><br>
<div class="card-block">
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Honk:</strong></div>
<div class="col-8">Beep Beep; 50MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Pet:</strong></div>
<div class="col-8">Super Effective on Dogs and Cats, Ineffective on Fish and Tamagotchis; 60MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Crushing Hug:</strong></div>
<div class="col-8">Oh no my ribs; 35MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>Eyes Emoji:</strong></div>
<div class="col-8">Scans foe's butt; 10MP</div>
</div>
<div class="row">
<div class="col-4" style="text-align:right;"><strong>HTML:</strong></div>
<div class="col-8">Brought to you by the letter W and the number 3; 20MP</div>
</div>
</div>
</div>
</div>
<!-- Reference -------------------------------------------------------------------------------------------------------->
<div class="card-block w-100 m-2" style="text-align:center;">
<h1 style="text-align:center;" class="display-4"><i class="fas fa-exclamation-circle"></i> <i>Reference</i> </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo est metus, non rhoncus lorem vehicula posuere. Vivamus nulla ex, vestibulum et blandit sit amet, convallis a quam. Donec eget ornare enim. Fusce finibus ligula lorem. Nunc interdum elit at faucibus laoreet. Nunc vehicula, nisl nec condimentum rhoncus, ante ante auctor nunc, sit amet laoreet nibh est ultrices ex. Maecenas vitae magna ut magna cursus pretium at in nibh. Praesent in porta mi. Sed egestas est nunc, nec fermentum felis tincidunt nec. Ut convallis lorem diam, ut eleifend erat porta at. Phasellus tempor in neque sit amet sagittis. Integer aliquet maximus ante id condimentum. Duis pulvinar vehicula quam, in eleifend lacus auctor nec. Nunc justo risus, bibendum pulvinar arcu ac, posuere egestas eros.</p>
<ul style="text-align:left;" class="mx-3">
<li>Important note #1.</li>
<li>Please check the second image for some more important details.</li>
<li>As cool as nude refs are, please draw them with clothes. This isn't the red-light district.</li>
</ul>
<!-- Single Image Reference: Place an end-carrot at the end of this line to enable. ------------------------------------
<img src="https://file.toyhou.se/watermarks/14703681_8mDhaJvHu.png" class="d-block mx-auto rounded m-2">
<!-- End of Single Image Reference ------------------------------------------------------------------------------------>
<!-- Double Image Reference: Delete the end-carrot at the end of this line to Disable. -------------------------------->
<ul class="mb-2 nav nav-tabs row card-header-tabs">
<li class="nav-item offset-4 col-2"><a class="btn btn-secondary btn-block active show" data-toggle="tab" href="#ONE" >Outfits</a></li>
<li class="nav-item col-2"><a class="btn btn-secondary btn-block" data-toggle="tab" href="#TWO">Nude</a></li>
</ul>
<div class="tab-content">
<div id="ONE" class="tab-pane fade in show active">
<img src="https://via.placeholder.com/800x400.png/9cd186/7d4847/?text=800x400+reference+image" class="d-block mx-auto rounded m-2">
</div>
<div id="TWO" class="tab-pane fade in">
<img src="https://via.placeholder.com/600x600.png/272726/cfdbd5/?text=600x600+reference+image" class="d-block mx-auto rounded m-2">
</div>
</div>
<!-- End of Double Image Reference ------------------------------------------------------------------------------------>
<!-- Additional Information ------------------------------------------------------------------------------------------->
<p>Faris is a Bellfox who hails from the desert lands of the Scinan Empire. He is an adult, approximately six feet tall, including his ears. He's thin but muscled, showing a physique that is a balance of power and speed. His base color is a middle grey, with soft black on the insides of his ears, his shoulders, extremities, and hips. His dark markings are framed by white and some areas have flourished dots. On his chest, forearms, palms, legs, and the back of his ears is a white diamond shaped marking cut into three parts. His eyes are naturally grey, but when focusing magic or when his emotions are running high, his eyes glow a pure white light, akin to his charged bell.Cras quis libero scelerisque, ultricies leo eu, rhoncus ante. Suspendisse interdum elit vitae tortor mollis sagittis at quis tortor. Quisque sit amet erat eget tortor gravida volutpat nec a ligula. Phasellus enim ipsum, elementum sed volutpat et, lobortis eu purus. Sed gravida eget nibh a molestie. Nam porta dolor mattis, laoreet magna vel, aliquam nunc. Praesent egestas libero id faucibus feugiat. Sed lorem mi, interdum eget dui in, maximus blandit dolor. Ut efficitur tincidunt lectus, efficitur maximus enim egestas ut. Fusce cursus metus metus, lacinia congue ligula egestas in. Vestibulum tempus urna sit amet magna fermentum finibus. Praesent tempus, nibh et tempus fringilla, eros augue congue ante, vel tempor eros dui vel leo. Suspendisse eu mauris sit amet est interdum consectetur. Aliquam quis lectus gravida, ultricies massa in, vestibulum tellus.</p>
<!-- Credits ---------------------------------------------------------------------------------------------------------->
<p style="text-align:right" class="text-muted font-italic"><small>Image by <a href="https://placeholder.com/">placeholder</a></small></p>
</div>
<!-- End of Entire Reference Section ---------------------------------------------------------------------------------->
<!-- Relationships ---------------------------------------------------------------------------------------------------->
<!-- Feel free to clone entire cards as needed ------------------------------------------------------------------------>
<!-- Use fas for solid hearts and far for unfilled hearts ------------------------------------------------------------->
<!-- "fas fa-heart" for solid "far fa-heart" for unfilled or "fal fa-heart" for thinner lines for unfilled. ----------->
<!-- Square images work best for the profile picture. Any other type will be squashed or stretched. ------------------->
<div class="card card-block w-100 m-2 bg-faded" style="text-align:center;">
<h1 style="text-align:center" class="display-4"><i class="fa fa-heartbeat"></i> <i>Relationships</i> </h1><br>
<!-- Left-aligned card. Delete the carrot at the end of this line to hide the whole card. ---------------------------->
<div class="row m-2">
<div class="col-2 card-block mx-auto">
<a href="#"><img src="https://via.placeholder.com/140x140.png/e5cbc9/7d4847/?text=Smooch+140" class="mx-auto rounded" style="width:140px; height:140px"></a>
</div>
<div class="col-10 card" style="text-align:left;">
<div class="card-block m-2">
<div class="row mx-auto">
<div class="col-3"><p><strong>Name:</strong> Koibito</p></div>
<div class="col-5"><p><strong>Relationship:</strong> The Lovers</p></div>
<div class="col-4"><p><strong>Bond:</strong> <i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i></p></div>
</div>
<br>
<p>Friends to lovers perhaps? Why the heck not. Cras quis libero scelerisque, ultricies leo eu, rhoncus ante. Suspendisse interdum elit vitae tortor mollis sagittis at quis tortor. Quisque sit amet erat eget tortor gravida volutpat nec a ligula. Phasellus enim ipsum, elementum sed volutpat et, lobortis eu purus. Sed gravida eget nibh a molestie.</p>
</div>
</div>
</div>
<!-- End of left-aligned card ----------------------------------------------------------------------------------------->
<!-- Right-aligned card. Delete the carrot at the end of this line to hide the whole card. ---------------------------->
<div class="row m-2">
<div class="col-10 card" style="text-align:right;">
<div class="card-block m-2">
<div class="row mx-auto">
<div class="col-3"><p><strong>Name:</strong> Raibaru</p></div>
<div class="col-5"><p><strong>Relationship:</strong> The Rival</p></div>
<div class="col-4"><p><strong>Bond:</strong> <i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></p></div>
<br>
<p>No bond at all. They barely know each other and don't get along! It's tough working together on a job when both of them are like this. Nam porta dolor mattis, laoreet magna vel, aliquam nunc. Praesent egestas libero id faucibus feugiat. Sed lorem mi, interdum eget dui in, maximus blandit dolor. Ut efficitur tincidunt lectus, efficitur maximus enim egestas ut. Fusce cursus metus metus, lacinia congue ligula egestas in.</p>
</div>
</div>
</div>
<div class="col-2 card-block mx-auto">
<a href="#"><img src="https://via.placeholder.com/200x200.png/3e4543/f5cb5c/?text=Rivals+200" class="mx-auto rounded" style="width:140px; height:140px"></a>
</div>
</div>
<!-- End of Right-aligned card ---------------------------------------------------------------------------------------->
<!-- Left-aligned card. Delete the carrot at the end of this line to hide the whole card. ---------------------------->
<div class="row m-2">
<div class="col-2 card-block mx-auto">
<a href="#"><img src="https://via.placeholder.com/100x100.png/cfdbd5/26b089/?text=100px+stretched" class="mx-auto rounded" style="width:140px; height:140px"></a>
</div>
<div class="col-10 card" style="text-align:left;">
<div class="card-block m-2">
<div class="row mx-auto">
<div class="col-3"><p><strong>Name:</strong> Tomodachi</p></div>
<div class="col-5"><p><strong>Relationship:</strong> The Friendo</p></div>
<div class="col-4"><p><strong>Bond:</strong> <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></p></div>
</div>
<br>
<p>Buddies!!! Vestibulum tempus urna sit amet magna fermentum finibus. Praesent tempus, nibh et tempus fringilla, eros augue congue ante, vel tempor eros dui vel leo. Suspendisse eu mauris sit amet est interdum consectetur. Aliquam quis lectus gravida, ultricies massa in, vestibulum tellus.</p>
</div>
</div>
</div>
<!-- End of left-aligned card ----------------------------------------------------------------------------------------->
<!-- Right-aligned card. Place an end-carrot at the end of this line to reveal the whole card. ------------------------
<div class="row m-2">
<div class="col-10 card" style="text-align:right;">
<div class="card-block m-2">
<div class="row mx-auto">
<div class="col-3"><p><strong>Name:</strong> Filler</p></div>
<div class="col-5"><p><strong>Relationship:</strong> The Filler</p></div>
<div class="col-4"><p><strong>Bond:</strong> <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></p></div>
</div>
<br>
<p>Praesent pharetra, odio ut iaculis laoreet, nisl erat ultrices arcu, quis commodo elit ante vel lorem. Donec tristique eget neque in consequat. Donec semper facilisis lacinia.</p>
</div>
</div>
<div class="col-2 card-block mx-auto">
<a href="#"><img src="https://via.placeholder.com/140x140.png" class="mx-auto rounded-circle" style="width:140px; height:140px"></a>
</div>
</div>
<!-- End of Right-aligned card ---------------------------------------------------------------------------------------->
<!-- Left-aligned card. Place an end-carrot at the end of this line to reveal the whole card. ------------------------
<div class="row m-2">
<div class="col-2 card-block mx-auto">
<a href="#"><img src="https://via.placeholder.com/140x140.png" class="mx-auto rounded" style="width:140px; height:140px"></a>
</div>
<div class="col-10 card" style="text-align:left;">
<div class="card-block m-2">
<div class="row mx-auto">
<div class="col-3"><p><strong>Name:</strong> Fillar</p></div>
<div class="col-5"><p><strong>Relationship:</strong> The Filler</p></div>
<div class="col-4"><p><strong>Bond:</strong> <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></p></div>
</div>
<br>
<p>Maecenas sit amet dignissim dui, at gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo, massa ornare convallis faucibus, nisl nunc ultricies nunc, id cursus magna purus non velit. Suspendisse in erat a tortor blandit blandit nec sed sem.</p>
</div>
</div>
</div>
<!-- End of left-aligned card ----------------------------------------------------------------------------------------->
</div>
<!-- End of relationships section. If you would like to add any additional Sections, do so after this line. ----------->
<!-- Closures --- Do not Delete. -------------------------------------------------------------------------------------->
</div>
<p class="text-center small mb-2"><b>HTML by @pepperly</b>
</div>
