<!--
- Do not remove credit.
+ You may reposition it or change it to be in a different location as long as it links back to me (chemicplosion)
- You may frankenstein, edit, etc
- Make sure WYSIWYG is turned off.
-->
<div class="col-sm-12">
<div class="container my-4" style="max-width: 850px">
<div class="col-sm-7 p-2">
<div class="card bg-faded border-0 p-3">
<!-- NAME -->
<div class="justify-content-between" style="font-size: 25px; color: #A068E2;">
<span class="text-uppercase" style="letter-spacing: 1px; font-weight: 400;">
Name
</span>
<hr class="w-75 my-auto mx-2">
<!-- SYMBOL - USE FONTAWESOME ICONS -->
<i class="fas fa-duck my-auto ml-1" style="color: #A068E2;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-3 col-md-5 p-2">
<!-- FOCAL IMAGE -->
<div class="card rounded border-0 mb-3" style="background-image: url(https://filetandvine.com/wp-content/uploads/2015/10/pix-vertical-placeholder.jpg); background-size: cover; background-position: center; height: 150px;">
</div>
<div class="card bg-faded border-0 p-2 h-100" style="max-height: 217px;">
<!-- BASIC INFO -->
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Name</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Gender</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Age</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Species</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Location</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Height</span>
<span>content</span>
</div>
<div class="justify-content-between pb-1 px-1">
<span class="text-uppercase text-muted">Build</span>
<span>content</span>
</div>
<div class="justify-content-between px-1">
<span class="text-uppercase text-muted">Theme</span>
<span><a href="link" style="color: #A068E2;">link</a></span>
</div>
</div>
</div>
<div class="col-lg-5 col-md-7 p-2">
<div class="card bg-faded border-0 overflow-auto h-100 mt-1 mt-md-0 p-2" style="max-height: 225px;">
<!-- PERSONALITY -->
<span class="text-uppercase" style="letter-spacing: 1px; font-size: 23px; color: #A068E2;">
Personality
</span>
<hr class="w-100 mt-1 mb-2">
<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.
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 class="row no-gutters pt-3">
<div class="col-sm-6 pr-sm-2 pb-3 pb-sm-0">
<div class="p-2 card bg-faded border-0 overflow-auto h-100" style="max-height: 142px;">
<!-- LIKES -->
<span class="text-uppercase" style="letter-spacing: 1px; font-size: 18px; color: #A068E2;">
LIKES
</span>
<hr class="w-100 mt-0 mb-2">
<ul class="fa-ul ml-4">
<li><span class="fa-li"><i class="fas fa-check text-muted"></i></span>Lorem ipsum</li>
<li><span class="fa-li"><i class="fas fa-check text-muted"></i></span>Dolor sit amet</li>
<li><span class="fa-li"><i class="fas fa-check text-muted"></i></span>Consectetur</li>
<li><span class="fa-li"><i class="fas fa-check text-muted"></i></span>Scing elit duis</li>
</ul>
</div>
</div>
<div class="col-sm-6 pl-sm-2">
<div class="p-2 card bg-faded border-0 overflow-auto" style="max-height: 142px;">
<!-- DISLIKES -->
<span class="text-uppercase" style="letter-spacing: 1px; font-size: 18px; color: #A068E2;">
DISLIKES
</span>
<hr class="w-100 mt-0 mb-2">
<ul class="fa-ul ml-4">
<li><span class="fa-li"><i class="fas fa-x text-muted"></i></span>Lorem ipsum</li>
<li><span class="fa-li"><i class="fas fa-x text-muted"></i></span>Dolor sit amet</li>
<li><span class="fa-li"><i class="fas fa-x text-muted"></i></span>Consectetur</li>
<li><span class="fa-li"><i class="fas fa-x text-muted"></i></span>Scing elit duis</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 p-2">
<div class="p-2 card bg-faded border-0 overflow-auto" style="max-height: 383px;">
<!-- HISTORY -->
<span class="text-uppercase" style="letter-spacing: 1px; font-size: 23px; color: #A068E2;">
History
</span>
<hr class="w-100 mt-1 mb-2">
<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.</p>
<p>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. ac finibus eros, donec viverra.</p>
</div>
</div>
</div>
<!-- CREDIT. DO NOT REMOVE OR I WILL RIP OFF YOUR TOES -->
<div class="container faded px-2 mt-n1 text-right" style="font-size:12px; max-width:850px;">
<a target="_blank" class="text-muted tooltipster" href="https://toyhou.se/chemicplosion"><i class="fal fa-code"></i></a>
</div>
</div>
</div>
