Winterberry
created by:HTMLobster
HTMLBootstrapCharacter
Copy
<!------------------------------------
Winterberry - Character Profile
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<div class="container p-0" style="max-width:900px;">
<!-- main background -->
<div class="bg-faded p-4" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/111915117_6wxPpCJw1oQIsn5.jpg); background-size:cover; background-position:center; background-attachment:fixed; border-radius:25px;">
<div class="row">
<!-- side image & music player -->
<div class="col-lg-4 d-flex flex-column">
<!-- hat decor -->
<div style="position:absolute; transform:rotate(-35deg); top:-2rem; left:-1rem;">
<!-- hat colors -->
<i style="--fa-primary-color:#c61919; --fa-secondary-color:#fff; --fa-secondary-opacity:1;" class="fa-duotone fa-solid fa-hat-santa fa-4x fa-flip-horizontal"></i>
</div>
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px;" class="bg-faded flex-grow-1"></div>
<!-- music -->
<div class="bg-faded p-3 mt-4" style="border-radius:25px;">
<div class="row no-gutters align-items-center">
<div class="col-auto">
<i class="fa-solid fa-compact-disc fa-spin fa-3x"></i>
<!-- embed link for youtube - remove section if you don't want functional music player -->
<div style="position:absolute; top:0; right:0; bottom:0; left:0; height:100%; opacity:.001; overflow:hidden;">
<!-- YTCODE = numbers/letters after "watch?v=" in the video URL -->
<iframe width="700" height="500" src="https://www.youtube.com/embed/YTCODE" controls="0" frameborder="0" style="position:absolute; top:-200px; left:-325px;"></iframe>
</div>
<!-- embed end -->
</div>
<!-- song info -->
<div class="col ml-3">
<!-- title -->
<div class="text-uppercase font-italic">
Title
</div>
<!-- artist -->
<div class="text-muted" style="font-size:.9em;">
by Artist
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- heading -->
<div class="bg-faded p-3 mt-lg-0 mt-4" style="border-radius:25px;">
<!-- name -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
Character Name
<!-- symbol -->
<i class="fa-solid fa-tree-decorated"></i>
</h1>
<hr class="w-100 my-2">
<!-- adjectives -->
<div class="text-center text-muted" style="font-size:.9em;">
adjective <i class="fa-regular fa-snowflake"></i> adjective <i class="fa-regular fa-snowflake"></i> adjective
</div>
</div>
<!-- info -->
<div class="bg-faded px-3 pb-3 pt-2 mt-4" style="border-radius:25px;">
<!-- basics -->
<div class="row">
<!-- names -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-signature faded"></i>
names
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- age -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-cake faded"></i>
age
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- gender -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-regular fa-venus-mars faded"></i>
gender
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- pronouns -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-comments faded"></i>
pronouns
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- height -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-ruler-vertical faded"></i>
height
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- weight -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-weight-hanging faded"></i>
weight
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2">
</div>
<!-- species -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-dna faded"></i>
species
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
<!-- border -->
<hr class="my-2 hidden-sm-up">
</div>
<!-- occupation -->
<div class="col-sm-6 mt-2">
<div class="row no-gutters">
<div class="col text-uppercase font-italic text-truncate pr-3">
<!-- symbol -->
<i class="fa-solid fa-briefcase faded"></i>
occupation
</div>
<div class="col text-right text-muted">
<!-- content -->
Content
</div>
</div>
</div>
</div>
<hr class="mx-3">
<!-- personality -->
<div>
<!-- honest/deceitful -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
honest
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
deceitful
</div>
</div>
<!-- emotional/stoic -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
emotional
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
stoic
</div>
</div>
<!-- extrovert/introvert -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
extrovert
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
introvert
</div>
</div>
<!-- agreeable/stubborn -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
agreeable
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
stubborn
</div>
</div>
<!-- careful/reckless -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
careful
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
reckless
</div>
</div>
<!-- creative/conventional -->
<div class="row no-gutters mt-2 align-items-center">
<div class="col-3 text-uppercase text-truncate font-italic">
creative
</div>
<div class="col mx-2">
<div class="progress w-100 align-items-center" style="height:1px; overflow:visible;">
<!-- progress - change width % -->
<div class="progress-bar" style="width:calc(50% - 7px); height:0px;"></div>
<i class="fa-solid fa-circle text-muted"></i>
</div>
</div>
<div class="col-3 text-uppercase text-truncate font-italic text-right">
conventional
</div>
</div>
</div>
</div>
</div>
</div>
<!-- stats -->
<div class="row mt-2 text-center">
<!-- strength -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
STR
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
<!-- dexterity -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
DEX
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
<!-- constitution -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
CON
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
<!-- intelligence -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
INT
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
<!-- wisdom -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
WIS
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
<!-- charisma -->
<div class="col mt-3">
<div class="bg-faded p-3" style="border-radius:25px;">
<div class="text-uppercase font-italic">
CHA
</div>
<hr class="my-2">
<h1 class="text-muted mb-0 display-4">
<!-- content -->
10
</h1>
</div>
</div>
</div>
<!-- images -->
<div class="row">
<div class="col-md">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px;" class="mt-4 bg-faded align-items-center justify-content-center">
<!-- symbol -->
<i class="fa-regular fa-snowflake fa-2x text-white" style="position:absolute;"></i>
</div>
</div>
<div class="col-md">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px;" class="mt-4 bg-faded"></div>
</div>
<div class="col-md">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px;" class="mt-4 bg-faded align-items-center justify-content-center">
<!-- symbol -->
<i class="fa-regular fa-snowflake fa-2x text-white" style="position:absolute;"></i>
</div>
</div>
</div>
<!-- about -->
<div class="bg-faded p-3 mt-4" style="border-radius:25px;">
<!-- heading -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
About
<!-- symbol -->
<i class="fa-solid fa-book"></i>
</h1>
<hr class="w-100 my-2">
<!-- info -->
<div class="text-justify">
<!-- summary -->
<p class="text-center text-muted" style="font-size:.9em;">
Short summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a.
</p>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a. Etiam nec porttitor magna. Mauris mollis lacus ex. Suspendisse ac dapibus dolor, sit amet congue sem. Cras rhoncus arcu eu accumsan laoreet. Etiam vel ligula nisl. Curabitur sapien risus, placerat in iaculis ac, aliquam in dui. Sed quam ex, efficitur vel libero id, efficitur cursus nisl. Donec sed tempus mauris. Ut eu varius tellus. Aliquam sollicitudin tincidunt ipsum vel dignissim. Mauris commodo eleifend nisl, ut luctus mi laoreet id.
</p>
<p>
Duis rutrum quis elit quis varius. Sed in finibus eros. Quisque placerat, odio vel fermentum tempus, justo lectus ultrices arcu, aliquam commodo elit dui a dui. Nam efficitur justo lacus, vel pulvinar tellus suscipit id. Vivamus sit amet dapibus libero, non iaculis dui. Ut vel sem rhoncus, vehicula est nec, posuere nisi. Suspendisse a suscipit ante, nec volutpat sem. In accumsan arcu commodo pharetra interdum. Nam rhoncus, felis sed vestibulum dictum, leo risus mollis leo, ac dignissim metus dui ut mauris. In hac habitasse platea dictumst.
</p>
<p>
Cras egestas congue tempus. Phasellus scelerisque elit a felis lobortis, id varius quam lacinia. Etiam viverra ullamcorper maximus. Fusce malesuada porttitor imperdiet. Proin non nisl sed turpis congue rutrum. Cras ipsum turpis, aliquam hendrerit condimentum eget, dignissim a dolor. Nullam ut enim a leo convallis blandit. Mauris congue tincidunt metus, at ullamcorper augue blandit ac. Nam odio libero, sagittis at erat vel, dapibus vulputate nibh. Curabitur dictum tellus ut purus accumsan porttitor. Vivamus sit amet nulla nec est tincidunt ultrices.
</p>
</div>
</div>
<!-- preferences & trivia -->
<div class="row">
<!-- likes -->
<div class="col-sm mt-4">
<div class="bg-faded p-3 h-100" style="border-radius:25px;">
<!-- heading -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
Likes
<!-- symbol -->
<i class="fa-solid fa-heart"></i>
</h1>
<hr class="w-100 my-2">
<!-- likes -->
<ul class="fa-ul mb-0">
<!-- like -->
<li>
<i class="fa-li fa-solid fa-check faded"></i>
<!-- content -->
Like
</li>
<!-- like -->
<li>
<i class="fa-li fa-solid fa-check faded"></i>
<!-- content -->
Like
</li>
<!-- like -->
<li>
<i class="fa-li fa-solid fa-check faded"></i>
<!-- content -->
Like
</li>
<!-- like -->
<li>
<i class="fa-li fa-solid fa-check faded"></i>
<!-- content -->
Like
</li>
</ul>
</div>
</div>
<!-- dislikes -->
<div class="col-sm mt-4">
<div class="bg-faded p-3 h-100" style="border-radius:25px;">
<!-- heading -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
Dislikes
<!-- symbol -->
<i class="fa-solid fa-heart-crack"></i>
</h1>
<hr class="w-100 my-2">
<!-- dislikes -->
<ul class="fa-ul mb-0">
<!-- dislike -->
<li>
<i class="fa-li fa-solid fa-xmark faded"></i>
<!-- content -->
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-li fa-solid fa-xmark faded"></i>
<!-- content -->
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-li fa-solid fa-xmark faded"></i>
<!-- content -->
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-li fa-solid fa-xmark faded"></i>
<!-- content -->
Dislike
</li>
</ul>
</div>
</div>
<!-- trivia -->
<div class="col-lg mt-4">
<div class="bg-faded p-3 h-100" style="border-radius:25px;">
<!-- heading -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
Trivia
<!-- symbol -->
<i class="fa-solid fa-list"></i>
</h1>
<hr class="w-100 my-2">
<!-- facts -->
<ul class="fa-ul mb-0">
<!-- fact -->
<li>
<i class="fa-li fa-solid fa-circle-small faded"></i>
<!-- content -->
Trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-li fa-solid fa-circle-small faded"></i>
<!-- content -->
Trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-li fa-solid fa-circle-small faded"></i>
<!-- content -->
Trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-li fa-solid fa-circle-small faded"></i>
<!-- content -->
Trivia fact
</li>
</ul>
</div>
</div>
</div>
<!-- design -->
<div class="row">
<div class="col-lg mt-4">
<div class="bg-faded p-3 flex-column d-lg-flex d-block h-100" style="border-radius:25px;">
<!-- heading -->
<h1 class="mb-0 justify-content-between align-items-center display-4">
<!-- content -->
Design
<!-- symbol -->
<i class="fa-solid fa-palette"></i>
</h1>
<hr class="w-100 my-2">
<!-- info - remove pr-lg-2 from the class if your content isn't long enough to scroll -->
<div class="text-justify pr-lg-2" style="flex:1 1 0px; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<!-- important notes -->
<p class="text-center text-muted" style="font-size:.9em;">
Important design notes: content, content, content.
</p>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a. Etiam nec porttitor magna. Mauris mollis lacus ex. Suspendisse ac dapibus dolor, sit amet congue sem. Cras rhoncus arcu eu accumsan laoreet. Etiam vel ligula nisl. Curabitur sapien risus, placerat in iaculis ac, aliquam in dui. Sed quam ex, efficitur vel libero id, efficitur cursus nisl. Donec sed tempus mauris. Ut eu varius tellus. Aliquam sollicitudin tincidunt ipsum vel dignissim. Mauris commodo eleifend nisl, ut luctus mi laoreet id.
</p>
<p>
Duis rutrum quis elit quis varius. Sed in finibus eros. Quisque placerat, odio vel fermentum tempus, justo lectus ultrices arcu, aliquam commodo elit dui a dui. Nam efficitur justo lacus, vel pulvinar tellus suscipit id. Vivamus sit amet dapibus libero, non iaculis dui. Ut vel sem rhoncus, vehicula est nec, posuere nisi. Suspendisse a suscipit ante, nec volutpat sem. In accumsan arcu commodo pharetra interdum. Nam rhoncus, felis sed vestibulum dictum, leo risus mollis leo, ac dignissim metus dui ut mauris. In hac habitasse platea dictumst.
</p>
</div>
</div>
</div>
<!-- color palette -->
<div class="col-lg-2 mt-2">
<div class="row">
<div class="col-lg-12 col">
<!-- color -->
<div title="hair" style="background:#000; border-radius:25px;" data-toggle="tooltip" class="mt-3 p-5"></div>
</div>
<div class="col-lg-12 col">
<!-- color -->
<div title="eyes" style="background:#333; border-radius:25px;" data-toggle="tooltip" class="mt-3 p-5"></div>
</div>
<div class="col-lg-12 col">
<!-- color -->
<div title="skin" style="background:#808080; border-radius:25px;" data-toggle="tooltip" class="mt-3 p-5"></div>
</div>
<div class="col-lg-12 col">
<!-- color -->
<div title="other" style="background:#ccc; border-radius:25px;" data-toggle="tooltip" class="mt-3 p-5"></div>
</div>
<div class="col-lg-12 col">
<!-- color -->
<div title="other" style="background:#fff; border-radius:25px;" data-toggle="tooltip" class="mt-3 p-5"></div>
</div>
</div>
</div>
<!-- reference image -->
<div class="col-lg-4 flex-column d-flex">
<!-- hat decor -->
<div style="position:absolute; transform:rotate(35deg); top:-1rem; right:-1rem;">
<!-- hat colors -->
<i style="--fa-primary-color:#c61919; --fa-secondary-color:#fff; --fa-secondary-opacity:1;" class="fa-duotone fa-solid fa-hat-winter fa-4x"></i>
</div>
<!-- image -->
<div style="background-image:url(image_url); background-size:contain; background-position:center; padding:50%; background-repeat:no-repeat; border-radius:25px;" class="bg-faded mt-4 flex-grow-1"></div>
</div>
</div>
<!-- relationships -->
<div class="row">
<!-- relationship -->
<div class="col-sm-4">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px 25px 0 0;" class="bg-faded mt-4"></div>
<!-- info -->
<div class="bg-faded p-3 text-center d-sm-flex flex-column d-block" style="border-radius:0 0 25px 25px;">
<!-- name -->
<h2 class="text-uppercase font-italic">
<!-- link -->
<a href="chara_url" class="text-body">
Character Name
</a>
</h2>
<!-- relationship -->
<div class="text-muted" style="font-size:.9em;">
relationship type
</div>
<hr class="w-100 my-2">
<!-- description - remove pr-sm-2 if description is not long enough to scroll -->
<div class="text-justify pr-sm-2" style="flex:0 0 108px; min-height:108px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a. Etiam nec porttitor magna. Mauris mollis lacus ex.
</p>
</div>
</div>
</div>
<!-- relationship -->
<div class="col-sm-4">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px 25px 0 0;" class="bg-faded mt-4"></div>
<!-- info -->
<div class="bg-faded p-3 text-center d-sm-flex flex-column d-block" style="border-radius:0 0 25px 25px;">
<!-- name -->
<h2 class="text-uppercase font-italic">
<!-- link -->
<a href="chara_url" class="text-body">
Character Name
</a>
</h2>
<!-- relationship -->
<div class="text-muted" style="font-size:.9em;">
relationship type
</div>
<hr class="w-100 my-2">
<!-- description - remove pr-sm-2 if description is not long enough to scroll -->
<div class="text-justify pr-sm-2" style="flex:0 0 108px; min-height:108px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a. Etiam nec porttitor magna. Mauris mollis lacus ex.
</p>
</div>
</div>
</div>
<!-- relationship -->
<div class="col-sm-4">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%; border-radius:25px 25px 0 0;" class="bg-faded mt-4"></div>
<!-- info -->
<div class="bg-faded p-3 text-center d-sm-flex flex-column d-block" style="border-radius:0 0 25px 25px;">
<!-- name -->
<h2 class="text-uppercase font-italic">
<!-- link -->
<a href="chara_url" class="text-body">
Character Name
</a>
</h2>
<!-- relationship -->
<div class="text-muted" style="font-size:.9em;">
relationship type
</div>
<hr class="w-100 my-2">
<!-- description - remove pr-sm-2 if description is not long enough to scroll -->
<div class="text-justify pr-sm-2" style="flex:0 0 108px; min-height:108px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam imperdiet dolor nibh, vitae tincidunt nisl imperdiet a. Etiam nec porttitor magna. Mauris mollis lacus ex.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- credit -->
<div class="mt-3 text-center">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster">
<i class="fa-solid fa-lobster"></i>
</a>
</div>
</div>