<!--- Notes ---
- This profile uses theme colors, meaning the color of each item will change depending on the theme the user viewing the profile has selected.
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="row">
<!--------------------------- Header --------------------------->
<div class="col-12 panel card-block bg-primary card-outline-primary rounded-0 rounded-0" style="height:125px;">
<p class="display-3 text-white text-center font-weight-bold" style="margin-top:25px;letter-spacing:5px">
<!-- Put Title Here -->
A short title
</p>
</div>
<div class="card card-outline-primary card-block bg-faded rounded-0 mb-4" style="border-width:5px">
<div class="row justify-content-center">
<div class="col-lg-3 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 250x250 -->
<img src="https://via.placeholder.com/250" style="margin-top:-50px; padding-bottom:25px;" class="img-thumbnail border-0 bg-faded rounded-circle" width="250">
<!-- Artist Credit -->
<a class="tooltipster text-primary text-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:0px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="col-lg-4">
<ul class="list-unstyled text-primary font-weight-bold" style="font-size:20px;">
<li class="mb-3">
<span class="mb-0 text-uppercase">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Name Here -->
Full Name
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="mb-0 text-uppercase">
Age
</span>
<span class="pull-right mb-0">
<!-- Put Age Here -->
Their Age
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li>
<span class="mb-0 text-uppercase">
Gender
</span>
<span class="pull-right mb-0">
<!-- Put Gender Here -->
Their Gender
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
</div>
</div>
<!--------------------------- Header End --------------------------->
<!-------------------------- About Section -------------------------->
<a data-toggle="collapse" href="#collapse1" class="col-12 btn btn-block btn-lg btn-success d-inline text-left text-center display-1 shadow-none rounded-0 text-white p-3" style="letter-spacing:7px">
<i class="fal fa-chevron-circle-down"></i> About
</a>
<div id="collapse1" class="w-100 panel-collpase collapse">
<div class="card card-block bg-faded card-outline-success rounded-0" style="border-width:5px">
<div class="row justify-content-between">
<div class="col-lg-5">
<ul class="list-unstyled font-weight-bold mb-4">
<!-- Introvert vs Extrovert -->
<li class="mb-3">
<span class="text-warning mb-2">
Introvert
</span>
<span class="pull-right text-danger">
Extrovert
</span>
<!-- Bar -->
<div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
<!-- Intuitive vs Observant -->
<li class="mb-3">
<span class="text-warning mb-2">
Intuitive
</span>
<span class="pull-right text-danger">
Observant
</span>
<!-- Bar -->
<div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
<!-- Thinking vs Feeling -->
<li class="mb-3">
<span class="text-warning mb-2">
Thinking
</span>
<span class="pull-right text-danger">
Feeling
</span>
<!-- Bar -->
<div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
<!-- Judging vs Prospecting -->
<li class="mb-3">
<span class="text-warning mb-2">
Judging
</span>
<span class="pull-right text-danger">
Prospecting
</span>
<!-- Bar -->
<div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
<!-- Assertive vs Turbulent -->
<li class="mb-3">
<span class="text-warning mb-2">
Assertive
</span>
<span class="pull-right text-danger">
Turbulent
</span>
<!-- Bar -->
<div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
</ul>
<div class="card card-block card-success text-white display-4 rounded-0 mb-4">
<em style="text-align: justify;">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
</div>
</div>
<div class="col-lg-7 mb-4">
<p class="display-4 text-success text-right font-weight-bold mb-2" style="letter-spacing:5px">Personality <i class="fa fa-cog"></i></p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Personality -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus mi, euismod id odio vitae, ullamcorper interdum tortor. Duis tempor, ex vel porta placerat, mi odio finibus ex, eget efficitur odio ex at turpis. Integer vitae elit felis. Phasellus fermentum lacinia ipsum, eu blandit arcu vulputate quis. Morbi facilisis, velit et feugiat gravida, nisi dui volutpat nisi, in varius tellus nisl sed mi. Sed pellentesque convallis enim nec vulputate. Aenean molestie condimentum tellus, nec semper magna tempor sed. Sed et dolor non lectus convallis facilisis. Suspendisse nulla lorem, ornare a commodo vitae, molestie vitae ipsum. Integer at enim nec augue feugiat condimentum sed at felis.</p>
<p class="mb-2" style="text-align: justify;">In tellus turpis, fringilla quis quam a, ornare volutpat metus. Cras imperdiet lectus sit amet tempus laoreet. Sed dignissim nisi ac ipsum gravida, nec bibendum lacus gravida. Maecenas eget condimentum enim, nec ultricies nunc. Donec sit amet accumsan lacus.</p>
<p class="display-4 text-success font-weight-bold mb-2" style="letter-spacing:5px"><i class="fa fa-cog"></i> Appearance</p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Appearance -->
<p class="mb-2" style="text-align: justify;">Sed id felis ut velit gravida ullamcorper nec nec sapien. Donec imperdiet ut libero non dictum. Integer sed nisl placerat, tincidunt arcu et, aliquet sem. Nullam feugiat velit sit amet ligula lacinia accumsan. Sed feugiat accumsan dui sed interdum. Nullam urna odio, pretium non tellus quis, rutrum auctor augue. Vivamus orci sem, pretium ac dictum et, malesuada vel arcu. Nulla eget commodo tortor. Aliquam sagittis tincidunt dapibus. Cras pretium nec lacus sit amet tempus.</p>
</div>
</div>
<a data-toggle="collapse" href="#collapse2" class="col-12 btn btn-block btn-lg btn-warning d-inline text-left text-center display-1 shadow-none rounded-0 text-white p-3" style="letter-spacing:7px">
<i class="fal fa-chevron-circle-down"></i> Details
</a>
<div id="collapse2" class="w-100 panel-collpase collapse">
<div class="card card-block card-outline-warning text-warning rounded-0" style="border-width:3px">
<div class="row justify-content-between">
<div class="col-lg-5">
<ul class="list-unstyled font-weight-bold">
<li class="mb-3">
<span class="mb-0 text-uppercase">
Ethnicity
</span>
<span class="pull-right mb-0">
<!-- Put Ethnicity Here -->
Their Ethnicity
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="mb-0 text-uppercase">
Sexuality
</span>
<span class="pull-right mb-0">
<!-- Put Sexuality Here -->
Their Sexuality
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="mb-0 text-uppercase">
Occupation
</span>
<span class="pull-right mb-0">
<!-- Put Occupation Here -->
Occupation
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="mb-0 text-uppercase">
Residence
</span>
<span class="pull-right mb-0">
<!-- Put Residence Here -->
Their Residence
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
<!------------------------ Trivia Section ------------------------>
<div class="col-lg-7">
<ul class="list-unstyled" style="text-align: justify;">
<li class="mb-2"><i class="far fa-arrow-right"></i>
Write bits of trivia / other information in this section.
</li>
<li class="mb-2"><i class="far fa-arrow-right"></i>
Sed ac ligula consectetur, feugiat mi ac, eleifend nisl. Nam scelerisque convallis euismod. Nam tincidunt risus eget blandit luctus.
</li>
<li class="mb-2"><i class="far fa-arrow-right"></i>
Etiam consequat viverra ex, ut hendrerit dolor auctor in. Integer feugiat feugiat molestie.
</li>
<li class="mb-2"><i class="far fa-arrow-right"></i>
Nullam mollis pharetra ipsum nec ultricies.
</li>
<li class="mb-2"><i class="far fa-arrow-right"></i>
Maecenas aliquet porttitor vehicula. Donec tristique porta arcu nec cursus.
</li>
<li class="mb-2"><i class="far fa-arrow-right"></i>
Ut malesuada lectus laoreet lorem pulvinar, in suscipit erat lacinia.
</li>
</ul>
</div>
<!---------------------- Trivia Section End ---------------------->
</div>
</div>
</div>
<div class="row justify-content-between mb-4">
<!-------------------------- Likes Section -------------------------->
<div class="col-lg-6 mt-4">
<div class="card card-danger card-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px">
Likes
</div>
<div class="card card-block card-outline-danger text-danger font-weight-bold rounded-0" style="border-width:3px">
<ul class="list-unstyled">
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
</ul>
</div>
</div>
<!------------------------ Likes Section End ------------------------>
<!------------------------- Dislikes Section ------------------------->
<div class="col-lg-6 mt-4">
<div class="card card-danger card-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px">
Dislikes
</div>
<div class="card card-block card-outline-danger text-danger font-weight-bold rounded-0" style="border-width:3px">
<ul class="list-unstyled">
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
</ul>
</div>
</div>
<!----------------------- Dislikes Section End ----------------------->
</div>
<p class="display-4 text-success text-right font-weight-bold mb-2" style="letter-spacing:5px">Backstory <i class="fa fa-cog"></i></p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Backstory -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus mi, euismod id odio vitae, ullamcorper interdum tortor. Duis tempor, ex vel porta placerat, mi odio finibus ex, eget efficitur odio ex at turpis. Integer vitae elit felis. Phasellus fermentum lacinia ipsum, eu blandit arcu vulputate quis. Morbi facilisis, velit et feugiat gravida, nisi dui volutpat nisi, in varius tellus nisl sed mi. Sed pellentesque convallis enim nec vulputate. Aenean molestie condimentum tellus, nec semper magna tempor sed. Sed et dolor non lectus convallis facilisis. Suspendisse nulla lorem, ornare a commodo vitae, molestie vitae ipsum. Integer at enim nec augue feugiat condimentum sed at felis.</p>
<p class="mb-2" style="text-align: justify;">Sed id felis ut velit gravida ullamcorper nec nec sapien. Donec imperdiet ut libero non dictum. Integer sed nisl placerat, tincidunt arcu et, aliquet sem. Nullam feugiat velit sit amet ligula lacinia accumsan. Sed feugiat accumsan dui sed interdum. Nullam urna odio, pretium non tellus quis, rutrum auctor augue. Vivamus orci sem, pretium ac dictum et, malesuada vel arcu. Nulla eget commodo tortor. Aliquam sagittis tincidunt dapibus. Cras pretium nec lacus sit amet tempus.</p>
<p class="display-4 text-success font-weight-bold mb-2" style="letter-spacing:5px"><i class="fa fa-cog"></i> Relations </p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<div class="row justify-content-between">
<!--------------------- First Relationship --------------------->
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<p style="text-align: justify;"><a href="LINK" class="text-success font-weight-bold" style="text-decoration:none;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.
</p>
</div>
<!------------------- First Relationship End ------------------->
<!--------------------- Second Relationship --------------------->
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<p style="text-align: justify;"><a href="LINK" class="text-success font-weight-bold" style="text-decoration:none;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa. Nam elementum egestas semper.
</p>
</div>
<!------------------- Second Relationship End ------------------->
<!--------------------- Third Relationship --------------------->
<div class="col-lg-4">
<!-- Character Name and Profile Link -->
<p style="text-align: justify;"><a href="LINK" class="text-success font-weight-bold" style="text-decoration:none;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae.
</p>
</div>
<!------------------- Third Relationship End ------------------->
</div>
</div>
</div>
<!------------------------ About Section End ------------------------>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster text-success pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>