<!--- 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="row justify-content-between">
<!------------------------ First Row ------------------------>
<div class="col-md-5 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Name Here -->
Full Name
</div>
</div>
<div class="col-md-3 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Age Here -->
Age
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Gender Here -->
Gender
</div>
</div>
<!------------------------ Second Row ------------------------>
<div class="col-md-3 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Pronouns Here -->
Pronouns
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Occupation Here -->
Occupation
</div>
</div>
<div class="col-md-5 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Sexuality Here -->
Sexuality
</div>
</div>
<!------------------------ Third Row ------------------------>
<div class="col-12 mb-4">
<div class="card card-block card-inverse card-primary text-white display-4" style="border-radius:15px">
<!-- Put Quote Here -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</div>
</div>
</div>
<!------------------------ Fourth Row ------------------------>
<div class="row justify-content-between no-gutters mb-4">
<div class="col-3">
<div class="card card-block rounded-left card-primary text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px">
Likes
</div>
</div>
<div class="col-9">
<div class="card card-block card-primary bg-faded text-primary display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px">
<!-- Put Likes Here -->
List of likes
</div>
</div>
</div>
<!------------------------ Fifth Row ------------------------>
<div class="row justify-content-between no-gutters mb-4">
<div class="col-3">
<div class="card card-block rounded-left card-primary text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px">
Dislikes
</div>
</div>
<div class="col-9">
<div class="card card-block card-primary bg-faded text-primary display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px">
<!-- Put Dislikes Here -->
List of dislikes
</div>
</div>
</div>
<!------------------------ Sixth Row ------------------------>
<div class="row justify-content-between no-gutters">
<div class="col-3">
<div class="card card-block rounded-left card-primary text-white display-4 h-100" style="border-top-right-radius:0px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:15px">
About
</div>
</div>
<div class="col-9">
<div class="card card-block card-primary bg-faded text-primary display-4" style="border-width:5px;border-top-right-radius:15px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:0px">
<!-- Put About Here -->
Can be a list of traits or a paragraph
</div>
</div>
</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>