<!---
========================================
========================================
Tales of Old code by J-Haskell on TH.
Last updated 02/24/2024 (I FORGOT TO REMOVE THE DISCORD URLS SORRY GUYS)
========================================
========================================
-->
<div class="container" style="max-width:1200px; font-family:Cambria; font-size:14.2px; color:#E1DFCE;">
<!---
CODE HEADER
-->
<div class="card rounded-0 p-3" style="border-radius: .25rem .25rem 0rem 0rem; min-width:765px;;background-color:#c2ac83; border-bottom: 3px solid #6594a8; border-left:none;border-top:none;border-right:none;"><p align="center"><br></p>
</div>
<!---
Row code
-->
<div class="flex-row no-gutters py-3" style="background-color:#4A433F;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/78175649_IdnslVVmbeyar9d.png'); background-repeat:repeat; min-width:765px;">
<!---
CODE SIDEBAR
-->
<div class="card border-0 bg-transparent rounded-0 pl-3 pt-3 pb-3" style="max-width:20%;min-width:280px;">
<!---
==========================
CHARACTER PORTRAIT SECTION
Replace background image URL with your character's portrait! Focuses on middle of image provided, you may need to crop overly long/wide images to get it to look nicest.
If you don't have any suitable images for them, you could stick a photo in here that matches their aesthetic instead.
==========================
-->
<div class="card rounded-3 mb-3" style="background-size: cover; background-position:center;height:100%;border-top: 3px solid #6594a8; border-left: none; border-right:none; border-bottom: none;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);
background-image:url('https://images.unsplash.com/photo-1553434320-e9f5757140b1')
;"></div>
<div class="card mb-3 px-3 py-2 border-0" style="background-color:#c2ac83;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);">
<p class="justify-content-between text-break" style="font-size:18px; color:#60594e;"><span><i class="fas fa-dungeon"></i></span><b>
Character Name
</b><span><i class="fas fa-dungeon"></i></span></p>
</div>
<div class="card p-3" style="border-top: none; border-left: none; border-right:none; border-bottom: 3px solid #6594a8;background-color:#332F2D;font-size:13.5px;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);">
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-scroll-old"></i> Age</span><span style="color: #c2ac83;">
content
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-calendar"></i> D.o.B</span><span style="color: #c2ac83;">
content
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-genderless"></i> Gender</span><span style="color: #c2ac83;">
content
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-venus-mars"></i> Pronouns</span><span style="color: #c2ac83;">
pron/ouns
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-diploma"></i> Occupation</span><span style="color: #c2ac83;">
content
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-castle"></i> Location</span><span style="color: #c2ac83;">
content
</span></p>
<p class="justify-content-between text-break" style="border-bottom:1.8px dotted #60594e;"><span><i class="fa-light fa-mandolin"></i> Theme</span><span>
<a href="song link" target="_BLANK" style="color:#c2ac83;">Song - Artist</a>
</span></p>
</div>
</div>
<!---
MAIN CODE CONTENT CONTAINER
-->
<div class="card flex-column bg-transparent border-0 rounded-0 p-3">
<div class="card justify-content-between bg-transparent border-0 rounded-0 mb-3">
<ul class="nav nav-pills nav-justified" id="pills-tab" role="tablist">
<li class="nav-item pr-3">
<a class="nav-link active card" id="pills-Tab1-tab" data-toggle="pill" href="#pills-Tab1" role="tab" aria-controls="pills-Tab1" aria-selected="true" style="border-top:3px solid #6594a8; border-left:none;border-right:none;border-bottom:none; background-color:#c2ac83; color:#60594e;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);"><b>
Basics
</b></a>
</li>
<li class="nav-item pr-3">
<a class="nav-link card" id="pills-Tab2-tab" data-toggle="pill" href="#pills-Tab2" role="tab" aria-controls="pills-Tab2" aria-selected="false" style="border-top:3px solid #6594a8; border-left:none;border-right:none;border-bottom:none;background-color:#c2ac83; color:#60594e;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);"><b>
Design
</b></a>
</li>
<li class="nav-item pr-3">
<a class="nav-link card" id="pills-Tab3-tab" data-toggle="pill" href="#pills-Tab3" role="tab" aria-controls="pills-Tab3" aria-selected="false" style="border-top:3px solid #6594a8; border-left:none;border-right:none;border-bottom:none;background-color:#c2ac83; color:#60594e;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);"><b>
Story
</b></a>
</li>
<li class="nav-item pr-3">
<a class="nav-link card" id="pills-Tab4-tab" data-toggle="pill" href="#pills-Tab4" role="tab" aria-controls="pills-Tab4" aria-selected="false" style="border-top:3px solid #6594a8; border-left:none;border-right:none;border-bottom:none;background-color:#c2ac83; color:#60594e;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);"><b>
Family
</b></a>
</li>
<li class="nav-item">
<a class="nav-link card" id="pills-Tab5-tab" data-toggle="pill" href="#pills-Tab5" role="tab" aria-controls="pills-Tab5" aria-selected="false" style="border-top:3px solid #6594a8; border-left:none;border-right:none;border-bottom:none;background-color:#c2ac83; color:#60594e;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);"><b>
Relationships
</b></a>
</li>
</ul>
</div>
<!--
End nav menu
-->
<!---
Main nav content (start)
-->
<div class="card p-3" style="min-height:550px; max-height:550px; overflow:auto; width:100%; min-width:400px; border-top:none;border-left:none;border-right:none;border-bottom: 3px solid #6594a8; background-color:#332F2D;box-shadow: 5px 5px 5px -3px rgba(23,33,32,0.35);">
<!-- start nav content -->
<div class="tab-content" id="pills-tabContent">
<!--- Intro tab start -->
<div class="tab-pane fade show active" id="pills-Tab1" role="tabpanel" aria-labelledby="pills-Tab1-tab">
<div class="justify-content-between mb-3" style="border-bottom: 1px solid #6594a8;"><h2>Basics</h2><h2><i class="fa-solid fa-circle-info" style="color:#c2ac83;"></i></h2></div>
<div class="flex-row mb-3">
<div class="flex-column pr-3">
<p>
Write a brief intro to your character here!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!---
====================
CHARACTER QUOTE SECTION
Quote goes here. Can be something they'd say, something others say about them, a song lyric, poetry, etc.
====================
-->
<div class="flex-column mx-auto my-auto" style="min-width:250px;">
<div class="card bg-faded p-2" style="border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;border-right:none;border-left:none;background-color:#332F2D;">
<i class="fa-solid fa-quote-left" style="color:#60594e;"></i>
<p class="p-1"><em>
Character quote goes here. Can be on the longer side, but one-paragraph max works best.
</em></p>
<i class="fa-solid fa-quote-right" style="color:#60594e; text-align:right;"></i>
</div>
</div>
</div>
<!---
====================
PERSONALITY DESCRIPTION
Describe what your character is like in full sentences here.
====================
-->
<p class="mb-2 justify-content-between" style="font-size:18px; color:#c2ac83; border-bottom: 1px dotted #60594e;">Personality <i class="fa-solid fa-masks-theater" style="color:#6594a8;"></i></p>
<p>
Brief overview of their basic demeanour. Summarize their personality here!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!---
====================
PERSONALITY TRAITS
List your character's main positive/negative traits here.
====================
-->
<div class="row pt-3 pb-3">
<div class="col-md-6"><p class="mb-2 justify-content-between" style="color:#6594a8; border-bottom: 1px dotted #60594e;"><i class="fa-solid fa-circle-plus" style="color:#60594e;"></i> Positive Traits</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Positive Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Positive Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Positive Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Positive Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Positive Trait
</p>
</div>
<div class="col-md-6"><p class="mb-2 justify-content-between" style="color:#6594a8; border-bottom: 1px dotted #60594e;">Negative Traits <i class="fa-solid fa-circle-minus" style="color:#60594e;"></i></p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Negative Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Negative Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Negative Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Negative Trait
</p>
<p class="justify-content-between mb-1">
<span><i class="fa-light fa-circle-plus" style="color:#60594e;"></i></span>
Negative Trait
</p>
</div>
</div>
</div>
<!--- End traits -->
<!---
=======================
START DESIGN TAB
Include your character's reference art, palette, and other design information here.
=======================
-->
<div class="tab-pane fade" id="pills-Tab2" role="tabpanel" aria-labelledby="pills-Tab2-tab">
<div class="justify-content-between mb-3" style="border-bottom: 1px solid #6594a8;"><h2>Design</h2><h2><i class="fa-solid fa-eye" style="color:#c2ac83;"></i></h2></div>
<div class="flex-row" style="height:460px;">
<div class="flex-column pr-3" style="min-width:300px;">
<!---
====================
CHARACTER ART
Replace background image URL with character art! Vertically-aligned images tend to work best for this.
====================
-->
<div class="card bg-transparent border-0 rounded-0" style="height:100%;max-height:460px; background-size:contain;background-repeat:no-repeat;width:100%;background-position:center;
background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/78175755_mKqZnnVNIWsyGwM.png');
"></div>
</div>
<!---
====================
DESIGN CREDITS
====================
-->
<div class="flex-column" style="min-width:50%;">
<div class="flex-row pb-3" style="width:100%;">
<div class="flex-column" style="width:50%;">
<div class="card bg-transparent rounded-0 pb-2 mr-3" style="border-top:none;border-right:none;border-left:none;border-bottom: 1px dotted #60594e;">
<div class="justify-content-between">
<span style="color:#6594a8;"><i class="fa-solid fa-swatchbook pr-2"></i>Designer</span>
<a href="artist link" target="_BLANK" style="color:#c2ac83;">Name</a></div>
</div>
</div>
<div class="flex-column" style="width:50%;">
<div class="card bg-transparent rounded-0 pb-2" style="border-top:none;border-right:none;border-left:none;border-bottom: 1px dotted #60594e;">
<div class="justify-content-between">
<span style="color:#6594a8;"><i class="fa-solid fa-paintbrush pr-2"></i>Artist</span> <a href="artist link" target="_BLANK" style="color:#c2ac83;">Name</a></div>
</div>
</div>
</div>
<p class="mb-2 justify-content-between" style="font-size:18px; color:#c2ac83; border-bottom: 1px dotted #60594e;">Palette <i class="fa-solid fa-eye-dropper" style="color:#6594a8;"></i></p>
<!---
===========================================
CHARACTER COLOUR PALETTE
A colour palette. Edit the background-colour hex code to change the colour, and edit the title to change the tooltip's label text.
You can add more by copying the palette divs, but I wouldn't reccomend adding more than 1-2 additional swatches, as the formatting may get excessively squished.
===========================================
-->
<div class="row no-gutters pb-3" style="min-height:80px;overflow:hidden; color: #E1DFCE;">
<div style="border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83; background-color:#458395;border-radius: 0.25rem 0rem 0rem 0.25rem;" class="col w-80 tooltipster align-items-center justify-content-center" title="Eyes">
<i class="fa-light fa-eye" style="font-size:28px;"></i>
</div>
<div style="background-color:#9EAFB7;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;" class="col w-80 tooltipster align-items-center justify-content-center" title="Skin">
<i class="fa-light fa-hand" style="font-size:28px;"></i>
</div>
<div style="background-color:#2D4C60;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;" class="col w-80 tooltipster align-items-center justify-content-center" title="Hair">
<i class="fa-light fa-crown" style="font-size:28px;"></i>
</div>
<div style="background-color:#E8EBF2;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;" class="col w-80 tooltipster align-items-center justify-content-center" title="Weapon">
<i class="fa-light fa-swords" style="font-size:28px;"></i>
</div>
<div style="background-color:#89969F;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;" class="col w-80 tooltipster align-items-center justify-content-center" title="Accent">
<i class="fa-light fa-chess-king-piece" style="font-size:28px;"></i>
</div>
<div style="background-color:#458395;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;border-radius: 0rem 0.25rem 0.25rem 0rem;" class="col w-80 tooltipster align-items-center justify-content-center" title="Accent">
<i class="fa-light fa-dungeon" style="font-size:28px;"></i>
</div>
</div>
<!---
===============================
CHARACTER DESIGN NOTES
List any major details about your character's design here!
You can add as much as you'd like, the tab will scroll, but I personally think it looks better w/o the scrollbar.
===============================
-->
<p class="mb-2 justify-content-between" style="font-size:18px; color:#c2ac83; border-bottom: 1px dotted #60594e;">Notes <i class="fa-solid fa-notes" style="color:#6594a8;"></i></p>
<ul>
<li>
Include any important notes about your character's design here!
</li>
<li>
This tab will scroll if you add enough content, but looks best if you keep things brief.
</li>
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<li>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
</ul>
<!---
===================================
MINI-MOODBOARD
A small 3-image moodboard to show off your character's aesthetic. You could also put detail shots of their design in here instead as well.
Smaller images load faster, anything larger than ~200px should work just fine.
===================================
-->
<div class="row">
<div class="col">
<div class="card bg-faded" style="width:100%;height:80px;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;border-right:none;border-left:none;background-image:url('https://images.unsplash.com/photo-1553434320-e9f5757140b1'); background-size:cover;background-repeat:no-repeat;background-position:center;"></div>
</div>
<div class="col">
<div class="card bg-faded" style="width:100%;height:80px;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;border-right:none;border-left:none;background-image:url('https://images.unsplash.com/photo-1560536270-b5855082dd85'); background-size:cover;background-repeat:no-repeat;background-position:center;"></div>
</div>
<div class="col">
<div class="card bg-faded" style="width:100%;height:80px;border-top:2px solid #6594a8;border-bottom:2px solid #c2ac83;border-right:none;border-left:none;background-image:url('https://images.unsplash.com/photo-1583997052103-b4a1cb974ce5'); background-size:cover;background-repeat:no-repeat;background-position:center;"></div>
</div>
</div>
</div>
</div>
</div>
<!---
END DESIGN TAB
-->
<!---
======================
CHARACTER STORY TAB
Write about your character's backstory here!
Feel free to change the header titles to match periods in your character's backstory better. You should be able to add as many paragraphs and headers as you'd like by copying the heading code & adding in more <p> tags respectively.
======================
-->
<div class="tab-pane fade" id="pills-Tab3" role="tabpanel" aria-labelledby="pills-Tab3-tab">
<div class="justify-content-between mb-2" style="border-bottom: 1px solid #6594a8;"><h2>Story</h2><h2><i class="fa-solid fa-books" style="color:#c2ac83;"></i></h2></div>
<!---
STORY PART 1 BEGIN
-->
<div class="pb-1 mb-2" style="border-bottom: 1px dotted #60594e;"><p class="justify-content-between p-0 m-0" style="font-size:18px;color:#c2ac83;">
Chapter One
<span class="my-auto" style="color:#c2ac83;"><i class="fa-solid fa-bookmark"></i></span></p>
<p class="justify-content-between" style="color:#6594a8;"><i>
Subtitle
</i><span>
date - date
</span></p></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!---
STORY PART 1 END
-->
<!---
STORY PART 2 BEGIN
-->
<div class="pb-1 mb-2" style="border-bottom: 1px dotted #60594e;"><p class="justify-content-between p-0 m-0" style="font-size:18px;color:#c2ac83;">
Chapter Two
<span class="my-auto" style="color:#c2ac83;"><i class="fa-solid fa-bookmark"></i></span></p>
<p class="justify-content-between" style="color:#6594a8;"><i>
Subtitle
</i><span>
date - date
</span></p></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!---
STORY PART 2 END
-->
<!---
STORY PART 3 BEGIN
-->
<div class="pb-1 mb-2" style="border-bottom: 1px dotted #60594e;"><p class="justify-content-between p-0 m-0" style="font-size:18px;color:#c2ac83;">
Chapter Three
<span class="my-auto" style="color:#c2ac83;"><i class="fa-solid fa-bookmark"></i></span></p>
<p class="justify-content-between" style="color:#6594a8;"><i>
Subtitle
</i><span>
date - date
</span></p></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!---
STORY PART 3 END
-->
</div>
<!---
CHARACTER STORY TAB END
-->
<!---
==============================
FAMILY TAB START
Write a little about your character's family and its history here! Code is themed around the Arthurian Mythos, and so there's sections here for family heraldry and other vaguely medieval-fantasy things.
You can remove family sections that are irrelevant/don't fit, I just wanted to include all options.
==============================
-->
<div class="tab-pane fade" id="pills-Tab4" role="tabpanel" aria-labelledby="pills-Tab4-tab">
<div class="justify-content-between mb-2" style="border-bottom: 1px solid #6594a8;"><h2>Family</h2><h2><i class="fa-solid fa-family" style="color:#c2ac83;"></i></h2></div>
<div class="flex-row pb-2 mb-3" style="border-bottom: 1px dotted #60594e; color:#6594a8;"><div class="flex-column pr-3" style="width:60%; min-width:200px;">
<p class="justify-content-between pb-1" style="border-bottom: 1px dotted #60594e; color:#6594a8;">Ancestors <span><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a></span></p>
<p class="justify-content-between pb-1" style="border-bottom: 1px dotted #60594e; color:#6594a8;">Parents <span><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a></span></p>
<p class="justify-content-between pb-1" style="border-bottom: 1px dotted #60594e; color:#6594a8;">Siblings <span><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a></span></p>
<p class="justify-content-between pb-1" style="border-bottom: 1px dotted #60594e; color:#6594a8;">Descendants <span><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a></span></p>
<p class="justify-content-between" style="color:#6594a8;">Other Relatives <span><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a><br><a href="Ancestor link" target="_BLANK" style="color:#c2ac83;">
Name
</a></span></p>
</div>
<!---
==========================
FAMILY HERALDRY GOES HERE
Replace the img url with one relevant to your character's family! If you don't have time/the ability to draw your own, I reccomend using Azgaar's Armoria tool:
https://azgaar.github.io/Armoria/
==========================
-->
<div class="flex-column mx-auto my-auto" style="min-width:200px;">
<div class="py-2 px-2 border-0" style="border-radius:0.25rem;font-size:18px;color:#6594a8;"><div class="my-auto justify-content-between"><i class="fa-solid fa-dungeon"></i><span style="color:#c2ac83;"><b>
Family Name
</b></span><i class="fa-solid fa-dungeon"></i></div></div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/78175713_BcbSxUgL78Fd2vI.png" style="max-height:300px;">
</div>
<!---
FAMILY HERALDRY END
-->
</div>
<!---
==========================
FAMILY BLURB HERE
Write a little blurb about this character's family here!
==========================
-->
<p>Write a little blurb about your character's family and its history here! What are they known for? Are there any famous members? This will scroll if it gets long enough.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
</div>
<!---
FAMILY TAB END
-->
<!---
RELATIONSHIPS TAB (start)
Write a little about your character's allies and enemies here!
-->
<div class="tab-pane fade" id="pills-Tab5" role="tabpanel" aria-labelledby="pills-Tab5-tab">
<div class="justify-content-between mb-3" style="border-bottom: 1px solid #6594a8;"><h2>Relationships</h2><h2><i class="fa-solid fa-handshake" style="color:#c2ac83;"></i></h2></div>
<!---
Relationship block 1 (start)
-->
<div class="flex-row">
<div class="flex-column mr-3 card my-auto" style="max-width:150px; max-height:150px;min-width:150px; min-height:150px; border-radius:50%; border-left: 3px solid #6594a8; border-right: 3px solid #c2ac83; border-top:none; border-bottom:none; background-image: url('https://images.unsplash.com/photo-1560536270-b5855082dd85?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); background-size:cover; background-repeat:no-repeat;background-position: center;"> </div>
<div class="flex-column my-auto">
<div class="card mb-2 p-1 bg-transparent" style="border-top:none;border-right:none;border-left:none; border-bottom: 2px solid #6594a8;"><p class="justify-content-between" style="font-size:18px; color:#c2ac83;">
Character Name
<span><i class="fa-solid fa-heart-pulse tooltipster" title="Lover"></i></span></p></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
<!---
Relationship block 1 (end)
-->
<!---
Relationship block 2 (start)
-->
<div class="flex-row">
<div class="flex-column my-auto">
<div class="card mb-2 p-1 bg-transparent" style="border-top:none;border-right:none;border-left:none; border-bottom: 2px solid #6594a8;"><p class="justify-content-between" style="font-size:18px; color:#c2ac83;">
<i class="fa-solid fa-chess-king-piece tooltipster" title="Leader/mentor"></i><span>
Character Name
</span></p></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
<div class="flex-column ml-3 card my-auto" style="max-width:150px; max-height:150px;min-width:150px; min-height:150px; border-radius:50%; border-left: 3px solid #c2ac83; border-right: 3px solid #6594a8; border-top:none; border-bottom:none; background-image: url('https://images.unsplash.com/photo-1560536270-b5855082dd85?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); background-size:cover; background-repeat:no-repeat;background-position: center;"> </div>
</div>
<!---
Relationship block 2 (end)
-->
<!---
Relationship block 3 (start)
-->
<div class="flex-row">
<div class="flex-column mr-3 card my-auto" style="max-width:150px; max-height:150px;min-width:150px; min-height:150px; border-radius:50%; border-left: 3px solid #6594a8; border-right: 3px solid #c2ac83; border-top:none; border-bottom:none;background-image: url('https://images.unsplash.com/photo-1560536270-b5855082dd85?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); background-size:cover; background-repeat:no-repeat;background-position: center;"> </div>
<div class="flex-column my-auto">
<div class="card mb-2 p-1 bg-transparent" style="border-top:none;border-right:none;border-left:none; border-bottom: 2px solid #6594a8;"><p class="justify-content-between" style="font-size:18px; color:#c2ac83;">
Character Name
<span><i class="fa-solid fa-swords tooltipster" title="Enemy"></i></span></p></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</div>
</div>
<!---
Relationship block 3 (end)
-->
</div>
<!---
RELATIONSHIPS TAB (end)
-->
</div>
</div>
<!---
Main nav content (end)
-->
</div>
</div>
<!---
CODE FOOTER & CREDITS
You can edit this as long as the credits remain readily visible.
-->
<div class="card rounded-0 p-3" style="border-radius: 0rem 0rem .25rem .25rem; min-width:765px; background-color:#c2ac83;border-top: 3px solid #6594a8; border-left:none;border-bottom:none;border-right:none;">
<p class="justify-content-between" style="color:#60594e;opacity:0.7;"><i class="fas fa-image tooltipster" title="Images from Unplash & Pixabay"></i> <span><a href="https://toyhou.se/J-Haskell" target="_blank" style="color:#60594e;"><i class="fas fa-code tooltipster" title="Code by J-Haskell"></i></a></span></p></div>
</div>
