<!--- 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: #6AA7AE
- 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-4 card card-block card-inverse text-white rounded-0 mb-4" style="background-color:#6AA7AE; border-color:#6AA7AE;">
<div class="card-block text-center">
<!-- Put Image Here -->
<img class="fr-rounded mb-2" src="https://via.placeholder.com/250" width="250">
<p class="display-2 mb-2">Name</p>
<h4 class="mb-2">
<!-- Put Basics Here -->
Age - Gender - Adjective
</h4>
<h3 class="mb-0"><em>
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</em></h3>
</div>
</div>
<!-------------------------- Side Bar End -------------------------->
<div class="col-md-8">
<div class="card card-block bg-faded rounded-0 mb-4" style="border:transparent">
<h3 style="color:#6AA7AE;"><i class="far fa-address-card"></i> About</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs: About -->
<p 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.</p>
<p style="text-align: justify;">Phasellus fermentum ultrices euismod. Suspendisse ac lorem augue. Vel scelerisque elit venenatis sed. Eleifend enim fringilla ac. Nunc malesuada tristique placerat. Sed vehicula faucibus laoreet. Etiam et elit fringilla, fringilla purus a, ultricies dolor. Nunc ornare quis nisi fringilla suscipit. Cras volutpat ultrices pulvinar.</p>
<h3 class="text-right" style="color:#6AA7AE;"><i class="far fa-tshirt"></i> Appearance</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs: Appearance -->
<p style="text-align: justify;">Donec quis lorem sodales, fermentum eros imperdiet, tincidunt est. Phasellus fermentum ultrices euismod. Suspendisse ac lorem augue. Vel scelerisque elit venenatis sed. Suspendisse blandit dolor mauris, nec eleifend enim fringilla ac. Nunc malesuada tristique placerat.</p>
</div>
<div class="row justify-content-between">
<!--------------------- Likes Section --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0 mb-4" style="border:transparent">
<h3 style="color:#6AA7AE;"><i class="far fa-check"></i> Likes</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<ul class="list-unstyled">
<li>
<i class="far fa-arrow-right"></i>
like
</li>
<li>
<i class="far fa-arrow-right"></i>
like
</li>
<li>
<i class="far fa-arrow-right"></i>
like
</li>
<li>
<i class="far fa-arrow-right"></i>
like
</li>
<li>
<i class="far fa-arrow-right"></i>
like
</li>
</ul>
</div>
</div>
<!------------------- Likes Section End ------------------->
<!--------------------- Dislikes Section --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0 mb-4" style="border:transparent">
<h3 style="color:#6AA7AE;"><i class="far fa-times"></i> Dislikes</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<ul class="list-unstyled">
<li>
<i class="far fa-arrow-right"></i>
dislike
</li>
<li>
<i class="far fa-arrow-right"></i>
dislike
</li>
<li>
<i class="far fa-arrow-right"></i>
dislike
</li>
<li>
<i class="far fa-arrow-right"></i>
dislike
</li>
<li>
<i class="far fa-arrow-right"></i>
dislike
</li>
</ul>
</div>
</div>
<!------------------- Dislikes Section End ------------------->
<!--------------------- Hobbies Section --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0 mb-4" style="border:transparent">
<h3 style="color:#6AA7AE;"><i class="far fa-cog"></i> Hobbies</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<ul class="list-unstyled">
<li>
<i class="far fa-arrow-right"></i>
hobby
</li>
<li>
<i class="far fa-arrow-right"></i>
hobby
</li>
<li>
<i class="far fa-arrow-right"></i>
hobby
</li>
<li>
<i class="far fa-arrow-right"></i>
hobby
</li>
<li>
<i class="far fa-arrow-right"></i>
hobby
</li>
</ul>
</div>
</div>
<!------------------- Hobbies Section End ------------------->
</div>
</div>
<div class="card card-block bg-faded rounded-0 mb-4" style="border:transparent">
<h3 style="color:#6AA7AE;"><i class="far fa-book"></i> Backstory</h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs: Backstory -->
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ultricies odio, ac pellentesque leo. Mauris lacus dolor, dignissim quis augue iaculis, sagittis consectetur turpis. In varius eget leo et tempor. Nulla malesuada diam ut ullamcorper blandit. Vestibulum leo eros, fringilla auctor pellentesque sit amet, tristique in quam. Fusce sodales dolor dolor, et laoreet nisi consectetur ut. Nulla volutpat ipsum eu fermentum pellentesque. Donec quis luctus dui. Ut nec orci varius, viverra sapien non, hendrerit lectus. Sed ac posuere nisi. Pellentesque fermentum tempus dolor, semper bibendum ligula lobortis nec. In at libero quis lectus eleifend imperdiet in eu justo. Vestibulum placerat tristique convallis. Vestibulum et facilisis tortor. Curabitur ut mauris vitae urna imperdiet aliquam.</p>
<p style="text-align: justify;">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper. Nullam quis dapibus ex, rutrum laoreet tellus. Maecenas eget urna turpis. Ut nec lectus molestie leo vulputate dictum. Aenean placerat tincidunt dignissim. Cras sem enim, facilisis in sollicitudin eu, tempor efficitur tellus. Ut cursus felis eu nulla porttitor, ac suscipit lacus tempor.</p>
</div>
<!---------------------- Relationships Section ---------------------->
<div class="row justify-content-between">
<!--------------------- First Relationship --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0" style="border:transparent">
<!-- Character Name and Profile Link -->
<h3><a href="link" style="color:#6AA7AE; text-decoration:none;"><i class="far fa-user"></i> Name</a></h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">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>
</div>
<!------------------- First Relationship End ------------------->
<!--------------------- Second Relationship --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0" style="border:transparent">
<!-- Character Name and Profile Link -->
<h3><a href="link" style="color:#6AA7AE; text-decoration:none;"><i class="far fa-user"></i> Name</a></h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">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>
</div>
<!------------------- Second Relationship End ------------------->
<!--------------------- Third Relationship --------------------->
<div class="col-md-4">
<div class="card card-block bg-faded rounded-0" style="border:transparent">
<!-- Character Name and Profile Link -->
<h3><a href="link" style="color:#6AA7AE; text-decoration:none;"><i class="far fa-user"></i> Name</a></h3>
<div class="mb-2" style="height:1px; width:100%; background-color:#6AA7AE;"></div>
<!-- Paragraphs -->
<p style="text-align: justify;">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>
</div>
<!------------------- Third Relationship End ------------------->
</div>
<!------------------- Relationships Section End ------------------->
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right ml-2" style="color:#6AA7AE" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
<!-- Artist Credit -->
<a class="tooltipster pull-right" style="color:#6AA7AE" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>