<!--- 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: #AE6E77
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="row justify-content-between">
<!------------------------- Basics Section ------------------------->
<div class="col-md-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Basics
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<!-- 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 style="height:3px; width:100%; background-color:#AE6E77;"></div>
<table class="table table-striped mb-0" style="border:transparent">
<tbody>
<tr>
<td><b>Name</b></td>
<td>
<!-- Put Name Here -->
Their Name
</td>
</tr>
<tr>
<td><b>Age</b></td>
<td>
<!-- Put Age Here -->
Their Age
</td>
</tr>
<tr>
<td><b>Gender</b></td>
<td>
<!-- Put Gender Here -->
Their Gender
</td>
</tr>
<tr>
<td><b>Pronouns</b></td>
<td>
<!-- Put Pronouns Here -->
Their Pronouns
</td>
</tr>
<tr>
<td><b>Sexuality</b></td>
<td>
<!-- Put Sexuality Here -->
Their Sexuality
</td>
</tr>
<tr>
<td><b>Ethnicity</b></td>
<td>
<!-- Put Ethnicity Here -->
Their Ethnicity
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!----------------------- Basics Section End ----------------------->
<div class="col-md-8">
<!------------------------- About Section ------------------------->
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ About
</div>
<div class="card bg-faded card-block rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<!-- Paragraphs: About -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae neque malesuada, porttitor magna ut, molestie orci. Nunc quis orci nibh. In fermentum risus interdum turpis facilisis vehicula. Morbi eget felis ac dui varius volutpat ac quis urna. Sed volutpat vulputate lorem vel eleifend. Quisque bibendum metus cursus enim ullamcorper commodo. Donec mollis risus eget tristique gravida.</p>
<p style="text-align: justify;">Aliquam iaculis orci ut odio lacinia consectetur. Praesent eget ipsum dapibus, porta ipsum non, porttitor lectus. Suspendisse malesuada tellus vel neque interdum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut luctus nibh tellus, at rhoncus lectus pretium eget. In malesuada, enim non venenatis fringilla, ante dui accumsan ante, sit amet imperdiet massa metus in nisi. Proin vitae placerat nunc. Nulla scelerisque molestie tempor. Quisque imperdiet justo vel lectus vehicula convallis. Sed a gravida diam. Quisque lacinia consectetur metus, id vehicula nisl placerat sit amet.</p>
<h4 class="text-right" style="color:#AE6E77;">✦ Appearance</h4>
<div class="mb-2" style="height:2px; width:100%; background-color:#AE6E77;"></div>
<!-- Paragraphs: Appearance -->
<p style="text-align: justify;">Fusce faucibus est pellentesque dui sollicitudin, a aliquet ipsum ultricies. Vestibulum vitae sodales elit. Aliquam sit amet interdum diam. Mauris blandit tristique eros, eget ultrices urna ultrices eu. Donec laoreet erat at ex scelerisque luctus. Nulla facilisi. Praesent aliquam velit eu lectus euismod, vel egestas risus tempus. Nulla lacinia faucibus ante, iaculis volutpat elit porta vitae.</p>
</div>
<!----------------------- About Section End ----------------------->
<div class="row justify-content-between">
<!------------------------- Likes Section ------------------------->
<div class="col-md-6">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Likes
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr><td>
<i class="fa fa-check"></i>
like
</td></tr>
<tr><td>
<i class="fa fa-check"></i>
like
</td></tr>
<tr><td>
<i class="fa fa-check"></i>
like
</td></tr>
<tr><td>
<i class="fa fa-check"></i>
like
</td></tr>
<tr><td>
<i class="fa fa-check"></i>
like
</td></tr>
</tbody>
</table>
</div>
</div>
<!----------------------- Likes Section End ----------------------->
<!------------------------ Dislikes Section ------------------------>
<div class="col-md-6">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Dislikes
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr><td>
<i class="fa fa-times"></i>
dislike
</td></tr>
<tr><td>
<i class="fa fa-times"></i>
dislike
</td></tr>
<tr><td>
<i class="fa fa-times"></i>
dislike
</td></tr>
<tr><td>
<i class="fa fa-times"></i>
dislike
</td></tr>
<tr><td>
<i class="fa fa-times"></i>
dislike
</td></tr>
</tbody>
</table>
</div>
</div>
<!---------------------- Dislikes Section End ---------------------->
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-between">
<div class="col-md-8">
<!------------------------- Details Section ------------------------->
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Details
</div>
<div class="card bg-faded card-block rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<div class="row justify-content-between">
<div class="col-md-6">
<!----------- 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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></div></div>
</div>
</div>
<!-------- 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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></div></div>
</div>
</div>
</div>
<div class="col-md-6">
<!----------- 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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></div></div>
</div>
</div>
<!------------ 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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></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" style="width:50%; background-color:#AE6E77;"></div></div>
</div>
</div>
</div>
</div>
</div>
<!----------------------- Details Section End ----------------------->
<!------------------------ Backstory Section ------------------------>
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Backstory
</div>
<div class="card bg-faded card-block rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<!-- Paragraphs: Backstory -->
<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>
<p style="text-align: justify;">Quisque ut dolor dapibus, gravida eros ut, tempor libero. Sed rutrum vehicula nunc, quis vehicula justo pretium non. Sed et ultrices leo. Suspendisse felis nibh, sodales sed consequat ut, consectetur id leo. Phasellus suscipit porta libero ac mattis. Praesent in dolor sed dolor iaculis imperdiet laoreet vel enim. Aenean vel quam tempus, bibendum leo id, consequat lectus. Nam condimentum metus vitae facilisis pharetra.</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. Nullam aliquam neque nec tristique scelerisque.</p>
</div>
<!---------------------- Backstory Section End ---------------------->
</div>
<div class="col-md-4">
<!---------------------- Relationships Section ---------------------->
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Relationships
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#AE6E77;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<!---------------------- First Relationship ---------------------->
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#AE6E77; text-decoration:none;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<!---------------------- First Relationship ---------------------->
<!---------------------- Second Relationship ---------------------->
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#AE6E77; text-decoration:none;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<!---------------------- Second Relationship ---------------------->
<!---------------------- Third Relationship ---------------------->
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#AE6E77; text-decoration:none;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<!---------------------- Third Relationship ---------------------->
</tbody>
</table>
</div>
<!---------------------- Relationships Section ---------------------->
<!-------------------------- Trivia Section -------------------------->
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#AE6E77; border-color:#AE6E77;">
✦ Trivia
</div>
<div class="card bg-faded rounded-0" style="border-width:3px; border-color:#AE6E77;">
<table class="table table-striped mb-0" style="border:transparent">
<tbody>
<tr><td>
● Sed ac ligula consectetur, feugiat mi ac, eleifend nisl. Nam scelerisque convallis euismod. Nam tincidunt risus eget blandit luctus.
</td></tr>
<tr><td>
● Etiam consequat viverra ex, ut hendrerit dolor auctor in. Integer feugiat feugiat molestie.
</td></tr>
<tr><td>
● Nullam mollis pharetra ipsum nec ultricies.
</td></tr>
<tr><td>
● Maecenas aliquet porttitor vehicula. Donec tristique porta arcu nec cursus.
</td></tr>
</tbody>
</table>
</div>
<!-------------------------- Trivia Section -------------------------->
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#AE6E77" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
</div>