Placeholder Profile [C] HTML (Bootstrap code)

<!----

Card border/background: secondary

Special text/card: info

Background: faded

---->

<div class="container" style="width:800px;">

<!--- Little disclaimer --->

<div class="card bg-faded border-0 rounded-0 mx-auto mb-2 bg-info" style="width:680px; border-radius:30px;">

<p class="text-dark" style="text-align:center; font-size:16px;"><b>Please note!</b> This is a temporary code. A finished code will replace this at a later date.</p>

</div>

<div class="card bg-faded card-outline-secondary" style="border-radius:20px; border-width:2px">

<div class="row no-gutters">

<!--- Left; basic info --->

<div class="col-3">

<div class="card bg-secondary border-0 rounded-0 p-1" style="height:300px; border-top-left-radius:17px; border-bottom-left-radius:17px;">

<p class="mb-3" style="text-align: center; font-variant: small-caps; font-size:20px"><b>Basics</b></p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Nickname</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Real name</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Pronouns</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Age</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Species</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Orientation</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Occupation</b> info</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Living status</b> info</p>

<br>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Creator</b> @user</p>

<p class="col-12 justify-content-between my-0" style="text-align: center; flex: 0 0 0%;">

<b>Designer</b> @user</p>

</div>

</div>

<!--- Middle; simple description --->

<div class="col-6">

<div class="card bg-faded border-0 rounded-0 p-2" style="height:263px; overflow-y:auto">

<p style="text-align:justify;">Teeny tiny little vague character description. It's not much... surely you could at least fill this out? 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. This scrolls by the way, if you really need it to.</p>

</div>

<!-- Character song (or voice claim) link -->

<div class="card bg-faded card-outline-secondary rounded-0 p-1" style="height:37px; border-width:4px 0 0 0;">

<p class="mx-auto" style="text-align:center; font-size:16px"><a href="" class="text-info">Song name</a> - Creator name</p>

</div>

</div>

<!--- Right; future notes --->

<div class="col-3">

<div class="card bg-secondary border-0 rounded-0 p-1" style="height:300px; border-top-right-radius:17px; border-bottom-right-radius:17px; overflow-y:auto">

<p class="mb-3" style="text-align: center; font-variant: small-caps; font-size:20px"><b>Notes</b></p>

<ul style="margin-left:-10px">

<li> Little notes that </li>

<li> you want to keep track of </li>

<li> possibly for your final code </li>

<li> or maybe just brainstorming ideas</li>

<li> believe it or not this box actually does scroll</li>

</ul>

</div>

</div>

</div>

</div>

<!--- Code credit (you can move, but don't delete!) --->

<p style="font-size:13px; text-align:right;" class="mr-4"><a style="color:#c4415d;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>

</div>