<!--
very very tiny code, so feel free to modify and use however, so long as the credit stays somewhere visible ^__^
accent color - #EC82B4
CTRL+F and replace all with the hex you would like to use instead!
(note, try to keep it a relatively dark or vivid/"bright" color, it will show up on a light background on all themes
-->
<div class="col-12 col-lg-10 mx-auto">
<!--
container background image
it's set to repeat automatically, if you do not want this effect, add "background-repeat: no-repeat;" inside of the style=" " (there's a blank line there that you can paste it in :])
adjust the border however you'd like below it
-->
<div class="col-12 col-lg-6 mx-auto card p-1 rounded-1" style="background-image:url(https://media.discordapp.net/attachments/955323640541503508/987724737327271976/unknown.png);
border-width: 3px; border-style:groove; border-color:#EC82B4; box-shadow:2px 2px 2px;">
<div class="row mx-0">
<div class="col-12 col-md-6 col-lg-4 p-1 mx-auto">
<!--
left "icon" image
it will automatically fit into the container, so no need to worry about sizing,
though i do recommend using an image with a rough 2:3 ratio for best results (like in the example) vs a square one
(but a square will work too!
-->
<img class="img-thumbnail rounded-0 p-2 bg-light" style="box-shadow: 2px 2px 0px #EC82B4; object-fit: cover; width: 100%; min-height: 100%;"
src="https://media.discordapp.net/attachments/955323640541503508/987717307939844186/nweon.png">
</div>
<div class="col-12 col-md-6 col-lg-8 px-1 pt-2 pb-0 my-auto">
<div class="card rounded-0 bg-light text-dark" style="box-shadow: 2px 2px 0px #EC82B4; ">
<!--
NAME (+ prns)
NOTE: the name bar does NOT scroll. though, the smaller one below it does, so if you need to put the pronouns/anything else that won't fit in there, please do!
-->
<p class="mx-auto" style="font-size: 35px; font-weight:400; letter-spacing:-2.9px; word-spacing:10px; text-shadow:2px 2px 2px #EC82B4;">
<b>N</b>AME <b>H</b>ERE (pr/ns)</p>
</div>
<div class="col-10 card bg-faded text-body mx-auto mt-n1 rounded-1 py-1 pl-1 pr-0 table-responsive" style="max-height:30px; box-shadow: 2px 2px 0px #EC82B4; ">
<!--
EXTRA INFO
scrolls if needed, if you want more to be visible and NOT scroll, change the font size to be smaller :3
-->
<h3 class="mb-0 mx-auto text-center" style="font-weight: 300; font-size:15px; text-shadow:0px 0px 1px #EC82B4;">
00 y/o, race, b/day + ⚢ sexuality/gender
</h3>
</div>
<div class="mx-auto py-1 px-0 bg-light m-2 card rounded-0 table-responsive text-dark" style="max-height:140px; text-shadow:0px 1px #EC82B4; font-weight:400; font-size:14px; letter-spacing:-.5px; word-spacing:2px; box-shadow: 2px 2px 0px #EC82B4; ">
<!--
written bio or whatever you want to shove in here! will scroll as it says as well ;)
-->
<p class="text-center px-2">write some stuff here, doesn't have to be short, it will scroll</p>
<hr class="mb-1 mt-n2 bg-secondary w-75" style="border-color: #EC82B4;"> <!-- this is the line divider -->
<p class="text-center px-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!--
corner image
will resize but you can adjust the width px size if you want it to be bigger
-->
<img class="d-sm-none d-lg-inline" src="https://cdn.discordapp.com/attachments/955323640541503508/987715228999491584/tumblr_0287d278e3b25a7655a89e8e5d133edd_3deff490_75.gif" style="position:absolute; right:-22px; bottom: -32px; width: 50px;">
<!-- credit below, please don't remove! feel free to change the font awesome icon to match your chara, tho :] -->
<a href="https://toyhou.se/16645684.chara-bio-03" data-toggle="tooltip" title="code by hxh (lukas)" style="position:absolute; top: 0px; left:4px;"><i class="fa-solid fa-heart" style="font-size:17px; color:#EC82B4;"></i></a>
</div>
</div>
