<!--- 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: #746586
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="card card-block bg-faded">
<div class="col-lg-5 card card-block card-inverse text-white mb-4" style="background-color:#746586;border-color:#746586;">
<p class="display-2">
<!-- Put Name Here -->
Name
</p>
</div>
<div class="card card-block mb-4">
<h3 style="color:#746586;"><i class="far fa-address-card"></i> About</h3>
<div class="mb-2" style="height:1px; width:100%;background-color:#746586;"></div>
<div>
<div class="float-right card ml-2" style="border:transparent;">
<!-- Put Image Here
Image can be any size, it will shrink down if it is bigger than 200px in order to fit -->
<img src="https://via.placeholder.com/200" class="rounded tooltipster" style="max-width:200px;" title="art by NAME">
</div>
<!-- Paragraphs: About -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et egestas risus. Integer vel sodales dolor. Nunc dignissim cursus elit, a vulputate lectus pretium vitae. Praesent dignissim vestibulum nisl, vel posuere massa maximus sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed molestie ante arcu, in euismod tortor posuere et. Sed vehicula faucibus laoreet. bibendum elit ut aliquet eleifend. Integer sit amet risus auctor, laoreet magna aliquam, sollicitudin arcu. In id lorem a felis tincidunt dapibus. Aliquam sodales mauris ante, a vestibulum enim aliquet id. Nunc et magna est. Etiam sodales tellus a dictum vulputate. Sed tempus lobortis ullamcorper. Mauris congue augue ipsum, sit amet malesuada dolor dignissim non. Praesent tincidunt est sit amet elit auctor dictum. In vulputate mattis est in rhoncus. Integer vel tortor ligula. Proin quis luctus eros.</p>
<p class="mb-2" style="text-align: justify;">Curabitur blandit, magna et facilisis sodales, enim sem aliquam nunc, et viverra arcu magna vitae est. Phasellus viverra dui eros. Quisque malesuada facilisis lectus eu lobortis. Praesent a fringilla tortor. Sed sit amet lacus sagittis nibh bibendum varius. Duis iaculis mi a ante sagittis euismod nec eget orci. Quisque velit nunc, tristique sed purus accumsan, sodales dignissim turpis. Quisque eu posuere nisl. Vivamus luctus justo sed tellus dictum, eget consectetur dui aliquam. Phasellus a tempor odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pulvinar pulvinar magna, eu egestas felis ultrices eu. Sed cursus, tortor ac facilisis imperdiet, ante dolor pellentesque elit, in lacinia nibh ligula quis neque. Maecenas eu consectetur ipsum. Quisque id purus nec est euismod vestibulum vitae tincidunt dolor. Suspendisse vel orci neque.</p>
<h3 class="text-right" style="color:#746586;"><i class="far fa-tshirt"></i> Appearance</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#746586;"></div>
<!-- Paragraphs: Appearance -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus fringilla velit, nec interdum magna. Vivamus ultricies ut nulla vel posuere. Nulla nec ex quam. In in est sit amet enim viverra aliquet quis sit amet mauris. Suspendisse quis lacus dolor. Maecenas ac sem eros. Aliquam mauris leo, lacinia mattis suscipit ut, congue id felis. In ut justo massa. Cras suscipit enim sed egestas tempus. Morbi varius mi nulla. Quisque vitae dignissim ante. Aenean et leo tincidunt, placerat lacus porta, volutpat ligula.</p>
<!--------------------- Trivia Section --------------------->
<h3 style="color:#746586;"><i class="far fa-list"></i> Trivia</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#746586;"></div>
<ul class="mt-1 list-unstyled">
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Ut vehicula mauris gravida augue condimentum, nec viverra diam blandit. Fusce at sollicitudin nunc, ac auctor ligula.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel. Vestibulum lobortis mi ac vehicula tristique.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Aliquam maximus molestie diam, at bibendum eros ullamcorper a. Aenean ut eros vitae nunc congue volutpat vitae at libero.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Fusce at sollicitudin nunc, ac auctor ligula. Maecenas vitae iaculis dui.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget. Phasellus pretium odio eu erat dictum faucibus.
</li>
<li class="mb-1">
<i class="far fa-arrow-right"></i>
Ut interdum felis at metus blandit, id ultrices arcu sollicitudin. Ut leo ex, pretium a ipsum quis, blandit pellentesque arcu.
</li>
</ul>
<!------------------- Trivia Section End ------------------->
</div>
</div>
<div class="container">
<div class="row justify-content-between">
<!---------------------- Likes Section ---------------------->
<div class="col-lg-4 card card-block mb-4">
<ul class="list-unstyled">
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
yes
</li>
</ul>
</div>
<!-------------------- Likes Section End -------------------->
<!--------------------- Disikes Section --------------------->
<div class="col-lg-4 card card-block mb-4">
<ul class="list-unstyled">
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
no
</li>
</ul>
</div>
<!------------------- Disikes Section End ------------------->
<div class="col-lg-3 card card-inverse text-white mb-4" style="background-color:#746586;border-color:#746586;">
<div class="card-block">
<h3><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum maximus tempor."
</em></h3>
</div>
</div>
</div>
</div>
<div class="card card-block mb-4">
<h3 class="text-right" style="color:#746586;"><i class="far fa-book"></i> Backstory</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#746586;"></div>
<div>
<div class="float-left card mr-2" style="border:transparent;">
<!-- Put Image Here
Image can be any size, it will shrink down if it is bigger than 200px in order to fit -->
<img src="https://via.placeholder.com/200" class="rounded tooltipster" style="max-width:200px;" title="art by NAME">
</div>
<!-- Paragraphs: Backstory -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus purus, finibus id tincidunt consectetur, porta quis dolor. Aliquam erat volutpat. Vivamus eleifend arcu et gravida viverra. Pellentesque ac gravida nisi. Fusce tempus mauris ut est imperdiet, ut lacinia leo porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis sodales ipsum, quis rhoncus ex. In ultricies rhoncus justo id suscipit. Morbi pellentesque nibh arcu, non pellentesque tortor blandit sit amet. Aliquam pretium enim vel egestas molestie. Sed nec semper ex. Donec lobortis malesuada posuere. Pellentesque accumsan lobortis tempor.</p>
<p class="mb-2" style="text-align: justify;">Morbi at mi in nulla vehicula luctus. Fusce vel tempor ipsum. Aliquam erat volutpat. Donec vitae hendrerit lacus. Fusce eleifend, arcu a volutpat auctor, tellus libero sodales ex, imperdiet iaculis neque nisl a eros. Maecenas ac pulvinar massa. Etiam sed hendrerit turpis, id fermentum lectus. Donec convallis libero nec vehicula placerat. Aenean mauris tortor, pharetra sit amet interdum eu, vehicula in risus.</p>
<p class="mb-2" style="text-align: justify;">Maecenas vulputate dui non eleifend molestie. Integer accumsan et justo malesuada accumsan. Integer venenatis volutpat quam non pulvinar. Vivamus pellentesque erat vel est pretium mattis. Cras arcu est, tempus et dolor facilisis, convallis fringilla nunc. Nullam scelerisque elit sed dui iaculis pretium. Pellentesque quam lectus, interdum nec neque et, gravida hendrerit arcu. Etiam rhoncus orci a nisi aliquam, vel pulvinar augue dignissim. Suspendisse tristique ante nec eros eleifend volutpat. Aenean dui ante, tincidunt vitae ultricies a, ornare in urna. Praesent sagittis imperdiet mauris, non feugiat justo posuere a. In hac habitasse platea dictumst. Phasellus faucibus ut quam eu suscipit.</p>
<h3 style="color:#746586;"><i class="far fa-flag"></i> Present Day</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#746586;"></div>
<!-- Paragraphs: Present Day -->
<p class="mb-2" style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus fringilla velit, nec interdum magna. Vivamus ultricies ut nulla vel posuere. Nulla nec ex quam. In in est sit amet enim viverra aliquet quis sit amet mauris. Suspendisse quis lacus dolor. Maecenas ac sem eros. Aliquam mauris leo, lacinia mattis suscipit ut, congue id felis. In ut justo massa. Cras suscipit enim sed egestas tempus. Morbi varius mi nulla. Quisque vitae dignissim ante. Aenean et leo tincidunt, placerat lacus porta, volutpat ligula.</p>
</div>
</div>
<div class="card card-block">
<div class="container">
<div class="row justify-content-between">
<!--------------------- First Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.
</p>
</div>
<!------------------- First Relationship End ------------------->
<!--------------------- Second Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa. Nam elementum egestas semper.
</p>
</div>
<!------------------- Second Relationship End ------------------->
<!--------------------- Third Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae.
</p>
</div>
<!------------------- Third Relationship End ------------------->
<!--------------------- Fourth Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum.
</p>
</div>
<!------------------- Fourth Relationship End ------------------->
<!--------------------- Fifth Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros.
</p>
</div>
<!------------------- Fifth Relationship End ------------------->
<!--------------------- Sixth Relationship --------------------->
<div class="col-lg-4 mb-4">
<p style="text-align: justify;">
<!-- Character Name and Profile Link -->
<a href="link" class="badge" style="background-color:#746586;border-color:#746586;">Name</a>
<!-- Paragraph -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus.
</p>
</div>
<!------------------- Sixth Relationship End ------------------->
</div>
</div>
</div>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#746586" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>