<!--
COLOR INDEX
"ctrl+f" these colors and replace all with the hex you would like to use instead!
MAIN BORDER: #372564
SPINNING ICON + CRED ICON: #513180
SPINNING ICON + CRED ICON SHADOW: #151018
INNER BOX BG + 3X IMAGE BG: #C5C2CC
INNER BOX BORDER + 3x IMAGE BORDER (translucent): #432B7F
GENERAL FONT/TEXT: #04030E
ACCENT 1: #3F2582
ACCENT 2: #090714
TEXT SHADOW (on big text only) + BUTTON SHADOWS: #4E3BE1
ICON BORDER: #6D4C7D
ICON BACKGROUNDS + BUTTON BACKGROUNDS: #DEDDE2
BUTTON BORDERS: #4B3598
BUTTON TEXT COLOR: #7C699A
INNER BOX'S SHADOW: rgba(44,41,52,0.27)
(as you can see, this is not a hex code. you have to grab the "R" "G" "B" values from a color, and the last number stands for the opacity. 1 is fully opaque.)
-->
<!-- container background image below, remove the background url if you dont want a bg and would rather the color be shown! -->
<div class="contanier card col-12 col-lg-6 mx-auto py-3 px-2 rounded-0"
style="background: url('https://media.discordapp.net/attachments/955323640541503508/997644406213582868/misc206.jpg');
border-width: 6px; border-color:#372564; border-style:ridge; background-color: #2D2A33;">
<div class="row mx-1 px-2 justify-content-between mb-lg-0">
<!--
SPINNY ICON
replace "fa-cards" with whatever FA (fontawesome.com/icons) code you would like
this goes for all fa icons throughout the code. i probably shouldn't repeat myself too much
-->
<i class="fa-regular fa-cards m-0 p-0 d-none d-lg-inline fa-spin" style="position: absolute; right:-3%; top:-2%; z-index: 10; font-size:65px; color:#513180; filter:drop-shadow(-2px 1px 0px #151018);"></i>
<!--
ICON END
-->
<div class="card col-12 col-lg-8 ml-lg-n1 mr-lg-2 py-lg-1 rounded-0 mb-lg-2" style="background-color: #C5C2CC; border-width: 5px; border-color:#432B7F; border-style:double; box-shadow:0px 0px 4px 1px rgba(90,39,155,0.27);">
<div class="row">
<div class="col-12 col-lg-11 text-dark px-1 px-lg-3" style="font-size: 14px; ">
<div class="tab-content mx-0 pt-1 p-lg-1 ml-lg-n1" style="color: #04030E;">
<!--
mmk.. so between you and me. if you SOMEHOW ....(jk) dont want the trivia to be the first page or wanna re-order the pages, just change the id="x" to the number you want the button to lead to. i.e.: "one" will be the 1st tab/front page, "two" will be the 2nd tab and so on. be sure there's all 4 separate & listed tho! or it will mega break (aka don't make two tabs three or smth)
-->
<div class="tab-pane active show table-responsive" id="one" style="max-height: 170px; overflow-x:hidden;">
<!--
TAB 1 CONTENT
this trivia section, was largely inspired by Pinky, i love when their codes have cute little trivia sections... i eat them up ....
will scroll! the lines will not center tho
-->
<h1 class="font-weight-bold text-center" style="font-size:30px; color: #090714; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px; margin-top:-2px;">
<!--TAB 1 EMOJIS & HEADER-->
<i class="fa-solid fa-heart-half-stroke" style="color: #3F2582;"></i>
TRIVIA
<i class="fa-solid fa-candle-holder" style="color: #3F2582;"></i>
<!--*END*-->
</h1>
<hr class="w-100 my-2" style="border-top-width: 3px;">
<div class="row mx-n2">
<div class="col-6">
<div class="row" style="margin-top:2px;">
<!--
LEFT (trivia) COLUMN
-->
<div class="col-12 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">STAR SIGN</span>
<span class="my-auto" style="font-size:12px;">content</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">MBTI</span>
<span class="my-auto" style="font-size:12px;">content</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">TAROT</span>
<span class="my-auto" style="font-size:12px;">content</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">ARCHETYPE</span>
<span class="my-auto text-right" style="font-size:12px;">content</span>
</div>
</div>
</div>
<!--
LEFT (trivia) COLUMN
*END*
-->
<div class="col-6 ml-n2 ml-lg-n1">
<div class="row" style="margin-top:2px;">
<!--
RIGHT (trivia) COLUMN
-->
<div class="col-12 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">ENERGY</span>
<!-- want to explain,
it's titled as energy bc they say introversion vs extroversion is if you get your energy from being around people (extro) or being alone! (intro)
thats all LOL
-->
<span class="my-auto" style="font-size:12px;">intro/extrovert</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">FAV FOOD</span>
<span class="my-auto" style="font-size:12px;">content</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">TEMPER</span>
<!-- explaining this too
it's just me shortening the 4 temperaments .... :(
-->
<span class="my-auto" style="font-size:12px;">content</span>
</div>
<div class="col-12 mt-1 justify-content-between px-2">
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">ALIGNM.</span>
<!-- d&d alignment
IM SORRY.. I HAVE TO SHORTEN ALL OF THESE. SAD!
-->
<span class="my-auto" style="font-size:12px;">content</span>
</div>
</div>
</div>
</div>
<!--
RIGHT (trivia) COLUMN
*END*
-->
</div>
<!--
TAB 1 CONTENT
*END*
-->
<!--
TAB 2 CONTENT
-->
<div class="tab-pane table-responsive" id="two" style="max-height: 170px; overflow-x:hidden;">
<h1 class="font-weight-bold text-center" style="font-size:30px; color: #3F2582; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px; margin-top:-2px;">
<!-- TAB 2 HEADER & EMOJI -->
DESIGN NOTES
<i class="fa-duotone fa-pen-paintbrush" style="color: #090714;"></i>
<!-- *END*-->
</h1>
<hr class="w-100 my-2" style="border-top-width: 3px;">
<div class="row mx-n2">
<!--
LEFT (note) COLUMN
-->
<div class="col-6">
<div class="row">
<div class="col-12 px-0 " >
<ul class="pl-4 list-unstyled mb-0" style="font-size: 12px;">
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#3F2582;"></i>
<span class="ml-1">
Note 1 Lorem ipsum dolor sit amet.
</span></li>
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#090714;"></i>
<span class="ml-1">
Note 3 Lorem ipsum dolor sit amet.
</span></li>
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#3F2582;"></i>
<span class="ml-1">
Note 5 Lorem ipsum dolor sit amet
</span></li>
</ul>
</div>
</div>
</div>
<!--
LEFT (note) COLUMN
*END*
-->
<!--
RIGHT (note) COLUMN
-->
<div class="col-6 ml-n2">
<div class="row">
<div class="col-12 px-0" >
<ul class="pl-4 list-unstyled mb-0" style="font-size: 12px;">
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#090714;"></i>
<span class="ml-1">
Note 2 Lorem ipsum dolor sit amet.
</span></li>
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#3F2582;"></i>
<span class="ml-1">
Note 4 Lorem ipsum dolor sit amet.
</span></li>
<li style="text-indent: -6px"><i class="fa-regular fa-paintbrush-fine" style="font-size:15px; color:#090714;"></i>
<span class="ml-1">
Note 6 Lorem ipsum dolor sit amet.
</span></li>
</ul>
</div>
</div>
</div>
<!--
RIGHT (note) COLUMN
*END*
-->
</div>
<hr class="w-75 my-1" style="border-top-width: 3px;">
<!--
COLOR PALETTE
add or delete the col rows as needed for color palettes
(and of course just replace the hex's for each color)
-->
<div class="row col-10 mx-auto mt-3 px-0" style="border:1px solid #453448;">
<div class="col" style="background-color: #0D0D1C; height: 30px;"></div>
<div class="col" style="background-color: #EAD1CA; height: 30px;"></div>
<div class="col" style="background-color: #82518C; height: 30px;"></div>
<div class="col" style="background-color: #35304F; height: 30px;"></div>
<div class="col" style="background-color: #BFB09D; height: 30px;"></div>
</div>
</div>
<!--
TAB 2 CONTENT
*END*
-->
<!--
TAB 3 CONTENT
-->
<div class="tab-pane table-responsive" id="three" style="max-height: 170px; overflow-x: hidden;">
<h1 class="font-weight-bold text-center" style="font-size:30px; color: #090714; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px; margin-top:-2px;">
<!-- TAB 3 HEADER & EMOJI -->
PERSONALITY
<i class="fa-solid fa-book-medical" style="color: #3F2582;"></i>
<!-- *END* -->
</h1>
<hr class="w-100 mt-2 mb-0" style="border-top-width: 3px;">
<div class="row mx-n2">
<div class="col-6">
<div class="row">
<div class="col-12 pr-0">
<!--
LEFT (personality) COLUMN
change to "fa-solid" for filled in emojis and "fa-light" for the empty emojis
-->
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
CONFIDENCE
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">
HONESTY
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
<hr class="my-n1" style="border-top-width: 0px;">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
INTELLECT
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
</div>
</div>
</div>
<div class="col-6 ml-0">
<div class="row">
<div class="col-12 pl-0">
<!--
RIGHT (personality) COLUMN
change to "fa-solid" for filled in emojis and "fa-light" for the empty emojis
-->
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
HUMOR
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
<span class="font-weight-bold" style="font-size:16px; color: #090714; text-shadow: 1px 1px .8px #9373C9;">
IMPULSITIVITY
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
<hr class="my-n1" style="border-top-width: 0px;">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
COMPASSION
</span>
<p class="text-right mt-n1 mb-0" style="font-size: 17px; word-spacing:-2px;">
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-solid fa-bat"></i>
<i class="fa-light fa-bat"></i>
<i class="fa-light fa-bat"></i>
</p>
</div>
</div>
</div>
</div>
<hr class="w-75 my-2" style="border-top-width: 2px;">
<h1 class="font-weight-bold text-right mr-3 mb-0" style="font-size:24px; color: #090714; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px; margin-top:-2px;">
<!-- TAB 3, INFO HEADER & EMOJI -->
INFO
<i class="fa-regular fa-heart-circle-exclamation" style="color: #3F2582;"></i>
<!-- *END* -->
</h1>
<!-- info section, add more para's if you wish by coping the p class all the way to the /p :) -->
<p class="mb-1 mx-1 ml-lg-0" style="text-indent: 8px;">
<span style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9; margin-right: 2px;">
W</span>rite some kind description here, it will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Done
accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<!-- *END* -->
</div>
<!--
TAB 3 CONTENT
*END*
-->
<!--
TAB 4 CONTENT
-->
<div class="tab-pane table-responsive" id="four" style="max-height: 170px; overflow-x: hidden;">
<h1 class="font-weight-bold text-center" style="font-size:30px; color: #090714; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px; margin-top:-2px;">
<!-- TAB 4 HEADER -->
HISTORY
<i class="fa-solid fa-calendar-heart" style="color: #3F2582;"></i>
<!-- *END* -->
</h1>
<hr class="w-100 mt-2 mb-1" style="border-top-width: 3px;">
<!--
STORY/HISTORY ETC
-->
<h2 class="font-weight-bold mb-1 mx-1" style="font-size:23px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
PAST
</h2>
<p class="ml-1 mr-2" style="text-indent:8px;">
put some info about the past here! this box will scroll so don't worry. 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>
<hr class="w-75 my-2" style="border-top-width: 2px;">
<h2 class="font-weight-bold mb-1 mx-1 text-right" style="font-size:23px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
PRESENT
</h2>
<p class="ml-1 mr-2" style="text-indent:8px;">
put some info about the present here! this box will scroll so don't worry. 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>
<!--
TABS END !!!! :]
i recommend not touching the below unless you really know what's up
-->
</div>
</div>
<!-- tab buttons below -->
<div class="col-12 col-lg-1 p-lg-0 mx-lg-n3">
<ul class="nav flex-lg-column ml-n2 my-2 my-lg-0 ml-lg-0 mr-lg-n3" style="border-width:2px;">
<li class="nav-item px-2 px-lg-0 pt-lg-1 mx-auto">
<a class="nav-link active btn rounded-0 px-lg-2 py-lg-1" data-toggle="tab" role="tab" style="background-color: #DEDDE2; border-color:#4B3598; border-width:3px; border-style:double; box-shadow: 1px 1px 0px #9373C9; color: #7C699A;" aria-current="page" href="#one">1</a>
</li>
<li class="nav-item px-2 px-lg-0 pt-lg-2 mx-auto">
<a class="nav-link btn rounded-0 px-lg-2 py-lg-1" data-toggle="tab" role="tab" style="background-color: #DEDDE2; border-color:#4B3598; border-width:3px; border-style: double; color: #7C699A; box-shadow: 1px 1px 0px #9373C9;" href="#two">2</a>
</li>
<li class="nav-item px-2 px-lg-0 py-lg-2 mx-auto">
<a class="nav-link btn rounded-0 px-lg-2 py-lg-1" data-toggle="tab" role="tab" style="background-color: #DEDDE2; border-color:#4B3598; border-width:3px; border-style:double; color: #7C699A; box-shadow: 1px 1px 0px #9373C9;" href="#three">3</a>
</li>
<li class="nav-item pl-2 px-lg-0 pb-lg-1 mx-auto">
<a class="nav-link btn rounded-0 px-lg-2 py-lg-1" data-toggle="tab" role="tab" style="background-color: #DEDDE2; border-color:#4B3598; border-width:3px; border-style:double; color: #7C699A; box-shadow: 1px 1px 0px #9373C9;" href="#four">4</a>
</li>
</ul>
</div>
<!-- tab buttons end -->
</div>
</div>
<div class="card col-12 col-lg-4 my-2 py-2 rounded-0 py-lg-0 px-lg-0 mt-lg-0 mr-lg-n1" style="background-color: #C5C2CC; border-width: 5px; border-color: #432B7F; border-style:double; box-shadow:0px 0px 4px 1px rgba(90,39,155,0.27);">
<div class="p-2 mx-auto my-auto">
<!-- MAIN ICON -->
<img class="img-thumbnail img-fluid rounded-0" style="background-color: #DEDDE2; border-color:#6D4C7D; border-style:ridge; border-width:1px;"
src="https://media.discordapp.net/attachments/955323640541503508/997648073239044276/ezgif-4-7df7340edc.gif"
>
</div>
</div>
</div>
<div class="row mx-1 px-2 justify-content-between">
<div class="col-12 col-lg-8 order-2 order-lg-1 ml-lg-n1 mr-lg-2 p-0 py-lg-0 px-lg-0 rounded-0">
<!--
3x IMAGE CONTAINER
it goes left middle right
i always suggest using square images, but theoretically it might be ok w/o square? feel free to try :woozy:
square images should automatically resize to fit! so dw
NOTE: i added filters to these images. feel free to either remove them entirely (aka remove the entire style tag) OR mess with them however you'd like! read about the filter options here
https://www.w3schools.com/CSSref/css3_pr_filter.asp
-->
<div class="card rounded-0 p-2" style="background-color: #C5C2CC; border-width: 5px; border-color:#432B7F; border-style:double; box-shadow:0px 0px 4px 1px rgba(90,39,155,0.27);">
<div class="row no-gutters" style="border: 4px double #432B7F;">
<div class="col-4"><img class="img-fluid" data-toggle="tooltip" title="BY (SRC/NAME)" src="https://cdn.discordapp.com/attachments/955323640541503508/997639847479099503/unknown.png" style="filter: brightness(88%) invert(90%) sepia(14%) hue-rotate(195deg);"></div>
<div class="col-4"><img class="img-fluid" data-toggle="tooltip" title="BY (SRC/NAME)" src="https://cdn.discordapp.com/attachments/955323640541503508/997639847219056651/unknown.png" style="filter: brightness(88%) sepia(14%) hue-rotate(195deg);"></div>
<div class="col-4"><img class="img-fluid" data-toggle="tooltip" title="BY (SRC/NAME)" src="https://cdn.discordapp.com/attachments/955323640541503508/997639847718158466/unknown.png" style="filter: brightness(88%) invert(90%) sepia(14%) hue-rotate(195deg);"></div>
</div>
</div>
<!--
RELATIONSHIPS CONTAINER
-->
<div class="container mt-2 clearfix table-responsive pb-2" style="max-height:170px; background-color: #C5C2CC; background-color: #C5C2CC; border-width: 5px; border-color:#432B7F; border-style:double; box-shadow:0px 0px 4px 1px rgba(90,39,155,0.27);">
<!--
TO ADD MORE SECTIONS, COPY & PASTE, STARTING FROM HERE
-->
<div class="row" style="font-size:12px; color: #04030E;">
<div class="col-4 p-1 p-lg-2">
<!--
RELATIONSHIP ICON
-->
<img class="img-thumbnail rounded-0" style="background-color: #DEDDE2; border:1px ridge #6D4C7D;" src="https://media.discordapp.net/attachments/955323640541503508/997648343184441414/unknown.png">
</div>
<!--
RELATIONSHIP BLURB
-->
<div class="col-8 ml-n1 px-2 py-1">
<span class="font-weight-bold" style="font-size:23px;color: #3F2582; text-shadow:1px 1px 0px #9373C9;">
NAME
</span> <span class="badge ml-1" style="font-size:13px; letter-spacing:-.4px; background-color:#DEDDE2;color:#3F2582;font-weight:normal; opacity:.7;">
relationship
</span>
<br>
write a small blurb about their thoughts or etc. here! - 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>
<hr class="mt-1 mb-0" style="border-top-width: 2px;">
<!--
END COPY PASTE.
NEW ROW BELOW
-->
<div class="row" style="font-size:12px; color: #04030E;">
<div class="col-4 p-2">
<!--
RELATIONSHIP ICON
-->
<img class="img-thumbnail rounded-0" style="background-color: #DEDDE2; border:1px ridge #6D4C7D;" src="https://media.discordapp.net/attachments/955323640541503508/997648256685314048/unknown.png">
</div>
<!--
RELATIONSHIP BLURB
-->
<div class="col-8 ml-n1 px-lg-2 p-1">
<span class="font-weight-bold" style="font-size:23px;color: #3F2582; text-shadow:1px 1px 0px #9373C9;">
NAME
</span> <span class="badge ml-1" style="font-size:13px; letter-spacing:-.4px; background-color:#DEDDE2;color:#3F2582;font-weight:normal; opacity:.7;">
relationship
</span>
<br>
Anotha one. - 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>
<!-- paste OVER this line. this is just here so the below doesn't get touched ehe-->
</div>
<!--
RELATIONSHIPS CONTAINER
*END*
-->
</div>
<!--
ABOUT ME SECTION
-->
<div class="card col-12 col-lg-4 order-1 order-lg-2 mb-2 my-lg-0 mr-lg-n1 rounded-0 pt-1 pb-2" style="background-color: #C5C2CC; background-color: #C5C2CC; border-width: 5px; border-color:#432B7F; border-style:double; box-shadow:0px 0px 4px 1px rgba(90,39,155,0.27); color: #04030E;">
<h1 class="font-weight-bold text-center" style="font-size:30px; color: #3F2582; text-shadow:1px 1px 0px #9373C9; word-spacing:-2px;">ABOUT</h1>
<hr class="w-100 mt-0 mb-1" style="border-top-width: 3px;">
<!--
NOTE: if any of these overflow into a new line, then add "text-right" to the 2nd (content) span class, after my-auto. try to keep these short, or change the font size of content if needed, the left relationships box won't resize unfortunately....... you can scroll a bit up and adjust the max height of the relationship box, if you'd like. sorry, i couldn't figure out a better work around :<
-->
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
NAME
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
AGE
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
SPECIES
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
BDAY
</span>
<span class="my-auto" style="font-size:12px;">
00/00
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
GENDER
</span>
<span class="my-auto" style="font-size:12px;">
content (prns)
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
SEXUALITY
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
STATUS
</span>
<span class="my-auto" style="font-size:12px;">
taken/single etc
</span>
</div>
<hr class="w-100 mt-2 mb-1" style="border-top-width: 3px;">
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
THEME
</span>
<!-- replace the hashtag with a FULL link -->
<span class="my-auto" style="font-size:12px;">
<a href="#" data-toggle="tooltip" title="title - artist">
<i class="fa-solid fa-music" style="color: #9373C9;"></i>
</a>
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
DESIGNER
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
<div class="justify-content-between px-0">
<span class="font-weight-bold" style="font-size:16px; color: #3F2582; text-shadow: 1px 1px .8px #9373C9;">
WORTH
</span>
<span class="my-auto" style="font-size:12px;">
content
</span>
</div>
</div>
</div>
<a href="https://toyhou.se/17053443.chara-bio-04" data-toggle="tooltip" title="code by hxh (lukas)" style="position: absolute; left: 4px; bottom: 0px;"><i class="fa-solid fa-circle-heart" style="font-size: 14px; color: #513180; text-shadow: 1px 1px 0px #151018;"></i></a>
</div>
