Profile
<!-- Underground Profile by Exo-Comet -->
<!-- Note: when you see URLHERE or LINKHERE, replace with the appropriate link or url! -->
<!-- The colours used in this profile are: -->
<!-- Surface: rgba(255, 254, 232, 0.95) -->
<!-- Sunset: rgba(227, 218, 240, 0.3) -->
<!-- Main: -->
<!-- Background: #201e2f -->
<!-- Darker colour: #100f17 -->
<!-- Accent: #63e6a4 -->
<!-- 'Surface' section -->
<div class="p-3 py-4" style="background: linear-gradient(180deg, rgba(255,183,112,1) 50%, rgba(150,113,222,1) 100%);position:relative">
<!-- Background image -->
<div class="w-100 h-100" style="position:absolute;background: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1844&q=80') no-repeat center;background-size:cover;top:0;left:0;mix-blend-mode:hard-light"></div>
<!-- Introduction -->
<div class="px-1 py-3" style="background: linear-gradient(180deg, rgba(46,29,96,0.1) 0%, rgba(6,10,65,0.75) 100%);position:relative;z-index:999">
<div class="row px-4 justify-content-center mx-n1">
<div class="col-md-5 mr-md-n5 p-1">
<!-- Character image -->
<div style="padding-bottom:75%;background:url('URLHERE') no-repeat center 5%;background-size:cover"></div>
</div>
<div class="col p-1 align-self-end mb-2">
<div class="p-3" style="background:rgba(255, 254, 232,0.95);color:black;">
<h1 class="mb-0 display-3" style="font-variant:small-caps">Character Name</h1>
<h1 class="font-italic mb-0 font-weight-normal">Title</h1>
<hr class="my-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="d-flex align-items-center p-2" style="background:#eeaf6e;color:white">
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<i class="fa-solid fa-city fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<i class="fa-solid fa-hotel fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-buildings fa-2x mx-1"></i>
<i class="fa-solid fa-building fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
</div>
<!-- 'Sunset' section -->
<!-- Background image -->
<div style="background:url('https://images.unsplash.com/photo-1617050520572-629f21f1fbdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') no-repeat center;background-size:cover">
<div class="p-4" style="background:rgba(0,0,0,0.7);color:white">
<div class="p-3" style="background:rgba(227, 218, 240,0.3);border:6px double rgba(227, 218, 240,0.5)">
<!-- Table of contents -->
<h2 class="display-4 font-italic mb-3">Table of Contents</h2>
<ol class="mb-0" style="list-style-type: upper-roman;">
<li>
<a href="#basics" style="color:#f7bf74">Basics</a>
</li>
<li>
<a href="#personality" style="color:#f7bf74">Personality</a>
</li>
<li>
<a href="#appearance" style="color:#f7bf74">Appearance</a>
</li>
<li>
<a href="#backstory" style="color:#f7bf74">Backstory</a>
</li>
<li>
<a href="#story_timeline" style="color:#f7bf74">Story Timeline</a>
</li>
<li>
<a href="#character_development" style="color:#f7bf74">Character Development</a>
</li>
<li>
<a href="#abilities" style="color:#f7bf74">Abilities</a>
</li>
<li>
<a href="#inventory" style="color:#f7bf74">Inventory</a>
</li>
<li>
<a href="#relations" style="color:#f7bf74">Relations</a>
</li>
<li>
<a href="#trivia" style="color:#f7bf74">Trivia</a>
</li>
</ol>
</div>
</div>
</div>
<!-- Divider -->
<div class="d-flex align-items-center p-2" style="background:rgba(113,75,187,1);color:white">
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<i class="fa-solid fa-city fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-building fa-2x mx-1"></i>
<i class="fa-solid fa-hotel fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
<i class="fa-solid fa-buildings fa-2x mx-1"></i>
<i class="fa-solid fa-building fa-2x mx-1"></i>
<hr class="flex-fill m-0" style="border-bottom:2px solid rgba(255,255,255,0.5)">
</div>
<!-- Main -->
<div class="p-3" style="background:#201e2f;color:white">
<!-- Basics -->
<h2 id="basics" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="px-3 mr-2 flex-fill">
<span style="color:#63e6a4">B</span>asics </span>
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</h2>
<!-- Quote -->
<div class="d-table mx-auto p-3 mb-3 mt-1" style="background:#100f17;position:relative">
<div class="row mx-n2">
<div class="col-auto px-2">
<i class="fa-solid fa-quote-left fa-2x"></i>
</div>
<div class="col px-2 align-items-center">
<!-- Quote text goes here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="col-auto px-2 align-items-end">
<i class="fa-solid fa-quote-right fa-2x"></i>
</div>
</div>
<!-- Decorative borders -->
<span style="position:absolute;top:-10px;left:-10px;width:25%;height:50%;border-left:2px solid #63e6a4;border-top:2px solid #63e6a4"></span>
<span style="position:absolute;bottom:-10px;right:-10px;width:25%;height:50%;border-right:2px solid #63e6a4;border-bottom:2px solid #63e6a4"></span>
</div>
<!-- Quote source -->
<p class="text-center font-italic">
<i class="fa-solid fa-dash"></i> Quote source.
</p>
<!-- Basic info table -->
<div class="row mx-n2">
<div class="col-lg p-2">
<div class="row mx-n2">
<div class="col-md p-2 pt-md-2 pt-0">
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-signature fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Name</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-pen fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Nicknames</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-book fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Story Role</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-venus-mars fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Gender</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-calendar fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Age</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-heart fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Sexuality</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
</div>
<div class="col p-2">
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-dna fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Species</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-cake fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Birthday</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-image fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Occupation</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-sword fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Affiliations</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-microphone fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Voice Claim</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-music fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Theme</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
</div>
</div>
</div>
<!-- Character image -->
<div class="col-lg-3 p-2" style="position:relative">
<div class="h-100 pb-lg-0" style="background:url('URLHERE') no-repeat center;background-size:cover;padding-bottom:75%"></div>
</div>
</div>
<!-- Personality -->
<h2 id="personality" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">P</span>ersonality <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<div class="row m-n2 pb-4">
<div class="col p-2">
<!-- Label -->
<div class="d-flex flex-wrap">
<span>Extrovert</span>
<span class="text-right flex-fill">Introvert</span>
</div>
<!-- Progress bar, edit the width of 'progress-bar' to change the length -->
<div class="progress mb-2 rounded-0" style="height:10px;background:black;">
<div class="progress-bar w-50" style="background:#63e6a4"></div>
</div>
<div class="d-flex flex-wrap">
<span>Sensing</span>
<span class="text-right flex-fill">Intuition</span>
</div>
<div class="progress mb-2 rounded-0" style="height:10px;background:black;">
<div class="progress-bar w-50" style="background:#63e6a4"></div>
</div>
<div class="d-flex flex-wrap">
<span>Thinking</span>
<span class="text-right flex-fill">Feeling</span>
</div>
<div class="progress mb-2 rounded-0" style="height:10px;background:black;">
<div class="progress-bar w-50" style="background:#63e6a4"></div>
</div>
<div class="d-flex flex-wrap">
<span>Judging</span>
<span class="text-right flex-fill">Perceiving</span>
</div>
<div class="progress rounded-0" style="height:10px;background:black;">
<div class="progress-bar w-50" style="background:#63e6a4"></div>
</div>
</div>
<div class="col-lg p-2">
<div class="p-2 font-italic text-center h-100 d-flex align-items-center justify-content-center" style="background:#100f17"> Adjective <br> Adjective <br> Adjective </div>
</div>
<div class="col p-2 justify-content-between align-items-center flex-column">
<div class="d-flex flex-column">
<!-- edit the color of the square to change the alignment-->
<div class="w-100 d-flex">
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
</div>
<div class="w-100 d-flex">
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em;color:#63e6a4"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
</div>
<div class="w-100 d-flex">
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
<i class="fa-solid fa-square fa-fw d-flex align-items-center justify-content-center fa-2x" style="height:1.25em"></i>
</div>
</div>
<span class="w-100 text-center p-2" style="background:#100f17">Alignment</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<div class="row m-n2">
<div class="col p-2">
<h3 class="font-weight-normal text-center p-2 m-0" style="background:#100f17;color:#63e6a4">Positive Traits</h3>
<div class="p-1 border-top-0" style="border: 0.5em solid #100f17;position:relative">
<ul class="m-0 py-2" style="border:0.25em solid #100f17">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
<div class="col-lg p-2">
<h3 class="font-weight-normal text-center p-2 m-0" style="background:#100f17;color:#63e6a4">Neutral Traits</h3>
<div class="p-1 border-top-0" style="border: 0.5em solid #100f17;position:relative">
<ul class="m-0 py-2" style="border:0.25em solid #100f17">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
<div class="col p-2">
<h3 class="font-weight-normal text-center p-2 m-0" style="background:#100f17;color:#63e6a4">Negative Traits</h3>
<div class="p-1 border-top-0" style="border: 0.5em solid #100f17;position:relative">
<ul class="m-0 py-2" style="border:0.25em solid #100f17">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>
<!-- Appearance -->
<h2 id="appearance" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">A</span>ppearance <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<div class="row m-n2">
<div class="col p-2">
<!-- Reference image -->
<div style="padding-bottom:115%;background:url('URLHERE') no-repeat 0% 0%;background-size:cover;position:sticky;top:1em;left:0;"></div>
</div>
<div class="col-lg p-2">
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-palette fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Designer</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-tag fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Owner</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-dollar fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Worth</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<!-- Moodboard -->
<div class="row m-n1">
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1516205651411-aef33a44f7c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/7NBO76G5JsE" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1592441975174-595b836d8f7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/ymx8g15pxD4" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/9XngoIpxcEo" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/tGTVxeOr_Rs" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1506102383123-c8ef1e872756?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/JFeOy62yjXk" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1578393098337-5594cce112da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=617&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/iLAAT1E-H_8" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1588412079929-790b9f593d8e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/bUM4weg0RSI" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/yVUQlyRlJSw" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
<div class="col-4 p-1">
<div style="padding-bottom:100%;background:url('https://images.unsplash.com/photo-1605702012553-e954fbde66eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80') no-repeat center;background-size:cover;position:relative">
<a href="https://unsplash.com/photos/IculuMoubkQ" style="position:absolute;bottom:2px;right:2px;color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col p-2">
<div style="position:sticky;top:1em;left:0;">
<h3 class="text-center font-weight-normal">Colours and Notes</h3>
<div class="d-flex flex-wrap mb-2 py-2 border-left-0 border-right-0" style="border: 8px double #100f17">
<div class="py-3 flex-fill" style="background:white"></div>
<div class="py-3 flex-fill" style="background:darkgray"></div>
<div class="py-3 flex-fill" style="background:gray"></div>
<div class="py-3 flex-fill" style="background:black"></div>
</div>
<ul class="p-2" style="background:#100f17;list-style:inside">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>
<!-- Backstory -->
<h2 id="backstory" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">B</span>ackstory <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<!-- Story timeline -->
<h2 id="story_timeline" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">S</span>tory Timeline <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<div class="row m-n2">
<div class="col-md-auto p-2">
<!-- Small table of contents. Expands based on how much content is in it on larger/desktop screens -->
<ul class="py-2 px-3 mb-0 list-unstyled" style="background:#100f17;position:sticky;top:1em;left:0">
<li>
<a href="#arc1" style="color:#63e6a4">Arc 1</a>
<ul>
<li>
<a href="#arc1event1" style="color:#63e6a4">Event 1</a>
</li>
<li>
<a href="#arc1areallylongevent2" style="color:#63e6a4">A Really Long Event 2</a>
</li>
<li>
<a href="#arc1event3" style="color:#63e6a4">Event 3</a>
</li>
</ul>
</li>
<li>
<a href="#arc2" style="color:#63e6a4">Arc 2</a>
<ul>
<li>
<a href="#arc2event1" style="color:#63e6a4">Event 1</a>
</li>
<li>
<a href="#arc2event2" style="color:#63e6a4">Event 2</a>
</li>
<li>
<a href="#arc2event3" style="color:#63e6a4">Event 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col p-2">
<div class="d-table mx-auto p-3 mb-3 mt-1" style="background:#100f17;position:relative">
<div class="row mx-n2">
<div class="col-auto px-2">
<i class="fa-solid fa-quote-left fa-2x"></i>
</div>
<div class="col px-2 align-items-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="col-auto px-2 align-items-end">
<i class="fa-solid fa-quote-right fa-2x"></i>
</div>
</div>
<span style="position:absolute;top:-10px;left:-10px;width:25%;height:50%;border-left:2px solid #63e6a4;border-top:2px solid #63e6a4"></span>
<span style="position:absolute;bottom:-10px;right:-10px;width:25%;height:50%;border-right:2px solid #63e6a4;border-bottom:2px solid #63e6a4"></span>
</div>
<p class="text-center font-italic">
<i class="fa-solid fa-dash"></i> A quote source??? Woah dude.
</p>
<h3 id="arc1">Arc 1</h3>
<h4 id="arc1event1">Event 1</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<h4 id="arc1areallylongevent2">A Really Long Event 2</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<h4 id="arc1event3">Event 3</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<h3 id="arc2">Arc 2</h3>
<h4 id="arc2event1">Event 1</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<h4 id="arc2event2">Event 2</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
<h4 id="arc2event3">Event 3</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
</div>
</div>
<!-- Character development -->
<h2 id="character_development" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">C</span>haracter Development <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<!-- The beginning -->
<div class="py-3">
<h3 class="text-center p-2" style="background:#100f17;position:sticky;top:0.25em;left:0;z-index:999">The Beginning</h3>
<div class="row m-n2 py-2">
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Strength</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col-lg p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Weakness</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Alignment</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
</div>
<!-- The middle -->
<div class="py-3">
<h3 class="text-center p-2" style="background:#100f17;position:sticky;top:0.25em;left:0;z-index:999">The Middle</h3>
<div class="row m-n2 py-2">
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Strength</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col-lg p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Weakness</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Alignment</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
</div>
<!-- The end -->
<div class="py-3">
<h3 class="text-center p-2" style="background:#100f17;position:sticky;top:0.25em;left:0;z-index:999">The End</h3>
<div class="row m-n2 py-2">
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Strength</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col-lg p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Biggest Weakness</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
<div class="col p-2">
<div class="d-flex flex-wrap" style="background:#100f17">
<span class="m-1" style="color:#63e6a4">Alignment</span>
<span class="flex-fill text-right m-1">Content</span>
</div>
</div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. Nullam porta justo sollicitudin libero molestie sodales. Aliquam sed justo id arcu pulvinar sagittis in eu velit. Donec ut est tempor elit scelerisque malesuada. Phasellus ante ante, pharetra fermentum leo a, auctor elementum lacus. Cras et metus vitae elit scelerisque luctus. Mauris ut laoreet lorem. Duis mattis urna eu semper convallis. In rhoncus quam erat, eu luctus mauris condimentum et. Integer tristique orci id rutrum congue. Vivamus maximus, dui at pharetra maximus, lorem leo volutpat arcu, et sagittis lorem nisl id quam. </p>
</div>
<!-- Abilities -->
<h2 id="abilities" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">A</span>bilities <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<!-- Stats -->
<div class="row m-n2 text-center">
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Strength</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
<!-- Divider -->
<div class="col-lg-auto d-flex flex-column p-2">
<div class="mb-n1 pb-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
<div class="flex-fill mx-n1" style="background:#100f17;min-height:40px"></div>
<div class="mt-n1 pt-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
</div>
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Dexterity</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
<!-- Divider -->
<div class="col-lg-auto d-flex flex-column p-2">
<div class="mb-n1 pb-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
<div class="flex-fill mx-n1" style="background:#100f17;min-height:40px"></div>
<div class="mt-n1 pt-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
</div>
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Constitution</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center my-3">
<div class="flex-fill" style="border:1em double #100f17"></div>
<div class="mx-n2 p-2" style="background:#201e2f;position:relative;font-size:1.5em">
<i class="fa-solid fa-star"></i>
</div>
<div class="flex-fill" style="border:1em double #100f17"></div>
</div>
<div class="row m-n2 text-center">
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Intelligence</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
<!-- Divider -->
<div class="col-lg-auto d-flex flex-column p-2">
<div class="mb-n1 pb-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
<div class="flex-fill mx-n1" style="background:#100f17;min-height:40px"></div>
<div class="mt-n1 pt-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
</div>
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Wisdom</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
<!-- Divider -->
<div class="col-lg-auto d-flex flex-column p-2">
<div class="mb-n1 pb-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
<div class="flex-fill mx-n1" style="background:#100f17;min-height:40px"></div>
<div class="mt-n1 pt-1" style="background:#201e2f;position:relative;">
<i class="fa-solid fa-star fa-fw fa-2x"></i>
</div>
</div>
<div class="col align-items-center justify-content-center p-2">
<div>
<h3>Charisma</h3>
<div class="d-flex align-items-center justify-content-center">
<!-- Modifider -->
<div class="py-2 pl-2 pr-3" style="background:#100f17;font-size:1.5em"> +5 </div>
<!-- Value -->
<span class="py-1 px-2 ml-n1" style="background:#100f17;border:4px solid #201e2f;font-size:1.25em">20</span>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="d-flex align-items-center my-3">
<div class="flex-fill" style="border:1em double #100f17"></div>
<div class="mx-n2 p-2" style="background:#201e2f;position:relative;font-size:1.5em">
<i class="fa-solid fa-star"></i>
</div>
<div class="flex-fill" style="border:1em double #100f17"></div>
</div>
<div class="row m-n2">
<div class="col-lg-4 col-md-6 p-2">
<div style="position:sticky;top:1em">
<!-- Image -->
<div class="mx-auto mb-2" style="padding-bottom:75%;background:url('URLHERE') no-repeat center;background-size:cover;width:75%"></div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-heart fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Class</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex mb-2" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-heart fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Subclass</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
<div class="d-flex" style="background:#100f17">
<div class="p-1 mr-2 d-flex align-items-center justify-content-center" style="background:#63e6a4;color:black">
<i class="fa-solid fa-heart fa-fw" style="font-size:1.5em"></i>
</div>
<div class="py-1">
<small>Level</small>
<p style="font-size:1.25em">Content</p>
</div>
</div>
</div>
</div>
<div class="col p-2">
<!-- Weapons -->
<div class="p-2" style="border: 8px double #100f17">
<h3>Main Weapon</h3>
<p>Skill Level:</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. </p>
<hr style="border-color:rgba(255,255,255,0.125)">
<h3>Secondary Weapon</h3>
<p>Skill Level:</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. </p>
<hr style="border-color:rgba(255,255,255,0.125)">
<!-- Attacks -->
<div class="row m-n2">
<div class="col-lg p-2">
<h3>Attack 1</h3>
<p>Skill Level:</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. </p>
</div>
<div class="col-lg p-2">
<h3>Attack 2</h3>
<p>Skill Level:</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero. </p>
</div>
</div>
</div>
</div>
</div>
<!-- Inventory -->
<h2 id="inventory" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">I</span>nventory <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<!-- Inventory grid -->
<div class="row m-n2">
<div class="col-lg p-2">
<h3 class="text-center p-2 py-4 m-0 border-bottom-0 d-flex align-items-center justify-content-center" style="border: 8px double #100f17;position:relative">
<i class="fa-solid fa-axe fa-fw" style="position:absolute;font-size:3em;opacity:0.25"></i> Item 1
</h3>
<hr class="mx-n1 my-0" style="border-bottom:8px double #63e6a4">
<div class="border-top-0 p-3" style="border:8px double #100f17">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<div class="p-2 mx-n3 mb-n3 mt-3" style="background:#100f17">
<p class="m-0 d-flex flex-wrap">
<span>Value</span>
<span class="flex-fill text-right">Content</span>
</p>
<hr class="my-1" style="border-bottom:8px double #201e2e">
<p class="m-0 d-flex flex-wrap">
<span>Importance</span>
<span class="flex-fill text-right">Content</span>
</p>
</div>
</div>
</div>
<div class="col-lg p-2">
<h3 class="text-center p-2 py-4 m-0 border-bottom-0 d-flex align-items-center justify-content-center" style="border: 8px double #100f17;position:relative">
<i class="fa-solid fa-coin fa-fw" style="position:absolute;font-size:3em;opacity:0.25"></i> Item 2
</h3>
<hr class="mx-n1 my-0" style="border-bottom:8px double #63e6a4">
<div class="border-top-0 p-3" style="border:8px double #100f17">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<div class="p-2 mx-n3 mb-n3 mt-3" style="background:#100f17">
<p class="m-0 d-flex flex-wrap">
<span>Value</span>
<span class="flex-fill text-right">Content</span>
</p>
<hr class="my-1" style="border-bottom:8px double #201e2e">
<p class="m-0 d-flex flex-wrap">
<span>Importance</span>
<span class="flex-fill text-right">Content</span>
</p>
</div>
</div>
</div>
<div class="col-lg p-2">
<h3 class="text-center p-2 py-4 m-0 border-bottom-0 d-flex align-items-center justify-content-center" style="border: 8px double #100f17;position:relative">
<i class="fa-solid fa-gem fa-fw" style="position:absolute;font-size:3em;opacity:0.25"></i> Item 3
</h3>
<hr class="mx-n1 my-0" style="border-bottom:8px double #63e6a4">
<div class="border-top-0 p-3" style="border:8px double #100f17">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<div class="p-2 mx-n3 mb-n3 mt-3" style="background:#100f17">
<p class="m-0 d-flex flex-wrap">
<span>Value</span>
<span class="flex-fill text-right">Content</span>
</p>
<hr class="my-1" style="border-bottom:8px double #201e2e">
<p class="m-0 d-flex flex-wrap">
<span>Importance</span>
<span class="flex-fill text-right">Content</span>
</p>
</div>
</div>
</div>
</div>
<!-- Relations -->
<h2 id="relations" class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">R</span>elations <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<div class="row m-n2 pb-3">
<div class="col-md p-2">
<div class="row m-0">
<div class="col-5 p-0">
<div style="height:100%;min-height:120px;background:url('URLHERE') no-repeat center;background-size:cover"></div>
</div>
<div class="col p-2" style="border:4px solid #100f17">
<h3 class="d-flex align-items-center mt-n2 mx-n2" style="background:#100f17">
<span class="pl-2 py-2">Character</span>
<span class="flex-fill justify-content-end">
<span class="d-flex justify-content-center align-items-center p-1" style="background:#63e6a4;color:black;border-radius:0 0 0 50%;font-size:1.5em">
<i class="fa-duotone fa-sword fa-fw"></i>
</span>
</span>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<!-- Hearts / how good their relation is / etc -->
<div class="d-flex mt-2 mb-n2 mx-n2 p-2 justify-content-around" style="background:#100f17">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
</div>
<div class="col-md p-2">
<div class="row m-0">
<div class="col-5 p-0">
<div style="height:100%;min-height:120px;background:url('URLHERE') no-repeat center;background-size:cover"></div>
</div>
<div class="col p-2" style="border:4px solid #100f17">
<h3 class="d-flex align-items-center mt-n2 mx-n2" style="background:#100f17">
<span class="pl-2 py-2">Character</span>
<span class="flex-fill justify-content-end">
<span class="d-flex justify-content-center align-items-center p-1" style="background:#63e6a4;color:black;border-radius:0 0 0 50%;font-size:1.5em">
<i class="fa-duotone fa-sword fa-fw"></i>
</span>
</span>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<!-- Hearts / how good their relation is / etc -->
<div class="d-flex mt-2 mb-n2 mx-n2 p-2 justify-content-around" style="background:#100f17">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row m-n2">
<div class="col-md p-2">
<div class="row m-0">
<div class="col-5 p-0">
<div style="height:100%;min-height:120px;background:url('URLHERE') no-repeat center;background-size:cover"></div>
</div>
<div class="col p-2" style="border:4px solid #100f17">
<h3 class="d-flex align-items-center mt-n2 mx-n2" style="background:#100f17">
<span class="pl-2 py-2">Character</span>
<span class="flex-fill justify-content-end">
<span class="d-flex justify-content-center align-items-center p-1" style="background:#63e6a4;color:black;border-radius:0 0 0 50%;font-size:1.5em">
<i class="fa-duotone fa-sword fa-fw"></i>
</span>
</span>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<!-- Hearts / how good their relation is / etc -->
<div class="d-flex mt-2 mb-n2 mx-n2 p-2 justify-content-around" style="background:#100f17">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
</div>
<div class="col-md p-2">
<div class="row m-0">
<div class="col-5 p-0">
<div style="height:100%;min-height:120px;background:url('URLHERE') no-repeat center;background-size:cover"></div>
</div>
<div class="col p-2" style="border:4px solid #100f17">
<h3 class="d-flex align-items-center mt-n2 mx-n2" style="background:#100f17">
<span class="pl-2 py-2">Character</span>
<span class="flex-fill justify-content-end">
<span class="d-flex justify-content-center align-items-center p-1" style="background:#63e6a4;color:black;border-radius:0 0 0 50%;font-size:1.5em">
<i class="fa-duotone fa-sword fa-fw"></i>
</span>
</span>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor finibus, venenatis arcu id, condimentum sapien. Curabitur lobortis turpis nisl, sit amet pretium ante tempor quis. Aenean eu dictum est, a facilisis ex. Curabitur sapien dolor, accumsan varius malesuada at, placerat vitae libero.</p>
<!-- Hearts / how good their relation is / etc -->
<div class="d-flex mt-2 mb-n2 mx-n2 p-2 justify-content-around" style="background:#100f17">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Trivia -->
<h2 class="display-4 font-italic my-3 d-flex align-items-center" style="letter-spacing:2px;background:#100f17">
<span class="ml-2" style="color:#63e6a4">T</span>rivia <span class="flex-fill d-flex justify-content-end">
<span class="d-flex justify-content-center align-items-center p-2 pl-3" style="background:#63e6a4;color:black;border-radius:1em 0 0 1em">
<i class="fa-solid fa-heart fa-fw"></i>
</span>
</span>
</h2>
<div class="row m-n2">
<div class="col p-2">
<!-- Likes -->
<div class="border-top-0 py-1 mb-2" style="border:8px double #100f17"></div>
<div class="mx-2 p-2" style="background:#100f17">
<h3 class="d-flex justify-content-between pb-1 px-1" style="border-bottom:2px solid #63e6a4">Likes <i class="fa-solid fa-heart"></i>
</h3>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
<!-- Specific likes -->
<h4 class="text-center">Favourite...</h4>
<p class="m-0 d-flex flex-wrap">
<span>Food</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Drink</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Colour</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Flower</span>
<span class="flex-fill text-right">Content</span>
</p>
</div>
<div class="border-bottom-0 py-1 mt-2" style="border:8px double #100f17"></div>
</div>
<div class="col-lg-3 p-2">
<!-- Character image -->
<div class="h-100" style="background:url('URLHERE') no-repeat center;background-size:cover;min-height:150px"></div>
</div>
<div class="col p-2">
<!-- Dislikes -->
<div class="border-top-0 py-1 mb-2" style="border:8px double #100f17"></div>
<div class="mx-2 p-2" style="background:#100f17">
<h3 class="d-flex justify-content-between pb-1 px-1" style="border-bottom:2px solid #63e6a4">Dislikes <i class="fa-solid fa-heart-broken"></i>
</h3>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
<!-- Specifics -->
<h4 class="text-center">Least Favourite...</h4>
<p class="m-0 d-flex flex-wrap">
<span>Food</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Drink</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Colour</span>
<span class="flex-fill text-right">Content</span>
</p>
<p class="m-0 d-flex flex-wrap">
<span>Flower</span>
<span class="flex-fill text-right">Content</span>
</p>
</div>
<div class="border-bottom-0 py-1 mt-2" style="border:8px double #100f17"></div>
</div>
</div>
<div class="row m-n2">
<!-- Other -->
<div class="col p-2">
<h3>Other</h3>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
<div class="col-lg-3 col-md-5 p-2">
<!-- Playlist -->
<div class="p-2" style="border: 8px double #100f17">
<h3>Playlist</h3>
<!-- Music player - insert the youtube url into LINKHERE -->
<div class="d-flex flex-wrap align-items-center m-n1">
<span class="flex-fill text-left m-1 text-secondary">
<a href="" style="position:relative;color:#63e6a4">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right m-1"> Song <br>
<small>Artist</small>
</span>
</div>
<hr class="my-1" style="border-color:#63e6a4">
<div class="d-flex flex-wrap align-items-center m-n1">
<span class="flex-fill text-left m-1 text-secondary">
<a href="" style="position:relative;color:#63e6a4">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right m-1"> Song <br>
<small>Artist</small>
</span>
</div>
<hr class="my-1" style="border-color:#63e6a4">
<div class="d-flex flex-wrap align-items-center m-n1">
<span class="flex-fill text-left m-1 text-secondary">
<a href="" style="position:relative;color:#63e6a4">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/LINKHERE" title="YouTube video player" frameborder="0" style="opacity:.001;position:absolute;left:0;top:0;z-index:999;"></iframe>
<i class="fas fa-play" style="position:relative;"></i>
</a>
</span>
<span class="flex-fill text-right m-1"> Song <br>
<small>Artist</small>
</span>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="border-left-0 border-right-0 my-3" style="border: 10px double #100f17"></div>
<!-- Credit: please do not remove or move to a difficult to find place -->
<p class="text-center">
<a data-toggle="tooltip" title="Profile by Exo-Comet" href="https://toyhou.se/Exo-Comet" style="color:#63e6a4">
<i class="fa-solid fa-meteor"></i>
</a>
<a data-toggle="tooltip" title="Background Image #1" href="https://unsplash.com/photos/Nyvq2juw4_o" style="color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
<a data-toggle="tooltip" title="Background Image #2" href="https://unsplash.com/photos/o-l6Vgsh_Qo" style="color:#63e6a4">
<i class="fa-solid fa-image"></i>
</a>
</p>
</div>
Recent Images
No images.