<!--
- 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: 675px;">
<div class="bg-faded rounded-0 mt-4 p-3">
<div class="display-4 d-flex my-auto">
<!-- FIRST QUOTE -->
<i class="text-primary fas fa-quote-left auto-align pull-left"></i>
<span class="m-auto text-center text-muted"><i>
quote...
</i></span>
<i class="text-primary fas fa-quote-right auto-align pull-right"></i>
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-8 col-12 py-2">
<div class="card bg-faded border-0 rounded-0 p-3 d-block overflow-auto" style="height: 318px;">
<!-- ADJECTIVES -->
<div class="text-center text-uppercase text-primary font-italic">
Adjective . Adjective . Adjective
</div>
<!-- SUMMARY/PERSONALITY -->
<hr class="mb-2 mt-2" style="width:50%">
<p class="text-center">
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.
</p>
<hr class="mb-3 mt-3" style="width:100%">
<div class="row no-gutters p-0">
<!-- LIKES -->
<div class="col-6">
<span class="text-primary text-uppercase">
<i class= "far fa-heart pr-1"></i>
Likes
</span>
<ul>
<li class="mb-1">content</li>
<li class="mb-1">content</li>
<li class="mb-1">content</li>
</ul>
</div>
<!-- DISLIKES -->
<div class="col-6">
<span class="text-primary text-uppercase">
<i class="far fa-heart-broken pr-1"></i>
Dislikes
</span>
<ul>
<li class="mb-1">content</li>
<li class="mb-1">content</li>
<li class="mb-1">content</li>
</ul>
</div>
<hr class="mb-3 mt-1" style="width:100%">
<!-- TRIVIA -->
<div class="col-12">
<span class="text-primary text-uppercase">
<i class= "far fa-book-open pr-1"></i>
Trivia
</span>
<ul>
<li class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="mb-1">Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li class="mb-1">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- CHARACTER IMAGE -->
<div class="col-sm-4">
<div style="background:url(
https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png
); height: 100px; background-size: cover; background-position: center; border-radius: 0;" class="ml-2 mt-2 hidden-xs-down">
</div>
<div class="row no-gutters">
<div class="col-12">
<div class="card bg-faded border-0 ml-sm-2 rounded-0 p-3 overflow-auto" style="height: 218px;">
<!-- BASICS / USE FONTAWESOME.COM TO SWITCH OUT SYMBOLS -->
<div class="justify-content-between">
<i class="fa fa-user mt-1 text-primary"></i>
name lastname
</div>
<hr class="w-100 my-2">
<div class="justify-content-between">
<i class="fa fa-cake-candles mt-1 text-primary"></i>
age
</div>
<hr class="w-100 my-2">
<div class="justify-content-between">
<i class="fa fa-earth mt-1 text-primary"></i>
location
</div>
<hr class="w-100 my-2">
<div class="justify-content-between ">
<i class="fa fa-venus-mars mt-1 text-primary"></i>
gender (pro/noun)
</div>
<hr class="w-100 my-2">
<div class="justify-content-between">
<i class="fa fa-dna mt-1 text-primary"></i>
ethnicity
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-faded rounded-0 p-3 mt-2 mt-sm-0">
<div class="display-4 d-flex my-auto">
<!--SECOND QUOTE -->
<i class="text-primary fas fa-quote-left auto-align pull-left"></i>
<span class="m-auto text-center text-muted"><i>
quote...
</i></span>
<i class="text-primary fas fa-quote-right auto-align pull-right"></i>
</div>
</div>
<!-- CREDIT. DO NOT REMOVE OR I WILL RIP OFF YOUR TOES -->
<div class="container faded mt-1 mx-0 px-0 text-right" style="font-size:12px;">
<a target="_blank" class="text-muted tooltipster" href="https://toyhou.se/chemicplosion"><i class="fal fa-code"></i></a>
</div>
</div>
