<!--- 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 text-primary">
<div class="panel card-block bg-primary card-outline-primary rounded-0 progress-bar-striped progress-bar-animated" style="height:100px;"></div>
<div class="card card-block bg-faded rounded-0" style="border:transparent">
<div class="row justify-content-between">
<!------------------------ Basics Section ------------------------>
<div class="col-lg-3 text-center">
<!-- Put Image Here
Recommended to use a square image that is atleast 250x250px -->
<img src="https://via.placeholder.com/250" style="margin-top:-50px;" class="img-thumbnail bg-faded border-0 rounded-circle mb-4" width="250">
<ul class="list-unstyled">
<li class="mb-3">
<span class="pull-left mb-0">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Full Name Here -->
Full Name
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="pull-left mb-0">
Pronouns
</span>
<span class="pull-right mb-0">
<!-- Put Pronouns Here -->
Their Pronouns
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="pull-left mb-0">
Sexuality
</span>
<span class="pull-right mb-0">
<!-- Put Sexuality Here -->
Their Sexuality
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="pull-left mb-0">
Ethnicity
</span>
<span class="pull-right mb-0">
<!-- Put Ethnicity Here -->
Their Ethnicity
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
<span class="pull-left mb-0">
Occupation
</span>
<span class="pull-right mb-0">
<!-- Put Occupation Here -->
Occupation
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
<!---------------------- Basics Section End ---------------------->
<div class="col-lg-9">
<!------------------------ About Section ------------------------>
<!------- Top Line: Large Screens ------->
<div class="d-none d-lg-block">
<div class="row justify-content-between display-2">
<div class="col-4 text-left mb-0">
<!-- Put Name Here -->
Name
</div>
<div class="col-4 text-center mb-0">
<!-- Put Age Here -->
Age
</div>
<div class="col-4 text-right mb-0">
<!-- Put Gender Here -->
Gender
</div>
</div>
</div>
<!------- Top Line: Small Screens ------->
<div class="d-lg-none">
<ul class="list-unstyled display-2 text-center">
<li>
<!-- Put Name Here -->
Name
</li>
<li>
<!-- Put Age Here -->
Age
</li>
<li>
<!-- Put Gender Here -->
Gender
</li>
</ul>
</div>
<hr class="mt-3" style="border:1px dashed;">
<p class="display-4 text-center">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<!-- Paragraphs -->
<p class="mt-2 mb-2" style="text-align: justify;">Donec lectus mi, euismod id odio vitae, ullamcorper interdum tortor. Duis tempor, ex vel porta placerat, mi odio finibus ex, eget efficitur odio ex at turpis. Integer vitae elit felis. Phasellus fermentum lacinia ipsum, eu blandit arcu vulputate quis. Morbi facilisis, velit et feugiat gravida, nisi dui volutpat nisi, in varius tellus nisl sed mi.</p>
<p class="mt-2 mb-2" style="text-align: justify;">Sed id felis ut velit gravida ullamcorper nec nec sapien. Donec imperdiet ut libero non dictum. Integer sed nisl placerat, tincidunt arcu et, aliquet sem. Nullam feugiat velit sit amet ligula lacinia accumsan.</p>
</hr>
<!---------------------- About Section End ---------------------->
<div class="row justify-content-between mt-4">
<!---------------------- Likes Section ---------------------->
<div class="col-lg-6">
<p class="display-4 mb-2">Likes</p>
<hr class="mt-2" style="border:1px dashed;">
<ul class="mt-1 list-unstyled">
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
<li class="mb-1">
<i class="fa fa-check"></i>
like
</li>
</ul>
</hr>
</div>
<!-------------------- Likes Section End -------------------->
<!--------------------- Dislikes Section --------------------->
<div class="col-lg-6">
<p class="display-4 mb-2">Dislikes</p>
<hr class="mt-2" style="border:1px dashed;">
<ul class="list-unstyled">
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
<li class="mb-1">
<i class="fa fa-times"></i>
dislike
</li>
</ul>
</hr>
</div>
<!------------------- Dislikes Section End ------------------->
</div>
</div>
</div>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster text-primary pull-right ml-2" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
<!-- Artist Credit -->
<a class="tooltipster text-primary pull-right" href="LINK" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>