Enemy Example
<div class="col-md-3 mb-3">
<div class="card h-100">
<div class="card-header text-center pb-0">
<div class="world-entry-image_iconpage"><a href="https://justpaste.it/redirect/2lmst/https%3A%2F%2Ftheaphexcollective.com"> <img class="circular--square" src="https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700372435.jpg" width="150" height="150"/></a></div>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item pb-0">
<h6 class="m-0 p-0">Unknown</h6>
<h4>Enemy</h4>
<progress id="enemy" value="1" max="4"></progress>
</li>
</ul>
</div>
</div>
Friend Example
<div class="col-md-3 mb-3">
<div class="card h-100">
<div class="card-header text-center pb-0">
<div class="world-entry-image_iconpage"><a href="https://justpaste.it/redirect/2lmst/https%3A%2F%2Ftheaphexcollective.com"> <img class="circular--square" src="https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700372435.jpg" width="150" height="150" /></a></div>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item pb-0">
<h6 class="m-0 p-0">Unknown</h6>
<h4>Friend</h4>
<progress id="friend" value="1" max="4"></progress>
</li>
</ul>
</div>
</div>
Romantic Example
<div class="col-md-3 mb-3">
<div class="card h-100">
<div class="card-header text-center pb-0">
<div class="world-entry-image_iconpage"><a href="https://justpaste.it/redirect/2lmst/https%3A%2F%2Ftheaphexcollective.com"> <img class="circular--square" src="https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700372435.jpg" width="150" height="150" /></a></div>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item pb-0">
<h6 class="m-0 p-0">Unknown</h6>
<h4>Romantic Interest</h4>
<progress id="romantic" value="4" max="4"></progress>
</li>
</ul>
</div>
</div>