<!--- 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: #323C81
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="row justify-content-between">
<!---------------------------- Side Bar ---------------------------->
<div class="col-md-3">
<!-- Put Image Here
Recommended to use a square image that is atleast 400x400px -->
<img src="https://via.placeholder.com/400" class="tooltipster" style="width:100%;" title="art by NAME">
<div class="card card-block text-white rounded-0" style="background-color:#323C81; border-color:#323C81;">
<p class="display-3 text-center">
<!-- Put Name Here -->
Name
</p>
</div>
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<!-- Summary -->
<p 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.</p>
</div>
</div>
<!-------------------------- Side Bar End -------------------------->
<div class="col-md-9">
<!------------------------ Basics Section ------------------------>
<div class="card card-block rounded-0 text-white mb-2" style="background-color:#323C81; border-color:#323C81;">
<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">
<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>
<!---------------------- Basics Section End ---------------------->
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<h4 style="color:#323C81;">✦ About</h4>
<div class="mb-2" style="height:1px; width:100%; background-color:#323C81;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">Mauris bibendum consectetur diam sit amet hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec luctus et neque quis consequat. Maecenas rutrum neque purus, at molestie nisl finibus eget. Sed ac ullamcorper eros, suscipit tristique diam. Curabitur id ultricies lorem. Proin semper faucibus mauris, ac ultrices diam venenatis at. Nam iaculis cursus purus id auctor. Vestibulum pellentesque auctor eros, sed aliquet erat.</p>
<p style="text-align: justify;">Fusce consequat tellus sed justo feugiat faucibus. Aliquam a convallis nulla. Etiam lacinia dolor felis, ut semper orci ullamcorper vel. Cras sed finibus risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac sapien at ex fermentum maximus. In mollis laoreet luctus. Duis vel elit ac mi aliquam vulputate. Vivamus varius volutpat urna at sollicitudin.</p>
<h4 class="text-right" style="color:#323C81;">✦ Appearance</h4>
<div class="mb-2" style="height:1px; width:100%; background-color:#323C81;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">Sed rutrum purus sit amet malesuada ornare. Mauris bibendum consectetur diam sit amet hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec luctus et neque quis consequat. Maecenas rutrum neque purus, at molestie nisl finibus eget. Sed ac ullamcorper eros, suscipit tristique diam. Curabitur id ultricies lorem. Proin semper faucibus mauris, ac ultrices diam venenatis at. Nam iaculis cursus purus id auctor. Vestibulum pellentesque auctor eros, sed aliquet erat. Morbi non eros at metus lobortis tincidunt.</p>
</div>
<div class="card card-block text-white rounded-0 mb-2" style="background-color:#323C81; border-color:#323C81;">
<p class="display-4 text-center">
<!-- Put Adjectives Here -->
Adjective - Adjective - Adjective - Adjective
</p>
</div>
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<div class="container">
<div class="row justify-content-between">
<!---------------------- Likes Section ---------------------->
<div class="col-md-3">
<ul class="list-unstyled">
<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-3">
<ul class="list-unstyled">
<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 ------------------->
<!---------------------- Skills Section ---------------------->
<div class="col-md-3">
<ul class="list-unstyled">
<li>
<i class="fa fa-cog"></i>
skill
</li>
<li>
<i class="fa fa-cog"></i>
skill
</li>
<li>
<i class="fa fa-cog"></i>
skill
</li>
<li>
<i class="fa fa-cog"></i>
skill
</li>
<li>
<i class="fa fa-cog"></i>
skill
</li>
</ul>
</div>
<!-------------------- Skills Section End -------------------->
<!---------------------- Hobbies Section ---------------------->
<div class="col-md-3">
<ul class="list-unstyled">
<li>
<i class="fa fa-star"></i>
hobby
</li>
<li>
<i class="fa fa-star"></i>
hobby
</li>
<li>
<i class="fa fa-star"></i>
hobby
</li>
<li>
<i class="fa fa-star"></i>
hobby
</li>
<li>
<i class="fa fa-star"></i>
hobby
</li>
</ul>
</div>
<!-------------------- Hobbies Section End -------------------->
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card card-block text-white rounded-0 mb-2" style="background-color:#323C81; border-color:#323C81;">
<p class="display-4 text-center"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></p>
</div>
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<h4 style="color:#323C81;">✦ Backstory</h4>
<div class="mb-2" style="height:1px; width:100%; background-color:#323C81;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat nisl, luctus posuere enim nec, fermentum molestie lorem. Ut bibendum facilisis orci, et fringilla mi rhoncus sit amet. Sed sit amet pulvinar eros, eget fringilla ipsum. Nullam sagittis tellus a sem mattis tempor. Nullam scelerisque tellus sed lacinia volutpat. Donec at lobortis justo, vehicula imperdiet quam. Sed iaculis lacinia libero, ut tempus velit vulputate quis. Sed eu aliquam erat. Aliquam ac eleifend eros, sed congue mauris. Nulla cursus tortor eget nulla gravida, eu condimentum ex feugiat. Pellentesque mauris lorem, luctus non ante ac, aliquam vestibulum nibh. Nulla gravida sagittis neque, eget maximus eros luctus eu. Phasellus mollis in nunc at tincidunt. Quisque elementum, mi in hendrerit fermentum, nulla leo ornare tortor, sit amet tincidunt dui tellus eget ipsum. Suspendisse semper, nunc id luctus hendrerit, felis ex vehicula sem, sit amet gravida erat nisi eu nisi. Ut id elementum tortor.</p>
<p style="text-align: justify;">Phasellus eget orci nec tellus dapibus ultrices. In egestas eros nec fermentum interdum. Suspendisse sit amet sagittis lorem, non luctus dui. Vivamus iaculis iaculis facilisis. Maecenas tincidunt nunc a nisi pellentesque, eget dignissim est congue. Vestibulum lobortis venenatis augue, nec lobortis purus tempor quis. Nulla vulputate tempus porta. Curabitur volutpat eleifend mi, quis placerat dolor ullamcorper eu.</p>
</div>
<div class="card card-block text-white rounded-0 mb-2" style="background-color:#323C81;">
<div class="row justify-content-between">
<div class="col-md-3">
<!----------- Strength ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Strength</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!------------- Luck ------------->
<div class="row mb-2">
<div class="col-4">
<strong>Luck</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!------------ Magic ------------>
<div class="row mb-2">
<div class="col-4">
<strong>Magic</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
</div>
<div class="col-md-3">
<!-------- Intelligence -------->
<div class="row mb-2">
<div class="col-4">
<strong>Intelligence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!----------- Wisdom ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Wisdom</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!----------- Charisma ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Charisma</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
</div>
<div class="col-md-3">
<!----------- Dexterity ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Dexterity</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!--------- Constitution --------->
<div class="row mb-2">
<div class="col-4">
<strong>Constitution</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!----------- Agility ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Agility</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
</div>
<div class="col-md-3">
<!----------- Attack ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Attack</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!----------- Defence ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Defence</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
<!----------- Resilience ----------->
<div class="row mb-2">
<div class="col-4">
<strong>Resilience</strong>
</div>
<div class="col-8">
<!-- Bar -->
<div class="progress"><div class="progress-bar bg-white" style="width:50%;"></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-between">
<!--------------------- Trivia Section --------------------->
<div class="col-md-7">
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<h4 style="color:#323C81;">✦ Trivia</h4>
<div class="mb-2" style="height:1px; width:100%; background-color:#323C81;"></div>
<ul class="list-unstyled">
<li class="mb-1">
● Write bits of trivia / other information in this section.
</li>
<li class="mb-1">
● Sed ac ligula consectetur, feugiat mi ac, eleifend nisl. Nam scelerisque convallis euismod. Nam tincidunt risus eget blandit luctus.
</li>
<li class="mb-1">
● Etiam consequat viverra ex, ut hendrerit dolor auctor in. Integer feugiat feugiat molestie.
</li>
<li class="mb-1">
● Nullam mollis pharetra ipsum nec ultricies.
</li>
<li class="mb-1">
● Maecenas aliquet porttitor vehicula. Donec tristique porta arcu nec cursus.
</li>
<li class="mb-1">
● Ut malesuada lectus laoreet lorem pulvinar, in suscipit erat lacinia.
</li>
</ul>
</div>
</div>
<!--------------------- Trivia Section End --------------------->
<div class="col-md-5">
<!------------------- Relationship Section ------------------->
<div class="card card-block bg-faded rounded-0 mb-2" style="border-color:#323C81;">
<h4 style="color:#323C81;">✦ Relationships</h4>
<div class="mb-2" style="height:1px; width:100%; background-color:#323C81;"></div>
<!-- First Relationship -->
<!-- Character Name and Profile Link -->
<p style="text-align: justify;"><a href="link" class="font-weight-bold" style="color:#323C81; text-decoration:none;">Name</a>
<!-- Paragraph -->
Fusce venenatis et elit bibendum bibendum. Aliquam rhoncus vehicula lobortis. Pellentesque at nisi vehicula, eleifend tellus vitae, ultrices arcu.
</p>
<!-- Second Relationship -->
<!-- Character Name and Profile Link -->
<p style="text-align: justify;"><a href="link" class="font-weight-bold" style="color:#323C81; text-decoration:none;">Name</a>
<!-- Paragraph -->
Orci varius natoque penatibus et magnis dis parturient montes. Fusce volutpat vel tortor quis rhoncus.
</p>
</div>
<!----------------- Relationship Section End ----------------->
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right ml-2" style="color:#323C81;" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
<a class="tooltipster pull-right" style="color:#323C81;" href="https://toyhou.se/BigBreaker" title="concept by BigBreaker">
<i class="fa-regular fa-lightbulb"></i>
</a>
</div>
</div>
</div>
</div>
</div>