Toil & Trouble
created by:HTMLobster
HTMLMixed ColorsCharacter
Copy
<!-----------------------------------------------------------------
Toil & Trouble - Character
Profile by HTMLobster (noll)
TOS:
https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------------------------------------>
<!-- edit accent colors here -->
<div class="container" style="
--accent1: #cd8900;
--accent2: #f8bf00;
--accent3: #fbe515;
">
<div class="row">
<div class="col order-lg-1 order-2 mt-lg-0 mt-4">
<!-- heading -->
<div class="row no-gutters mb-4">
<!-- bars -->
<div class="col-auto justify-content-center hidden-sm-down">
<div style="background:var(--accent3);" class="p-2 h-100 mr-2 rounded"></div>
<div style="background:var(--accent2);" class="p-3 h-100 mr-2 rounded"></div>
<div style="background:var(--accent1);" class="p-4 h-100 mr-2 rounded"></div>
</div>
<!-- bars end -->
<!-- character info -->
<div class="col">
<div class="card" style="border-left: 0.5rem solid var(--accent1);">
<h1 class="p-3 display-3 bg-faded mb-0 font-weight-bold justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
<!-- symbol -->
<i class="fa-solid fa-bat"></i>
</span>
<!-- name -->
<span>
Character Name
</span>
</h1>
</div>
</div>
</div>
<!-- heading end -->
<!-- main content -->
<div class="card bg-faded">
<div class="tab-content">
<!-- about -->
<div class="tab-pane fade active show" id="about">
<div class="d-md-flex flex-column d-block py-3">
<div class="text-justify px-3 overflow-auto" style="flex:1 1 212px; min-height:212px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
About
</h3>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra sagittis nunc nec vehicula. Vestibulum malesuada cursus mi in eleifend. Vestibulum et massa lacus. Nulla convallis turpis vel nunc volutpat luctus. Sed lobortis nec justo vitae placerat. Phasellus at nisi ultricies, molestie nulla in, blandit ante. Nunc eu blandit mi. Sed mattis nibh urna, vel congue mauris sollicitudin id.
</p>
<p>
Proin sit amet pretium odio, et commodo eros. Sed volutpat ipsum ac enim maximus, finibus mattis nisi congue. Proin nulla massa, mattis ut scelerisque id, ullamcorper vitae diam. Nullam erat sapien, ullamcorper eget cursus sit amet, pretium at tortor. Vivamus lacinia euismod massa sit amet congue. Sed in arcu porta, lacinia ante in, euismod justo. Quisque finibus, felis id placerat pharetra, nibh diam euismod libero, et vulputate ex felis quis urna.
</p>
<p>
Aliquam leo leo, vulputate sit amet malesuada vel, dictum vel tellus. Vivamus lacus mi, aliquam et viverra eu, cursus vel sem. Phasellus consequat, leo eu tincidunt venenatis, risus ante sagittis leo, sed dapibus nisl enim in ante. Donec vitae pulvinar turpis. Nulla at cursus ipsum, vel commodo felis. Fusce et venenatis augue, vel tincidunt diam.
</p>
</div>
</div>
</div>
<!-- personality -->
<div class="tab-pane fade" id="persona">
<div class="d-md-flex flex-column d-block py-3">
<div class="text-justify px-3 overflow-auto" style="flex:1 1 212px; min-height:212px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Personality
</h3>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra sagittis nunc nec vehicula. Vestibulum malesuada cursus mi in eleifend. Vestibulum et massa lacus. Nulla convallis turpis vel nunc volutpat luctus. Sed lobortis nec justo vitae placerat. Phasellus at nisi ultricies, molestie nulla in, blandit ante. Nunc eu blandit mi. Sed mattis nibh urna, vel congue mauris sollicitudin id.
</p>
<p>
Proin sit amet pretium odio, et commodo eros. Sed volutpat ipsum ac enim maximus, finibus mattis nisi congue. Proin nulla massa, mattis ut scelerisque id, ullamcorper vitae diam. Nullam erat sapien, ullamcorper eget cursus sit amet, pretium at tortor. Vivamus lacinia euismod massa sit amet congue. Sed in arcu porta, lacinia ante in, euismod justo. Quisque finibus, felis id placerat pharetra, nibh diam euismod libero, et vulputate ex felis quis urna.
</p>
<p>
Aliquam leo leo, vulputate sit amet malesuada vel, dictum vel tellus. Vivamus lacus mi, aliquam et viverra eu, cursus vel sem. Phasellus consequat, leo eu tincidunt venenatis, risus ante sagittis leo, sed dapibus nisl enim in ante. Donec vitae pulvinar turpis. Nulla at cursus ipsum, vel commodo felis. Fusce et venenatis augue, vel tincidunt diam.
</p>
</div>
</div>
</div>
<!-- skills/stats -->
<div class="tab-pane fade" id="skills">
<div class="d-md-flex flex-column d-block py-3">
<div class="text-justify px-3" style="flex:1 1 212px; min-height:212px; overflow-y:auto; overflow-x:hidden; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<div class="row">
<!-- skills -->
<div class="col-md-4">
<!-- skill -->
<div>
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Skill
</h3>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!-- skill -->
<div class="mt-3">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Skill
</h3>
<!-- description -->
<p>
Proin sit amet pretium odio, et commodo eros. Sed volutpat ipsum ac enim maximus.
</p>
</div>
<!-- skill -->
<div class="mt-3">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Skill
</h3>
<!-- description -->
<p>
Aliquam leo leo, vulputate sit amet malesuada vel, dictum vel tellus.
</p>
</div>
</div>
<!-- stats -->
<div class="col">
<div class="row mt-md-n2">
<div class="col">
<!-- Strength -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Strength
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
<!-- Dexterity -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Dexterity
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
<!-- Constitution -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Constitution
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Intelligence -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Intelligence
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
<!-- Wisdom -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Wisdom
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
<!-- Charisma -->
<div class="mt-2 card" style="overflow:hidden;">
<div class="">
<div class="justify-content-between p-3">
<h3 class="font-weight-bold font-italic text-uppercase text-truncate mb-0" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- trait -->
Charisma
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div>
<div class="progress rounded-0">
<div class="progress-bar bg-faded" style="width:100%; height:10px; position:absolute; left:0; opacity:.3;"></div>
<!-- progress - change width % -->
<div class="progress-bar" style="width:50%; background:var(--accent1); height:10px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- nav buttons -->
<ul class="nav row no-gutters ml-n2">
<!-- about -->
<li style="background:var(--accent1);" class="col nav-item rounded p-0 mt-sm-4 mt-2 ml-2">
<a data-toggle="tab" href="#about" style="mix-blend-mode:luminosity;" class="nav-link text-white btn btn-outline-warning p-3 show active">
<span>
<!-- symbol -->
<i class="fa-solid fa-ghost fa-2x"></i>
</span>
</a>
</li>
<!-- personality -->
<li style="background:var(--accent1);" class="col nav-item rounded p-0 mt-sm-4 mt-2 ml-2">
<a data-toggle="tab" href="#persona" style="mix-blend-mode:luminosity;" class="nav-link text-white btn btn-outline-warning p-3">
<span>
<!-- symbol -->
<i class="fa-solid fa-masks-theater fa-2x"></i>
</span>
</a>
</li>
<!-- skills -->
<li style="background:var(--accent1);" class="col nav-item rounded p-0 mt-sm-4 mt-2 ml-2">
<a data-toggle="tab" href="#skills" style="mix-blend-mode:luminosity;" class="nav-link text-white btn btn-outline-warning p-3">
<span>
<!-- symbol -->
<i class="fa-solid fa-hat-witch fa-2x"></i>
</span>
</a>
</li>
<!-- bars -->
<li class="col-lg-5 col-sm-6 justify-content-center row no-gutters mt-sm-4 mt-2">
<div style="background:var(--accent1);" class="p-4 h-100 ml-2 col-6 rounded"></div>
<div style="background:var(--accent2);" class="p-3 h-100 ml-2 col-4 rounded"></div>
<div style="background:var(--accent3);" class="p-2 h-100 ml-2 col rounded"></div>
</li>
</ul>
</div>
<!-- side image --->
<div class="col-lg-4 order-lg-2 order-1">
<!-- image -->
<div class="card h-100" style="background:url(image_url) center; background-size:cover; padding:50%;">
<!-- decor -->
<div style="position:absolute; bottom:-.25rem; right:-1rem;">
<i class="fa-duotone fa-solid fa-cauldron fa-4x" style="--fa-primary-color:var(--accent1); --fa-secondary-color:var(--accent3); --fa-secondary-opacity: 1;"></i>
</div>
<div style="position:absolute; bottom:-.25rem; left:-.75rem;">
<i class="fa-duotone fa-solid fa-jack-o-lantern fa-4x fa-swap-opacity" style="--fa-primary-color:var(--accent3); --fa-secondary-color:var(--accent1); --fa-secondary-opacity: 1;"></i>
<i class="fa-solid fa-pumpkin fa-3x" style="position:absolute; bottom:-.25rem; margin-left:-1.5rem; color:var(--accent2);"></i>
</div>
</div>
</div>
</div>
<div class="row">
<!-- side image -->
<div class="col-lg mt-4">
<!-- image -->
<div class="card h-100" style="background:url(image_url) center; background-size:cover; padding:50%;">
<div style="position:absolute; bottom:-.25rem; left:-.75rem;">
<!-- decor -->
<i class="fa-duotone fa-solid fa-crow fa-4x fa-swap-opacity" style="--fa-primary-color:var(--accent1); --fa-secondary-color:var(--accent3); --fa-secondary-opacity: 1;"></i>
<i class="fa-solid fa-pumpkin fa-2x" style="position:absolute; bottom:-.25rem; margin-left:-1.5rem; color:var(--accent2);"></i>
</div>
</div>
</div>
<!-- preferences -->
<div class="col mt-4">
<!-- heading -->
<div class="row no-gutters mb-4">
<!-- title -->
<div class="col">
<div class="card" style="border-right: 0.5rem solid var(--accent1);">
<h1 class="p-3 display-3 bg-faded mb-0 font-weight-bold justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- name -->
<span>
Preferences
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-hearts"></i>
</span>
</h1>
</div>
</div>
</div>
<!-- heading end -->
<!-- preferences -->
<div class="card bg-faded">
<div class="d-sm-flex flex-column d-block py-3">
<div class="text-justify px-3 overflow-auto" style="flex:1 1 185px; min-height:185px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<div class="row">
<!-- likes -->
<div class="col mt-n3">
<!-- like -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-heart"></i>
</h3>
<!-- like -->
<p>
Like
</p>
</div>
<!-- like -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-heart"></i>
</h3>
<!-- like -->
<p>
Like
</p>
</div>
<!-- like -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-heart"></i>
</h3>
<!-- like -->
<p>
Like
</p>
</div>
<!-- like -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-heart"></i>
</h3>
<!-- like -->
<p>
Like
</p>
</div>
<!-- like -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-heart"></i>
</h3>
<!-- like -->
<p>
Like
</p>
</div>
</div>
<!-- dislikes -->
<div class="col mt-n3">
<!-- dislike -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-xmark"></i>
</h3>
<!-- dislike -->
<p>
Dislike
</p>
</div>
<!-- dislike -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-xmark"></i>
</h3>
<!-- dislike -->
<p>
Dislike
</p>
</div>
<!-- dislike -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-xmark"></i>
</h3>
<!-- dislike -->
<p>
Dislike
</p>
</div>
<!-- dislike -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-xmark"></i>
</h3>
<!-- like -->
<p>
Dislike
</p>
</div>
<!-- dislike -->
<div class="mt-3">
<!-- symbol -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
<i class="fa-solid fa-xmark"></i>
</h3>
<!-- dislike -->
<p>
Dislike
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- music -->
<div class="col-sm-auto mt-4">
<div class="h-100 d-flex flex-sm-column">
<!-- music player -->
<div class="p-3 text-white rounded" style="background:var(--accent1);">
<!-- symbol -->
<i class="fa-solid fa-music-note fa-sm" style="position:absolute; top:1rem; left:1.5rem;"></i>
<i class="fa-solid fa-gramophone fa-2x"></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>
<!-- bars -->
<div class="mt-sm-2 flex-grow-1 w-100 ml-sm-0 ml-2">
<div style="background:var(--accent1);" class="p-4 w-100 h-100 rounded"></div>
</div>
<div style="background:var(--accent2);" class="mt-sm-2 p-3 rounded ml-sm-0 ml-2"></div>
<div style="background:var(--accent3);" class="mt-sm-2 p-2 rounded ml-sm-0 ml-2"></div>
</div>
</div>
<!-- design -->
<div class="col-lg d-flex flex-column mt-lg-0 mt-4">
<div class="card bg-faded order-lg-1 order-2 mt-4">
<div class="d-sm-flex flex-column d-block py-3">
<div class="text-justify px-3 overflow-auto" style="flex:1 1 185px; min-height:185px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<!-- color palette -->
<div>
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Colors
</h3>
<!-- color - change text-white to text-dark in the class for light colors -->
<span style="background:#000;" class="badge badge-pill mx-1 text-white">
#000000
</span>
<!-- color -->
<span style="background:#333;" class="badge badge-pill mx-1 text-white">
#333333
</span>
<!-- color -->
<span style="background:#808080;" class="badge badge-pill mx-1 text-white">
#808080
</span>
<!-- color -->
<span style="background:#ccc;" class="badge badge-pill mx-1 text-dark">
#CCCCCC
</span>
<!-- color -->
<span style="background:#fff;" class="badge badge-pill mx-1 text-dark">
#FFFFFF
</span>
</div>
<!-- design notes -->
<div>
<!-- note -->
<div class="mt-3">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Note
</h3>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!-- note -->
<div class="mt-3">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Note
</h3>
<!-- description -->
<p>
Proin sit amet pretium odio, et commodo eros. Sed volutpat ipsum ac enim maximus.
</p>
</div>
<!-- note -->
<div class="mt-3">
<!-- title -->
<h3 class="pr-2 mr-2 mb-0 float-left font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif; border-right:3px solid var(--accent1);">
Note
</h3>
<!-- description -->
<p>
Aliquam leo leo, vulputate sit amet malesuada vel, dictum vel tellus.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- heading -->
<div class="row no-gutters mt-lg-4 mt-0 order-lg-2 order-1">
<!-- title -->
<div class="col">
<div class="card" style="border-left: 0.5rem solid var(--accent1);">
<h1 class="p-3 display-3 bg-faded mb-0 font-weight-bold justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
<!-- symbol -->
<i class="fa-solid fa-candy"></i>
</span>
<!-- name -->
<span>
Design
</span>
</h1>
</div>
</div>
</div>
<!-- heading end -->
</div>
</div>
<div class="row">
<!-- relationships -->
<div class="col mt-4">
<div class="card bg-faded h-100">
<div class="d-lg-flex flex-column d-block py-3 h-100">
<div class="text-justify px-3" style="flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin;">
<!-- relationship -->
<div class="row no-gutters">
<div class="col-sm-auto justify-content-center mr-sm-3">
<div>
<!-- image -->
<img src="image_url" alt="describe_image" style="max-width:150px;" class="rounded card">
</div>
</div>
<div class="col">
<!-- character info -->
<h1 class="justify-content-between mb-0">
<!-- link -->
<a href="chara_link" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- name -->
Character Name
</a>
<!-- symbol -->
<i class="fa-solid fa-heart" style="color:var(--accent1);"></i>
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra sagittis nunc nec vehicula. Vestibulum malesuada cursus mi in eleifend. Vestibulum et massa lacus. Nulla convallis turpis vel nunc volutpat luctus.
</p>
</div>
</div>
<!-- relationship -->
<div class="row no-gutters mt-3">
<div class="col-sm-auto justify-content-center mr-sm-3">
<div>
<!-- image -->
<img src="image_url" alt="describe_image" style="max-width:150px;" class="rounded card">
</div>
</div>
<div class="col">
<!-- character info -->
<h1 class="justify-content-between mb-0">
<!-- link -->
<a href="chara_link" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- name -->
Character Name
</a>
<!-- symbol -->
<i class="fa-solid fa-heart" style="color:var(--accent1);"></i>
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra sagittis nunc nec vehicula. Vestibulum malesuada cursus mi in eleifend. Vestibulum et massa lacus. Nulla convallis turpis vel nunc volutpat luctus. Sed lobortis nec justo vitae placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros.
</p>
</div>
</div>
<!-- relationship -->
<div class="row no-gutters mt-3">
<div class="col-sm-auto justify-content-center mr-sm-3">
<div>
<!-- image -->
<img src="image_url" alt="describe_image" style="max-width:150px;" class="rounded card">
</div>
</div>
<div class="col">
<!-- character info -->
<h1 class="justify-content-between mb-0">
<!-- link -->
<a href="chara_link" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- name -->
Character Name
</a>
<!-- symbol -->
<i class="fa-solid fa-heart" style="color:var(--accent1);"></i>
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra sagittis nunc nec vehicula. Vestibulum malesuada cursus mi in eleifend. Vestibulum et massa lacus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- decor -->
<div class="col-sm-auto mt-4 d-flex flex-sm-column">
<!-- bars -->
<div style="background:var(--accent3);" class="p-2 rounded mr-sm-0 mr-2"></div>
<div style="background:var(--accent2);" class="mt-sm-2 p-3 rounded mr-sm-0 mr-2"></div>
<div class="mt-sm-2 flex-grow-1 w-100 mr-sm-0 mr-2">
<div style="background:var(--accent1);" class="p-4 w-100 h-100 rounded"></div>
</div>
<div class="p-3 mt-sm-2 rounded" style="background:var(--accent1);">
<!-- symbol -->
<i class="fa-solid fa-cat fa-2x text-white"></i>
</div>
</div>
<!-- moodboard -->
<div class="col-lg">
<div class="row">
<!-- decor -->
<span class="fa-3x" style="position:absolute; z-index:999; left:calc(50% - 53.5px); top:calc(50% - 32px);">
<i class="fa-solid fa-circle fa-2x" style="position:absolute; color:var(--color-background);"></i>
<i class="fa-solid fa-jack-o-lantern fa-lg" style="position:absolute; margin-top:40px; margin-left:20px; color:var(--accent1);"></i>
</span>
<div class="col-6 mt-4">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%" class="card"></div>
</div>
<div class="col-6 mt-4">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%" class="card"></div>
</div>
<div class="col-6 mt-4">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%" class="card"></div>
</div>
<div class="col-6 mt-4">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%" class="card"></div>
</div>
</div>
</div>
</div>
<!-- credit -->
<div class="mt-3 text-center">
<a href="https://toyhou.se/HTMLobster" title="Code by HTMLobster" target="_blank" data-toggle="tooltip" style="color:var(--accent1)">
<i class="fa-solid fa-lobster"></i>
</a>
</div>
</div>