<!--
COLOR INDEX (even tho its tiny...codes hard to read)
select the hex/color you want to replace, (DON'T select the hashtag UNLESS you're inputting a hashtag as well) press ctrl + F, paste your own hex color in and click replace all. GG EZ
primary (name, icons, shadow): #F07A2A
secondary: #4E4040
any other color is purely up to the theme of the user.
NOTE: i kindly ask you keep it somewhat legible! using a vivid color + a good contrasted color as secondary is my suggestion. it shows up on a bright background on some themes, and on others a dark background. please keep that in mind when editing, that others may not be able to read it if it's too completely light or dark
-->
<div class="container col-12 col-md-9 col-lg-6 mx-auto px-0 px-lg-4 py-2">
<div class="row mx-0 col-12 px-0 px-lg-2 justify-content-center">
<img class="col-6 col-md-5 col-lg-5 d-block px-0" style="width: 100%; max-width: 145px; object-fit: cover; object-position: 50% 15%; min-height: 100%; max-height: 160px; z-index: 20;"
/* place image link below.
change the object-position (aka image position) percentages as you wish, first is X axis second is Y axis */
src="https://cdn.discordapp.com/attachments/955323640541503508/1041383815278493737/tumblr_f4109c5c67119c3663c8a0c49b95db17_b043861e_1280.jpg"
>
<div class="card col-6 col-md-6 col-lg-6 p-0 rounded-0 mt-lg-0" style="min-height: 140px; max-height: 160px; box-shadow: 2px 2px 4px -2px #F07A2A;">
<div class="card-header text-center bg-faded my-0 pt-2 pb-0 text-light" style="font-family: helvetica;">
<h3 style="font-weight: 700; letter-spacing: -.8px; word-spacing: 2px; color: #F07A2A; font-size: 1.2em;">
Name<span style="text-shadow: none; font-variant: small-caps; color: #4E4040; ">,
00
</span>
✦
(<span style="margin-left: 2px; margin-right: 2px; text-shadow: none; color: #4E4040;">pr ns</span>)</h3>
</div>
<div class="card-body text-center py-2 px-2 text-body" style="overflow: auto; font-family: helvetica; letter-spacing: -.2px; word-spacing: -1px; font-size: 13px; vertical-align: middle;">
<p class="m-0 p-0" style="display: inline-block; vertical-align: middle; font-size: .9em;">
write some text here, it'll scroll so no worries!
</p>
<hr class="my-1"> <!--this is the divider line, use as much as you want-->
<span class="bg-faded w-100" style="word-spacing: 1.5px; font-size: 11px; position: absolute; bottom: 0; left: 0;">
<!--
LINK ICONS BELOW
-->
<a href="#" data-toggle="tooltip" data-toggle-placement="bottom"
title="user#0001">
<i class="fa-brands fa-discord" style="color: #F07A2A; text-shadow: 1px 0px 0px #4E4040"></i></a>
/
<a href="#placelinkhere" data-toggle="tooltip" data-toggle-placement="bottom"
title="twitter">
<i class="fa-brands fa-twitter" style="color: #F07A2A; text-shadow: 1px 0px 0px #4E4040"></i></a>
/
<a href="#placelinkhere" data-toggle="tooltip" data-toggle-placement="bottom"
title="tumblr">
<i class="fa-brands fa-tumblr" style="color: #F07A2A; text-shadow: 1px 0px 0px #4E4040"></i></a>
/
<a href="#placelinkhere" data-toggle="tooltip" data-toggle-placement="bottom"
title="carrd/rentry">
<i class="fa-solid fa-id-card" style="color: #F07A2A; text-shadow: 0px 0px 1px #4E4040;"></i></a>
+
<!--
credit link is below. DO NOT REMOVE, please! if you wanna move it somewhere else, that's fine. it needs to be visible somewhere no matter what.
-->
<a href="https://toyhou.se/18850539.user-bio-04-5" data-toggle="tooltip" data-toggle-placement="bottom" title="code by lukas"><i class="fa-solid fa-code" style="color: #F07A2A; text-shadow: 1px 0px 0px #4E4040;"></i></a>
</span>
<hr class="my-1">
<!--
Paragraph 2 start
-->
<p class="m-0 mb-2 p-0" style="display: inline-block; vertical-align: middle; font-size: .9em;">
dummy text to display scroll. 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.
</p>
</div>
<!--
this the floating icon in the bottom left; change it as you want. view available icons at fontawesome.com/icons. replace the "fa-book" with whatever title of the one you want is. don't get rid of the style!
-->
<i class="fa-solid fa-book"
style="font-size: 20px; position: absolute; top: -5px; left: -7px; transform: rotate(-20deg); color: #F07A2A; text-shadow: 1px 1px #4E4040; z-index: 30;"></i>
</div>
</div>
</div>
