<!--- 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="card-columns">
<!------------------------ Basics Section ------------------------>
<div class="card card-block card-inverse card-primary text-white text-center mb-2">
<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="card bg-faded mb-2">
<div class="card-block">
<h4>About</h4>
<!-- Paragraphs -->
<p style="text-align: justify;">Pellentesque a justo hendrerit, aliquam sapien in, imperdiet ipsum. Praesent ullamcorper, ligula in iaculis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra elit lectus, id venenatis libero maximus et. Duis vitae egestas quam. Pellentesque a justo hendrerit, aliquam sapien in, imperdiet ipsum. Praesent ullamcorper, ligula in iaculis dictum.</p>
</div>
</div>
<!---------------------- About Section End ---------------------->
<!---------------------- Appearance Section ---------------------->
<div class="card bg-faded mb-2">
<div class="card-block">
<h4>Appearance</h4>
<!-- Paragraphs -->
<p style="text-align: justify;">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.</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 card-primary text-white text-center mb-2">
<h4 class="text-center"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h4>
</div>
<!------------------------ Likes Section ------------------------>
<div class="card bg-faded mb-2">
<ul class="card-block list-unstyled">
<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>
give me
</li>
</ul>
</div>
<!---------------------- Likes Section End ---------------------->
<!----------------------- Dislikes Section ----------------------->
<div class="card bg-faded mb-2">
<ul class="card-block list-unstyled">
<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>
</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="card bg-faded mb-2">
<div class="card-block">
<!-- Character Name and Profile Link -->
<h4><a href="LINK">Name</a></h4>
<!-- Paragraphs -->
<p style="text-align: justify;">Vivamus in risus lobortis, tincidunt magna ut, vehicula odio. In hac habitasse platea dictumst. Pellentesque sit amet arcu maximus, dictum orci vitae, dignissim leo.</p>
</div>
</div>
<!-------------------- First Relationship End -------------------->
<!---------------------- Second Relationship ---------------------->
<div class="card bg-faded mb-2">
<div class="card-block">
<!-- Character Name and Profile Link -->
<h4><a href="LINK">Name</a></h4>
<!-- Paragraphs -->
<p style="text-align: justify;">Nulla pharetra tortor vitae lacinia placerat. Curabitur vitae hendrerit nisl. Nulla facilisi. Morbi aliquet, lorem sed pellentesque blandit, leo justo rutrum turpis.</p>
</div>
</div>
<!-------------------- Second Relationship End -------------------->
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster text-primary pull-right" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>