Profile
<!-- this isn't a scrolling layout, the box will keep growing as you write!! so this code works best for shorter profiles~ -->
<div class="container container-fluid" style="margin: auto; max-width: 1200px;">
<div class="row no-gutters">
<div class="col-md-5" style="display: flex; padding: 5px;">
<!-- image - change the background-position to crop it differently! -->
<div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; width: 100%; min-height: 230px;"></div>
</div>
<!-- main content -->
<div class="col-md-7" style="display: flex; padding: 5px;">
<div class="card bg-faded border-0" style="width: 100%;">
<!-- header -->
<div class="card-header border-0">
<h1 class="text-primary" style="margin-bottom: 0; font-size: 3em;"><b>character name</b></h1>
<p class="text-secondary"><i>info | info | info</i></p>
</div>
<!-- profile body -->
<div class="card-block" style="padding-bottom: 0;">
<!-- general info table -->
<h4 class="text-primary"><b>general info</b></h4>
<table class="table" style="border: 0; margin: auto;">
<tr>
<td style="padding: 0em; font-weight: bold;">name</td>
<td style="padding: 0em;"><i class="fal fa-chevron-right"></i></td>
<td style="padding: 0em;">name</td>
</tr>
<tr>
<td style="padding: 0em; font-weight: bold;">pronouns</td>
<td style="padding: 0em;"><i class="fal fa-chevron-right"></i></td>
<td style="padding: 0em;">pronouns</td>
</tr>
<tr>
<td style="padding: 0em; font-weight: bold;">age</td>
<td style="padding: 0em;"><i class="fal fa-chevron-right"></i></td>
<td style="padding: 0em;">age</td>
</tr>
<tr>
<td style="padding: 0em; font-weight: bold;">status</td>
<td style="padding: 0em;"><i class="fal fa-chevron-right"></i></td>
<td style="padding: 0em;">status</td>
</tr>
<tr>
<td style="padding: 0em; font-weight: bold;">theme song</td>
<td style="padding: 0em;"><i class="fal fa-chevron-right"></i></td>
<td style="padding: 0em;"><a href="#"><i class="fas fa-music-alt"></i><i class="fas fa-music"></i><i class="fas fa-music-alt"></i></a></td>
</tr>
</table>
<hr>
<!-- bio text -->
<h4 class="text-primary"><b>biography</b></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<!-- design notes -->
<h4 class="text-primary"><b>design notes</b></h4>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-pen text-primary"></i></span>design note</li>
<li><span class="fa-li"><i class="fas fa-pen text-primary"></i></span>design note</li>
<li><span class="fa-li"><i class="fas fa-pen text-primary"></i></span>design note</li>
</ul>
</div>
<!-- footer -->
<div class="card-footer border-0">
<!-- code credit! this would be a good place to add art credit too if needed! -->
<p class="text-center text-secondary"><i>code by snail-legs</i></p>
</div>
</div>
</div>
</div>
</div>
