<!--- 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="row justify-content-between">
<div class="col-md-5 push-md-7">
<div class="card card-block card-inverse card-warning rounded-0 text-white display-3">
<em>Navigation</em>
</div>
<div class="card card-block bg-faded mb-3" style="border:transparent;">
<ul class="nav nav-tabs card-header-tabs row">
<li class="nav-item col-12 mb-2"><a class="btn btn-outline-warning btn-block active show" data-toggle="tab" style="width:100" href="#ONE">About</a></li>
<li class="nav-item col-12 mb-2"><a class="btn btn-outline-warning btn-block" data-toggle="tab" style="width:100" href="#TWO">Details</a></li>
<li class="nav-item col-12 mb-2"><a class="btn btn-outline-warning btn-block" data-toggle="tab" style="width:100" href="#THREE">Backstory</a></li>
<li class="nav-item col-12 mb-2"><a class="btn btn-outline-warning btn-block" data-toggle="tab" style="width:100" href="#FOUR">Relationships</a></li>
</ul>
</div>
</div>
<div class="col-md-7 pull-md-5"><div class="tab-content">
<!------------------------- About Section ------------------------->
<div class="tab-pane fade in active show" id="ONE">
<div class="card card-block card-inverse card-primary rounded-0 text-white display-3">
<em>About</em>
</div>
<div class="ui-accordion card bg-faded mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:400px;">
<h3 class="text-primary text-right"><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</em></h3>
<!-- Paragraphs: About -->
<p style="text-align: justify;">Vestibulum cursus nisi at nunc lobortis vestibulum. Aliquam at ultricies turpis. Phasellus orci nulla, lacinia pharetra vehicula quis, egestas eget elit. Duis a suscipit ligula, quis rhoncus turpis. Suspendisse potenti. Nunc luctus finibus scelerisque. Duis lacus lectus, tincidunt et est ut, mattis accumsan dui. Fusce aliquet tortor et interdum interdum. Cras et iaculis magna. Integer placerat ut mauris ac ultricies. Vivamus hendrerit consectetur nulla, ac vestibulum metus tristique sit amet. Morbi vitae placerat diam. Vestibulum maximus ante vitae ex facilisis semper. Duis et augue feugiat, placerat ligula non, gravida leo.</p>
<p style="text-align: justify;">Integer lacinia odio at erat fringilla ornare. Vestibulum odio dui, lobortis ut iaculis vitae, viverra sit amet purus. Mauris non lectus quis ex ornare ornare. Curabitur sagittis erat sit amet metus dapibus, sed vehicula nunc consectetur. In blandit fringilla mauris ut ultrices. Aenean in egestas ligula. Mauris nisl leo, vulputate at vehicula a, auctor eu sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<h4 class="text-primary">Appearance</h4>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<!-- Paragraphs: Appearance -->
<p style="text-align: justify;">Nunc in nulla bibendum, consequat odio vitae, condimentum massa. In ac purus et est scelerisque lobortis. Nulla at quam ac urna rutrum cursus eu non eros. In sed risus at justo iaculis feugiat vitae quis turpis. Quisque quis metus eu magna volutpat iaculis. Pellentesque ante ipsum, molestie sollicitudin tempus quis, facilisis nec diam. Curabitur molestie nibh lobortis purus egestas molestie. Proin sodales felis vitae sodales faucibus. Duis diam leo, blandit ultricies urna eu, condimentum iaculis odio. In viverra tincidunt sem a scelerisque. Maecenas in rutrum neque, vitae laoreet orci. Fusce nec ex ac mauris aliquet luctus at quis enim.</p>
</div>
</div>
</div>
<!----------------------- About Section End ----------------------->
<!------------------------- Details Section ------------------------->
<div class="tab-pane fade in" id="TWO">
<div class="card card-block card-inverse card-primary rounded-0 text-white display-3">
<em>Details</em>
</div>
<div class="ui-accordion card bg-faded mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:350px;">
<div class="row">
<div class="col-md-4">
<div class="row mb-1">
<div class="col-4">
<strong>Name</strong>
</div>
<div class="col-8">
<!-- Put Full Name Here -->
Their Name
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Gender</strong>
</div>
<div class="col-8">
<!-- Put Gender Here -->
Their Gender
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Pronouns</strong>
</div>
<div class="col-8">
<!-- Put Pronouns Here -->
Their Pronouns
</div>
</div>
</div>
<div class="col-md-4">
<div class="row mb-1">
<div class="col-4">
<strong>Age</strong>
</div>
<div class="col-8">
<!-- Put Age Here -->
Their Age
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Sexuality</strong>
</div>
<div class="col-8">
<!-- Put Sexuality Here -->
Their Sexuality
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Ethnicity</strong>
</div>
<div class="col-8">
<!-- Put Ethnicity Here -->
Their Ethnicity
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="row mb-1">
<div class="col-4">
<strong>MBTI</strong>
</div>
<div class="col-8">
<!-- Put MBTI Here -->
Their MBTI
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Occupation</strong>
</div>
<div class="col-8">
<!-- Put Occupation Here -->
Their Occupation
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<strong>Residence</strong>
</div>
<div class="col-8">
<!-- Put Residence Here -->
Their Residence
</div>
</div>
</div>
</div>
<div class="bg-primary mb-4" style="height:2px; width:100%;"></div>
<div class="row">
<div class="col-md-6">
<!----------- Strength ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Strength</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!------------- Luck ------------->
<div class="row mb-1">
<div class="col-4">
<strong>Luck</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!------------ Magic ------------>
<div class="row mb-1">
<div class="col-4">
<strong>Magic</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!--------- Intelligence --------->
<div class="row mb-1">
<div class="col-4">
<strong>Intelligence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!------------ Wisdom ------------>
<div class="row mb-1">
<div class="col-4">
<strong>Wisdom</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!----------- Charisma ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Charisma</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
</div>
<div class="col-md-6">
<!----------- Dexterity ----------->
<div class="row mb-1">
<div class="col-4">
<strong>Intelligence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!---------- Constitution ---------->
<div class="row mb-1">
<div class="col-4">
<strong>Constitution</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!------------- Agility ------------->
<div class="row mb-1">
<div class="col-4">
<strong>Agility</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!-------------- Attack -------------->
<div class="row mb-1">
<div class="col-4">
<strong>Attack</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!-------------- Defence -------------->
<div class="row mb-1">
<div class="col-4">
<strong>Defence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
<!------------ Resilience ------------>
<div class="row mb-1">
<div class="col-4">
<strong>Resilience</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-primary" style="width:50%;"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Details Section End ----------------------->
<!------------------------- Backstory Section ------------------------->
<div class="tab-pane fade in" id="THREE">
<div class="card card-block card-inverse card-primary rounded-0 text-white display-3">
<em>Backstory</em>
</div>
<div class="ui-accordion card bg-faded mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:350px;">
<!-- Paragraphs: Backstory -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare imperdiet molestie. Sed ac lacinia orci. Vivamus quis lacinia tortor. Donec efficitur nisi ut lobortis lobortis. Ut lacus magna, gravida at tempus quis, condimentum in elit. Morbi viverra enim metus, ac dignissim quam mollis quis. Quisque ullamcorper sem sit amet metus laoreet mollis. Morbi accumsan metus cursus, blandit orci eget, feugiat odio. Aliquam in pellentesque justo. Duis egestas dolor ante, vitae placerat odio lobortis et. Donec pellentesque augue et urna euismod imperdiet. Ut quis mauris quis metus imperdiet feugiat sed ut felis. Proin feugiat leo vel tellus semper maximus. Maecenas eu tellus dictum, rutrum purus ut, consequat urna. Vestibulum facilisis iaculis commodo.</p>
<p style="text-align: justify;">Integer lacinia odio at erat fringilla ornare. Vestibulum odio dui, lobortis ut iaculis vitae, viverra sit amet purus. Mauris non lectus quis ex ornare ornare. Curabitur sagittis erat sit amet metus dapibus, sed vehicula nunc consectetur. In blandit fringilla mauris ut ultrices. Aenean in egestas ligula. Mauris nisl leo, vulputate at vehicula a, auctor eu sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p style="text-align: justify;">Fusce gravida a odio id condimentum. Cras accumsan pharetra ex. Cras mattis, nunc et elementum ullamcorper, est eros aliquam nibh, rhoncus egestas ante justo quis magna. Etiam quis lectus et tortor commodo tempus. Aliquam elementum condimentum dolor non bibendum. Duis diam leo, blandit ultricies urna eu, condimentum iaculis odio. In viverra tincidunt sem a scelerisque. Maecenas in rutrum neque, vitae laoreet orci. Fusce nec ex ac mauris aliquet luctus at quis enim. Proin vitae justo ac urna placerat congue. Nulla facilisi. Vestibulum convallis turpis in accumsan facilisis. Maecenas non mauris vitae ligula accumsan dapibus. Nullam quis dolor ut nulla iaculis pharetra. Cras eu ipsum turpis. Quisque interdum id elit in laoreet.</p>
</div>
</div>
</div>
<!----------------------- Backstory Section End ----------------------->
<!------------------------ Relationships Section ------------------------>
<div class="tab-pane fade in" id="FOUR">
<div class="card card-block card-inverse card-primary rounded-0 text-white display-3">
<em>Relationships</em>
</div>
<div class="ui-accordion card bg-faded mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:350px;">
<div class="row justify-content-between">
<div class="row justify-content-between mb-2">
<!------ First Relationship ------>
<div class="col-md-6 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary 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>
</div>
<!---- First Relationship End ---->
<!------ Second Relationship ------>
<div class="col-md-6 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary 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>
</div>
<!---- Second Relationship End ---->
<!------ Third Relationship ------>
<div class="col-md-6 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary 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>
</div>
<!---- Third Relationship End ---->
<!------ Fourth Relationship ------>
<div class="col-md-6 align-self-center">
<p class="text-primary display-4 mb-2">
<!-- Character Name, Link, and Relationship Type -->
<a href="LINK" class="font-weight-bold">Name:</a> Relationship
</p>
<div class="bg-primary mb-2" style="height:2px; width:100%;"></div>
<em class="text-primary 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>
</div>
<!---- Fourth Relationship End ---->
</div>
</div>
</div>
</div>
</div>
<!---------------------- Relationships Section End ---------------------->
</div></div>
</div>
<div class="row justify-content-between">
<!----------------------------- Likes Section ----------------------------->
<div class="col-md-4">
<div class="card card-block card-inverse card-success rounded-0 text-white display-3">
<em>Likes</em>
</div>
<ul class="card card-block bg-faded text-left list-unstyled mb-3" style="border:transparent">
<li>
<i class="fa fa-check"></i>
like
</li>
<li>
<i class="fa fa-check"></i>
like
</li>
<li>
<i class="fa fa-check"></i>
like
</li>
<li>
<i class="fa fa-check"></i>
like
</li>
<li>
<i class="fa fa-check"></i>
like
</li>
</ul>
</div>
<!--------------------------- Likes Section End --------------------------->
<!---------------------------- Dislikes Section ---------------------------->
<div class="col-md-4">
<div class="card card-block card-inverse card-danger rounded-0 text-white display-3">
<em>Dislikes</em>
</div>
<ul class="card card-block bg-faded text-left list-unstyled mb-3" style="border:transparent">
<li>
<i class="fa fa-times"></i>
dislike
</li>
<li>
<i class="fa fa-times"></i>
dislike
</li>
<li>
<i class="fa fa-times"></i>
dislike
</li>
<li>
<i class="fa fa-times"></i>
dislike
</li>
<li>
<i class="fa fa-times"></i>
dislike
</li>
</ul>
</div>
<!-------------------------- Dislikes Section End -------------------------->
<!----------------------------- Trivia Section ----------------------------->
<div class="col-md-4">
<div class="card card-block card-inverse card-info rounded-0 text-white display-3">
<em>Trivia</em>
</div>
<ul class="card card-block bg-faded text-left list-unstyled mb-3" style="border:transparent">
<li>
<i class="fa fa-cog"></i>
fun fact
</li>
<li>
<i class="fa fa-cog"></i>
fun fact
</li>
<li>
<i class="fa fa-cog"></i>
fun fact
</li>
<li>
<i class="fa fa-cog"></i>
fun fact
</li>
<li>
<i class="fa fa-cog"></i>
fun fact
</li>
</ul>
</div>
<!--------------------------- Trivia Section End --------------------------->
</div>
<!-- Credits, Don't Remove -->
<p class="text-right">profile html by Hukiolukio</p>