<!--- 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">
<!---------------------------- Side Bar ---------------------------->
<div class="col-lg-5 text-center">
<div class="card card-block card-inverse card-warning mb-3 rounded-0 text-white">
<p class="display-3 font-weight-bold">
<!-- Put Name Here -->
Name
</p>
<em class="display-4">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em>
</div>
<!-- Put Image Here
Recommended to be atleast 550px wide to fill space -->
<img src="https://via.placeholder.com/550">
<!-- Artist Credit -->
<a class="tooltipster text-warning pull-right" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!-------------------------- Side Bar End -------------------------->
<div class="col-lg-7">
<div class="card card-outline-warning rounded-0" style="border-width:5px">
<ul class="mb-2 nav nav-tabs card-block card-header-tabs row justify-content-between">
<li class="nav-item col-lg-6 mb-2"><a class="btn btn-outline-warning btn-block rounded-0 shadow-none active show" data-toggle="tab" href="#ONE">About</a></li>
<li class="nav-item col-lg-6 mb-2"><a class="btn btn-outline-warning btn-block rounded-0 shadow-none" data-toggle="tab" style="width:100" href="#TWO">More</a></li>
</ul>
<div class="tab-content">
<!------------------------- About Section ------------------------->
<div class="tab-pane fade in active show" id="ONE">
<div class="ui-accordion card mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:700px;">
<ul class="list-unstyled">
<li class="mb-3 text-warning">
<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-3 text-warning">
<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-3 text-warning">
<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-3 text-warning">
<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-3 text-warning">
<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-3">
<span class="mb-0 font-weight-bold text-warning">
Personality
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs: Personality -->
<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;">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
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
Appearance
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs: Appearance -->
<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>
</li>
<li class="mb-3 text-warning">
<span class="mb-0 font-weight-bold">
Likes
</span>
<span class="pull-right mb-0">
<!-- Put Likes Here -->
list of likes
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3 text-warning">
<span class="mb-0 font-weight-bold">
Dislikes
</span>
<span class="pull-right mb-0">
<!-- Put Dislikes Here -->
list of dislikes
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
Backstory
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs: Backstory -->
<p class="mb-2" style="text-align: justify;">Donec lectus mi, euismod id odio vitae, ullamcorper interdum tortor. Duis tempor, ex vel porta placerat, mi odio finibus ex, eget efficitur odio ex at turpis. Integer vitae elit felis. Phasellus fermentum lacinia ipsum, eu blandit arcu vulputate quis. Morbi facilisis, velit et feugiat gravida, nisi dui volutpat nisi, in varius tellus nisl sed mi. Sed pellentesque convallis enim nec vulputate. Aenean molestie condimentum tellus, nec semper magna tempor sed. Sed et dolor non lectus convallis facilisis. Suspendisse nulla lorem, ornare a commodo vitae, molestie vitae ipsum. Integer at enim nec augue feugiat condimentum sed at felis.</p>
<p class="mb-2" style="text-align: justify;">Sed id felis ut velit gravida ullamcorper nec nec sapien. Donec imperdiet ut libero non dictum. Integer sed nisl placerat, tincidunt arcu et, aliquet sem. Nullam feugiat velit sit amet ligula lacinia accumsan. Sed feugiat accumsan dui sed interdum. Nullam urna odio, pretium non tellus quis, rutrum auctor augue. Vivamus orci sem, pretium ac dictum et, malesuada vel arcu. Nulla eget commodo tortor. Aliquam sagittis tincidunt dapibus. Cras pretium nec lacus sit amet tempus.</p>
</li>
</ul>
</div>
</div>
</div>
<!----------------------- About Section End ----------------------->
<!-------------------------- More Section -------------------------->
<div class="tab-pane fade in" id="TWO">
<div class="ui-accordion card mb-3" style="border:transparent;">
<div class="ui-accordion-content card-block" style="height:700px;">
<ul class="list-unstyled">
<!-------------------- First Relationship -------------------->
<li class="mb-3">
<span class="mb-0 text-warning font-weight-bold">
<!-- Put Name Here -->
Name
</span>
<span class="pull-right text-warning mb-0">
<!-- Put Relationship Type Here -->
Relationship
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs -->
<p class="mb-2" style="text-align: justify;">Proin blandit justo augue, ac varius nunc vulputate vel. Vestibulum eu nunc id dolor ultricies placerat aliquam blandit urna. Vestibulum libero massa, pretium non ante et, tempus feugiat est. Phasellus vehicula ullamcorper ipsum in feugiat.</p>
</li>
<!------------------ First Relationship End ------------------>
<!-------------------- Second Relationship -------------------->
<li class="mb-3">
<span class="mb-0 text-warning font-weight-bold">
<!-- Put Name Here -->
Name
</span>
<span class="pull-right text-warning mb-0">
<!-- Put Relationship Type Here -->
Relationship
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs -->
<p class="mb-2" style="text-align: justify;">Proin blandit justo augue, ac varius nunc vulputate vel. Vestibulum eu nunc id dolor ultricies placerat aliquam blandit urna. Vestibulum libero massa, pretium non ante et, tempus feugiat est. Phasellus vehicula ullamcorper ipsum in feugiat.</p>
</li>
<!------------------ Second Relationship End ------------------>
<!-------------------- Third Relationship -------------------->
<li class="mb-3">
<span class="mb-0 text-warning font-weight-bold">
<!-- Put Name Here -->
Name
</span>
<span class="pull-right text-warning mb-0">
<!-- Put Relationship Type Here -->
Relationship
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Paragraphs -->
<p class="mb-2" style="text-align: justify;">Proin blandit justo augue, ac varius nunc vulputate vel. Vestibulum eu nunc id dolor ultricies placerat aliquam blandit urna. Vestibulum libero massa, pretium non ante et, tempus feugiat est. Phasellus vehicula ullamcorper ipsum in feugiat.</p>
</li>
<!------------------ Third Relationship End ------------------>
<!---------------------- First Question ---------------------->
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
<!-- Put Question Here -->
Question
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Answer to Question -->
<p class="mb-2" style="text-align: justify;">Nullam convallis semper elit, quis tempus lectus dignissim tincidunt. Aliquam facilisis pellentesque nibh. Nullam sed porttitor tellus. Fusce dictum nulla ut enim euismod, eget pellentesque metus egestas. Nam eget massa a massa hendrerit condimentum eu sit amet ex. In convallis, odio ac mollis tempor, nunc dui efficitur libero, ac aliquam orci sem eu magna.</p>
</li>
<!-------------------- First Question End -------------------->
<!---------------------- Second Question ---------------------->
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
<!-- Put Question Here -->
Question
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Answer to Question -->
<p class="mb-2" style="text-align: justify;">Nullam convallis semper elit, quis tempus lectus dignissim tincidunt. Aliquam facilisis pellentesque nibh. Nullam sed porttitor tellus. Fusce dictum nulla ut enim euismod, eget pellentesque metus egestas. Nam eget massa a massa hendrerit condimentum eu sit amet ex. In convallis, odio ac mollis tempor, nunc dui efficitur libero, ac aliquam orci sem eu magna.</p>
</li>
<!-------------------- Second Question End -------------------->
<!---------------------- Third Question ---------------------->
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
<!-- Put Question Here -->
Question
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Answer to Question -->
<p class="mb-2" style="text-align: justify;">Nullam convallis semper elit, quis tempus lectus dignissim tincidunt. Aliquam facilisis pellentesque nibh. Nullam sed porttitor tellus. Fusce dictum nulla ut enim euismod, eget pellentesque metus egestas. Nam eget massa a massa hendrerit condimentum eu sit amet ex. In convallis, odio ac mollis tempor, nunc dui efficitur libero, ac aliquam orci sem eu magna.</p>
</li>
<!-------------------- Third Question End -------------------->
<!---------------------- Fourth Question ---------------------->
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
<!-- Put Question Here -->
Question
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<!-- Answer to Question -->
<p class="mb-2" style="text-align: justify;">Nullam convallis semper elit, quis tempus lectus dignissim tincidunt. Aliquam facilisis pellentesque nibh. Nullam sed porttitor tellus. Fusce dictum nulla ut enim euismod, eget pellentesque metus egestas. Nam eget massa a massa hendrerit condimentum eu sit amet ex. In convallis, odio ac mollis tempor, nunc dui efficitur libero, ac aliquam orci sem eu magna.</p>
</li>
<!-------------------- Fourth Question End -------------------->
<!----------------------- Trivia Section ----------------------->
<li class="mb-3">
<span class="mb-0 font-weight-bold text-warning">
Trivia
</span>
<hr class="mt-1 text-warning" style="border:1px dashed;">
<ul class="list-unstyled" style="text-align: justify;">
<li>
<i class="far fa-arrow-right"></i>
Sed ac ligula consectetur, feugiat mi ac, eleifend nisl. Nam scelerisque convallis euismod. Nam tincidunt risus eget blandit luctus.
</li>
<li>
<i class="far fa-arrow-right"></i>
Etiam consequat viverra ex, ut hendrerit dolor auctor in. Integer feugiat feugiat molestie.
</li>
<li>
<i class="far fa-arrow-right"></i>
Nullam mollis pharetra ipsum nec ultricies.
</li>
<li>
<i class="far fa-arrow-right"></i>
Maecenas aliquet porttitor vehicula. Donec tristique porta arcu nec cursus.
</li>
<li>
<i class="far fa-arrow-right"></i>
Ut malesuada lectus laoreet lorem pulvinar, in suscipit erat lacinia.
</li>
<li>
<i class="far fa-arrow-right"></i>
Nunc et ultrices orci, id hendrerit massa. In mattis interdum augue, vel scelerisque elit venenatis sed.
</li>
</ul>
</li>
<!--------------------- Trivia Section End --------------------->
</ul>
</div>
</div>
</div>
<!------------------------ More Section End ------------------------>
</div>
</div>
</div>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster text-warning pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>