[F2U] Code Request 1

<!--
Borders: #008CBA
Titles: #5BC0DE
Text: #636C72
Containers: #F7F7F9
-->

<div class="container px-4 pt-4 pb-1" style="background: #008CBA; font-family: tahoma; min-width: 500px;">

<div class="col-12 p-3 display-4" style="background: #5BC0DE; color: #F7F7F9;">

<p class="d-inline">Character Name</p>

<p class="pull-right">adj. adj. adj</p>

</div>

<div class="row no-gutters">

<div class="col-lg-8 pr-lg-3 form-group">

<div class="col-12" style="background: #F7F7F9; height: 20em; overflow: auto;">

<p class="py-2" style="color: #636C72; text-align: justify; font-size: 18px;">desc of character</p>

</div>

<div class="col-12 p-3" style="background: #5BC0DE; height: 4em;">

<p style="color: #F7F7F9; font-size: 18px; font-style: italic;">" quote "</p>

</div>

</div>

<div class="col-lg-4 pl-0 form-group">

<div class="col-12 p-2" style="background: #F7F7F9;">

<div style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 22.8em;">

<br>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col-lg-6 form-group pr-3">

<div class="col-12 py-2 px-3 display-4" style="background: #5BC0DE; color: #F7F7F9;">About</div>

<div class="col-12" style="background: #F7F7F9;">

<div class="row pt-3" style="color: #636C72; font-size: 18px; line-height: 2.49em;">

<div class="col" style="font-weight: bold;">

<ul class="list-unstyled">

<li>full name</li>

<li>nickname</li>

<li>age</li>

<li>birthday</li>

<li>relationship status</li>

<li>gender</li>

<li>species</li>

<li>height</li>

<li>status</li>

<li>voice claim</li>

</ul>

</div>

<div class="col">

<ul class="list-unstyled" style="text-align: right;">

<li>content</li>

<li>content</li>

<li>content</li>

<li>content</li>

<li>content</li>

<li>content</li>

<li>content</li>

<li>content</li>

<li>alive or dead?</li>

<li>content</li>

</ul>

</div>

</div>

</div>

</div>

<div class="col-lg-6 form-group pl-lg-0">

<div class="col-12 py-2 px-3 display-4" style="background: #5BC0DE; color: #F7F7F9;">Relationships</div>

<div id="rel" style="height: 32.75em; overflow-y: auto; overflow-x: hidden;">

<div class="row form-group">

<div class="col-4 pr-3">

<div class="col-12 p-2" style="background: #F7F7F9;">

<div style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 9.2em;">

<br>

</div>

</div>

</div>

<div class="col-8 pl-0">

<div class="col-12 py-2" style="background: #F7F7F9; height: 10.2em; width: 100%; overflow: auto;">

<p style="font-size: 18px;">name . relationship</p>

<p style="font-size: 16px; text-align: justify;">desc of relationship</p>

</div>

</div>

</div>

<div class="row form-group">

<div class="col-4 pr-3">

<div class="col-12 p-2" style="background: #F7F7F9;">

<div style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 9em;">

<br>

</div>

</div>

</div>

<div class="col-8 pl-0">

<div class="col-12 py-2" style="background: #F7F7F9; height: 10.1em; width: 100%; overflow: auto;">

<p style="font-size: 18px;">name . relationship</p>

<p style="font-size: 16px; text-align: justify;">desc of relationship</p>

</div>

</div>

</div>

<div class="row form-group">

<div class="col-4 pr-3">

<div class="col-12 p-2" style="background: #F7F7F9;">

<div style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 9em;">

<br>

</div>

</div>

</div>

<div class="col-8 pl-0">

<div class="col-12 py-2" style="background: #F7F7F9; height: 10.1em; width: 100%; overflow: auto;">

<p style="font-size: 18px;">name . relationship</p>

<p style="font-size: 16px; text-align: justify;">desc of relationship</p>

</div>

</div>

</div>

<div class="row">

<div class="col-4 pr-3">

<div class="col-12 p-2" style="background: #F7F7F9;">

<div style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 9em;">

<br>

</div>

</div>

</div>

<div class="col-8 pl-0">

<div class="col-12 py-2" style="background: #F7F7F9; height: 10.1em; width: 100%; overflow: auto;">

<p style="font-size: 18px;">name . relationship</p>

<p style="font-size: 16px; text-align: justify;">desc of relationship</p>

</div>

</div>

</div>

</div>

</div>

</div>

<div style="margin-top: -1em; text-align: right;"><a class="tooltipster" href="https://toyhou.se/subject404" title="code by subject404"><i class="text-info fas fa-code"></i></a></div>

</div>