<!--- 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: #DB979C
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="card-columns">
<!------------------------ Basics Section ------------------------>
<div class="card card-block card-inverse text-white text-center mb-2" style="background-color:#DB979C;border-color:#DB979C;">
<h1 class="display-2">
<!-- Put Name Here -->
Name
</h1>
<h4>
<!-- Put Basics Here -->
Age - Gender - MBTI
</h4>
</div>
<!---------------------- Basics Section End ---------------------->
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img class="rounded" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!------------------------ About Section ------------------------>
<div class="ui-accordion card bg-faded mb-2">
<div class="ui-accordion-content card-block" style="height:350px;">
<h4>About</h4>
<!-- Paragraphs -->
<p style="text-align: justify;">This version is for characters who have longer paragaphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non lacus odio. Sed tincidunt tincidunt velit. Aenean convallis nisi libero, ac imperdiet orci feugiat sed. Mauris et dapibus metus, eu suscipit elit. Proin nec pretium mauris, id consectetur justo. Integer volutpat auctor imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dignissim lacinia dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae elit sed neque fermentum pulvinar. Vivamus vel arcu ut orci condimentum volutpat in eu neque. Maecenas ultricies placerat eleifend. Etiam molestie id ex elementum maximus. Pellentesque scelerisque fringilla est. Vivamus sed congue dui.</p>
<p style="text-align: justify;">Aenean sodales, urna nec auctor vestibulum, ligula dolor dapibus nisi, vestibulum porttitor tortor ipsum a metus. Fusce quis hendrerit ligula. Nulla dapibus augue non magna aliquet tempus. Fusce elementum lectus at diam dictum elementum. Cras iaculis elementum sem, at accumsan arcu fermentum eget. Nam convallis tempus rutrum. Nunc a nunc augue.</p>
</div>
</div>
<!---------------------- About Section End ---------------------->
<!---------------------- Appearance Section ---------------------->
<div class="ui-accordion card bg-faded mb-2">
<div class="ui-accordion-content card-block" style="height:200px;">
<h4>Appearance</h4>
<!-- Paragraphs -->
<p style="text-align: justify;">Pellentesque a justo hendrerit, aliquam sapien in, imperdiet ipsum. Sed euismod neque faucibus eros venenatis facilisis. Vivamus cursus lacus a odio varius, eget tincidunt eros ultricies. Quisque bibendum, metus nec blandit venenatis, ligula lectus porta augue, eu tempor mauris enim non neque. Sed a urna orci. Etiam quis tortor id purus sollicitudin consectetur.</p>
<p style="text-align: justify;">Fusce quis hendrerit ligula. Nulla dapibus augue non magna aliquet tempus. Fusce elementum lectus at diam dictum elementum. Cras iaculis elementum sem, at accumsan arcu fermentum eget. Nam convallis tempus rutrum. Nunc a nunc augue.</p>
</div>
</div>
<!-------------------- Appearance Section End -------------------->
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img class="rounded" src="https://via.placeholder.com/400x275">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="card card-block card-inverse text-white text-center mb-2" style="background-color:#DB979C;border-color:#DB979C;">
<h4 class="text-center"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h4>
</div>
<!------------------------ Likes Section ------------------------>
<div class="ui-accordion card bg-faded mb-2">
<ul class="ui-accordion-content card-block list-unstyled" style="height:150px;">
<li>
<i class="fa fa-check"></i>
yes
</li>
<li>
<i class="fa fa-check"></i>
duh of course
</li>
<li>
<i class="fa fa-check"></i>
more yes
</li>
<li>
<i class="fa fa-check"></i>
definitely absolutely
</li>
<li>
<i class="fa fa-check"></i>
yesssssss
</li>
<li>
<i class="fa fa-check"></i>
y to the e to the s
</li>
<li>
<i class="fa fa-check"></i>
give me that
</li>
</ul>
</div>
<!---------------------- Likes Section End ---------------------->
<!----------------------- Dislikes Section ----------------------->
<div class="ui-accordion card bg-faded mb-2">
<ul class="ui-accordion-content card-block list-unstyled" style="height:150px;">
<li>
<i class="fa fa-times"></i>
no
</li>
<li>
<i class="fa fa-times"></i>
maybe not
</li>
<li>
<i class="fa fa-times"></i>
of course not
</li>
<li>
<i class="fa fa-times"></i>
ewww gross
</li>
<li>
<i class="fa fa-times"></i>
more no
</li>
<li>
<i class="fa fa-times"></i>
why
</li>
<li>
<i class="fa fa-times"></i>
noooo
</li>
<li>
<i class="fa fa-times"></i>
get it away
</li>
</ul>
</div>
<!--------------------- Dislikes Section End --------------------->
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide -->
<img class="rounded" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:10px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!---------------------- First Relationship ---------------------->
<div class="ui-accordion card bg-faded mb-2">
<div class="ui-accordion-content card-block">
<!-- Character Name and Profile Link -->
<h4><a href="LINK" style="color:#DB979C;">Name</a></h4>
<!-- Paragraphs -->
<p style="text-align: justify;height:100px;">Vivamus in risus lobortis, tincidunt magna ut, vehicula odio. In hac habitasse platea dictumst. Pellentesque sit amet arcu maximus, dictum orci vitae, dignissim leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam finibus odio eget nibh fringilla, pellentesque convallis ipsum efficitur. Proin commodo odio quis rhoncus dignissim.</p>
</div>
</div>
<!-------------------- First Relationship End -------------------->
<!---------------------- Second Relationship ---------------------->
<div class="ui-accordion card bg-faded mb-2">
<div class="ui-accordion-content card-block">
<!-- Character Name and Profile Link -->
<h4><a href="LINK" style="color:#DB979C;">Name</a></h4>
<!-- Paragraphs -->
<p style="text-align: justify;height:100px;">Nulla pharetra tortor vitae lacinia placerat. Curabitur vitae hendrerit nisl. Nulla facilisi. Morbi aliquet, lorem sed pellentesque blandit, leo justo rutrum turpis, nec finibus justo tortor non lorem. Mauris erat felis, lacinia volutpat commodo quis, consectetur nec nisl.</p>
</div>
</div>
<!-------------------- Second Relationship End -------------------->
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#DB979C" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>