Sliver
created by:HTMLobster
HTMLBootstrapCharacter
Copy
<!------------------------------------
Sliver - Character Profile
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<div class="container">
<!-- circle icon -->
<div class="row justify-content-center">
<div class="col-auto mb-n5" style="position:relative; z-index:2;">
<div>
<!-- star decor -->
<div class="text-primary" style="position:absolute; top:.75rem; right:.5rem; z-index:3;">
<i class="fa-solid fa-star fa-3x fa-rotate-270"></i>
</div>
<!-- image -->
<div class="card p-3 rounded-circle border-0">
<div class="rounded-circle bg-faded" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/46643060_Fga.png); height:200px; width:200px; background-position:center; background-size:cover; box-shadow:inset 25px 0 var(--input-color);"></div>
</div>
<!-- star decor -->
<div class="text-primary" style="position:absolute; bottom:2.75rem; left:0;">
<i class="fa-solid fa-star fa-2x fa-rotate-270"></i>
</div>
<div class="text-primary" style="position:absolute; bottom:0; left:1.25rem;">
<i class="fa-solid fa-star fa-3x fa-rotate-90"></i>
</div>
</div>
</div>
</div>
<!-- circle icon end -->
<div class="row mt-n5">
<!-- side image -->
<div class="col-lg">
<div class="card bg-faded border-0 rounded-0 h-100">
<!-- decor -->
<div class="justify-content-center" style="position:absolute; z-index:1; right:2rem; top:0;">
<div class="h-100 bg-secondary" style="width:2px; position:absolute;"></div>
<div class="mt-5 pt-lg-4 text-info" style="position:relative; z-index:2;">
<div class="mt-5"></div>
<i class="fa-solid fa-star fa-lg d-block mx-auto mt-4"></i>
<i class="fa-solid fa-moon fa-2x d-block mt-4 mx-auto"></i>
<i class="fa-solid fa-star fa-lg d-block mx-auto mt-4"></i>
<i class="fa-solid fa-rhombus fa-3x mt-4 d-block"></i>
<i class="fa-solid fa-rhombus fa-lg mt-3 d-block mx-auto"></i>
</div>
</div>
<!-- image -->
<div class="h-100 w-100" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/108902496_KVBiKDSvJU7o86v.png); background-size:cover; background-position:center; padding:50%;"></div>
</div>
</div>
<!-- info -->
<div class="col-lg mt-lg-0 mt-4 d-flex flex-column">
<!-- character heading -->
<div class="card card-outline-primary bg-faded border-left-0 border-top-0 border-bottom-0 rounded-0" style="border-right-width:.25rem;">
<div class="p-3">
<!-- name -->
<h1 class="display-3 mb-0 text-lg-right text-center">
Character Name
</h1>
<!-- adjectives -->
<p class="text-lg-right text-center text-muted">
adjective
<i class="fa-solid fa-dot"></i>
adjective
<i class="fa-solid fa-dot"></i>
adjective
</p>
</div>
</div>
<!-- quote -->
<div class="card card-outline-primary bg-faded border-right-0 border-top-0 border-bottom-0 mt-4 p-3 rounded-0" style="border-left-width:.25rem;">
<h1 class="font-weight-light text-justify" style="font-size:1.9rem">
<i class="fa-thin fa-quote-left"></i>
<!-- content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
<i class="fa-thin fa-quote-right"></i>
</h1>
<div class="mt-1 text-muted text-right">
<!-- speaker -->
- Quote by Person
</div>
</div>
<div class="mt-4">
<div class="row">
<!-- basics -->
<div class="col-sm-6 mt-n2">
<!-- nicknames -->
<div class="row no-gutters mt-2">
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
nicknames
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-signature fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- age -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-cake-candles fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded text-right px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
age
</div>
</div>
</div>
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
<!-- birthday -->
<div class="row no-gutters mt-2">
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
birthday
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-calendar-days fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- pronouns -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-comments fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded text-right px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
pronouns
</div>
</div>
</div>
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
<!-- gender -->
<div class="row no-gutters mt-2">
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
gender
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-transgender fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- orientation -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-hearts fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded text-right px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
orientation
</div>
</div>
</div>
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
<!-- species -->
<div class="row no-gutters mt-2">
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
species
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-dna fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- education -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-graduation-cap fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded text-right px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
education
</div>
</div>
</div>
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
<!-- occupation -->
<div class="row no-gutters mt-2">
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
occupation
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-briefcase fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- status -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-tombstone fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded text-right px-2 py-1">
<!-- content -->
<div>
content
</div>
<!-- title -->
<div class="text-muted font-italic">
status
</div>
</div>
</div>
<!-- border -->
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
</div>
<!-- basics end -->
<!-- right column -->
<div class="col-sm-6 mt-sm-0 mt-4">
<div class="d-sm-flex d-block flex-column h-100">
<!-- music -->
<div class="card border-0 rounded-0">
<!-- music player -->
<div class="text-white text-center p-3">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<i class="fa-thin fa-duotone fa-compact-disc fa-4x fa-spin" style="--fa-animation-duration:6s; --fa-secondary-opacity:.2;"></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/B_9z8yaWQHo" controls="0" frameborder="0" style="position:absolute; top:-200px; left:-325px;"></iframe>
</div>
<!-- embed end -->
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-weight-light mb-0">
Now Playing:
</h2>
<div class="font-italic text-muted">
365 by Oh Wonder
</div>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
<!-- divider -->
<div class="row no-gutters align-items-center my-3">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
<!-- summary -->
<div class="bg-faded text-justify p-3 d-sm-flex d-block flex-column" style="border-right:.25rem solid var(--color-primary);">
<div class="pr-sm-2" style="flex:0 0 328px; min-height:328px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<p>
<span class="text-muted font-italic">Summary:</span>
Scrolls once too long. Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna.
</p>
<p>
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod.
</p>
</div>
</div>
</div>
</div>
<!-- right column end -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg mt-4 h-100">
<!-- about -->
<div class="p-3 bg-faded" style="border-left:.25rem solid var(--color-primary);">
<!-- heading -->
<h1 class="font-weight-light display-4">
<i class="fa-thin fa-duotone fa-book" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
About
</h1>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
<!-- description -->
<div class="text-justify py-2">
<!-- content -->
<p>
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
<p>
Morbi interdum, nisi vitae viverra egestas, mauris lacus egestas mi, eget aliquam lacus quam condimentum quam. Etiam in ornare nibh, quis interdum diam. Nam egestas iaculis turpis, sit amet aliquam felis tincidunt faucibus. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</p>
<p>
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
</div>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
</div>
<!-- preferences -->
<div class="row">
<!-- likes -->
<div class="col-sm mt-4">
<div class="card border-0 rounded-0">
<!-- heading -->
<div class="text-white text-center p-3">
<div class="bg-success h-100 w-100" style="opacity:.8; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- symbol -->
<i class="fa-thin fa-duotone fa-heart fa-4x" style="--fa-secondary-opacity:.2;"></i>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<!-- list -->
<div class="text-justify">
<ul class="mb-0 ml-4 fa-ul">
<!-- like -->
<li>
<i class="fa-solid fa-heart fa-li" style="opacity:.7;"></i>
Like
</li>
<!-- like -->
<li>
<i class="fa-solid fa-heart fa-li" style="opacity:.7;"></i>
Like
</li>
<!-- like -->
<li>
<i class="fa-solid fa-heart fa-li" style="opacity:.7;"></i>
Like
</li>
<!-- like -->
<li>
<i class="fa-solid fa-heart fa-li" style="opacity:.7;"></i>
Like
</li>
<!-- like -->
<li>
<i class="fa-solid fa-heart fa-li" style="opacity:.7;"></i>
Like
</li>
</ul>
</div>
<!-- list end -->
</div>
<!-- info end -->
<div class="bg-success w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- likes end -->
<!-- dislikes -->
<div class="col-sm mt-4">
<div class="card border-0 rounded-0">
<!-- heading -->
<div class="text-white text-center p-3">
<div class="bg-warning h-100 w-100" style="opacity:.8; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- symbol -->
<i class="fa-thin fa-duotone fa-heart-crack fa-4x" style="--fa-secondary-opacity:.2;"></i>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<!-- list -->
<div class="text-justify">
<ul class="mb-0 ml-4 fa-ul">
<!-- dislike -->
<li>
<i class="fa-solid fa-heart-crack fa-li" style="opacity:.7;"></i>
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-solid fa-heart-crack fa-li" style="opacity:.7;"></i>
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-solid fa-heart-crack fa-li" style="opacity:.7;"></i>
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-solid fa-heart-crack fa-li" style="opacity:.7;"></i>
Dislike
</li>
<!-- dislike -->
<li>
<i class="fa-solid fa-heart-crack fa-li" style="opacity:.7;"></i>
Dislike
</li>
</ul>
</div>
<!-- list end -->
</div>
<!-- info end -->
<div class="bg-warning w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- dislikes end -->
</div>
<!-- traits -->
<div class="mt-4">
<!-- honest/deceitful -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-hands-holding-heart fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
honest
</span>
<!-- right -->
<span>
deceitful
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-user-secret fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- emotional/stoic -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-face-laugh-beam fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
emotional
</span>
<!-- right -->
<span>
stoic
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-face-expressionless fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- extravert/introvert -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-comments fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
extravert
</span>
<!-- right -->
<span>
introvert
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-headphones fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- agreeable/stubborn -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-handshake fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
agreeable
</span>
<!-- right -->
<span>
stubborn
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-skull-cow fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- careful/reckless -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-briefcase-medical fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
careful
</span>
<!-- right -->
<span>
reckless
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-face-party fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
<!-- creative/conventional -->
<div class="row no-gutters mt-2">
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-palette fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-faded p-2 h-100">
<!-- rating -->
<div class="justify-content-between text-muted">
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<!-- marker -->
<i class="fa-solid fa-circle text-secondary"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-circle"></i>
</div>
<!-- traits -->
<div class="text-muted font-italic justify-content-between mt-1">
<!-- left -->
<span>
creative
</span>
<!-- right -->
<span>
conventional
</span>
</div>
</div>
</div>
<!-- symbol -->
<div class="col-auto">
<div class="text-white p-2 h-100 align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- content -->
<i class="fa-thin fa-duotone fa-fence fa-2x" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</div>
</div>
</div>
</div>
<!-- personality -->
<div class="p-3 bg-faded mt-4" style="border-right:.25rem solid var(--color-primary);">
<!-- heading -->
<h1 class="font-weight-light display-4 text-right">
Personality
<i class="fa-thin fa-duotone fa-masks-theater" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
</h1>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
<!-- description -->
<div class="text-justify py-2">
<!-- content -->
<p>
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
<p>
Morbi interdum, nisi vitae viverra egestas, mauris lacus egestas mi, eget aliquam lacus quam condimentum quam. Etiam in ornare nibh, quis interdum diam. Nam egestas iaculis turpis, sit amet aliquam felis tincidunt faucibus. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</p>
</div>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
</div>
</div>
<!-- design -->
<div class="col-lg mt-4">
<div class="d-flex flex-column" style="min-height:calc(100vh - 2rem); position:sticky; top:1rem;">
<!-- image -->
<div class="bg-info flex-grow-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/46642990_J52AQMnAGroqlOu.png?1647195433); background-size:contain; background-repeat:no-repeat; background-position:center; padding:50%;">
</div>
<!-- color palette -->
<div class="row no-gutters">
<div style="background:#000;" class="col p-4"></div>
<div style="background:#333;" class="col p-4"></div>
<div style="background:#808080;" class="col p-4"></div>
<div style="background:#ccc;" class="col p-4"></div>
<div style="background:#fff;" class="col p-4"></div>
</div>
<!-- description -->
<div class="row no-gutters">
<div class="col-auto align-items-center">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="font-weight-light text-center text-white p-3" style="position:relative; z-index:2;">
D
<br>
E
<br>
S
<br>
I
<br>
G
<br>
N
</h1>
</div>
<div class="col">
<div class="p-3 bg-faded">
<!-- description -->
<div class="d-sm-flex d-block flex-column">
<div class="text-justify pr-sm-2" style="flex:0 0 156px; min-height:156px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<!-- content -->
<p>
Scrolls once too long. Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
<p>
Morbi interdum, nisi vitae viverra egestas, mauris lacus egestas mi, eget aliquam lacus quam condimentum quam. Etiam in ornare nibh, quis interdum diam. Nam egestas iaculis turpis, sit amet aliquam felis tincidunt faucibus. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</p>
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="bg-secondary h-100" style="opacity:.7; width:.25rem;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- moodboard -->
<div class="col-lg mt-4">
<div class="d-flex flex-column" style="height:calc(100vh - 2rem); position:sticky; top:1rem;">
<!-- image -->
<div class="flex-grow-1 align-items-center justify-content-center" style="background-image:url(https://images.unsplash.com/photo-1582794543462-0d7922e50cf5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1827); background-size:cover; background-repeat:no-repeat; background-position:center;">
<!-- symbol -->
<i class="fa-solid fa-moon text-info fa-3x"></i>
</div>
<!-- image -->
<div class="flex-grow-1 align-items-center justify-content-center" style="background-image:url(https://images.unsplash.com/photo-1534179523731-b2922018150a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687); background-size:cover; background-repeat:no-repeat; background-position:center;">
<!-- symbol -->
<i class="fa-solid fa-heart text-info fa-3x"></i>
</div>
<!-- image -->
<div class="flex-grow-1 align-items-center justify-content-center" style="background-image:url(https://images.unsplash.com/photo-1616285720779-9e597265df0c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1859); background-size:cover; background-repeat:no-repeat; background-position:center;">
<!-- symbol -->
<i class="fa-solid fa-star text-info fa-3x"></i>
</div>
</div>
</div>
<!-- right column -->
<div class="col-lg mt-4">
<!-- skills -->
<div class="p-3 bg-faded" style="border-left:.25rem solid var(--color-primary);">
<!-- heading -->
<h1 class="font-weight-light display-4">
<i class="fa-thin fa-duotone fa-sparkles" style="position:relative; z-index:2; --fa-secondary-opacity:.2;"></i>
Skills
</h1>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
<!-- description -->
<div class="text-justify py-2">
<!-- skill -->
<p>
<span class="text-primary">
<!-- symbol -->
<i class="fa-thin fa-duotone fa-hand-holding-magic"></i>
<!-- skill name -->
Skill Name:
</span>
<!-- content -->
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
<!-- skill -->
<p>
<span class="text-primary">
<!-- symbol -->
<i class="fa-thin fa-duotone fa-cauldron"></i>
<!-- skill name -->
Skill Name:
</span>
<!-- content -->
Morbi interdum, nisi vitae viverra egestas, mauris lacus egestas mi, eget aliquam lacus quam condimentum quam. Etiam in ornare nibh, quis interdum diam. Nam egestas iaculis turpis, sit amet aliquam felis tincidunt faucibus. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</p>
<!-- skill -->
<p>
<span class="text-primary">
<!-- symbol -->
<i class="fa-thin fa-duotone fa-flask-round-potion"></i>
<!-- skill name -->
Skill Name:
</span>
<!-- content -->
Praesent tristique odio sit amet eleifend dictum. Curabitur dui ante, dapibus eu interdum non, faucibus a risus. Aenean dolor mauris, convallis eu dolor ac, sodales malesuada arcu. Ut gravida odio id bibendum euismod. Maecenas tristique est ut sapien convallis, in congue urna gravida. Quisque est augue, condimentum sit amet ex nec, suscipit fringilla magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim.
</p>
</div>
<!-- divider -->
<div class="row no-gutters align-items-center">
<hr class="col m-0">
<div class="col-auto mx-3">
<i class="fa-solid fa-star text-primary" style="opacity:.7;"></i>
</div>
<hr class="col m-0">
</div>
<!-- divider end -->
</div>
<!-- skills end -->
<!-- stats -->
<div class="row mt-2">
<!-- strength -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
STR
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- constitution -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
CON
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- dexterity -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
DEX
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- charisma -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
CHA
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- wisdom -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
WIS
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- intelligence -->
<div class="col">
<div class="card border-0 rounded-0 mt-3">
<div class="text-center p-2">
<div class="bg-secondary h-100 w-100" style="opacity:.7; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<h1 class="display-3 text-white mb-0" style="z-index:2; position:relative;">
INT
</h1>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<h2 class="font-italic text-muted mb-0">
10
</h2>
</div>
<div class="bg-secondary w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
</div>
<!-- stats end -->
<!-- trivia -->
<div class="mt-4">
<div class="card border-0 rounded-0">
<!-- heading -->
<div class="text-white text-center p-3">
<div class="bg-success h-100 w-100" style="opacity:.8; position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<!-- symbol -->
<i class="fa-thin fa-duotone fa-thought-bubble fa-4x" style="--fa-secondary-opacity:.2;"></i>
</div>
<!-- info -->
<div class="card bg-faded rounded-0 border-0 p-3 text-center">
<!-- list -->
<div class="text-justify">
<ul class="mb-0 ml-4 fa-ul">
<!-- fact -->
<li>
<i class="fa-solid fa-pen fa-li" style="opacity:.7;"></i>
trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-solid fa-pen fa-li" style="opacity:.7;"></i>
trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-solid fa-pen fa-li" style="opacity:.7;"></i>
trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-solid fa-pen fa-li" style="opacity:.7;"></i>
trivia fact
</li>
<!-- fact -->
<li>
<i class="fa-solid fa-pen fa-li" style="opacity:.7;"></i>
trivia fact
</li>
</ul>
</div>
<!-- list end -->
</div>
<!-- info end -->
<div class="bg-success w-100" style="opacity:0; height:.25rem;"></div>
</div>
</div>
<!-- trivia end -->
<!-- relationships -->
<div>
<!-- relationship - image left -->
<div class="row no-gutters mt-4">
<!-- icon -->
<div class="col-md-4">
<div class="p-3 bg-primary">
<!-- image -->
<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/46642774_nqS.png) center; background-size:cover; padding:50%;"></div>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-primary pr-md-1 pb-md-0 pb-1 h-100">
<div class="p-3 bg-faded d-md-flex d-block flex-column h-100">
<!-- character name -->
<h1 class="font-weight-light display-4 mb-0">
<a href="chara_url">
Character Name
</a>
</h1>
<!-- basic info -->
<div class="row no-gutters text-muted">
<!-- type -->
<div class="col font-italic">
relationship type
</div>
<!-- rating -->
<div class="col-auto">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="text-justify pr-md-2" style="flex:1 1 0; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</div>
</div>
</div>
</div>
</div>
<!-- relationship - image right -->
<div class="row no-gutters mt-4">
<!-- info -->
<div class="col">
<div class="bg-primary pl-md-1 pt-md-0 pt-1 h-100">
<div class="p-3 bg-faded d-md-flex d-block flex-column h-100">
<!-- character name -->
<h1 class="font-weight-light display-4 mb-0">
<a href="chara_url">
Character Name
</a>
</h1>
<!-- basic info -->
<div class="row no-gutters text-muted">
<!-- type -->
<div class="col font-italic">
relationship type
</div>
<!-- rating -->
<div class="col-auto">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="text-justify pr-md-2" style="flex:1 1 0; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</div>
</div>
</div>
</div>
<!-- icon -->
<div class="col-md-4">
<div class="p-3 bg-primary">
<!-- image -->
<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/46642774_nqS.png) center; background-size:cover; padding:50%;"></div>
</div>
</div>
</div>
<!-- relationship - image left -->
<div class="row no-gutters mt-4">
<!-- icon -->
<div class="col-md-4">
<div class="p-3 bg-primary">
<!-- image -->
<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/46642774_nqS.png) center; background-size:cover; padding:50%;"></div>
</div>
</div>
<!-- info -->
<div class="col">
<div class="bg-primary pr-md-1 pb-md-0 pb-1 h-100">
<div class="p-3 bg-faded d-md-flex d-block flex-column h-100">
<!-- character name -->
<h1 class="font-weight-light display-4 mb-0">
<a href="chara_url">
Character Name
</a>
</h1>
<!-- basic info -->
<div class="row no-gutters text-muted">
<!-- type -->
<div class="col font-italic">
relationship type
</div>
<!-- rating -->
<div class="col-auto">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
<div class="text-justify pr-md-2" style="flex:1 1 0; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--input-color) transparent;">
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget condimentum enim. Donec auctor, dui gravida sagittis commodo, lectus erat ornare dolor, nec blandit massa tellus eu magna. Praesent vitae lorem ut ex lobortis pulvinar ac id magna. Nunc non mollis nunc. Maecenas bibendum mollis ex in eleifend.
</div>
</div>
</div>
</div>
</div>
<!-- add more relationships above -->
</div>
<!-- relationships end -->
</div>
</div>
</div>