<!--- 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: 54, 63, 99
- Color 2: 45, 53, 82
- Color 3: 217, 179, 255
- Color 4: 179, 106, 251
- Color 5: 102, 194, 255
- Color 6: 25, 139, 204
- Color 7: #d9b3ff
- Color 8: #66c2ff
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<!-- Background Image -->
<div class="container-fluid" style="background:url(https://lp-cms-production.imgix.net/2019-06/12dec8938220093eb7f1fdb8a9ce40b8-the-rocky-mountains.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4) fixed;"><div class="card-block"><div class="row justify-content-between mt-2">
<!---------------------------- Side Bar ---------------------------->
<div class="col-lg-3">
<div class="card card-block rounded-circle mb-4" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<div class="text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 300x300px -->
<img src="https://via.placeholder.com/300" class="img-thumbnail bg-transparent border-0 rounded-circle mb-0">
</div>
<!-- Artist Credit -->
<a class="tooltipster text-white text-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:0px;" title="art by NAME">
<i class="fa-thin fa-paintbrush"></i>
</a>
</div>
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<ul class="list-unstyled" style="color:#d9b3ff;">
<li class="mb-3 text-center">
<span class="mb-0 display-2">
<!-- Put Name Here -->
Name
</span>
<hr class="mt-2" style="border:1px solid;"></hr>
</li>
<!-- Summary -->
<li class="mb-0 display-5" style="text-align: justify;">A short summary about this person. Can be whatever information you deem important. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
</div>
</div>
<!-------------------------- Side Bar End -------------------------->
<div class="col-lg-9">
<ul class="nav nav-tabs card-header-tabs row justify-content-between mb-2">
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#ONE">About</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#TWO">Personality</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#THREE">Appearance</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#FOUR">Relationships</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#FIVE">Story</a></li>
<li class="nav-item col-lg-4 mb-4"><a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);" data-toggle="tab" href="#SIX">Gallery</a></li>
</ul>
<div class="tab-content">
<!------------------------- About Section ------------------------->
<div class="tab-pane fade in active show" id="ONE">
<div class="row justify-content-between">
<div class="col-lg-7">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-list"></i> Basics</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled display-4" style="color:#d9b3ff;">
<li class="mb-2">
<span class="mb-0">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Full Name Here -->
Full Name
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Nickname
</span>
<span class="pull-right mb-0">
<!-- Put Nickname Here -->
Their Nickname
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Age
</span>
<span class="pull-right mb-0">
<!-- Put Age Here -->
Their Age
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Gender
</span>
<span class="pull-right mb-0">
<!-- Put Gender Here -->
Their Gender
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Pronouns
</span>
<span class="pull-right mb-0">
<!-- Put Pronouns Here -->
Their Pronouns
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Sexuality
</span>
<span class="pull-right mb-0">
<!-- Put Sexuality Here -->
Their Sexuality
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Ethnicity
</span>
<span class="pull-right mb-0">
<!-- Put Ethnicity Here -->
Their Ethnicity
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Occupation
</span>
<span class="pull-right mb-0">
<!-- Put Occupation Here -->
Their Occupation
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Residence
</span>
<span class="pull-right mb-0">
<!-- Put Residence Here -->
Their Residence
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li><li class="mb-2">
<span class="mb-0">
Religion
</span>
<span class="pull-right mb-0">
<!-- Put Religion Here -->
Their Religion
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
</ul>
</div>
</div>
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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 class="card card-block text-white text-center rounded-0 mb-2" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);"><em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></div>
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-address-card"></i> About</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<!-- Paragraphs: About -->
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque finibus scelerisque pharetra. In vulputate iaculis pharetra. Ut mattis, mauris eget bibendum finibus, libero magna auctor tellus, ut blandit odio ante non urna. Ut at est accumsan, pharetra erat ac, consectetur turpis. Vestibulum sit amet turpis lectus. Integer semper aliquet est. Maecenas venenatis ultrices nisl eu porttitor. Maecenas aliquam sapien eu arcu molestie maximus. Donec quam metus, tempor nec eleifend non, accumsan id metus.</p>
</div>
</div>
<!----------------------- About Section End ----------------------->
<!---------------------- Personality Section ---------------------->
<div class="tab-pane fade in" id="TWO">
<div class="col-12 accordion lg-accordion" id="ACCORDION" role="tablist" aria-multiselectable="true">
<div class="row">
<!-------------------- Personality: Details -------------------->
<a class="btn btn-block btn-lg btn-block d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="1" data-toggle="collapse" data-parent="#ACCORDION" href="#A" aria-expanded="false" aria-controls="A" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);">
Details
</a>
<div id="A" class="w-100 collapse active show" role="tabpanel" aria-labelledby="#1" data-parent="#ACCORDION">
<div class="row justify-content-between">
<div class="col-lg-7">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-list"></i> Basics</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled display-4" style="color:#d9b3ff;">
<li class="mb-2">
<span class="mb-0">
MBTI
</span>
<span class="pull-right mb-0">
<!-- Put MBTI Here -->
Their MBTI Type
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Alignment
</span>
<span class="pull-right mb-0">
<!-- Put Alignment Here -->
Their Moral Alignment
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Brain Dominance
</span>
<span class="pull-right mb-0">
<!-- Put Brain Dominance Here -->
Left vs Right
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Emotion
</span>
<span class="pull-right mb-0">
<!-- Put Emotion Here -->
Most Common Mood(s)
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Outlook
</span>
<span class="pull-right mb-0">
<!-- Put Outlook Here -->
Their outlook on life
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Belief
</span>
<span class="pull-right mb-0">
<!-- Put Belief Here -->
What they believe is right
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
</ul>
</div>
</div>
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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 class="card card-block text-white text-center rounded-0 mb-2" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);"><em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></div>
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-user"></i> Personality</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<!-- Paragraphs: Personality -->
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque finibus scelerisque pharetra. In vulputate iaculis pharetra. Ut mattis, mauris eget bibendum finibus, libero magna auctor tellus, ut blandit odio ante non urna. Ut at est accumsan, pharetra erat ac, consectetur turpis. Vestibulum sit amet turpis lectus. Integer semper aliquet est. Maecenas venenatis ultrices nisl eu porttitor. Maecenas aliquam sapien eu arcu molestie maximus. Donec quam metus, tempor nec eleifend non, accumsan id metus.</p>
</div>
</div>
<!------------------ Personality: Details End ------------------>
<!---------------- Personality: Characteristics ---------------->
<a class="btn btn-block btn-lg btn-block d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="2" data-toggle="collapse" data-parent="#ACCORDION" href="#B" aria-expanded="false" aria-controls="B" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);">
Characteristics
</a>
<div id="B" class="w-100 collapse" role="tabpanel" aria-labelledby="#2" data-parent="#ACCORDION"><div class="row justify-content-between">
<div class="col-lg-7">
<div class="row justify-content-between">
<!-------------------- Positive Traits -------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-thumbs-up"></i> Positive Traits</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!------------------ Positive Traits End ------------------>
<!-------------------- Negative Traits -------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-thumbs-down"></i> Negative Traits</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!------------------ Negative Traits End ------------------>
<!----------------------- Strengths ----------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-thumbs-up"></i> Strengths</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!--------------------- Strengths End --------------------->
<!----------------------- Weaknesses ----------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-thumbs-down"></i> Weaknesses</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!--------------------- Weaknesses End --------------------->
</div>
</div>
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<div class="col-lg-12">
<div class="card card-block text-white text-center rounded-0 mb-2" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);"><em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></div>
<!------------------- Personality Traits ------------------->
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);"><div class="row justify-content between">
<div class="col-lg-6"><ul class="list-unstyled h4 mb-0">
<!----- Optimist vs Pessimist ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Optimist
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Pessimist
</span>
</div>
</li>
<!----- Rude vs Kind ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Rude
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Kind
</span>
</div>
</li>
<!----- Peaceful vs Chaotic ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Peaceful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Chaotic
</span>
</div>
</li>
<!----- Playful vs Serious ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Playful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Serious
</span>
</div>
</li>
<!----- Creative vs Copier ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Creative
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Copier
</span>
</div>
</li>
<!----- Lethargic vs Energetic ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Lethargic
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Energetic
</span>
</div>
</li>
<!----- Follower vs Leader ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Follower
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Leader
</span>
</div>
</li>
<!----- Brave vs Pessimist ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Brave
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Coward
</span>
</div>
</li>
<!----- Insecure vs Confident ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Insecure
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Confident
</span>
</div>
</li>
</ul></div>
<div class="col-lg-6"><ul class="list-unstyled h4 mb-0">
<!----- Intelligent vs Unintelligent ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Intelligent
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Unintelligent
</span>
</div>
</li>
<!----- Wise vs Mindless ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Wise
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Mindless
</span>
</div>
</li>
<!----- Forgetful vs Memorious ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Forgetful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Memorious
</span>
</div>
</li>
<!----- Impulsive vs Cautious ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Impulsive
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Cautious
</span>
</div>
</li>
<!----- Neat vs Messy ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Neat
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Messy
</span>
</div>
</li>
<!----- Curious vs Uninterested ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Curious
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Uninterested
</span>
</div>
</li>
<!----- Clumsy vs Graceful ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Clumsy
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Graceful
</span>
</div>
</li>
<!----- Patient vs Impatient ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Patient
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Impatient
</span>
</div>
</li>
<!----- Liar vs Honest ----->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#d9b3ff">
Liar
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3" style="color:#66c2ff">
Honest
</span>
</div>
</li>
</ul></div>
</div></div>
<!----------------- Personality Traits End ----------------->
</div>
</div></div>
<!-------------- Personality: Characteristics End -------------->
<!------------------- Personality: Interests ------------------->
<a class="btn btn-block btn-lg btn-block d-inline text-center display-1 shadow-none rounded-0 text-white mb-2" role="tab" id="3" data-toggle="collapse" data-parent="#ACCORDION" href="#C" aria-expanded="false" aria-controls="C" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);">
Interests
</a>
<div id="C" class="w-100 collapse" role="tabpanel" aria-labelledby="#3" data-parent="#ACCORDION">
<div class="row justify-content-between">
<div class="col-lg-7"><div class="row justify-content-between">
<!--------------------- Likes Section --------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-check"></i> Likes</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!------------------- Likes Section End ------------------->
<!-------------------- Dislikes Section -------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-times"></i> Dislikes</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!------------------ Dislikes Section End ------------------>
<!--------------------- Hobbies Section --------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-cog"></i> Hobbies</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!------------------- Hobbies Section End ------------------->
<!---------------------- Skills Section ---------------------->
<div class="col-lg-6">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-4 mb-2" style="color:#d9b3ff;"><i class="far fa-award"></i> Skills</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled" style="color:#d9b3ff;">
<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>
</div>
<!-------------------- Skills Section End -------------------->
</div></div>
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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 class="card card-block text-white text-center rounded-0 mb-2" style="border-width:5px;background-color: rgba(217, 179, 255, 0.75);border-color: rgba(179, 106, 251, 0.75);"><em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></div>
</div>
<!----------------- Personality: Interests End ----------------->
</div>
</div>
</div>
<!-------------------- Personality Section End -------------------->
<!----------------------- Appearance Section ----------------------->
<div class="tab-pane fade in" id="THREE">
<div class="row justify-content-between">
<!---------------------- Appearance: Details ---------------------->
<div class="col-lg-7">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-list"></i> Basics</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<ul class="list-unstyled display-4" style="color:#d9b3ff;">
<li class="mb-2">
<span class="mb-0">
Hair Color
</span>
<span class="pull-right mb-0">
<!-- Put Hair Color Here -->
Their Hair Color
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Eye Color
</span>
<span class="pull-right mb-0">
<!-- Put Eye Color Here -->
Their Eye Color
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Skin Color
</span>
<span class="pull-right mb-0">
<!-- Put Skin Color Here -->
Their Skin Color
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<li class="mb-2">
<span class="mb-0">
Height
</span>
<span class="pull-right mb-0">
<!-- Put Height Here -->
Their Height
</span>
<hr class="mt-2" style="border:1px dashed;"></hr>
</li>
<!------- Skinny vs Large ------->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3" style="color:#d9b3ff">
Skinny
</span>
<!-- Bar -->
<div class="col-6 align-self-center"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3 text-right" style="color:#66c2ff">
Large
</span>
</div>
</li>
<!------- Curvy vs Flat ------->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3" style="color:#d9b3ff">
Curvy
</span>
<!-- Bar -->
<div class="col-6 align-self-center"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3 text-right" style="color:#66c2ff">
Flat
</span>
</div>
</li>
<!------- Frail vs Muscular ------->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3" style="color:#d9b3ff">
Frail
</span>
<!-- Bar -->
<div class="col-6 align-self-center"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3 text-right" style="color:#66c2ff">
Muscular
</span>
</div>
</li>
<!------- Groomed vs Messy ------->
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3" style="color:#d9b3ff">
Groomed
</span>
<!-- Bar -->
<div class="col-6 align-self-center"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#66c2ff"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%;background-color:#d9b3ff"></div></div></div>
<span class="col-3 text-right" style="color:#66c2ff">
Messy
</span>
</div>
</li>
</ul>
</div>
</div>
<!-------------------- Appearance: Details End -------------------->
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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 class="card card-block text-white text-center rounded-0 mb-2" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);"><em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></div>
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-tshirt"></i> Appearance</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<!-- Paragraphs: Appearance -->
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
<p class="mb-1" style="text-align:justify; color:#d9b3ff;">Pellentesque finibus scelerisque pharetra. In vulputate iaculis pharetra. Ut mattis, mauris eget bibendum finibus, libero magna auctor tellus, ut blandit odio ante non urna. Ut at est accumsan, pharetra erat ac, consectetur turpis. Vestibulum sit amet turpis lectus. Integer semper aliquet est. Maecenas venenatis ultrices nisl eu porttitor. Maecenas aliquam sapien eu arcu molestie maximus. Donec quam metus, tempor nec eleifend non, accumsan id metus.</p>
</div>
<!-- Link to Reference -->
<a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);" data-toggle="tab" href="LINK">Link to Reference</a>
</div>
<!--------------------- Appearance Section End --------------------->
<!--------------------- Relationships Section --------------------->
<div class="tab-pane fade in" id="FOUR">
<div class="row justify-content-between">
<div class="col-lg-7">
<!--------------------- First Relationship --------------------->
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);"><div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-4 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 300x300px -->
<img class="rounded-circle" src="https://via.placeholder.com/300">
<!-- Artist Credit -->
<a class="tooltipster text-white text-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:-25px;" title="art by NAME">
<i class="fa-thin fa-paintbrush"></i>
</a>
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2" style="color:#d9b3ff;">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" style="color:#d9b3ff;">Name:</a> Relationship
</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<em class="h3 mb-2" style="color:#d9b3ff;"> Time known each other:
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p style="text-align: justify; color:#d9b3ff;">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.</p>
</div>
</div></div>
<!------------------- First Relationship End ------------------->
<!--------------------- Second Relationship --------------------->
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);"><div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-4 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 300x300px -->
<img class="rounded-circle" src="https://via.placeholder.com/300">
<!-- Artist Credit -->
<a class="tooltipster text-white text-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:-25px;" title="art by NAME">
<i class="fa-thin fa-paintbrush"></i>
</a>
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2" style="color:#d9b3ff;">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" style="color:#d9b3ff;">Name:</a> Relationship
</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<em class="h3 mb-2" style="color:#d9b3ff;"> Time known each other:
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p style="text-align: justify; color:#d9b3ff;">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.</p>
</div>
</div></div>
<!------------------- Second Relationship End ------------------->
<!--------------------- Third Relationship --------------------->
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);"><div class="row justify-content-between mb-2">
<div class="col-lg-4 mb-4 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 300x300px -->
<img class="rounded-circle" src="https://via.placeholder.com/300">
<!-- Artist Credit -->
<a class="tooltipster text-white text-center" href="LINK" style="position:absolute; left:50%; transform:translate(-50%); bottom:-25px;" title="art by NAME">
<i class="fa-thin fa-paintbrush"></i>
</a>
</div>
<div class="col-lg-8 align-self-center">
<p class="display-4 mb-2" style="color:#d9b3ff;">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" style="color:#d9b3ff;">Name:</a> Relationship
</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<em class="h3 mb-2" style="color:#d9b3ff;"> Time known each other:
<!-- Put Time Known Here -->
Time
</em>
<!-- Paragraphs -->
<p style="text-align: justify; color:#d9b3ff;">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.</p>
</div>
</div></div>
<!------------------- Third Relationship End ------------------->
</div>
<div class="col-lg-5">
<div class="card rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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>
<!------------------- Relationships Section End ------------------->
<!------------------------- Story Section ------------------------->
<div class="tab-pane fade in" id="FIVE"><div class="row justify-content-between">
<div class="col-lg-7">
<div class="card card-block rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<p class="display-3 mb-2" style="color:#d9b3ff;"><i class="far fa-book"></i> Backstory</p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<!-- Paragraphs: Backstory -->
<p class="mb-1" style="text-align: justify; color:#d9b3ff;">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; color:#d9b3ff;">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; color:#d9b3ff;">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 mt-2 mb-2" style="color:#d9b3ff;">Present Day <i class="far fa-flag"></i></p>
<div class="mb-2" style="height:2px; width:100%; background-color:#d9b3ff;"></div>
<!-- Paragraphs: Present Day -->
<p class="mb-1" style="text-align: justify; color:#d9b3ff;">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 rounded-0 mb-2" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" 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>
<!----------------------- Story Section End ----------------------->
<!------------------------ Gallery Section ------------------------>
<div class="tab-pane fade in" id="SIX">
<div class="mt-2 card-columns">
<!----------- Photo 1 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!----------- Photo 2 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!----------- Photo 3 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!----------- Photo 4 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!----------- Photo 5 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!----------- Photo 6 ----------->
<div class="card rounded-0" style="border-width:5px;background-color: rgba(54, 63, 99, 0.75);border-color: rgba(45, 53, 82, 0.75);">
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<!-- Link to Full Gallery -->
<a class="btn btn-lg btn-block bg-faded shadow-none text-white rounded-0" style="border-width:5px;background-color: rgba(102, 194, 255, 0.75);border-color: rgba(25, 139, 204, 0.75);" data-toggle="tab" href="LINK">Full Gallery</a>
</div>
<!---------------------- Gallery Section End ---------------------->
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#d9b3ff;" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div></div></div>
