<!--- 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:50px;"></div>
<div class="card card-outline-primary card-block bg-faded rounded-0 mb-2" style="border-width:5px">
<div class="row justify-content-between">
<div class="col-lg-3 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 200x200px -->
<img src="https://via.placeholder.com/200" style="margin-top:-50px; padding-bottom:20px;" class="img-thumbnail border-0 bg-faded rounded-circle" width="200">
<!-- 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-9 text-primary">
<div class="row justify-content-between display-1">
<div class="col-lg-4 text-left mb-0">
<!-- Put Name Here -->
Name
</div>
<div class="col-lg-4 text-center mb-0">
<!-- Put Age Here -->
Age
</div>
<div class="col-lg-4 text-right mb-0">
<!-- Put Gender Here -->
Gender
</div>
</div>
<hr class="mt-3" style="border:1px dashed;"></hr>
<p class="display-4 text-center" style="text-align: justify;">
<!-- Put Summary Here -->
A short summary about this person. Can be whatever information you deem important.
</p>
</div>
</div>
</div>
<!-------------------------- Header End -------------------------->
<div class="col-12 accordion lg-accordion" id="ACCORDION" role="tablist" aria-multiselectable="true"><div class="row">
<!----------------------- Basics Section ----------------------->
<a class="btn btn-block btn-lg btn-block btn-success d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="ONE" data-toggle="collapse" data-parent="#ACCORDION" href="#A" aria-expanded="false" aria-controls="A" style="width:100">
<i class="fal fa-chevron-circle-down"></i> Basics
</a>
<div id="A" class="w-100 collapse" role="tabpanel" aria-labelledby="#ONE" data-parent="#ACCORDION"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7">
<div class="card card-outline-success card-block bg-faded text-success rounded-0" style="border-width:5px">
<ul class="list-unstyled">
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Full Name Here -->
Full name
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Nickname
</span>
<span class="pull-right mb-0">
<!-- Put Nickname Here -->
Their Nickname
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Age
</span>
<span class="pull-right mb-0">
<!-- Put Age Here -->
Their Age
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Gender
</span>
<span class="pull-right mb-0">
<!-- Put Gender Here -->
Their Gender
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Pronouns
</span>
<span class="pull-right mb-0">
<!-- Put Pronouns Here -->
Their Pronouns
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
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-4 h3">
<span class="mb-0 font-weight-bold">
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-4 h3">
<span class="mb-0 font-weight-bold">
Occupation
</span>
<span class="pull-right mb-0">
<!-- Put Occupation Here -->
Their Occupation
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Residence
</span>
<span class="pull-right mb-0">
<!-- Put Residence Here -->
Their Residence
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Religion
</span>
<span class="pull-right mb-0">
<!-- Put Religion Here -->
Their Religion
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
</div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-success" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!--------------------- Basics Section End --------------------->
<!--------------------- Personality Section --------------------->
<a class="btn btn-block btn-lg btn-block btn-warning d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="TWO" data-toggle="collapse" data-parent="#ACCORDION" href="#B" aria-expanded="false" aria-controls="B" style="width:100">
<i class="fal fa-chevron-circle-down"></i> Personality
</a>
<div id="B" class="w-100 collapse" role="tabpanel" aria-labelledby="#TWO" data-parent="#ACCORDION">
<ul class="nav nav-tabs card-header-tabs row justify-content-between mb-2">
<li class="nav-item col-lg-4 mt-2 mb-2"><a class="btn btn-outline-warning btn-lg btn-block bg-faded display-1 shadow-none rounded-0 active-show" style="border-width:5px" data-toggle="tab" href="#ABOUT">ABOUT</a></li>
<li class="nav-item col-lg-4 mt-2 mb-2"><a class="btn btn-outline-warning btn-lg btn-block bg-faded display-1 shadow-none rounded-0" style="border-width:5px" data-toggle="tab" href="#TRAITS">TRAITS</a></li>
<li class="nav-item col-lg-4 mt-2 mb-2"><a class="btn btn-outline-warning btn-lg btn-block bg-faded display-1 shadow-none rounded-0" style="border-width:5px" data-toggle="tab" href="#INTERESTS">INTERESTS</a></li>
</ul>
<div class="tab-content">
<!----------------- Personality: About Section ----------------->
<div class="tab-pane fade in active show" id="ABOUT"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7"><div class="card card-outline-warning card-block text-warning bg-faded rounded-0" style="border-width:5px">
<ul class="list-unstyled mb-0">
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
MBTI
</span>
<span class="pull-right mb-0">
<!-- Put MBTI Here -->
Their MBTI Type
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Alignment
</span>
<span class="pull-right mb-0">
<!-- Put Alignment Here -->
Their Alignment
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Positive Traits
</span>
<span class="pull-right mb-0">
<!-- Put Positive Traits Here -->
A few positive things about them
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Negative Traits
</span>
<span class="pull-right mb-0">
<!-- Put Negative Traits Here -->
A few negative things about them
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Outlook
</span>
<span class="pull-right mb-0">
<!-- Put Outlook Here -->
Their outlook on life
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Belief
</span>
<span class="pull-right mb-0">
<!-- Put Beliefs Here -->
What they believe is right
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-4 h3">
<span class="mb-0 font-weight-bold">
Strengths
</span>
<span class="pull-right mb-0">
<!-- Put Strengths Here -->
A few strengths
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-0 h3">
<span class="mb-0 font-weight-bold">
Weaknesses
</span>
<span class="pull-right mb-0">
<!-- Put Weaknesses Here -->
A few weaknesses
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
<em class="mt-0 mb-2 h4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
<!-- Paragraphs: Personality -->
<p class="mb-1" style="text-align: justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas. Donec auctor molestie nunc eu gravida. Vestibulum id turpis non ante volutpat tempus. Ut diam sem, euismod in dui vitae, efficitur accumsan magna. Ut consequat augue vel arcu egestas pulvinar. Fusce hendrerit lectus at nisl vestibulum convallis nec ac dui.</p>
<p class="mb-1" style="text-align: justify;">Nam accumsan at est et cursus. 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.</p>
</div></div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-warning" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!--------------- Personality: About Section End --------------->
<!------------------ Personality: Traits Section ------------------>
<div class="tab-pane fade in" id="TRAITS"><div class="mt-2 mb-4">
<div class="card card-outline-warning card-block text-warning bg-faded rounded-0" style="border-width:5px"><div class="row justify-content-between">
<div class="col-lg-6"><ul class="list-unstyled font-weight-bold h4 mb-4">
<!------------ Optimist vs Pessimist ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Optimist
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Pessimist
</span>
</div>
</li>
<!------------ Rude vs Kind ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Rude
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Kind
</span>
</div>
</li>
<!------------ Peaceful vs Chaotic ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Peaceful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Chaotic
</span>
</div>
</li>
<!------------ Playful vs Serious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Playful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Serious
</span>
</div>
</li>
<!------------ Creative vs Copier ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Creative
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Copier
</span>
</div>
</li>
<!------------ Lethargic vs Energetic ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Lethargic
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Energetic
</span>
</div>
</li>
<!------------ Follower vs Leader ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Follower
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Leader
</span>
</div>
</li>
<!------------ Brave vs Coward ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Brave
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Coward
</span>
</div>
</li>
<!------------ Insecure vs Confident ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Insecure
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Confident
</span>
</div>
</li>
</ul></div>
<div class="col-lg-6"><ul class="list-unstyled font-weight-bold h4 mb-4">
<!------------ Intelligent vs Unintelligent ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Intelligent
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Unintelligent
</span>
</div>
</li>
<!------------ Wise vs Mindless ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Wise
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Mindless
</span>
</div>
</li>
<!------------ Forgetful vs Memorious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Forgetful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Memorious
</span>
</div>
</li>
<!------------ Impulsive vs Cautious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Impulsive
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Cautious
</span>
</div>
</li>
<!------------ Neat vs Messy ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Neat
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Messy
</span>
</div>
</li>
<!------------ Curious vs Uninterested ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Curious
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Uninterested
</span>
</div>
</li>
<!------------ Clumsy vs Graceful ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Clumsy
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Graceful
</span>
</div>
</li>
<!------------ Patient vs Impatient ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Patient
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Impatient
</span>
</div>
</li>
<!------------ Liar vs Honest ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right">
Liar
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-warning rounded-0" style="width:50%;"></div></div></div>
<span class="col-3 text-success">
Honest
</span>
</div>
</li>
</ul></div>
</div></div>
</div></div>
<!---------------- Personality: Traits Section End-------------->
<!--------------- Personality: Interests Section --------------->
<div class="tab-pane fade in" id="INTERESTS"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7"><div class="card card-outline-warning card-block text-warning bg-faded rounded-0" style="border-width:5px">
<div class="row justify-content-between">
<!--------------------- Likes Section --------------------->
<div class="col-lg-6">
<p class="display-4 font-weight-bold mb-2"><i class="far fa-check"></i> Likes</p>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!------------------- Likes Section End ------------------->
<!-------------------- Dislikes Section -------------------->
<div class="col-lg-6">
<p class="display-4 font-weight-bold mb-2"><i class="far fa-times"></i> Dislikes</p>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!------------------ Dislikes Section End ------------------>
<!--------------------- Hobbies Section --------------------->
<div class="col-lg-6">
<p class="display-4 font-weight-bold mb-2"><i class="far fa-cog"></i> Hobbies</p>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!------------------- Hobbies Section End ------------------->
<!---------------------- Skills Section ---------------------->
<div class="col-lg-6">
<p class="display-4 font-weight-bold mb-2"><i class="far fa-award"></i> Skills</p>
<div class="bg-warning mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aenean id orci a enim
</li>
</ul>
</div>
<!-------------------- Skills Section End -------------------->
</div>
</div></div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-warning" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!--------------- Personality: Interests Section --------------->
</div>
</div>
<!------------------- Personality Section End ------------------->
<!---------------------- Appearance Section ---------------------->
<a class="btn btn-block btn-lg btn-block btn-danger d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="THREE" data-toggle="collapse" data-parent="#ACCORDION" href="#C" aria-expanded="false" aria-controls="C" style="width:100">
<i class="fal fa-chevron-circle-down"></i> Appearance
</a>
<div id="C" class="w-100 collapse" role="tabpanel" aria-labelledby="#THREE" data-parent="#ACCORDION"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7">
<div class="card card-outline-danger card-block bg-faded text-danger rounded-0" style="border-width:5px">
<ul class="list-unstyled h4 mb-2 mt-2">
<li class="mb-3">
<span class="mb-0 font-weight-bold">
Hair Color
</span>
<span class="pull-right mb-0">
<!-- Put Hair Color Here -->
Their Hair Color
</span>
<div class="bg-danger mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold">
Eye Color
</span>
<span class="pull-right mb-0">
<!-- Put Eye Color Here -->
Their Eye Color
</span>
<div class="bg-danger mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold">
Skin Color
</span>
<span class="pull-right mb-0">
<!-- Put Skin Color Here -->
Their Skin Color
</span>
<div class="bg-danger mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold">
Height
</span>
<span class="pull-right mb-0">
<!-- Put Height Here -->
Their Height
</span>
<div class="bg-danger mt-1" style="height:2px; width:100%;"></div>
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold">
Clothing Style
</span>
<span class="pull-right mb-0">
<!-- Put Clothing Style Here -->
Their Clothing Style
</span>
<div class="bg-danger mt-1" style="height:2px; width:100%;"></div>
</li>
<!------------ Skinny vs Large --------------->
<li class="mb-3 font-weight-bold">
<span class="mb-2">
Skinny
</span>
<span class="pull-right text-success">
Large
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-danger rounded-0" style="width:50%;"></div></div>
</li>
<!------------ Curvy vs Flat --------------->
<li class="mb-3 font-weight-bold">
<span class="mb-2">
Curvy
</span>
<span class="pull-right text-success">
Flat
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-danger rounded-0" style="width:50%;"></div></div>
</li>
<!------------ Frail vs Muscular --------------->
<li class="mb-3 font-weight-bold">
<span class="mb-2">
Frail
</span>
<span class="pull-right text-success">
Muscular
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-danger rounded-0" style="width:50%;"></div></div>
</li>
<!------------ Groomed vs Messy --------------->
<li class="mb-3 font-weight-bold">
<span class="mb-2">
Groomed
</span>
<span class="pull-right text-success">
Messy
</span>
<!-- Bar -->
<div class="progress progress-bar-striped progress-bar-animated bg-success rounded-0 mt-1"><div class="progress-bar progress-bar-striped progress-bar-animated bg-danger rounded-0" style="width:50%;"></div></div>
</li>
</ul>
<!-- Paragraphs: Appearance -->
<p class="mb-1" style="text-align: justify;">Nam elit metus, commodo vitae efficitur at, pulvinar ac justo. Phasellus non mauris sed tortor ullamcorper hendrerit. Aliquam consectetur mi in consectetur convallis. Sed rhoncus ipsum a libero rhoncus, pulvinar facilisis nunc egestas. Donec auctor molestie nunc eu gravida. Vestibulum id turpis non ante volutpat tempus. Ut diam sem, euismod in dui vitae, efficitur accumsan magna. Ut consequat augue vel arcu egestas pulvinar. Fusce hendrerit lectus at nisl vestibulum convallis nec ac dui.</p>
<!---------------------- Design Notes ---------------------->
<p class="display-4 font-weight-bold mt-2 mb-2"><i class="far fa-sticky-note"></i> Design Notes</p>
<div class="bg-danger mb-2" style="height:2px; width:100%;"></div>
<ul class="list-unstyled">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam ac neque et enim interdum dapibus at nec orci.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Aliquam maximus molestie diam, at bibendum eros ullamcorper a.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce at sollicitudin nunc, ac auctor ligula.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget.
</li>
</ul>
<!-------------------- Design Notes End -------------------->
<!-- Put Reference Link Here -->
<a class="btn btn-block btn-lg btn-block btn-danger text-center display-1 shadow-none rounded-0 text-white mb-2" href="LINK" style="width:100">Click for Reference</a>
</div>
</div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-danger" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!-------------------- Appearance Section End -------------------->
<!------------------------- Story Section ------------------------->
<a class="btn btn-block btn-lg btn-block btn-info d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="FOUR" data-toggle="collapse" data-parent="#ACCORDION" href="#D" aria-expanded="false" aria-controls="D" style="width:100">
<i class="fal fa-chevron-circle-down"></i> Story
</a>
<div id="D" class="w-100 collapse" role="tabpanel" aria-labelledby="#FOUR" data-parent="#ACCORDION"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7"><div class="card card-outline-info card-block text-info bg-faded rounded-0" style="border-width:5px">
<p class="display-3 font-weight-bold mb-2"><i class="far fa-book"></i> Backstory</p>
<div class="bg-info mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Backstory -->
<p class="mb-1" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ultricies odio, ac pellentesque leo. Mauris lacus dolor, dignissim quis augue iaculis, sagittis consectetur turpis. In varius eget leo et tempor. Nulla malesuada diam ut ullamcorper blandit. Vestibulum leo eros, fringilla auctor pellentesque sit amet, tristique in quam. Fusce sodales dolor dolor, et laoreet nisi consectetur ut. Nulla volutpat ipsum eu fermentum pellentesque. Donec quis luctus dui. Ut nec orci varius, viverra sapien non, hendrerit lectus. Sed ac posuere nisi. Pellentesque fermentum tempus dolor, semper bibendum ligula lobortis nec. In at libero quis lectus eleifend imperdiet in eu justo. Vestibulum placerat tristique convallis. Vestibulum et facilisis tortor. Curabitur ut mauris vitae urna imperdiet aliquam.</p>
<p class="mb-1" style="text-align: justify;">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper. Nullam quis dapibus ex, rutrum laoreet tellus. Maecenas eget urna turpis. Ut nec lectus molestie leo vulputate dictum. Aenean placerat tincidunt dignissim. Cras sem enim, facilisis in sollicitudin eu, tempor efficitur tellus. Ut cursus felis eu nulla porttitor, ac suscipit lacus tempor.</p>
<p class="mb-1" style="text-align: justify;">In viverra diam metus, eu posuere odio sagittis vel. Quisque aliquam ultricies ligula at maximus. Nam accumsan at est et cursus. 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. Pellentesque egestas in ex tristique viverra. Cras fringilla pharetra imperdiet. Integer mollis massa et ante pretium sodales. Ut euismod finibus diam, at ultrices turpis condimentum id. Donec posuere elit eget ante accumsan finibus.</p>
<p class="display-4 text-right font-weight-bold mt-2 mb-2">Present Day <i class="far fa-flag"></i></p>
<div class="bg-info mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Present Day -->
<p class="mb-1" style="text-align: justify;">Sed condimentum volutpat euismod. Sed luctus ultricies diam id ultrices. Fusce id porta tortor, nec lacinia mauris. Fusce quis euismod dui, sed pellentesque tellus. Nunc sed lobortis lacus, eu sollicitudin velit. Mauris dictum enim a consequat venenatis. Vivamus et metus at lectus fermentum imperdiet ac vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non cursus turpis, sit amet interdum ante. Vivamus sit amet fringilla orci, in posuere ligula.</p>
</div></div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-info" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!----------------------- Story Section End ----------------------->
<!--------------------- Relationships Section --------------------->
<a class="btn btn-block btn-lg btn-block btn-primary d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="FIVE" data-toggle="collapse" data-parent="#ACCORDION" href="#E" aria-expanded="false" aria-controls="E" style="width:100">
<i class="fal fa-chevron-circle-down"></i> Relationships
</a>
<div id="E" class="w-100 collapse" role="tabpanel" aria-labelledby="#FIVE" data-parent="#ACCORDION"><div class="mt-2 mb-4 row justify-content between">
<div class="col-lg-7"><div class="card card-outline-primary card-block bg-faded rounded-0 text-primary" style="border-width:5px">
<!--------------------- First Relationship --------------------->
<div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-1 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 200x200px -->
<img src="https://via.placeholder.com/200" class="img-thumbnail border-0 bg-faded rounded-circle" width="200">
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship
</p>
<div class="mb-2 bg-primary" style="height:2px;width:100%;"></div>
<em class="h3 mb-2"><span class="font-weight-bold">Time known each other:</span>
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p class="mb-1" style="text-align: justify;">Nam accumsan at est et cursus. 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.</p>
<!-- Artist Credit -->
<a class="tooltipster pull-right text-primary" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<!------------------- First Relationship End ------------------->
<!--------------------- Second Relationship --------------------->
<div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-1 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 200x200px -->
<img src="https://via.placeholder.com/200" class="img-thumbnail border-0 bg-faded rounded-circle" width="200">
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship
</p>
<div class="mb-2 bg-primary" style="height:2px;width:100%;"></div>
<em class="h3 mb-2"><span class="font-weight-bold">Time known each other:</span>
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p class="mb-1" style="text-align: justify;">Nam accumsan at est et cursus. 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.</p>
<!-- Artist Credit -->
<a class="tooltipster pull-right text-primary" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<!------------------- Second Relationship End ------------------->
<!--------------------- Third Relationship --------------------->
<div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-1 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 200x200px -->
<img src="https://via.placeholder.com/200" class="img-thumbnail border-0 bg-faded rounded-circle" width="200">
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold" style="text-decoration:none;">Name:</a> Relationship
</p>
<div class="mb-2 bg-primary" style="height:2px;width:100%;"></div>
<em class="h3 mb-2"><span class="font-weight-bold">Time known each other:</span>
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p class="mb-1" style="text-align: justify;">Nam accumsan at est et cursus. 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.</p>
<!-- Artist Credit -->
<a class="tooltipster pull-right text-primary" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<!------------------- Third Relationship End ------------------->
</div></div>
<div class="col-lg-5">
<div class="card" style="border:transparent;">
<div class="card" style="border:transparent;">
<!-- Put Image Here
Recommended to be atleast 460px wide -->
<img src="https://via.placeholder.com/460">
<!-- Artist Credit -->
<a class="tooltipster text-primary" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
</div>
</div></div>
<!--------------------- Relationships Section End --------------------->
</div></div>
<div class="col-12">
<!-- Credits, Don't Remove -->
<a class="tooltipster text-primary pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div></div>