<!--
colors used:
box color: bg-dark
text color: text-white
accent text color: text-warning
bar background color: bg-light
bar progress color: bg-warning
if you want rounded corners:
search and replace rounded-0 with rounded
current margin factor:
15px
(search and replace this with your desired space between the elements and everything will adjust)
current total max-width:
900px
-->
<div class="row mx-auto" style="max-width: 900px">
<!-- first box, wide -->
<div class="col-md-8 col-sm-12" style="position: relative; padding-top: 33.3333%; min-height: 200px;">
<div class="justify-content-center align-items-center rounded-0 bg-dark text-white" style="position: absolute; margin: 15px; left: 0; right: 0; top: 0; bottom: 0;">
<div class="px-lg-5 px-3 py-2" style="overflow-y: auto; max-height: 100%;">
<h2 class="display-2 text-warning">Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- end first box, wide -->
<!-- second box, small square -->
<div class="col-md-4 col-sm-12" style="position: relative; padding-top: 33.3333%; min-height: 200px;">
<div class="justify-content-center align-items-center rounded-0 text-white bg-dark" style="position: absolute; margin: 15px; left: 0; right: 0; top: 0; bottom: 0;">
<!-- icon -->
<i class="fas fa-seedling fa-4x"></i>
</div>
</div>
<!-- end second box, small square -->
<!-- third + fourth box, 2 small squares (left) -->
<div class="col-md-4 col-sm-12" style="position: relative; padding-top: 66.6666%; min-height: 400px;">
<!-- third box, top small square (left) -->
<div class="justify-content-center align-items-center rounded-0 text-white bg-dark" style="position: absolute; margin: 15px; left: 0; right: 0; top: 0; height: calc(-15px * 2 + 50%);">
<div class="p-2 text-center w-100" style="overflow-y: auto; max-height: 100%; line-height: 1.6em;">
<!-- basic info -->
<h4 class="text-warning m-0" style="font-size: 1em; margin-top: -10px;">Age</h4>
<p class="mb-2">content</p>
<h4 class="text-warning m-0" style="font-size: 1em;">Gender</h4>
<p class="mb-2">content</p>
<h4 class="text-warning m-0" style="font-size: 1em;">Pronouns</h4>
<p class="mb-2">content</p>
<h4 class="text-warning m-0" style="font-size: 1em;">Status</h4>
<p class="mb-2">content</p>
<h4 class="text-warning m-0" style="font-size: 1em;">Role</h4>
<p>content</p>
</div>
</div>
<!-- end third box, top small square (left) -->
<!-- forth box, bottom small square (left) -->
<div class="justify-content-center align-items-center rounded-0 text-white bg-dark" style="position: absolute; margin: 15px; left: 0; right: 0; bottom: 0; height: calc(-15px * 2 + 50%)">
<div class="p-2 text-center w-100" style="overflow-y: auto; max-height: 100%">
<!-- likes & dislikes -->
<h2 class="display-4 text-warning" style="font-size: 1.6em">Likes</h2>
<p>content, content, content<br>content, content</p>
<h2 class="display-4 text-warning" style="font-size: 1.6em">Dislikes</h2>
<p>content, content, content<br>content, content</p>
</div>
</div>
<!-- end forth box, bottom small square (left) -->
</div>
<!-- end third + fourth box, 2 small squares (left) -->
<!-- fifth box, large square (right) -->
<div class="col-md-8 col-sm-12" style="position: relative; padding-top: 66.6666%; min-height: 200px;">
<div class="rounded-0" style="margin: 15px; position: absolute; left: 0; right:0; top: 0; bottom: 0; background-size: cover; background-position: top center;
background-image: url('IMAGE_URL');">
<!-- insert image url here; will automatically fill the whole square; change position with background-position -->
</div>
</div>
<!-- end fifth box, large square (right) -->
<!-- sixth box, wide box -->
<div class="col-md-8 col-sm-12" style="position: relative; padding-top: 33.3333%; min-height: 200px;">
<div class="justify-content-center align-items-center rounded-0 bg-dark text-white" style="position: absolute; margin: 15px; left: 0; right: 0; top: 0; bottom: 0;">
<div class="px-lg-5 px-3 py-2" style="overflow-y: auto; max-height: 100%">
<!-- biography, will automatically scroll so don't be shy to put longer text here -->
<h4 class="display-4 text-warning" style="font-size: 1.8em;">Biography</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>
</div>
</div>
</div>
<!-- end sixth box, wide box -->
<!-- seventh box, small square box -->
<div class="col-md-4 col-sm-12" style="position: relative; padding-top: 33.3333%; min-height: 200px;">
<div class="justify-content-center align-items-center rounded-0 bg-dark text-white" style="position: absolute; margin: 15px; left: 0; right: 0; top: 0; bottom: 0;">
<div class="px-lg-3 px-2 py-2 text-center w-100" style="overflow-y: auto; max-height: 100%;">
<!-- stat bars -->
<h2 class="display-4 text-warning mb-4" style="font-size: 1.8em;">Stats</h2>
<h3 class="display-4 mb-1 mt-2" style="font-size: 1em;">Kindness</h3>
<div class="bg-light w-100" style="height: 0.8em; padding: 2px">
<div class="progress-bar h-100 bg-warning" style="width:100%;"></div>
</div>
<h3 class="display-4 mb-1 mt-2" style="font-size: 1em;">Patience</h3>
<div class="bg-light w-100" style="height: 0.8em; padding: 2px">
<div class="progress-bar h-100 bg-warning" style="width:75%;"></div>
</div>
<h3 class="display-4 mb-1 mt-2" style="font-size: 1em;">Intelligence</h3>
<div class="bg-light w-100" style="height: 0.8em; padding: 2px">
<div class="progress-bar h-100 bg-warning" style="width:50%;"></div>
</div>
<h3 class="display-4 mb-1 mt-2" style="font-size: 1em;">Confidence</h3>
<div class="bg-light w-100" style="height: 0.8em; padding: 2px">
<div class="progress-bar h-100 bg-warning" style="width:25%;"></div>
</div>
<h3 class="display-4 mb-1 mt-2" style="font-size: 1em;">Humour</h3>
<div class="bg-light w-100" style="height: 0.8em; padding: 2px">
<div class="progress-bar h-100 bg-warning" style="width:5%;"></div>
</div>
</div>
</div>
</div>
<!-- end seventh box, wide box -->
<!-- credits, do not remove! -->
<div class="text-right w-100" style="font-size: 0.8em;">
<a href="/geister_ghost" class="text-secondary" style="text-decoration:none;" data-toggle="tooltip" data-placement="bottom" title="Code by geister_ghost"><i class="fas fa-code"></i></a>
</div>
</div>