<!--
- 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="container" style="max-width:700px;">
<div class="row no-gutters">
<div class="col-lg-10 mb-5 m-lg-0">
<div class="card bg-faded border-0 px-3 py-3" style="max-height: 100px; overflow-x:auto; margin-top: 35px;">
<div class="d-flex text-primary text-uppercase pr-lg-3" style="font-size: 30px; font-weight: 300;">
<!-- SYMBOL - USE FONTAWESOME ICONS -->
<i class="fas fa-cocktail mt-2"></i>
<!-- NAME -->
<hr class="w-100 my-auto mx-2">
<span class="pull-right mr-lg-4 text-nowrap" style="letter-spacing: 1px;">
Character Name
</span>
</div>
</div>
</div>
<div class="col-lg-2 hidden-sm-down ml-lg-n5">
<!-- FOCAL IMAGE -->
<img src=
"https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
style="max-width: 150px; position: relative; z-index: 3;" class="rounded-circle card mx-auto border-0">
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-10 pr-lg-4">
<div class="card bg-faded border-0 mr-lg-2 px-3 p-2" style="max-height: 289px; margin-top: -25px; overflow: auto;">
<div class="tab-content">
<div class="tab-pane fade active show" data-toggle="tab" id="ONE">
<div class="text-muted text-uppercase d-flex" style="font-size: 20px; font-weight: 300;">
BASICS
<hr style="width:75%">
<i class="fal fa-info-circle mt-2"></i>
</div>
<div class="row no-gutters">
<div class="col-sm-6 ml-2 mr-3 pt-1">
<!-- PERSONALITY BLURB, KEEP IT TO A FEW SENTENCES -->
<p style="text-indent: 20px;">Lorem ipsum dolor sit amet, consec adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Do accu tempor lacus, venenatis elit non. Porta eros et velit blandit dapibus ade. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales.</p>
</div>
<div class="col-sm-5 p-1">
<!-- BASIC INFO -->
<p class="justify-content-between d-flex mb-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Gender</span>
<span>content</span>
</p>
<p class="justify-content-between d-flex my-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Age</span>
<span>content</span>
</p>
<p class="justify-content-between d-flex my-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Species</span>
<span>content</span>
</p>
<p class="justify-content-between d-flex my-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Location</span>
<span>content</span>
</p>
<p class="justify-content-between d-flex my-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Height</span>
<span>content</span>
</p>
<p class="justify-content-between d-flex my-1">
<span class="text-uppercase text-muted" style="letter-spacing: 1px;">Theme</span>
<span><a href="link">link</a></span>
</p>
</div>
</div>
<div class="col-sm-13">
<hr class="my-2" style="width:100%;">
<!-- QUOTE -->
<p class="text-center text-muted" style="letter-spacing: 1px;">
"You know, I used to be a brawny fella back in my day... Tuesday! Just kidding. That's a goof for ya."
</p>
<hr class="my-2" style="width:100%;">
</div>
<div class="row no-gutters">
<div class="col-sm-3">
<p class="text-center text-muted text-uppercase" style="letter-spacing: 1px; font-size: 18px;">Likes</p>
<hr class="mb-2 mt-1" style="width: 100%">
<ul class="fa-ul" style="list-style: none; margin-left: 25px;">
<li><span class="fa-li"><i class="fal fa-check text-muted"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-check text-muted"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-check text-muted"></i></span>Content</li>
</ul>
</div>
<div class="col-sm-3">
<p class="text-muted text-uppercase text-center" style="letter-spacing: 1px; font-size: 18px;">Dislikes</p>
<hr class="mb-2 mt-1" style="width: 100%">
<ul class="fa-ul" style="list-style: none; margin-left: 20px;">
<li><span class="fa-li"><i class="fal fa-times text-muted"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-times text-muted"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-times text-muted"></i></span>Content</li>
</ul>
</div>
<div class="col-sm-6">
<p class="text-center text-muted text-uppercase" style="letter-spacing: 1px; font-size: 18px;">Trivia</p>
<hr class="mb-2 mt-1" style="width: 100%">
<ul style="list-style: inside; padding-left: 0px;">
<li>Lorem ipsum dolor sit elit amet, consectetur adipiscing.</li>
<li>Duis sollicitudin elit sed.</li>
<li>Tellus blandit viverra sed eget.</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" data-toggle="tab" id="TWO">
<div class="text-muted text-uppercase d-flex mb-1" style="font-size: 20px; font-weight: 300;">
History
<hr style="width:70%">
<i class="fal fa-book-open mt-2"></i>
</div>
<!-- HISTORY TAB, MAKE SURE TO COPY THE TEXT INDENT IF YOU WANT IT ON NEW PARAGRAPHS. IF NO INDENT IS WANTED, REMOVE style="text-indent: 20px;" -->
<p style="text-indent: 20px;">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.
<br>Consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
<p style="text-indent: 20px;">Amet 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 class="tab-pane fade" data-toggle="tab" id="THREE">
<div class="text-muted text-uppercase d-flex mb-2" style="font-size: 20px; font-weight: 300;">
RELATIONSHIPS
<hr style="width:60%">
<i class="fal fa-user-friends mt-2"></i>
</div>
<div class="row no-gutters">
<div class="col-md-3 order-1 text-center mr-md-4">
<!-- FIRST RELATIONSHIP -->
<img src=
"https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
style="max-width: 125px; border-radius: 10px; border: 1px solid" class="text-primary mt-3 mt-md-0 mb-3">
</div>
<div class="col-md-8 order-2">
<div class="mb-1 text-uppercase text-primary d-flex text-nowrap justify-content-between" style="letter-spacing: 1px; font-size: 18px;">
<a href="LINK HERE">Name</a>
<hr class="w-100 my-auto mx-2">
<span class="text-lowercase text-muted" style="font-size: 18px; font-weight: 10; letter-spacing: -.5px;">relationship</span>
</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.</p>
</div>
<!-- SECOND RELATIONSHIP -->
<div class="col-md-3 order-3 order-md-4 text-center ml-md-4">
<img src=
"https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
style="max-width: 125px; border-radius: 10px; border: 1px solid" class="text-primary mt-3 mt-md-0 mb-3">
</div>
<div class="col-md-8 order-4 order-md-3">
<div class="mb-1 text-uppercase text-primary d-flex text-nowrap justify-content-between" style="letter-spacing: 1px; font-size: 18px;">
<a href="LINK HERE">Name</a>
<hr class="w-100 my-auto mx-2">
<span class="text-lowercase text-muted" style="font-size: 18px; font-weight: 10; letter-spacing: -.5px;">relationship</span>
</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.</p>
</div>
<!-- THIRD RELATIONSHIP -->
<div class="col-md-3 order-5 text-center mr-md-4">
<img src=
"https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
style="max-width: 125px; border-radius: 10px; border: 1px solid" class="text-primary mt-3 mt-md-0 mb-3">
</div>
<div class="col-md-8 order-6">
<div class="mb-1 text-uppercase text-primary text-nowrap d-flex justify-content-between" style="letter-spacing: 1px; font-size: 18px;">
<a href="LINK HERE">Name</a>
<hr class="w-100 my-auto mx-2">
<span class="text-lowercase text-muted" style="font-size: 18px; font-weight: 10; letter-spacing: -.5px;">relationship</span>
</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.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-2" style="max-width: 700px;">
<ul class="nav nav-pills row no-gutters ml-lg-n4">
<li class="nav-item col-6 col-sm-4 col-lg-8 pr-1 p-lg-0 mt-2">
<a class="card d-flex bg-faded border-0 btn nav-link active w-100" style="font-size:25px; min-width: 100px; min-height: 80px;" data-toggle="tab" href="#ONE">
<i class="far fa-info-circle m-auto"></i>
</a>
</li>
<li class="nav-item col-6 col-sm-4 col-lg-8 pl-1 pr-sm-1 p-lg-0 mt-2">
<a class="card d-flex bg-faded border-0 btn nav-link w-100" style="font-size:25px; min-width: 100px; min-height: 80px;" data-toggle="tab" href="#TWO">
<i class="far fa-book-open m-auto"></i>
</a>
</li>
<li class="nav-item col-12 col-sm-4 col-lg-8 pl-sm-1 p-lg-0 mt-2">
<a class="card d-flex bg-faded border-0 btn nav-link w-100" style="font-size:25px; min-width: 100px; min-height: 80px;" data-toggle="tab" href="#THREE">
<i class="far fa-user-friends m-auto"></i>
</a>
</li>
</ul>
</div>
<!-- CREDIT. DO NOT REMOVE OR I WILL RIP OFF YOUR TOES -->
<div class="container faded p-1 text-right" style="font-size:12px; max-width:600px;">
<a target="_blank" class="text-muted tooltipster" href="https://toyhou.se/chemicplosion"><i class="fal fa-code"></i></a>
</div>
</div>
</div>
