<!---------
"Tell Me a Story" (Custom Colours)
Code by iinkt on Toyhouse. Commissioned by Furbyboi on Toyhouse.
Special thank you to Deathtooksheeps for helping with a button issue!
-----------
!! CODE RULES & PERMISSIONS:
1. DO NOT remove my credit. You may move it, though!
2. Frankenstein-ing is allowed, as long as the other creator permits it! Just continue to credit me.
3. Feel free to edit this code to your heart's desire! It was made to be customizeable.
!! DO NOT TURN ON WYSIWYG. My codes will not work!
------------
!! COLOUR GUIDE
Use Ctrl + F to find and replace all instances of these colours at once.
text colour: #fa9d9c
muted text colour: #fac8c6
button text colour: #676979
main accent (tabs and links): #bed8d1
background colour: #ffffff
faded background colour: #fff2ed
------------
!! IMAGES, LINKS, AND EMBEDS
Images, links, and embeds all show up in this code. They are noted by the following:
IMGHERE
LINKHERE
EMBEDHERE
For images, copy and paste a link to the image where it says IMGHERE. The link should end in the file format, such as .jpg, .jpeg, .png, or .gif.
For links, copy and paste any link where it says LINKHERE. These are usually meant to be links to other characters.
For Youtube embeds, copy the END of the Youtube video link (which is all of the weird numbers and letters) and paste where it says EMBEDHERE.
------------
!! FONTAWESOME ICONS
For many icons, I change the sizing of to make them smaller and more in-line with the code. You can replace the whole icon code, but doing so will delete the size tag as well.
THEREFORE, I recommend use Ctrl+F to find and replace all instances of these icons, and replace with the icon's name.
Not all icons in the code are listed, just some that could be changed thematically. You can, of course, edit any icons in the code.
character icon: fa-sparkle
You can view all available icons here: https://fontawesome.com/search
TIP: Their name is what you replace the icon with, so Ctrl + F "fa-sparkle" with, for example, fa-watermelon-slice, and it will replace the icon.
----------->
<div class="container-fluid">
<!-------- BACKGROUND IMAGE --------->
<div class="card p-2 h-100" style="background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);">
<div class="row no-gutters mx-auto h-100 w-100" style="max-width:800px;">
<!------------ LEFTHAND PANEL ------------->
<div class="col-md-4 p-1 h-100 w-100">
<!----- LEFTHAND IMAGE ----->
<div class="card p-2 border-0" style="background-color:#fff2ed; height:576px; background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);">
<div class="card p-2 mt-auto" style="background-color:#fff2ed;">
<div class="row no-gutters px-2">
<!-- embed title -->
<div class="col-10 font-italic" style="color:#fac8c6;">
song title
</div>
<!-- embed -->
<div class="col-2 text-right my-auto" style="color:#bed8d1"><i class="fa-solid fa-play">
<!--------
EMBED INSTRUCTIONS: copy the END of the youtube video link (all of the weird numbers and letters) and paste where it says EMBEDHERE in the piece of the link below.
--------->
<iframe src="
https://www.youtube.com/embed/EMBEDHERE?controls=0
" class="w-100" style="position:absolute;top:-80px;left:0;height:200px;opacity:0.00001;" frameborder="0"></iframe>
</i></div>
</div>
</div>
</div>
</div>
<!---------- LEFTHAND PANEL ENDS ----------------->
<!---------- RIGHTHAND PANEL BEGINS ----------------->
<div class="col-md-8 p-1 h-100">
<div class="card p-2 h-100 w-100" style="background-color:#ffffff;">
<!---- background card ---->
<div class="card p-1 px-3 mb-2" style="background-color:#fff2ed;">
<div class="justify-content-between" style="font-size:20px; font-weight:bold; font-style:italic; color:#fa9d9c;">
<!-- name -->
<span>
NAME
</span>
<!-- icon -->
<span><i class="fa-solid
fa-sparkle
"></i></span>
</div>
</div>
<div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!---------------- BASICS ------------------>
<!-- header -->
<div class="card mb-2" style="background-color:#bed8d1;" role="tab" id="heading1">
<div class="font-italic p-1 px-2 w-100 justify-content-between" style="color:#676979;">
<div class="mb-0"><i class="fa-solid fa-user fa-xs"></i></div>
<p class="mb-0" style="font-weight:bold;">basics</p>
<a class="btn p-0 w-100 h-100" data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="true" aria-controls="accordion1" style="position: absolute; top:0px; left: 0px"></a>
</div>
</div>
<!-- main content -->
<div id="accordion1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion">
<div class="card-body p-2 mb-2" style="height:315px; overflow-y:auto;">
<!-- FIELDS -->
<div class="row no-gutters">
<!-- name -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">name</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- called -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">called</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- age -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">age</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- gender -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">gender</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- pronouns -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">pronouns</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- orientation -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">orientation</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- species -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">species</span>
<span class="pull-right" style="color:#fa9d9c;">content</span>
</div>
<!-- theme -->
<div class="col-md-6 col-12 px-2">
<span style="color:#fac8c6;">theme</span>
<span class="pull-right"><a style="color:#bed8d1;" href="LINKHERE">song</a></span>
</div>
</div>
<!-- BLURB -->
<!-- you can add new paragraphs/add a new line with <p> -->
<div class="m-2" style="color:#fac8c6;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
</div>
<!---- trivia & playlist ---->
<div class="row no-gutters mt-3">
<!-- LEFT IMAGE -->
<div class="col-md-6" style="min-height:150px;">
<div class="card h-100 border-0" style="background-color:#fff2ed; background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
</div>
<!--- TRIVIA ---->
<div class="col-md-6 my-auto p-2 pl-md-3 pt-md-0 pt-3">
<div class="text-center font-italic" style="font-weight:bold">
<div class="text-center font-italic justify-content-between p-1" style="font-weight:bold; color:#fa9d9c;">
<span>trivia</span>
<span><i class="fa-solid fa-stars fa-xs"></i></span>
</div>
</div>
<!--- bullets --->
<ul class="fa-ul m-0 ml-4" style="color:#fac8c6;">
<!-- you can copy and paste more bullets. -->
<li><span class="fa-li"><i class="fal fa-regular fa-star fa-xs"></i></span>trivia</li>
<li><span class="fa-li"><i class="fal fa-regular fa-star fa-xs"></i></span>trivia</li>
<li><span class="fa-li"><i class="fal fa-regular fa-star fa-xs"></i></span>trivia</li>
<li><span class="fa-li"><i class="fal fa-regular fa-star fa-xs"></i></span>trivia</li>
<!--------
<li><span class="fa-li"><i class="fal fa-regular fa-star fa-xs"></i></span>trivia</li>
-------->
</ul>
</div>
</div>
<div class="row no-gutters mt-md-2">
<!--- PLAYLIST ---->
<div class="col-md-6 my-auto p-2 pr-md-3 pb-md-0 pb-3">
<div class="text-center font-italic" style="font-weight:bold">
<div class="text-center font-italic justify-content-between p-1" style="font-weight:bold; color:#fa9d9c;">
<span>playlist</span>
<span><i class="fa-regular fa-music fa-xs"></i></span>
</div>
</div>
<!--- bullets --->
<ul class="fa-ul m-0 ml-4" style="color:#fac8c6;">
<!-- you can copy and paste more bullets. -->
<li><span class="fa-li"><i class="fal fa-regular fa-play fa-xs"></i></span>song</li>
<li><span class="fa-li"><i class="fal fa-regular fa-play fa-xs"></i></span>song</li>
<li><span class="fa-li"><i class="fal fa-regular fa-play fa-xs"></i></span>song</li>
<li><span class="fa-li"><i class="fal fa-regular fa-play fa-xs"></i></span>song</li>
<!--------
<li><span class="fa-li"><i class="fal fa-regular fa-play fa-xs"></i></span>song</li>
-------->
</ul>
</div>
<!--- RIGHT IMAGE --->
<div class="col-md-6" style="min-height:150px;">
<div class="card h-100 border-0 mt-md-0 mt-2" style="background-color:#fff2ed;background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
</div>
</div>
</div>
</div>
<!---------------- END BASICS ------------------>
<!---------------- PERSONALITY ------------------>
<!-- header -->
<div class="card mb-2" style="background-color:#bed8d1;" role="tab" id="heading1">
<div class="font-italic p-1 px-2 w-100 justify-content-between" style="color:#676979;">
<div class="mb-0"><i class="fa-solid fa-star fa-xs"></i></div>
<p class="mb-0" style="font-weight:bold;">personality</p>
<a class="btn p-0 w-100 h-100" data-toggle="collapse" data-parent="#accordion" href="#accordion2" aria-expanded="true" aria-controls="accordion2" style="position: absolute; top:0px; left: 0px"></a>
</div>
</div>
<div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion">
<div class="card-body p-2 mb-2" style="height:315px; overflow-y:auto;">
<!-- PERSONALITY BLURB -->
<!-- you can add new paragraphs/add a new line with <p> -->
<div class="m-1 mb-3" style="color:#fac8c6;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
</div>
<!---- likes and dislikes ---->
<div class="row no-gutters">
<div class="col-md-6" style="min-height:150px;">
<div class="card h-100 border-0" style="background-color:#fff2ed;background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
</div>
<!--- LIKES ---->
<div class="col-md-6 my-auto p-2 pl-md-3 pt-md-0 pt-3">
<div class="text-center font-italic" style="font-weight:bold">
<div class="text-center font-italic justify-content-between p-1" style="font-weight:bold; color:#fa9d9c;">
<span>likes</span>
<span><i class="fa-solid fa-heart fa-xs"></i></span>
</div>
</div>
<!--- bullets --->
<ul class="fa-ul m-0 ml-4" style="color:#fac8c6;">
<!-- you can copy and paste more bullets. -->
<li><span class="fa-li"><i class="fal fa-regular fa-heart fa-xs"></i></span>like</li>
<li><span class="fa-li"><i class="fal fa-regular fa-heart fa-xs"></i></span>like</li>
<li><span class="fa-li"><i class="fal fa-regular fa-heart fa-xs"></i></span>like</li>
<li><span class="fa-li"><i class="fal fa-regular fa-heart fa-xs"></i></span>like</li>
<!--------
<li><span class="fa-li"><i class="fal fa-regular fa-heart fa-xs"></i></span>like</li>
-------->
</ul>
</div>
</div>
<div class="row no-gutters mt-md-2">
<!--- DISLIKES ---->
<div class="col-md-6 my-auto p-2 pr-md-3 pt-md-0 pt-3">
<div class="text-center font-italic" style="font-weight:bold">
<div class="text-center font-italic justify-content-between p-1" style="font-weight:bold; color:#fa9d9c;">
<span>dislikes</span>
<span><i class="fa-solid fa-x fa-xs"></i></span>
</div>
</div>
<!--- bullets --->
<ul class="fa-ul m-0 ml-4" style="color:#fac8c6;">
<!-- you can copy and paste more bullets. -->
<li><span class="fa-li"><i class="fal fa-regular fa-x fa-xs"></i></span>dislike</li>
<li><span class="fa-li"><i class="fal fa-regular fa-x fa-xs"></i></span>dislike</li>
<li><span class="fa-li"><i class="fal fa-regular fa-x fa-xs"></i></span>dislike</li>
<li><span class="fa-li"><i class="fal fa-regular fa-x fa-xs"></i></span>dislike</li>
<!--------
<li><span class="fa-li"><i class="fal fa-regular fa-x fa-xs"></i></span>dislike</li>
-------->
</ul>
</div>
<div class="col-md-6" style="min-height:150px;">
<div class="card h-100 border-0 mt-md-0 mt-2" style="background-color:#fff2ed;background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
</div>
</div>
</div>
</div>
<!---------------- END PERSONALITY ------------------>
<!---------------- STORY ------------------>
<!-- header -->
<div class="card mb-2" style="background-color:#bed8d1;" role="tab" id="heading1">
<div class="font-italic p-1 px-2 w-100 justify-content-between" style="color:#676979;">
<div class="mb-0"><i class="fa-solid fa-book fa-xs"></i></div>
<p class="mb-0" style="font-weight:bold;">story</p>
<a class="btn p-0 w-100 h-100" data-toggle="collapse" data-parent="#accordion" href="#accordion3" aria-expanded="true" aria-controls="accordion3" style="position: absolute; top:0px; left: 0px"></a>
</div>
</div>
<div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordion">
<div class="card-body p-2 mb-2" style="height:315px; overflow-y:auto;">
<!--- QUOTE --->
<div class="justify-content-between text-center pt-2 px-3">
<span class="align-self-start" style="color:#fa9d9c;"><i class="fa-solid fa-quote-left"></i></span>
<span class="mx-3" style="color:#fac8c6;"><em>
Testing, testing... one, two, three...
</em></span>
<span class="align-self-end" style="color:#fa9d9c;"><i class="fa-solid fa-quote-right"></i></span>
</div>
<!-- divider -->
<div><hr></div>
<!--- STORY BULLETS --->
<ul style="color:#fac8c6;">
<!-- you can add more bullets with <li>. -->
<li>put the main beats of your story here.</li>
<li>if you don't have much to say in long form, you can remove the sections below, and keep it to the bullets!</li>
<li>bullet</li>
<li>bullet</li>
</ul>
<!--- STORY IMAGE --->
<div class="card border-0 m-2" style="background-color:#fff2ed;height:200px;background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
<!-- STORY BLURB -->
<!-- you can add new paragraphs/add a new line with <p> -->
<div class="m-1 mt-3" style="color:#fac8c6;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
</div>
<!-- SECTION HEADER -->
<div class="pt-2" style="font-weight:bold;font-style:italic;color:#fa9d9c;"><i class="fa-regular fa-bookmark fa-sm"></i> SECTION TITLE</div>
<!-- SECTION CONTENT -->
<!-- you can add new paragraphs/add a new line with <p> -->
<div class="m-1" style="color:#fac8c6;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
</div>
<!-- SECTION HEADER -->
<div class="pt-2" style="font-weight:bold;font-style:italic;color:#fa9d9c;"><i class="fa-regular fa-bookmark fa-sm"></i> SECTION TITLE</div>
<!-- SECTION CONTENT -->
<!-- you can add new paragraphs/add a new line with <p> -->
<div class="m-1" style="color:#fac8c6;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.</p>
</div>
<!----------
You can add more sections using the following code, and pasting it above:
<div class="pt-2" style="font-weight:bold;font-style:italic;"><i class="fa-regular fa-bookmark fa-sm"></i> SECTION TITLE</div>
<div class="m-1 style="color:#fac8c6;"">
<p>text</p>
<p>more text</p>
</div>
----------->
</div>
</div>
<!---------------- END STORY ------------------>
<!---------------- DESIGN ------------------>
<!-- header -->
<div class="card mb-2" style="background-color:#bed8d1;" role="tab" id="heading1">
<div class="font-italic p-1 px-2 w-100 justify-content-between" style="color:#676979;">
<div class="mb-0"><i class="fa-solid fa-pencil fa-xs"></i></div>
<p class="mb-0" style="font-weight:bold;">design</p>
<a class="btn p-0 w-100 h-100" data-toggle="collapse" data-parent="#accordion" href="#accordion4" aria-expanded="true" aria-controls="accordion4" style="position: absolute; top:0px; left: 0px"></a>
</div>
</div>
<div id="accordion4" class="collapse" role="tabpanel" aria-labelledby="heading4"
data-parent="#accordion">
<div class="card-body p-2 mb-2" style="height:315px; overflow-y:auto;">
<!-- DESIGN IMAGE -->
<img src="
IMGHERE
" class="rounded w-100 mb-2" style="">
<!-- DESIGN HEADER -->
<div class="py-2" style="font-weight:bold;font-style:italic;color:#fa9d9c;"><i class="fa-solid fa-pen-fancy fa-sm"></i> DESIGN NOTES</div>
<!--- DESIGN BULLETS --->
<ul style="color:#fac8c6;">
<!-- you can copy and paste more bullets. -->
<li>bullet</li>
<li>bullet</li>
<li>bullet</li>
</ul>
<!-- INVENTORY HEADER -->
<div class="py-2" style="font-weight:bold;font-style:italic;color:#fa9d9c;"><i class="fa-solid fa-suitcase fa-sm"></i> INVENTORY</div>
<div class="row no-gutters" style="color:#fac8c6;">
<!-- INVENTORY ITEM -->
<div class="col-lg-3 col-md-4 col-6 mx-auto p-2" style="">
<img src="
IMGHERE
" class="rounded w-100" style="">
<div class="text-center pt-1">
item name
</div>
</div>
<!-- INVENTORY ITEM -->
<div class="col-lg-3 col-md-4 col-6 mx-auto p-2" style="">
<img src="
IMGHERE
" class="rounded w-100" style="">
<div class="text-center pt-1">
item name
</div>
</div>
<!-- INVENTORY ITEM -->
<div class="col-lg-3 col-md-4 col-6 mx-auto p-2" style="">
<img src="
IMGHERE
" class="rounded w-100" style="">
<div class="text-center pt-1">
item name
</div>
</div>
<!------------
To add more items, copy and paste the following code above here.
<div class="col-lg-3 col-md-4 col-6 mx-auto p-2" style="">
<img src="
IMGHERE
" class="rounded w-100" style="">
<div class="text-center pt-1">
item name
</div>
</div>
------------>
</div>
<!-- COMPANION HEADER -->
<div class="py-2" style="font-weight:bold;font-style:italic;color:#fa9d9c;"><i class="fa-solid fa-paw fa-sm"></i> COMPANIONS</div>
<!-- COMPANION ONE -->
<div class="px-1">
<!-- image -->
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<!-- name -->
<div style="font-weight:bold;color:#fa9d9c;">
name
</div>
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
<!-- COMPANION DIVIDER -->
<div><hr></div>
<!-- COMPANION TWO -->
<div class="px-1">
<!-- image -->
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<!-- name -->
<div style="font-weight:bold;color:#fa9d9c;">
name
</div>
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
<!---------
To add a new companion, paste the following code above this area.
<div><hr></div>
<div class="px-1">
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<div style="font-weight:bold;color:#fa9d9c;">
name
</div>
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
----------->
</div>
</div>
<!---------------- END DESIGN ------------------>
<!---------------- RELATIONSHIPS ------------------>
<!-- header -->
<div class="card" style="background-color:#bed8d1;" role="tab" id="heading1">
<div class="font-italic p-1 px-2 w-100 justify-content-between" style="color:#676979;">
<div class="mb-0"><i class="fa-solid fa-users fa-xs"></i></div>
<p class="mb-0" style="font-weight:bold;">relationships</p>
<a class="btn p-0 w-100 h-100" data-toggle="collapse" data-parent="#accordion" href="#accordion5" aria-expanded="true" aria-controls="accordion5" style="position: absolute; top:0px; left: 0px"></a>
</div>
</div>
<div id="accordion5" class="collapse" role="tabpanel" aria-labelledby="heading5"
data-parent="#accordion">
<div class="card-body p-2 my-2" style="height:307px;overflow-y:auto;">
<!--- RELATIONSHIP IMAGE --->
<div class="card border-0 m-2 mb-3" style="background-color:#fff2ed;height:200px;background-position: center; background-size:cover; background-repeat: no-repeat; background-image: url(
IMGHERE
);"></div>
<!-- RELATIONSHIP ONE -->
<div class="px-1">
<!-- image -->
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<!-- link, name, relationship, and hearts -->
<div class="row no-gutters">
<!-- info -->
<div class="col-md-6">
<div style="font-weight:bold;"><a href="
LINKHERE
" style="color:#bed8d1;" target="_BLANK">
name
</a></div>
<div class="font-italic" style="color:#fac8c6;">
relationship
</div>
</div>
<!-- hearts -->
<div class="col-md-6 text-md-right my-auto" style="color:#fa9d9c;">
<!---------
You can copy and paste the different hearts to have the arrangement of choice.
---------->
<!-- good hearts -->
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-solid fa-heart fa-sm"></i>
<!-- neutral hearts -->
<i class="fa-regular fa-heart fa-sm"></i>
<i class="fa-regular fa-heart fa-sm"></i>
<!-- bad hearts -->
<i class="fa-regular fa-heart-crack fa-sm"></i>
</div>
</div>
<!-- paragraph -->
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
<!-- RELATIONSHIP DIVIDER -->
<div><hr></div>
<!-- RELATIONSHIP TWO -->
<div class="px-1">
<!-- image -->
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<!-- link, name, relationship, and hearts -->
<div class="row no-gutters">
<!-- info -->
<div class="col-md-6">
<div style="font-weight:bold;"><a href="
LINKHERE
" style="color:#bed8d1;" target="_BLANK">
name
</a></div>
<div class="font-italic" style="color:#fac8c6;">
relationship
</div>
</div>
<!-- hearts -->
<div class="col-md-6 text-md-right my-auto" style="color:#fa9d9c;">
<!---------
You can copy and paste the different hearts to have the arrangement of choice.
---------->
<!-- good hearts -->
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-solid fa-heart fa-sm"></i>
<!-- neutral hearts -->
<i class="fa-regular fa-heart fa-sm"></i>
<i class="fa-regular fa-heart fa-sm"></i>
<!-- bad hearts -->
<i class="fa-regular fa-heart-crack fa-sm"></i>
</div>
</div>
<!-- paragraph -->
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
<!-- RELATIONSHIP DIVIDER -->
<div><hr></div>
<!-- RELATIONSHIP THREE -->
<div class="px-1">
<!-- image -->
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<!-- link, name, relationship, and hearts -->
<div class="row no-gutters">
<!-- info -->
<div class="col-md-6">
<div style="font-weight:bold;"><a href="
LINKHERE
" style="color:#bed8d1;" target="_BLANK">
name
</a></div>
<div class="font-italic" style="color:#fac8c6;">
relationship
</div>
</div>
<!-- hearts -->
<div class="col-md-6 text-md-right my-auto" style="color:#fa9d9c;">
<!---------
You can copy and paste the different hearts to have the arrangement of choice.
---------->
<!-- good hearts -->
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-solid fa-heart fa-sm"></i>
<!-- neutral hearts -->
<i class="fa-regular fa-heart fa-sm"></i>
<i class="fa-regular fa-heart fa-sm"></i>
<!-- bad hearts -->
<i class="fa-regular fa-heart-crack fa-sm"></i>
</div>
</div>
<!-- paragraph -->
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
<!--------
Use the following code to add new relationships above here.
<div><hr></div>
<div class="px-1">
<img src="
IMGHERE
" class="rounded mr-3" style="float:left; max-height:125px;">
<div class="row no-gutters">
<div class="col-md-6">
<div style="font-weight:bold;"><a href="
LINKHERE
" style="color:#bed8d1;" target="_BLANK">
name
</a></div>
<div class="font-italic" style="color:#fac8c6;">
relationship
</div>
</div>
<div class="col-md-6 text-md-right my-auto" style="color:#fa9d9c;">
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-regular fa-heart fa-sm"></i>
<i class="fa-regular fa-heart fa-sm"></i>
<i class="fa-regular fa-heart-crack fa-sm"></i>
</div>
</div>
<div style="color:#fac8c6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tempus iaculis urna id. Cras adipiscing enim eu turpis egestas pretium.
</div>
</div>
---------->
</div>
</div>
<!---------------- END RELATIONSHIPS ------------------>
</div> <!-- end accordion -->
</div> <!-- end col card -->
</div> <!-- end col-8 -->
</div> <!-- end row -->
</div> <!-- end bg card -->
<!-- CREDIT -->
<!-- DO NOT REMOVE: but feel free to move it somewhere else, where it's still visible! -->
<div class="container-fluid" style="max-width:900px;">
<div class="text-center pt-2"><span data-toggle="tooltip" title="code by iinkt"><a href="https://toyhou.se/28979547" style="color:#bed8d1;" target="_BLANK"><i class="fa-solid fa-code fa-sm"></i></a></span>
</div>
</div>
<!-- END CREDIT -->
</div>