<!--- Notes ---
- This profile uses custom colors, meaning you can change the colors to your liking.
- Use ctrl+f to find and replace each color
- Color 1: #84A36A
- Color 2: #FF8B89
- Color 3: #86C0C9
- Color 4: #746586
- 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 rounded-0 rounded-0" style="height:125px;background-color:#84A36A;border-color:#84A36A;">
<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-block bg-faded rounded-0 mb-4" style="border-width:5px;border-color:#84A36A;">
<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-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:0px; color:#84A36A" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="col-lg-4">
<ul class="list-unstyled font-weight-bold" style="font-size:20px; color:#84A36A;">
<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 d-inline text-left text-center display-1 shadow-none rounded-0 text-white p-3" style="letter-spacing:7px;background-color:#FF8B89;border-color:#FF8B89;">
<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 rounded-0" style="border-width:5px;border-color:#FF8B89;">
<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="mb-2" style="color:#86C0C9;">
Introvert
</span>
<span class="pull-right" style="color:#746586;">
Extrovert
</span>
<!-- Bar -->
<div class="progress rounded-0" style="background-color:#746586;"><div class="progress-bar rounded-0" style="width:50%;background-color:#86C0C9;"></div></div>
</li>
<!-- Intuitive vs Observant -->
<li class="mb-3">
<span class="mb-2" style="color:#86C0C9;">
Intuitive
</span>
<span class="pull-right" style="color:#746586;">
Observant
</span>
<!-- Bar -->
<div class="progress rounded-0" style="background-color:#746586;"><div class="progress-bar rounded-0" style="width:50%;background-color:#86C0C9;"></div></div>
</li>
<!-- Thinking vs Feeling -->
<li class="mb-3">
<span class="mb-2" style="color:#86C0C9;">
Thinking
</span>
<span class="pull-right" style="color:#746586;">
Feeling
</span>
<!-- Bar -->
<div class="progress rounded-0" style="background-color:#746586;"><div class="progress-bar rounded-0" style="width:50%;background-color:#86C0C9;"></div></div>
</li>
<!-- Judging vs Prospecting -->
<li class="mb-3">
<span class="mb-2" style="color:#86C0C9;">
Judging
</span>
<span class="pull-right" style="color:#746586;">
Prospecting
</span>
<!-- Bar -->
<div class="progress rounded-0" style="background-color:#746586;"><div class="progress-bar rounded-0" style="width:50%;background-color:#86C0C9;"></div></div>
</li>
<!-- Assertive vs Turbulent -->
<li class="mb-3">
<span class="mb-2" style="color:#86C0C9;">
Assertive
</span>
<span class="pull-right" style="color:#746586;">
Turbulent
</span>
<!-- Bar -->
<div class="progress rounded-0" style="background-color:#746586;"><div class="progress-bar rounded-0" style="width:50%;background-color:#86C0C9;"></div></div>
</li>
</ul>
<div class="card card-block text-white display-4 rounded-0 mb-4" style="background-color:#FF8B89;border-color:#FF8B89;">
<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-right font-weight-bold mb-2" style="letter-spacing:5px;color:#FF8B89;">Personality <i class="fa fa-cog"></i></p>
<div class="mb-2" style="height:2px; width:100%;background-color:#FF8B89;"></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 font-weight-bold mb-2" style="letter-spacing:5px;color:#FF8B89;"><i class="fa fa-cog"></i> Appearance</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#FF8B89;"></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 d-inline text-left text-center display-1 shadow-none rounded-0 text-white p-3" style="letter-spacing:7px; background-color:#86C0C9; border-color:#86C0C9;">
<i class="fal fa-chevron-circle-down"></i> Details
</a>
<div id="collapse2" class="w-100 panel-collpase collapse">
<div class="card card-block bg-faded rounded-0" style="border-width:3px; border-color:#86C0C9; color:#86C0C9;">
<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-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px; background-color:#746586; border-color:#746586;">
Likes
</div>
<div class="card card-block bg-faded font-weight-bold rounded-0" style="border-width:3px; border-color:#746586; color:#746586;">
<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-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px; background-color:#746586; border-color:#746586;">
Dislikes
</div>
<div class="card card-block bg-faded font-weight-bold rounded-0" style="border-width:3px; border-color:#746586; color:#746586;">
<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-right font-weight-bold mb-2" style="letter-spacing:5px; color:#FF8B89;">Backstory <i class="fa fa-cog"></i></p>
<div class="mb-2" style="height:2px; width:100%; background-color:#FF8B89;"></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 font-weight-bold mb-2" style="letter-spacing:5px; color:#FF8B89;"><i class="fa fa-cog"></i> Relations </p>
<div class="mb-2" style="height:2px; width:100%; background-color:#FF8B89;"></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="font-weight-bold" style="color:#FF8B89; 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="font-weight-bold" style="color:#FF8B89; 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="font-weight-bold" style="color:#FF8B89; 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 pull-right" style="color:#FF8B89" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>