<!--
=======================================================
50. || Our Story v2 || F2U
=======================================================
CHARACTER A COLOR == #4baece
CHARACTER B COLOR == #f06842
-->
<div class="py-4">
<div class="container p-0" style="max-width: 1200px;">
<div class="row no-gutters">
<!--
====================================================
CHARACTER A SIDE
====================================================
-->
<div class="col-12 col-lg p-2">
<div class="bg-faded d-flex flex-column" style="height: calc(100vh - 40px); position: sticky; top: 20px; border-radius: 2em; overflow: hidden;">
<!--
====================================================
CHARACTER IMAGE
====================================================
-->
<div class="flex-fill" style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
<div class="p-2 mb-2 text-white text-center" style="background-color: #4baece;"><p class="m-0 display-4">
Character Name
</p></div>
<!--
====================================================
CHARACTER BASICS
====================================================
-->
<div class="row no-gutters mb-2" style="font-size: 17px;">
<!-- PRONOUNS -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-venus-mars fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">pronouns</span>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-heartbeat fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">orientation</span>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-hourglass-end fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">age</span>
</div>
</div>
</div>
<!-- SPECIES -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-dna fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">species</span>
</div>
</div>
</div>
<!-- HEIGHT -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-ruler-vertical fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">height</span>
</div>
</div>
</div>
<!-- ZODIAC -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #4baece;">
<i class="fad fa-star-shooting fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">zodiac</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================================
CHARACTER B SIDE
====================================================
-->
<div class="col-12 col-lg p-2 order-lg-1">
<div class="bg-faded d-flex flex-column" style="height: calc(100vh - 40px); position: sticky; top: 20px; border-radius: 2em; overflow: hidden;">
<!--
====================================================
CHARACTER IMAGE
====================================================
-->
<div class="flex-fill order-lg-3" style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
<div class="p-2 mb-2 mb-lg-0 text-white text-center order-lg-2" style="background-color: #f06842;"><p class="m-0 display-4">
Character Name
</p></div>
<!--
====================================================
CHARACTER BASICS
====================================================
-->
<div class="row no-gutters mb-lg-1 mt-lg-2 order-lg-1" style="font-size: 17px;">
<!-- PRONOUNS -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-venus-mars fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">pronouns</span>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-heartbeat fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">orientation</span>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-hourglass-end fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">age</span>
</div>
</div>
</div>
<!-- SPECIES -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-dna fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">species</span>
</div>
</div>
</div>
<!-- HEIGHT -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-ruler-vertical fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">height</span>
</div>
</div>
</div>
<!-- ZODIAC -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: #f06842;">
<i class="fad fa-star-shooting fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
Content
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">zodiac</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================================
MAIN CONTENT
====================================================
-->
<div class="col-12 col-lg-5 p-2">
<div style="min-height: 2000px;">
<!--
====================================================
INTRODUCTION
====================================================
-->
<div class="p-2 text-justify">
<h1 class="text-uppercase display-4 text-center mt-4">
Introduction
</h1>
<!-- FIRST TEXT PART -->
<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>
<!-- DIVIDING IMAGE-->
<img class="d-block mx-auto px-4 py-3" style="min-width: 100px; max-width: 100%;"
src="URLHERE">
<!-- SECOND TEXT PART -->
<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>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE IF YOU WANT*
*but remember, it's just the introduction! You will have
the chance to write more in latter sections
-->
</div>
<!--
====================================================
MUTUAL IMPRESSION
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Mutual impression
</h1>
<!--
===================================================
CHARACTER A OPINION TOWARDS CHARACTER B
===================================================
-->
<div>
<h1 class="text-lowercase text-muted text-center text-lg-left mt-3" style="font-variant: small-caps; font-size: 20px;">
Character A thinks that character b is...
</h1>
<!--
===================================================
WHAT CHARACTER A THINKS ABOUT CHARACTER B
===================================================
-->
<div class="row no-gutters">
<!-- PRETTINESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Pretty
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- KINDNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Kind
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- STRENGTH VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Strong
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- CLEVERNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Clever
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- HUMOUR VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Funny
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- MANNERS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Courteous
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #4baece; width:
50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPRESSION BLOCK -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: #4baece;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character A:
</span><span class="font-italic">
Write what Character B thinks about Character A. Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Duis sollici tudin elit sed tellus blandit viverra sed eget odio. Donec accum san tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</span></p>
</div>
</div>
<!--
===================================================
CHARACTER B OPINION TOWARDS CHARACTER A
===================================================
-->
<div>
<h1 class="text-lowercase text-muted text-center text-lg-left mt-3" style="font-variant: small-caps; font-size: 20px;">
Character B thinks that character A is...
</h1>
<!--
===================================================
WHAT CHARACTER B THINKS ABOUT CHARACTER A
===================================================
-->
<div class="row no-gutters">
<!-- PRETTINESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Pretty
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- KINDNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Kind
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- STRENGTH VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Strong
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- CLEVERNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Clever
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- HUMOUR VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Funny
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- MANNERS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Courteous
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: #f06842; width:
50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPRESSION BLOCK -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: #f06842;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character B:
</span><span class="font-italic">
Write what Character B thinks about Character A. Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Duis sollici tudin elit sed tellus blandit viverra sed eget odio. Donec accum san tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</span></p>
</div>
</div>
</div>
<!--
====================================================
RELATIONSHIP DYNAMIC
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Relationship Dynamic
</h1>
<!--
=================================================
INTROVERTED == EXTROVERTED
=================================================
-->
<div>
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Introverted
</span>
<span>
Extroverted
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
THE HEART == THE BRAIN
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
The Heart
</span>
<span>
The Brain
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
AFFECTION THROUGH
WORDS == ACTIONS
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Affection through words
</span>
<span>
through actions
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
OVERPROTECTIVE == CHILL GOING
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Overprotective
</span>
<span>
Chill going
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
STUPID THINGS == CALMS OTHER ONE
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Does stupid things
</span>
<span>
Calms other one
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
FIGHTS == DIPLOMACY
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Goes into fights
</span>
<span>
Uses diplomacy
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
TACTILE == NOT TACTILE
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Tactile
</span>
<span>
Not tactile
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!-- BELOW ARE ALL THE ROMANCE DYNAMICS
You can delete these if you want to write
about non-romantic relationship
-->
<!--
=================================================
SLOWBURN == FIRST SIGHT
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Slow-burn
</span>
<span>
Love at first sight
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
DISLIKES PDA == LOVES PDA
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Dislikes <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr>
</span>
<span>
Loves <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr>
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
COOKS == CANNOT COOK
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Makes food
</span>
<span>
burns the kitchen
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
BIG SPOON == LITTLE SPOON*
*refers to how characters are likely positioned when
hugging or sleeping together, "big spoon" will be the
one hugging the "little spoon" character from back
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Big spoon
</span>
<span>
Little spoon
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
BORROWS CLOTHES == LENDS CLOTHES
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
borrows clothes
</span>
<span>
lends clothes
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
WAS IN RELATIONSHIP == WASN'T
=================================================
-->
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Was in relationship(s)
</span>
<span>
Has no experience
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
45%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #4baece;"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
55%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: #f06842;"></i>
</div>
</div>
</div>
<!--
=================================================
DUAL ICON STATS
=================================================
-->
<div class="row no-gutters justify-content-around mt-4">
<!--
=================================================
COMFORT
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
<p class="text-center mb-n2" style="color: #4baece; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<!-- CHARACTER B STATS -->
<p class="text-center" style="color: #f06842; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Comfort
</h1>
</div>
<!--
=================================================
TRUST
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
<p class="text-center mb-n2" style="color: #4baece; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<!-- CHARACTER B STATS -->
<p class="text-center" style="color: #f06842; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Trust
</h1>
</div>
<!--
=================================================
AFFECTION
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
<p class="text-center mb-n2" style="color: #4baece; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<!-- CHARACTER B STATS -->
<p class="text-center" style="color: #f06842; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="far fa-diamond"></i>
<i class="far fa-diamond"></i>
</p>
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Affection
</h1>
</div>
<!--
=================================================
DESIRE
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
<p class="text-center mb-n2" style="color: #4baece; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</p>
<!-- CHARACTER B STATS -->
<p class="text-center" style="color: #f06842; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</p>
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Desire
</h1>
</div>
</div>
</div>
<!--
====================================================
VIBES/AESTHETIC
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Aesthetic
</h1>
<div class="row no-gutters">
<!-- UPPER LONG IMAGE == Something that vibes with Character A -->
<div class="col-8 p-2">
<div style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- UPPER SMALL IMAGE == Something that vibes with Character B -->
<div class="col-4 p-2">
<div style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- RELATIONSHIP QUOTE BLOCK -->
<div class="col-12 p-2">
<div class="bg-faded p-4 text-center font-italic" style="border-radius: 1em;"><i class="fad fa-quote-left fa-2x" style="color: #4baece; position: absolute; left: 15px; top: 10px;"></i><span>
Put a quote that vibes with the relationship here. Could be a regular quote, a dialogue line or something from a song that suits them both.
</span><i class="fad fa-quote-right fa-2x" style="color: #f06842; position: absolute; right: 15px; bottom: 10px;"></i></div>
</div>
<!-- LOWER SMALL IMAGE == Something that vibes with Character A -->
<div class="col-4 p-2">
<div style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- LOWER LONG IMAGE == Something that vibes with Character B -->
<div class="col-8 p-2">
<div style="
background-image: url('URLHERE');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
</div>
</div>
<!--
====================================================
STORY
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Story
</h1>
<!--
=================================================
STORY BLOCK
=================================================
-->
<div class="text-justify mt-4">
<h1 class="text-lowercase text-muted" style="font-variant: small-caps;"><i class="fad fa-bookmark"></i>
Header
</h1>
<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.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
<!-- CHARACTER A COMMENTARY -->
<div class="p-3 mt-3 text-white" style="border-radius: 1em; background-color: #4baece;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character A:
</span><span class="font-italic">
Write a short commentary from Character A about this event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></p>
</div>
<!-- CHARACTER B COMMENTARY -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: #f06842;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character B:
</span><span class="font-italic">
Write a short commentary from Character B about this event. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></p>
</div>
</div>
<!--
=================================================
STORY BLOCK
=================================================
-->
<div class="text-justify mt-4">
<h1 class="text-lowercase text-muted" style="font-variant: small-caps;"><i class="fad fa-bookmark"></i>
Header
</h1>
<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.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
<!-- CHARACTER A COMMENTARY -->
<div class="p-3 mt-3 text-white" style="border-radius: 1em; background-color: #4baece;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character A:
</span><span class="font-italic">
Write a short commentary from Character A about this event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></p>
</div>
<!-- CHARACTER B COMMENTARY -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: #f06842;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character B:
</span><span class="font-italic">
Write a short commentary from Character B about this event. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></p>
</div>
</div>
<!--
=================================================
STORY BLOCK
=================================================
-->
<div class="text-justify mt-4">
<h1 class="text-lowercase text-muted" style="font-variant: small-caps;"><i class="fad fa-bookmark"></i>
Header
</h1>
<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.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
<!-- CHARACTER A COMMENTARY -->
<div class="p-3 mt-3 text-white" style="border-radius: 1em; background-color: #4baece;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character A:
</span><span class="font-italic">
Write a short commentary from Character A about this event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></p>
</div>
<!-- CHARACTER B COMMENTARY -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: #f06842;">
<p><span class="text-uppercase" style="font-weight: 600;">
Character B:
</span><span class="font-italic">
Write a short commentary from Character B about this event. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></p>
</div>
</div>
<!-- YOU CAN ADD MORE STORY BLOCKS ABOVE -->
</div>
<!--
====================================================
TRIVIA
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Trivia
</h1>
<div class="bg-faded py-4" style="border-radius: 1em;">
<ul class="list-group col pl-4 pl-lg-5">
<!-- "A" COLOR LIST ITEM -->
<li class="pb-2" style="color: #4baece;"><span class="text-body">
Write some facts about them or their relationship.
</span></li>
<!-- "B" COLOR LIST ITEM -->
<li class="pb-2" style="color: #f06842;"><span class="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- "A" COLOR LIST ITEM -->
<li class="pb-2" style="color: #4baece;"><span class="text-body">
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</span></li>
<!-- "B" COLOR LIST ITEM -->
<li class="pb-2" style="color: #f06842;"><span class="text-body">
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span></li>
<!-- "A" COLOR LIST ITEM -->
<li class="pb-2" style="color: #4baece;"><span class="text-body">
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</span></li>
<!-- "B" COLOR LIST ITEM -->
<li class="pb-2" style="color: #f06842;"><span class="text-body">
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</span></li>
<!-- YOU CAN ADD MORE FACTS ABOVE
It is recommended to use one color after another for better look!! -->
</ul>
</div>
</div>
<!--
====================================================
MUTUAL RELATIONSHIPS
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Mutual relations
</h1>
<!--
====================================================
MUTUAL RELATIONSHIP BLOCK
====================================================
-->
<div class="mt-4">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD "LINKHERE"-->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center;" class="my-2 d-block mx-auto">
<h1 class="text-lowercase text-center" style="font-variant: small-caps;"><a class="text-muted" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</h1>
<!--
=========================================
RELATIONSHIP BADGES
=========================================
-->
<div class="row no-gutters justify-content-center">
<!-- RELATIONSHIP WITH CHARACTER A-->
<div class="col-12 col-lg-6 justify-content-end pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #4baece; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
<!-- RELATIONSHIP WITH CHARACTER B-->
<div class="col-12 col-lg-6 justify-content-start pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #f06842; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
</div>
<!-- DESCRIPTION OF CHARACTER A AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pl-2" style="border-left: solid 4px #4baece;">
<p>
Relationship between Character A and this character. 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>
<!-- DESCRIPTION OF CHARACTER B AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pr-2" style="border-right: solid 4px #f06842;">
<p>
Relationship between Character B and this character. 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>
</div>
<!-- ============= BLOCK END =================== -->
<!--
====================================================
MUTUAL RELATIONSHIP BLOCK
====================================================
-->
<div class="mt-4">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD "LINKHERE"-->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center;" class="my-2 d-block mx-auto">
<h1 class="text-lowercase text-center" style="font-variant: small-caps;"><a class="text-muted" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</h1>
<!--
=========================================
RELATIONSHIP BADGES
=========================================
-->
<div class="row no-gutters justify-content-center">
<!-- RELATIONSHIP WITH CHARACTER A-->
<div class="col-12 col-lg-6 justify-content-end pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #4baece; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
<!-- RELATIONSHIP WITH CHARACTER B-->
<div class="col-12 col-lg-6 justify-content-start pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #f06842; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
</div>
<!-- DESCRIPTION OF CHARACTER A AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pl-2" style="border-left: solid 4px #4baece;">
<p>
Relationship between Character A and this character. 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>
<!-- DESCRIPTION OF CHARACTER B AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pr-2" style="border-right: solid 4px #f06842;">
<p>
Relationship between Character B and this character. 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>
</div>
<!-- ============= BLOCK END =================== -->
<!--
====================================================
MUTUAL RELATIONSHIP BLOCK
====================================================
-->
<div class="mt-4">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD "LINKHERE"-->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center;" class="my-2 d-block mx-auto">
<h1 class="text-lowercase text-center" style="font-variant: small-caps;"><a class="text-muted" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</h1>
<!--
=========================================
RELATIONSHIP BADGES
=========================================
-->
<div class="row no-gutters justify-content-center">
<!-- RELATIONSHIP WITH CHARACTER A-->
<div class="col-12 col-lg-6 justify-content-end pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #4baece; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
<!-- RELATIONSHIP WITH CHARACTER B-->
<div class="col-12 col-lg-6 justify-content-start pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: #f06842; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
relationship
</div>
</div>
</div>
<!-- DESCRIPTION OF CHARACTER A AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pl-2" style="border-left: solid 4px #4baece;">
<p>
Relationship between Character A and this character. 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>
<!-- DESCRIPTION OF CHARACTER B AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pr-2" style="border-right: solid 4px #f06842;">
<p>
Relationship between Character B and this character. 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>
</div>
<!-- ============= BLOCK END =================== -->
<!-- YOU CAN ADD MORE MUTUAL RELATIONSHIP BLOCKS ABOVE -->
</div>
<!-- CODE CREDIT == DO NOT REMOVE -->
<div class="row no-gutters">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto px-2"><div class="row no-gutters">
<a href="https://twitter.com/gibb_arts/status/1158110826169020418" title="Dynamic inspired by Gibslythe" class="tooltipster m-1" style="color: #4baece;"><i class="fas fa-sliders-simple"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster m-1" style="color: #f06842;"><i class="fas fa-code"></i></a>
</div></div>
<div class="col"><hr class="mb-0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=======================================================
50. || Our Story v2 || F2U
=======================================================
CHARACTER A COLOR == {{c!Character A accent!}}
CHARACTER B COLOR == {{c!Character B accent!}}
-->
<div class="py-4">
<div class="container p-0" style="max-width: 1200px;">
<div class="row no-gutters">
<!--
====================================================
CHARACTER A SIDE
====================================================
-->
<div class="col-12 col-lg p-2">
<div class="bg-faded d-flex flex-column" style="height: calc(100vh - 40px); position: sticky; top: 20px; border-radius: 2em; overflow: hidden;">
<!--
====================================================
CHARACTER IMAGE
====================================================
-->
<div class="flex-fill" style="
background-image: url('{{u!Character A image URL!}}');
background-size: cover;
background-position: center;"></div>
<div class="p-2 mb-2 text-white text-center" style="background-color: {{c!Character A accent!}};"><p class="m-0 display-4">
{{!Character A name!}}
</p></div>
<!--
====================================================
CHARACTER BASICS
====================================================
-->
{{%%Character A basics%
<div class="row no-gutters mb-2" style="font-size: 17px;">
<!-- PRONOUNS -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-venus-mars fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%pronouns%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">pronouns</span>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-heartbeat fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%orientation%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">orientation</span>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-hourglass-end fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%age%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">age</span>
</div>
</div>
</div>
<!-- SPECIES -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-dna fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%species%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">species</span>
</div>
</div>
</div>
<!-- HEIGHT -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-ruler-vertical fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%height%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">height</span>
</div>
</div>
</div>
<!-- ZODIAC -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character A accent!}};">
<i class="fad fa-star-shooting fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%zodiac%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">zodiac</span>
</div>
</div>
</div>
</div>
%end%}}
</div>
</div>
<!--
====================================================
CHARACTER B SIDE
====================================================
-->
<div class="col-12 col-lg p-2 order-lg-1">
<div class="bg-faded d-flex flex-column" style="height: calc(100vh - 40px); position: sticky; top: 20px; border-radius: 2em; overflow: hidden;">
<!--
====================================================
CHARACTER IMAGE
====================================================
-->
<div class="flex-fill order-lg-3" style="
background-image: url('{{u!Character B image URL!}}');
background-size: cover;
background-position: center;"></div>
<div class="p-2 mb-2 mb-lg-0 text-white text-center order-lg-2" style="background-color: {{c!Character B accent!}};"><p class="m-0 display-4">
{{!Character B name!}}
</p></div>
<!--
====================================================
CHARACTER BASICS
====================================================
-->
{{%%Character B basics%
<div class="row no-gutters mb-lg-1 mt-lg-2 order-lg-1" style="font-size: 17px;">
<!-- PRONOUNS -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-venus-mars fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%pronouns%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">pronouns</span>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-heartbeat fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%orientation%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">orientation</span>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-hourglass-end fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%age%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">age</span>
</div>
</div>
</div>
<!-- SPECIES -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-dna fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%species%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">species</span>
</div>
</div>
</div>
<!-- HEIGHT -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-ruler-vertical fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%height%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">height</span>
</div>
</div>
</div>
<!-- ZODIAC -->
<div class="col-6 px-3 py-2">
<div class="row no-gutters">
<div class="col-auto pr-2" style="color: {{c!Character B accent!}};">
<i class="fad fa-star-shooting fa-2x fa-fw"></i>
</div>
<div class="col">
<p style="margin-bottom: -13px;">
{{%zodiac%}}
</p>
<span class="text-lowercase small text-muted" style="font-variant: small-caps;">zodiac</span>
</div>
</div>
</div>
</div>
%end%}}
</div>
</div>
<!--
====================================================
MAIN CONTENT
====================================================
-->
<div class="col-12 col-lg-5 p-2">
<div style="min-height: 2000px;">
<!--
====================================================
INTRODUCTION
====================================================
-->
<div class="p-2 text-justify">
<h1 class="text-uppercase display-4 text-center mt-4">
Introduction
</h1>
<!-- FIRST TEXT PART -->
<p>
{{l!1st introduction part!}}
</p>
<!-- DIVIDING IMAGE-->
<img class="d-block mx-auto px-4 py-3" style="min-width: 100px; max-width: 100%;"
src="{{u!dividing image url!}}">
<!-- SECOND TEXT PART -->
<p>
{{l!2nd introduction part!}}
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE IF YOU WANT*
*but remember, it's just the introduction! You will have
the chance to write more in latter sections
-->
</div>
<!--
====================================================
MUTUAL IMPRESSION
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Mutual impression
</h1>
<!--
===================================================
CHARACTER A OPINION TOWARDS CHARACTER B
===================================================
-->
<div>
<h1 class="text-lowercase text-muted text-center text-lg-left mt-3" style="font-variant: small-caps; font-size: 20px;">
{{!Character A name!}} thinks that {{!Character B name!}} is...
</h1>
<!--
===================================================
WHAT CHARACTER A THINKS ABOUT CHARACTER B
===================================================
-->
{{%%Char A rating of Char B%
<div class="row no-gutters">
<!-- PRETTINESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Pretty
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%prettiness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- KINDNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Kind
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%kindness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- STRENGTH VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Strong
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%strength 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- CLEVERNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Clever
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%cleverness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- HUMOUR VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Funny
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%humour 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- MANNERS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Courteous
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character A accent!}}; width:
{{%courtesy 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPRESSION BLOCK -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: {{c!Character A accent!}};">
<p><span class="text-uppercase" style="font-weight: 600;">
{{!Character A name!}}:
</span><span class="font-italic">
{{l%impression%}}
</span></p>
</div>
%end%}}
</div>
<!--
===================================================
CHARACTER B OPINION TOWARDS CHARACTER A
===================================================
-->
<div>
<h1 class="text-lowercase text-muted text-center text-lg-left mt-3" style="font-variant: small-caps; font-size: 20px;">
{{!Character B name!}} thinks that {{!Character A name!}} is...
</h1>
<!--
===================================================
WHAT CHARACTER B THINKS ABOUT CHARACTER A
===================================================
-->
{{%%Char B rating of Char A%
<div class="row no-gutters">
<!-- PRETTINESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Pretty
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%prettiness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- KINDNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Kind
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%kindness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- STRENGTH VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Strong
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%strength 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- CLEVERNESS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Clever
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%cleverness 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- HUMOUR VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Funny
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%humour 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
<!-- MANNERS VALUE -->
<div class="col-12 col-lg-6 px-2">
<div class="row no-gutters">
<div class="col-4 p-1"><span>
Courteous
</span></div>
<div class="col p-1 align-items-center">
<div class="progress w-100" style="height: 8px;">
<!-- PROGRESS BAR == Change "50%" to 1-100% -->
<div class="progress-bar" style="background-color: {{c!Character B accent!}}; width:
{{%courtesy 1-100%}}%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPRESSION BLOCK -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: {{c!Character B accent!}};">
<p><span class="text-uppercase" style="font-weight: 600;">
{{!Character B name!}}:
</span><span class="font-italic">
{{l%impression%}}
</span></p>
</div>
%end%}}
</div>
</div>
<!--
====================================================
RELATIONSHIP DYNAMIC
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Relationship Dynamic
</h1>
<!--
=================================================
INTROVERTED == EXTROVERTED
=================================================
-->
{{%%Introverted - Extroverted%
<div>
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Introverted
</span>
<span>
Extroverted
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
THE HEART == THE BRAIN
=================================================
-->
{{%%The Heart - The Brain%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
The Heart
</span>
<span>
The Brain
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
AFFECTION THROUGH
WORDS == ACTIONS
=================================================
-->
{{%%Words - Actions%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Affection through words
</span>
<span>
through actions
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
OVERPROTECTIVE == CHILL GOING
=================================================
-->
{{%%Protective - Chill%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Overprotective
</span>
<span>
Chill going
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
STUPID THINGS == CALMS OTHER ONE
=================================================
-->
{{%%Does things - Calms them%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Does stupid things
</span>
<span>
Calms other one
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
FIGHTS == DIPLOMACY
=================================================
-->
{{%%Fights - Diplomacy%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Goes into fights
</span>
<span>
Uses diplomacy
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!--
=================================================
TACTILE == NOT TACTILE
=================================================
-->
{{%%Tactile - Not tactile%
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Tactile
</span>
<span>
Not tactile
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-diamond" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
%end%}}
<!-- BELOW ARE ALL THE ROMANCE DYNAMICS
You can delete these if you want to write
about non-romantic relationship
-->
<!--
=================================================
SLOWBURN == FIRST SIGHT
=================================================
-->
{{?Slowburn - First sight?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Slow-burn
</span>
<span>
Love at first sight
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
DISLIKES PDA == LOVES PDA
=================================================
-->
{{?PDA - No PDA?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Dislikes <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr>
</span>
<span>
Loves <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr>
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
COOKS == CANNOT COOK
=================================================
-->
{{?Cooks - Does not?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Makes food
</span>
<span>
burns the kitchen
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
BIG SPOON == LITTLE SPOON*
*refers to how characters are likely positioned when
hugging or sleeping together, "big spoon" will be the
one hugging the "little spoon" character from back
=================================================
-->
{{?Big spoon - Little?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Big spoon
</span>
<span>
Little spoon
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
BORROWS CLOTHES == LENDS CLOTHES
=================================================
-->
{{?Borrows clothes - Lends them?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
borrows clothes
</span>
<span>
lends clothes
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
WAS IN RELATIONSHIP == WASN'T
=================================================
-->
{{?Was in relationship - Was not?
<div class="mt-2">
<div class="row no-gutters justify-content-between text-muted text-lowercase" style="font-variant: small-caps; font-weight: 600;">
<span>
Was in relationship(s)
</span>
<span>
Has no experience
</span>
</div>
<div class="progress rounded my-1 bg-faded" style="height: 5px; overflow: visible; position: relative;">
<!-- CHARACTER A
PROGRESS BAR == Change 45% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char A 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character A accent!}};"></i>
</div>
<!-- CHARACTER B
PROGRESS BAR == Change 55% to 1-100% -->
<div class="progress-bar justify-content-end bg-transparent" style="position: absolute; height: 8px; width:
{{%Char B 1-100%}}%
;">
<i class="fas fa-heart" style="margin-right: -7px; margin-top: -4px; font-size: 14px; color: {{c!Character B accent!}};"></i>
</div>
</div>
</div>
?end?}}
<!--
=================================================
DUAL ICON STATS
=================================================
-->
<div class="row no-gutters justify-content-around mt-4">
<!--
=================================================
COMFORT
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
{{%%Char A comfort%
<p class="text-center mb-n2" style="color: {{c!Character A accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<!-- CHARACTER B STATS -->
{{%%Char B comfort%
<p class="text-center" style="color: {{c!Character B accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Comfort
</h1>
</div>
<!--
=================================================
TRUST
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
{{%%Char A trust%
<p class="text-center mb-n2" style="color: {{c!Character A accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<!-- CHARACTER B STATS -->
{{%%Char B trust%
<p class="text-center" style="color: {{c!Character B accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Trust
</h1>
</div>
<!--
=================================================
AFFECTION
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
{{%%Char A affection%
<p class="text-center mb-n2" style="color: {{c!Character A accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<!-- CHARACTER B STATS -->
{{%%Char B affection%
<p class="text-center" style="color: {{c!Character B accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Affection
</h1>
</div>
<!--
=================================================
DESIRE
=================================================
-->
<div class="col-12 col-lg-6 p-3">
<!-- CHARACTER A STATS -->
{{%%Char A desire%
<p class="text-center mb-n2" style="color: {{c!Character A accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<!-- CHARACTER B STATS -->
{{%%Char B desire%
<p class="text-center" style="color: {{c!Character B accent!}}; font-size: 25px;">
<!-- ICONS == Use "fas" for filled, "far" for empty-->
<i class="{{%1st (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%2nd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%3rd (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%4th (FAS or FAR in lowercase)%}} fa-diamond"></i>
<i class="{{%5th (FAS or FAR in lowercase)%}} fa-diamond"></i>
</p>
%end%}}
<h1 class="text-uppercase text-center text-muted" style="font-weight: 400; font-size: 18px;">
Desire
</h1>
</div>
</div>
</div>
<!--
====================================================
VIBES/AESTHETIC
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Aesthetic
</h1>
{{%%Aesthetic%
<div class="row no-gutters">
<!-- UPPER LONG IMAGE == Something that vibes with Character A -->
<div class="col-8 p-2">
<div style="
background-image: url('{{u%Char A long mood image%}}');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- UPPER SMALL IMAGE == Something that vibes with Character B -->
<div class="col-4 p-2">
<div style="
background-image: url('{{u%Char B short mood image%}}');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- RELATIONSHIP QUOTE BLOCK -->
<div class="col-12 p-2">
<div class="bg-faded p-4 text-center font-italic" style="border-radius: 1em;"><i class="fad fa-quote-left fa-2x" style="color: {{c!Character A accent!}}; position: absolute; left: 15px; top: 10px;"></i><span>
{{%Quote%}}
</span><i class="fad fa-quote-right fa-2x" style="color: {{c!Character B accent!}}; position: absolute; right: 15px; bottom: 10px;"></i></div>
</div>
<!-- LOWER SMALL IMAGE == Something that vibes with Character A -->
<div class="col-4 p-2">
<div style="
background-image: url('{{u%Char A short mood image%}}');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
<!-- LOWER LONG IMAGE == Something that vibes with Character B -->
<div class="col-8 p-2">
<div style="
background-image: url('{{u%Char B long mood image%}}');
background-size: cover;
background-position: center;
min-height: 120px; border-radius: 1em;"></div>
</div>
</div>
%end%}}
</div>
<!--
====================================================
STORY
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Story
</h1>
<!--
=================================================
STORY BLOCK
=================================================
-->
{{%Story blocks%
<div class="text-justify mt-4">
<h1 class="text-lowercase text-muted" style="font-variant: small-caps;"><i class="fad fa-bookmark"></i>
{{%Header%}}
</h1>
{{%Story text%
<p>
{{l%paragraph item%}}
</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
<!-- CHARACTER A COMMENTARY -->
<div class="p-3 mt-3 text-white" style="border-radius: 1em; background-color: {{c!Character A accent!}};">
<p><span class="text-uppercase" style="font-weight: 600;">
{{!Character A name!}}:
</span><span class="font-italic">
{{l%Char A comment%}}
</span></p>
</div>
<!-- CHARACTER B COMMENTARY -->
<div class="p-3 mt-2 text-white" style="border-radius: 1em; background-color: {{c!Character B accent!}};">
<p><span class="text-uppercase" style="font-weight: 600;">
{{!Character B name!}}:
</span><span class="font-italic">
{{l%Char B comment%}}
</span></p>
</div>
</div>
%end%}}
<!-- YOU CAN ADD MORE STORY BLOCKS ABOVE -->
</div>
<!--
====================================================
TRIVIA
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Trivia
</h1>
<div class="bg-faded py-4" style="border-radius: 1em;">
<ul class="list-group col pl-4 pl-lg-5">
{{%Trivia section%
<!-- "A" COLOR LIST ITEM -->
<li class="pb-2" style="color: {{c!Character A accent!}};"><span class="text-body">
{{%A colored bullet point%}}
</span></li>
<!-- "B" COLOR LIST ITEM -->
<li class="pb-2" style="color: {{c!Character B accent!}};"><span class="text-body">
{{%B colored bullet point%}}
</span></li>
%end%}}
<!-- YOU CAN ADD MORE FACTS ABOVE
It is recommended to use one color after another for better look!! -->
</ul>
</div>
</div>
<!--
====================================================
MUTUAL RELATIONSHIPS
====================================================
-->
<div class="p-2">
<h1 class="text-uppercase display-4 text-center mt-4">
Mutual relations
</h1>
<!--
====================================================
MUTUAL RELATIONSHIP BLOCK
====================================================
-->
{{%Mutual relations%
<div class="mt-4">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD "LINKHERE"-->
<img src="{{u%Character C image url%}}"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center;" class="my-2 d-block mx-auto">
<h1 class="text-lowercase text-center" style="font-variant: small-caps;"><a class="text-muted" target="_BLANK"
href="{{%Link to profile%}}">
{{%Name%}}
</a>
</h1>
<!--
=========================================
RELATIONSHIP BADGES
=========================================
-->
<div class="row no-gutters justify-content-center">
<!-- RELATIONSHIP WITH CHARACTER A-->
<div class="col-12 col-lg-6 justify-content-end pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: {{c!Character A accent!}}; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
{{%relation with A%}}
</div>
</div>
<!-- RELATIONSHIP WITH CHARACTER B-->
<div class="col-12 col-lg-6 justify-content-start pb-1 pb-lg-0">
<div class="text-white px-2 text-lowercase mx-auto mx-lg-1" style="background-color: {{c!Character B accent!}}; border-radius: .6em; font-weight: 600; font-variant: small-caps; padding-top: 2px; padding-bottom: 2px;">
{{%relation with B%}}
</div>
</div>
</div>
<!-- DESCRIPTION OF CHARACTER A AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pl-2" style="border-left: solid 4px {{c!Character A accent!}};">
<p>
{{l%Char A relationship with C%}}
</p>
</div>
<!-- DESCRIPTION OF CHARACTER B AND MUTUAL CHARACTER RELATIONSHIP -->
<div class="text-justify mt-2 pr-2" style="border-right: solid 4px {{c!Character B accent!}};">
<p>
{{l%Char B relationship with C%}}
</p>
</div>
</div>
%end%}}
<!-- ============= BLOCK END =================== -->
<!-- YOU CAN ADD MORE MUTUAL RELATIONSHIP BLOCKS ABOVE -->
</div>
<!-- CODE CREDIT == DO NOT REMOVE -->
<div class="row no-gutters">
<div class="col"><hr class="mb-0"></div>
<div class="col-auto px-2"><div class="row no-gutters">
<a href="https://twitter.com/gibb_arts/status/1158110826169020418" title="Dynamic inspired by Gibslythe" class="tooltipster m-1" style="color: {{c!Character A accent!}};"><i class="fas fa-sliders-simple"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster m-1" style="color: {{c!Character B accent!}};"><i class="fas fa-code"></i></a>
</div></div>
<div class="col"><hr class="mb-0"></div>
</div>
</div>
</div>
</div>
</div>
</div>