Pumpkin
created by:HTMLobster
HTMLMixed ColorsCharacter
Copy
<!-----------------------------------------------------------------
Pumpkin - Character
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<!-- edit accent colors here -->
<div class="container"
style="
--accent1: #cd8900;
--accent2: #f8bf00;
--accent3: #fbe515;">
<!-- upper content area -->
<div class="row">
<!-- sidebar -->
<div class="col-lg-3">
<div class="h-100 d-flex flex-column">
<!-- side icon -->
<div>
<!-- image -->
<div style="background: url(image_url) center; background-size:cover; padding:50%; z-index:2; position:relative; top:0;" class="bg-primary mt-1 mx-n2 rounded-circle"></div>
<!-- pumpkin border -->
<div class="mt-n1 mx-n3" style="background:url(https://file.garden/aFarvj252RRgqJKd/halloween-13.png) center; background-size:cover; padding:50%; z-index:3; position:absolute; top:0;"></div>
</div>
<!-- side icon end -->
<!-- basics -->
<div class="mt-4">
<!-- nicknames -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-user" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- nickname(s)
</p>
</div>
</div>
</div>
<!-- age -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-cake-candles" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- age
</p>
</div>
</div>
</div>
<!-- birthday -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-calendar-days" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- birthday
</p>
</div>
</div>
</div>
<!-- pronouns -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-comments" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- pronouns
</p>
</div>
</div>
</div>
<!-- species -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-dna" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- species
</p>
</div>
</div>
</div>
<!-- occupation -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-briefcase" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- occupation
</p>
</div>
</div>
</div>
<!-- status -->
<div class="row no-gutters mt-2">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol -->
<i class="fa-light fa-tombstone" style="font-size:2.5em; color:var(--accent1);"></i>
</div>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100">
<h3 class="mb-0">
<!-- content -->
Content
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- status
</p>
</div>
</div>
</div>
</div>
<!-- basics end -->
<!-- bottom border -->
<div class="mt-2 flex-grow-1 w-100 row no-gutters">
<div class="col">
<div class="w-100 h-100" style="background:var(--accent1);"></div>
</div>
<div class="col-auto justify-content-center">
<div style="background:var(--accent2);" class="p-3 h-100 ml-2"></div>
<div style="background:var(--accent3);" class="p-2 h-100 ml-2"></div>
</div>
</div>
<!-- bottom border end -->
</div>
</div>
<!-- sidebar end -->
<!-- right column -->
<div class="col">
<div class="row">
<div class="col">
<!-- heading -->
<div class="row no-gutters mb-sm-0 mb-4 mt-lg-0 mt-4">
<div class="col">
<div class="card rounded-0" style="border-right: 0.5rem solid var(--accent1);">
<h1 class="p-3 display-3 bg-faded mb-0 font-weight-bold" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- name -->
Character Name
</h1>
</div>
</div>
<!-- bars -->
<div class="col-auto justify-content-center hidden-sm-down">
<div style="background:var(--accent1);" class="p-4 h-100 ml-2"></div>
<div style="background:var(--accent2);" class="p-3 h-100 ml-2"></div>
<div style="background:var(--accent3);" class="p-2 h-100 ml-2"></div>
</div>
<!-- bars end -->
</div>
<!-- heading end -->
<!-- preferences -->
<div class="row">
<!-- nav buttons -->
<div class="col-sm-auto">
<div class="h-100 d-block d-sm-flex flex-column">
<ul class="nav flex-sm-column row mx-0">
<!-- likes -->
<li class="col nav-item p-1 mt-sm-4" style="background:var(--accent1);">
<a data-toggle="tab" href="#like" style="border:1px solid var(--color-background); mix-blend-mode:luminosity;" class="nav-link p-2 text-white btn btn-outline-warning rounded-0 show active">
<span data-toggle="tooltip" title="likes">
<!-- symbol -->
<i class="fa-solid fa-jack-o-lantern fa-2x"></i>
</span>
</a>
</li>
<!-- dislikes -->
<li class="col nav-item p-1 mt-sm-2" style="background:var(--accent1);">
<a data-toggle="tab" href="#dislike" style="border:1px solid var(--color-background); mix-blend-mode:luminosity;" class="nav-link p-2 text-white btn btn-outline-warning rounded-0">
<span data-toggle="tooltip" title="dislikes">
<!-- symbol -->
<i class="fa-solid fa-skull fa-2x"></i>
</span>
</a>
</li>
</ul>
<!-- bars -->
<div class="mt-2 flex-grow-1 w-100">
<div style="background:var(--accent1);" class="p-4 w-100 h-100"></div>
</div>
<div style="background:var(--accent2);" class="mt-2 p-3 w-100"></div>
<div style="background:var(--accent3);" class="mt-2 p-2 w-100"></div>
</div>
</div>
<!-- nav buttons end -->
<!-- tabs -->
<div class="col">
<div class="card bg-faded rounded-0 mt-4" style="border-top: 0.5rem solid var(--accent1);">
<div class="tab-content">
<!-- likes -->
<div class="tab-pane fade active show" id="like">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
Likes
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-heart" style="opacity:.5;"></i>
</span>
</h2>
<!-- likes -->
<div class="d-sm-flex d-block flex-column p-2 text-justify">
<div class="p-2" style="flex:1 1 242px; min-height:242px; overflow-y:auto; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<!-- like -->
<div>
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Like
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- like end -->
<!-- like -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Like
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- like end -->
<!-- like -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Like
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- like end -->
<!-- paste more likes below, make sure they are the version with class="mt-3" for proper spacing -->
</div>
</div>
</div>
<!-- dislikes -->
<div class="tab-pane fade" id="dislike">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
Dislikes
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-heart-crack" style="opacity:.5;"></i>
</span>
</h2>
<!-- dislikes -->
<div class="d-sm-flex d-block flex-column p-2">
<div class="p-2" style="flex:1 1 242px; min-height:242px; overflow-y:auto; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<!-- dislike -->
<div>
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Dislike
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci.
</p>
</div>
<!-- dislike end -->
<!-- dislike -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Dislike
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci.
</p>
</div>
<!-- dislike end -->
<!-- dislike -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
<!-- thing -->
Dislike
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci.
</p>
</div>
<!-- dislike end -->
<!-- paste more dislikes below, make sure they are the version with class="mt-3" for proper spacing -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tabs end -->
</div>
<!-- preferences end -->
</div>
<!-- side image -->
<div class="col-lg-3 mb-lg-n5 mt-lg-0 mt-4" style="z-index:3; position:relative;">
<div class="h-100 card rounded-0 p-2">
<!-- image -->
<div style="background-image:url(image_url); background-position:top center; background-size:cover; padding:50%;" class="h-100 bg-faded"></div>
</div>
</div>
<!-- side image end -->
</div>
<!-- main content -->
<div class="row">
<!-- tabs -->
<div class="col">
<div class="card bg-faded rounded-0 mt-4" style="z-index:2; position:relative; border-top: 0.5rem solid var(--accent1);">
<div class="tab-content">
<!-- about -->
<div class="tab-pane fade active show" id="about">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
About
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-ghost" style="opacity:.5;"></i>
</span>
</h2>
<!-- description -->
<div class="d-sm-flex d-block flex-column p-2 text-justify">
<div class="px-2 pt-2 pb-lg-5 pb-2" style="flex:1 1 403px; min-height:403px; overflow-y:auto; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<!-- large letter -->
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif; font-size:1.5rem; line-height:1;">
<!-- letter -->
L
</div>
</div>
<!-- content -->
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci. Praesent maximus tortor ante. Sed mollis posuere nisl, ut blandit ipsum euismod sed. Aenean nec tellus id lacus aliquet convallis. Nam venenatis ligula id vulputate gravida. Nullam pulvinar fermentum nisl, vel rhoncus ligula aliquet molestie. Donec pharetra quis leo quis vestibulum. Integer lobortis volutpat dictum. Proin accumsan consectetur viverra. Curabitur convallis augue pellentesque ipsum vehicula, sed viverra nibh ornare.
</p>
<p>
Aenean malesuada tempus semper. Nullam tristique pulvinar sollicitudin. Maecenas eget est pellentesque, euismod risus non, finibus tortor. Etiam non faucibus est. Donec maximus cursus vulputate. Suspendisse rhoncus aliquet mauris, in lacinia dui facilisis a. Etiam at odio volutpat, consectetur eros vel, blandit metus. Sed ultrices consectetur lorem eu posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis ex vitae libero scelerisque, et auctor erat mattis.
</p>
<p>
In egestas nunc id massa luctus interdum. Vestibulum sollicitudin dapibus tristique. Etiam eget nisl purus. Nam sed lacus maximus, rhoncus nunc in, interdum ipsum. Cras dictum fringilla dolor sit amet scelerisque. Pellentesque euismod semper nisl laoreet maximus. Aliquam sed dolor nec nisi tempus malesuada. In mollis fermentum quam, interdum aliquam purus volutpat sit amet. Proin efficitur tincidunt posuere.
</p>
</div>
</div>
</div>
<!-- about end -->
<!-- personality -->
<div class="tab-pane fade" id="persona">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
Personality
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-mask" style="opacity:.5;"></i>
</span>
</h2>
<!-- content -->
<div class="d-sm-flex d-block flex-column p-2 text-justify">
<div class="p-2" style="flex:1 1 403px; min-height:403px; overflow-y:auto; overflow-x:hidden; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<div class="row">
<!-- description -->
<div class="col-lg pb-lg-5 pb-2">
<!-- large letter -->
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif; font-size:1.5rem; line-height:1;">
<!-- letter -->
L
</div>
</div>
<!-- content -->
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci. Praesent maximus tortor ante. Sed mollis posuere nisl, ut blandit ipsum euismod sed. Aenean nec tellus id lacus aliquet convallis. Nam venenatis ligula id vulputate gravida. Nullam pulvinar fermentum nisl, vel rhoncus ligula aliquet molestie. Donec pharetra quis leo quis vestibulum.
</p>
<p>
Integer lobortis volutpat dictum. Proin accumsan consectetur viverra. Curabitur convallis augue pellentesque ipsum vehicula, sed viverra nibh ornare. Aenean malesuada tempus semper. Nullam tristique pulvinar sollicitudin. Maecenas eget est pellentesque, euismod risus non, finibus tortor. Etiam non faucibus est. Donec maximus cursus vulputate.
</p>
</div>
<!-- description end -->
<!-- traits -->
<div class="col-lg">
<!-- honesty -->
<div class="mt-lg-0 mt-3">
<div class="card rounded-0 bg-faded">
<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 -->
Honesty
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- humility -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Humility
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- emotionality -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Emotionality
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- extroversion -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Extroversion
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- agreeableness -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Agreeableness
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- conscientiousness -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Conscientiousness
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- openness -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 -->
Openness
</h3>
<span>
<!-- amount -->
50%
</span>
</div>
</div>
<!-- progress -->
<div class="card rounded-0 border-top-0">
<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>
<!-- traits end -->
</div>
</div>
</div>
</div>
<!-- personality end -->
<!-- relationships -->
<div class="tab-pane fade" id="links">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
Relationships
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-crow" style="opacity:.5;"></i>
</span>
</h2>
<!-- content -->
<div class="d-sm-flex d-block flex-column p-2 text-justify">
<div class="px-2 pt-2 pb-lg-5 pb-2" style="flex:1 1 403px; min-height:403px; overflow-y:auto; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<!-- relationship -->
<div class="row no-gutters">
<!-- icon -->
<div class="col-md-3">
<div class="card rounded-0 p-2">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%;" class="bg-faded"></div>
</div>
</div>
<!-- description -->
<div class="col pl-md-3 mt-md-0 mt-2">
<div class="card rounded-0">
<!-- heading -->
<div class="card-header" style="font-size:1.5rem; color:var(--accent1); font-family:'Times New Roman', serif;">
<div class="row text-md-left text-center">
<div class="col font-weight-bold">
<!-- name + link -->
<a href="char_url" style="color:var(--accent1);">
Name
</a>
</div>
<div class="col-md-auto" style="opacity:.5;">
<!-- rating -->
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</span>
</div>
</div>
</div>
<!-- description -->
<div class="p-3">
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci. Praesent maximus tortor ante. Sed mollis posuere nisl, ut blandit ipsum euismod sed. Aenean nec tellus id lacus aliquet convallis.
</p>
</div>
</div>
</div>
</div>
<!-- relationship end -->
<!-- divider -->
<div class="row no-gutters my-2 align-items-center">
<div class="col">
<hr class="my-0">
<hr class="mb-0 mt-1">
</div>
<div class="col-auto">
<i class="fa-solid fa-candy mx-2" style="color:var(--accent1)"></i>
</div>
<div class="col">
<hr class="my-0">
<hr class="mb-0 mt-1">
</div>
</div>
<!-- divider end -->
<!-- relationship -->
<div class="row no-gutters">
<!-- icon -->
<div class="col-md-3">
<div class="card rounded-0 p-2">
<!-- image -->
<div style="background-image:url(image_url); background-size:cover; background-position:center; padding:50%;" class="bg-faded"></div>
</div>
</div>
<!-- description -->
<div class="col pl-md-3 mt-md-0 mt-2">
<div class="card rounded-0">
<!-- heading -->
<div class="card-header" style="font-size:1.5rem; color:var(--accent1); font-family:'Times New Roman', serif;">
<div class="row text-md-left text-center">
<div class="col font-weight-bold">
<!-- name + link -->
<a href="char_url" style="color:var(--accent1);">
Name
</a>
</div>
<div class="col-md-auto" style="opacity:.5;">
<!-- rating -->
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</span>
</div>
</div>
</div>
<!-- description -->
<div class="p-3">
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt. Nulla eget mollis orci. Praesent maximus tortor ante. Sed mollis posuere nisl, ut blandit ipsum euismod sed. Aenean nec tellus id lacus aliquet convallis.
</p>
</div>
</div>
</div>
</div>
<!-- relationship end -->
<!-- paste divider and relationship below -->
</div>
</div>
</div>
<!-- relationships end -->
</div>
</div>
</div>
<!-- tabs end -->
<!-- nav buttons -->
<div class="col-sm-auto mt-lg-5">
<div class="h-100 d-block d-sm-flex flex-column">
<!-- nav -->
<ul class="nav flex-sm-column row mx-0">
<!-- about -->
<li style="background:var(--accent1);" class="col nav-item p-1 mt-sm-4 mt-2">
<a data-toggle="tab" href="#about" style="border:1px solid var(--color-background); mix-blend-mode:luminosity;" class="nav-link p-2 text-white btn btn-outline-warning rounded-0 show active">
<span data-toggle="tooltip" title="about">
<!-- symbol -->
<i class="fa-solid fa-ghost fa-2x"></i>
</span>
</a>
</li>
<!-- personality -->
<li style="background:var(--accent1);" class="col nav-item p-1 mt-2">
<a data-toggle="tab" href="#persona" style="border:1px solid var(--color-background); mix-blend-mode:luminosity;" class="nav-link p-2 text-white btn btn-outline-warning rounded-0">
<span data-toggle="tooltip" title="personality">
<!-- symbol -->
<i class="fa-solid fa-mask fa-2x"></i>
</span>
</a>
</li>
<!-- relationships -->
<li style="background:var(--accent1);" class="col nav-item p-1 mt-2">
<a data-toggle="tab" href="#links" style="border:1px solid var(--color-background); mix-blend-mode:luminosity;" class="nav-link p-2 text-white btn btn-outline-warning rounded-0">
<span data-toggle="tooltip" title="relationships">
<!-- symbol -->
<i class="fa-solid fa-crow fa-2x"></i>
</span>
</a>
</li>
</ul>
<!-- bars -->
<div class="mt-2 flex-grow-1 w-100">
<div style="background:var(--accent1);" class="p-4 w-100 h-100"></div>
</div>
<div style="background:var(--accent2);" class="mt-2 p-3 w-100"></div>
<div style="background:var(--accent3);" class="mt-2 p-2 w-100"></div>
</div>
</div>
<!-- nav buttons end -->
</div>
<!-- main content -->
</div>
<!-- right column end -->
</div>
<!-- upper content area end -->
<!-- lower content area -->
<div class="row">
<!-- design info -->
<div class="col-lg mt-lg-n5 mt-4 d-flex flex-column">
<!-- design image -->
<div class="card rounded-0 p-2" style="position:relative; z-index:4;">
<!-- image -->
<div style="background-image:url(image_url); background-position:center; background-size:cover; padding:25%;" class="h-100 bg-faded"></div>
</div>
<!-- design image end -->
<!-- design notes -->
<div class="card bg-faded rounded-0 mt-4" style="border-top: 0.5rem solid var(--accent1);">
<!-- heading -->
<h2 class="display-4 font-weight-bold card-header justify-content-between" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<span>
Design
</span>
<span>
<!-- symbol -->
<i class="fa-solid fa-hat-witch" style="opacity:.5;"></i>
</span>
</h2>
<!-- notes -->
<div class="d-sm-flex d-block flex-column p-2 text-justify">
<div class="p-2" style="flex:1 1 242px; min-height:242px; overflow-y:auto; scrollbar-color:var(--accent1) var(--color-background); scrollbar-width:thin;">
<!-- note -->
<div>
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
Note
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- note end -->
<!-- note -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
Note
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- note end -->
<!-- note -->
<div class="mt-3">
<div class="p-1 float-left mr-2" style="background:var(--accent1);">
<div class="px-2 py-1 text-white font-weight-bold" style="background:var(--accent1); border: 1px solid var(--color-background); font-family: 'Times New Roman', serif;">
Note
</div>
</div>
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus posuere eros. Sed vulputate tortor vel dui placerat scelerisque. Donec accumsan justo vel velit pellentesque tincidunt.
</p>
</div>
<!-- note end -->
<!-- paste more notes below, make sure they are the version with class="mt-3" for proper spacing -->
</div>
</div>
<!-- notes end -->
</div>
<!-- design notes end -->
<!-- color palette -->
<div class="mt-2 card rounded-0 bg-faded p-2 flex-grow-1 w-100">
<div class="row no-gutters h-100">
<div class="col">
<!-- color -->
<div class="w-100 h-100 p-4" style="background:#000;"></div>
</div>
<div class="col">
<!-- color -->
<div class="w-100 h-100 p-4" style="background:#333;"></div>
</div>
<div class="col">
<!-- color -->
<div class="w-100 h-100 p-4" style="background:#808080;"></div>
</div>
<div class="col">
<!-- color -->
<div class="w-100 h-100 p-4" style="background:#ccc;"></div>
</div>
<div class="col">
<!-- color -->
<div class="w-100 h-100 p-4" style="background:#fff;"></div>
</div>
</div>
</div>
<!-- color palette end -->
</div>
<!-- design info end -->
<div class="col">
<!-- quote -->
<div class="card bg-none rounded-0 p-3 mt-4 border-top-0 border-right-0 border-bottom-0" style="border-left-width:5px;">
<h2 class="display-4 font-weight-bold text-justify" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- content -->
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</h2>
</div>
<!-- quote end -->
<div class="row">
<!-- stats -->
<div class="col-sm mt-3">
<!-- Strength -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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>
<!-- Intelligence -->
<div class="mt-2">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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">
<div class="card rounded-0 bg-faded">
<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 class="card rounded-0 border-top-0">
<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>
<!-- stats end -->
<!-- moodboard -->
<div class="col mt-4 d-flex flex-column">
<!-- image 1 -->
<div class="card p-2 rounded-0 flex-grow-1 w-100 text-center">
<!-- image -->
<div style="background:var(--accent1) url(image_url) center; background-size:cover;" class="p-4 w-100 h-100 justify-content-center align-items-center">
<!-- symbol -->
<i class="fa-solid fa-bat text-white fa-2x" style="text-shadow:0 0 5px #000;"></i>
</div>
</div>
<!-- image 2 -->
<div class="card p-2 rounded-0 flex-grow-1 w-100 text-center mt-2">
<!-- image -->
<div style="background:var(--accent1) url(image_url) center; background-size:cover;" class="p-4 w-100 h-100 justify-content-center align-items-center">
<!-- symbol -->
<i class="fa-solid fa-cauldron text-white fa-2x" style="text-shadow:0 0 5px #000;"></i>
</div>
</div>
<!-- image 3 -->
<div class="card p-2 rounded-0 flex-grow-1 w-100 text-center mt-2">
<!-- image -->
<div style="background:var(--accent1) url(image_url) center; background-size:cover;" class="p-4 w-100 h-100 justify-content-center align-items-center">
<!-- symbol -->
<i class="fa-solid fa-cat text-white fa-2x" style="text-shadow:0 0 5px #000;"></i>
</div>
</div>
</div>
<!-- moodboard end -->
</div>
<!-- music player -->
<div class="row no-gutters mt-4">
<!-- music -->
<div class="col">
<div class="row no-gutters">
<div class="col-auto">
<div class="card rounded-0 p-1">
<div class="card-header rounded-0 border-0 p-2">
<!-- symbol (play button) -->
<i class="fa-light fa-sparkles" style="font-size:2.5em; color:var(--accent1);"></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>
</div>
</div>
<div class="col">
<div class="card bg-faded rounded-0 border-left-0 p-2 h-100" style="border-right: 0.5rem solid var(--accent1);">
<h3 class="mb-0">
<!-- content -->
Song Title
</h3>
<p class="font-weight-bold font-italic" style="color:var(--accent1); font-family:'Times New Roman', serif;">
<!-- label -->
- now playing
</p>
</div>
</div>
</div>
</div>
<!-- bars -->
<div class="col-sm-auto justify-content-center row no-gutters mt-sm-0 mt-2">
<div style="background:var(--accent1);" class="p-4 h-100 ml-sm-2 col-sm-auto col-6"></div>
<div style="background:var(--accent2);" class="p-3 h-100 ml-2 col-sm-auto col-3"></div>
<div style="background:var(--accent3);" class="p-2 h-100 ml-2 col-sm-auto col"></div>
</div>
</div>
<!-- music player end -->
</div>
</div>
<!-- lower content area end -->
<!-- credit -->
<div class="mt-3 text-center">
<a href="https://toyhou.se/HTMLobster" style="color:var(--accent1);" data-toggle="tooltip" title="code by HTMLobster">
<i class="fa-solid fa-lobster"></i>
</a>
</div>
</div>