Profile
<!-- THIS CODE USES THEME COLORS + CUSTOM ACCENTS
7. || Our Story || F2U
You can use https://th.circlejourney.net/ for editing the basics
of this profile like character names (and icons if it's the version
of this code with different character icons for sliders)
Below are the name placeholders you can SELECT and replace by
using Crl+F ==> + ==> Write your character name below ==> Click "All"
Don't forget to click "Aa" option before replacing so it'll be
case sensitive!
==============================
Character1
Character2
==============================
Below are the character accent colors you can SELECT and replace by
using Crl+F ==> + ==> Write your hex code below ==> Click "All"
==============================
CHAR1 ACCENT == #6296E1
CHAR2 ACCENT == #FE9E64
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container p-0" style="max-width: 1400px;">
<div class="row no-gutters">
<!--
=======================================
LEFT CHARACTER CARD
=======================================
-->
<div class="col-12 col-lg mb-3 mb-lg-0">
<div class="card border-0 m-1 bg-faded" style="border-radius: 2em; height: 600px; position: sticky; top: 120px; overflow: hidden;">
<div class="tab-content h-100">
<!--
==============================
PORTRAIT TAB
==============================
-->
<div class="tab-pane fade in active show h-100" id="ART1">
<!-- CHARACTER2 IMAGE -- insert your link instead of "LINKHERE" -->
<div class="h-100" style="
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
==============================
CHARACTER TAB
==============================
-->
<div class="tab-pane fade" id="CHAR1">
<div style="background: #6296E1;">
<p class="text-center text-white pt-2 pb-2" style="font-size: 22px; font-weight: 300;">Basic info</p>
</div>
<div class="col p-0 mt-4" style="height: 427px; overflow: auto; font-size: 18px;">
<!-- AGE -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-calendar fa-fw fa-2x" style="color: #6296E1;"></i>
Age
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- GENDER -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-venus-mars fa-fw fa-2x" style="color: #6296E1;"></i>
Gender
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- ORIENTATION -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-heartbeat fa-fw fa-2x" style="color: #6296E1;"></i>
S.O.
</span>
<span class="mr-0 mr-lg-4 text-w">
Content
</span>
</div>
<!-- DOB -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-birthday-cake fa-fw fa-2x" style="color: #6296E1;"></i>
DoB
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- SIGN -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-stars fa-fw fa-2x" style="color: #6296E1;"></i>
Sign
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- ROLE -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-ruler-vertical fa-fw fa-2x" style="color: #6296E1;"></i>
Height
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
</div>
<div class="bg-dark" style="height: 125px;"></div>
</div>
<!--
==============================
CHARACTER TAB
==============================
-->
<div class="tab-pane fade" id="INFO1">
<div style="background: #6296E1;">
<p class="text-center text-white pt-2 pb-2" style="font-size: 22px; font-weight: 300;">Feelings towards Character2</p>
</div>
<div class="col p-0" style="height: 427px; overflow: auto;">
<!--
==============================
SLIDERS
Change "50%" value ONLY!
You can set it to 0-100 according
to the character's feelings
Less % -- slides to left
More % -- slides to right
==============================
-->
<!-- TRUST == DISTRUST -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Distrust</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Trust</p>
</div>
</div>
<!-- RESPECT == DESPISE-->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Disrespect</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Respect</p>
</div>
</div>
<!-- CHERISH == NEGLECT -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Neglect</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Cherish</p>
</div>
</div>
<!-- EMPATHY == DISGUST -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Disgust</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Empathy</p>
</div>
</div>
<!-- RELAXED == NERVOUS -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Nervous</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Relaxed</p>
</div>
</div>
<!-- CARING == COLD -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Cold</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #6296E1;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Caring</p>
</div>
</div>
<div class="col p-0 pb-1 pt-1">
<p class="text-center pt-2 pb-1" style="font-size: 22px; font-weight: 300;">
Current relationship
</p>
<div class="bg-dark ml-2 mr-2">
<p class="text-center text-white pt-2 pb-2" style="font-size: 16px; font-weight: 300;">
relationship
</p>
</div>
</div>
<div class="col p-0">
<p class="text-center pt-2 pb-1" style="font-size: 22px; font-weight: 300;">
Desired relationship
</p>
<div class="bg-dark ml-2 mr-2">
<p class="text-center text-white pt-2 pb-2" style="font-size: 16px; font-weight: 300;">
relationship
</p>
</div>
</div>
</div>
<div class="bg-dark" style="height: 125px;"></div>
</div>
</div>
<!--
==============================
CHARACTER NAME + NAVS
==============================
-->
<div class="col p-0" style="position: absolute; bottom: 0px;">
<div class="mb-2" style="background: #6296E1;">
<p class="text-center pt-2 pb-2" style="font-size: 28px; font-weight: 300;"><a class="text-white"
href="LINK_HERE">
Character1
</a></p>
</div>
<div class="card-flex align-items-center justify-content-center mb-2" style="min-height: 50px;">
<ul class="nav row justify-content-center">
<!-- IMAGE TAB NAV-->
<li class="nav-item col">
<a class="nav-link active text-light" data-toggle="tab" href="#ART1">
<i class="fal fa-image-portrait fa-2x fa-fw" style="text-shadow: 0px 0px 5px #A62B2B;"></i>
</a>
</li>
<!-- BASICS TAB NAV-->
<li class="nav-item col">
<a class="nav-link text-light" data-toggle="tab" href="#CHAR1">
<i class="fal fa-rhombus fa-2x fa-fw" style="text-shadow: 0px 0px 5px #A62B2B;"></i>
</a>
</li>
<!-- INFO TAB NAV-->
<li class="nav-item col">
<a class="nav-link text-light" data-toggle="tab" href="#INFO1">
<i class="fal fa-list fa-2x fa-fw" style="text-shadow: 0px 0px 5px #A62B2B;"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--
=======================================
MAIN SCROLLING CONTENT
=======================================
-->
<div class="col-12 col-lg-5 order-1 order-lg-0">
<div class="h-100 ml-0 ml-lg-2 mr-0 mr-lg-2">
<div class="col-12 text-justify">
<!--
=================================
INTRODUCTION
=================================
-->
<div class="col p-0 pb-2">
<div class="bg-faded mb-2" style="border-radius: 2em;">
<p class="text-center" style="font-size: 30px; font-weight: 300;">
Introduction
</p>
</div>
<!-- CHARACTERS PAGEDOLLS -- BETTER USE PNG IMAGE -- INSERT YOUR IMAGE LINK INSTEAD OF "LINKHERE" -->
<img class="d-block mx-auto p-3 p-lg-3 pl-lg-5 pr-lg-5" style="min-width: 100px;"
src="LINKHERE">
<p>
Write a small introduсtion to characters and/or their relationship. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!--
=================================
RELATIONSHIP THEME
=================================
-->
<div class="bg-faded mb-3" style="border-radius: 2em; position: relative;">
<div class="row no-gutters justify-content-between pl-3 pr-3">
<span class="mb-2 mt-2 mb-lg-0 mt-lg-0 m-0 m-lg-2" style="font-size: 18px; font-weight: 300;">
Author - Song name
</span>
<i class="fal fa-compact-disc fa-beat" style="font-size: 30px; position: absolute; right: 15px; top: 7px;
animation-duration: 0.6s;"></i>
<!-- You can change disk animation delay (0.6) to match the beat of the song! -->
<div style="height: 30px; width: 30px; position: absolute; right: 15px; top: 6px; overflow: hidden;">
<iframe style="opacity: 0.01; height: 500%; width: 600%; position: absolute; bottom: -5px; left: -18px;"
src="https://www.youtube.com/embed/EMBEDCODE"></iframe>
<!-- YOUTUBE EMBED -- INSERT EMBED CODE OF YOUR VIDEO-->
</div>
</div>
</div>
<!--
=================================
CHARACTER THOUGHTS
=================================
-->
<div class="col p-0 pb-2">
<!-- CHARACTER1 OPINION -->
<div class="mb-3 ml-4" style="border-radius: 2em; position: relative; background: #6296E1;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 20%; color: #6296E1;"></i>
<p class="text-justify text-white p-4" style="font-size: 16px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
Write what Character1 thinks about Character2. This bubble will grow with content. 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.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- CHARACTER1 OPINION -->
<div class="mb-2 mr-4" style="border-radius: 2em; position: relative; background: #FE9E64;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 20%; color: #FE9E64;"></i>
<p class="text-justify text-white p-4" style="font-size: 16px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
Write what Character2 thinks about Character1. This bubble will grow with content. 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.
<i class="fal fa-quote-right"></i>
</p>
</div>
</div>
<!--
=================================
RELATIONSHIP DYNAMIC
Change 45% & 55% to your liking (0-100)
=================================
-->
<div class="col p-0 pb-2">
<div class="bg-faded mb-2 mt-2" style="border-radius: 2em;">
<p class="text-center" style="font-size: 30px; font-weight: 300;">
Relationship dynamic
</p>
</div>
<!-- INTROVERTED == EXTROVERTED -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Introverted</p>
<p>Extroverted</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- HEART == BRAIN -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>The Heart</p>
<p>The Brain</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- WORDS == ACTIONS -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Affection through words</p>
<p>through actions</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- OVERPROTECTIVE == CHILL GOING -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Overprotective</p>
<p>Chill going</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- STUPID THINGS -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Does stupid things</p>
<p>Calms other one</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- FIGHTS == DIPLOMACY -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Goes into fights</p>
<p>Uses diplomacy</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- TACTILE == NOT TACTILE -->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Tactile</p>
<p>Not tactile</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!--♥ ♥ ♥ SLOWBURN == FIRST SIGHT ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Slow-burn</p>
<p>Love at first sight</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!--♥ ♥ ♥ Dislikes PDA == Loves PDA ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Dislikes <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr></p>
<p>Loves <abbr title="Public Display of Affection" class="tooltipster">PDA</abbr></p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- ♥ ♥ ♥ MAKES FOOD == CANT COOK ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Makes food</p>
<p>Can't cook</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- ♥ ♥ ♥ BIG SPOON == LITTLE SPOON ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Big Spoon</p>
<p>Little Spoon</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!-- ♥ ♥ ♥ BORROWS CLOTHES == LENDS CLOTHES ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Borrows clothes</p>
<p>Lends clothes</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
<!--♥ ♥ ♥ RELATIONSHIP EXPERIENCE ♥ ♥ ♥-->
<div class="m-2">
<div class="row no-gutters justify-content-between" style="font-size: 16px; font-weight: 300;">
<p>Was in relationship(s)</p>
<p>Has no experience</p>
</div>
<div class="col p-0 align-items-center" style="margin-top: -10px;">
<div class="w-100 bg-faded" style="height: 4px;"></div>
<!-- CHARACTER 1-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
45%
- 2%); color: #6296E1;"></i>
<!-- CHARACTER 2-->
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
55%
- 2%); color: #FE9E64;"></i>
</div>
</div>
</div>
<!--
=================================
CHARACTERS' STORY
=================================
-->
<div class="col p-0 pb-2">
<div class="bg-faded mb-2 mt-2" style="border-radius: 2em;">
<p class="text-center" style="font-size: 30px; font-weight: 300;">
Relationship story
</p>
</div>
<!-- FIRST MEETING -->
<div class="pb-2">
<!-- HEADER -->
<p class="text-center text-primary" style="font-size: 25px; font-weight: 300;">
First meeting
</p>
<hr style="margin-top: -15px;">
<!-- TEXT DIV-->
<div class="text-justify">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- HERE GOES CHARACTERS COMMENTARIES ABOUT THE EVENT
YOU CAN REMOVE THEM BY REMOVING BOTH DIVS BELOW-->
<!-- CHARACTER1 COMMENTARY -->
<div class="mb-3 ml-4 p-3 mt-3" style="border-radius: 2em; position: relative; background: #6296E1;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 30%; color: #6296E1;"></i>
<p class="text-white" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character1:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character1 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- CHARACTER2 COMMENTARY -->
<div class="mb-2 mr-4 p-3" style="border-radius: 2em; position: relative; background: #FE9E64;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 30%; color: #FE9E64;"></i>
<p class="text-white text-right" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character2:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character2 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- COMMENTARIES END -->
</div>
<!-- EVENT -->
<div class="pb-2">
<!-- HEADER -->
<p class="text-center text-primary" style="font-size: 25px; font-weight: 300;">
Event
</p>
<hr style="margin-top: -15px;">
<!-- TEXT DIV-->
<div class="text-justify">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- HERE GOES CHARACTERS COMMENTARIES ABOUT THE EVENT
YOU CAN REMOVE THEM BY REMOVING BOTH DIVS BELOW-->
<!-- CHARACTER1 COMMENTARY -->
<div class="mb-3 ml-4 p-3 mt-3" style="border-radius: 2em; position: relative; background: #6296E1;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 30%; color: #6296E1;"></i>
<p class="text-white" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character1:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character1 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- CHARACTER2 COMMENTARY -->
<div class="mb-2 mr-4 p-3" style="border-radius: 2em; position: relative; background: #FE9E64;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 30%; color: #FE9E64;"></i>
<p class="text-white text-right" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character2:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character2 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- COMMENTARIES END -->
</div>
<!-- EVENT -->
<div class="pb-2">
<!-- HEADER -->
<p class="text-center text-primary" style="font-size: 25px; font-weight: 300;">
Event
</p>
<hr style="margin-top: -15px;">
<!-- TEXT DIV-->
<div class="text-justify">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- HERE GOES CHARACTERS COMMENTARIES ABOUT THE EVENT
YOU CAN REMOVE THEM BY REMOVING BOTH DIVS BELOW-->
<!-- CHARACTER1 COMMENTARY -->
<div class="mb-3 ml-4 p-3 mt-3" style="border-radius: 2em; position: relative; background: #6296E1;">
<i class="fas fa-triangle fa-rotate-270 fa-2x" style="position: absolute; left: -20px; top: 30%; color: #6296E1;"></i>
<p class="text-white" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character1:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character1 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- CHARACTER2 COMMENTARY -->
<div class="mb-2 mr-4 p-3" style="border-radius: 2em; position: relative; background: #FE9E64;">
<i class="fas fa-triangle fa-rotate-90 fa-2x" style="position: absolute; right: -20px; bottom: 30%; color: #FE9E64;"></i>
<p class="text-white text-right" style="font-size: 18px; font-weight: 300; margin-bottom: 0px; margin-top: -5px;">
Character2:
</p>
<p class="text-justify text-white" style="font-size: 14px; font-weight: 300; font-style: italic;">
<i class="fal fa-quote-left"></i>
A little commentary from Character2 about that event. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right"></i>
</p>
</div>
<!-- COMMENTARIES END -->
</div>
</div>
<!--
=================================
RELATIONSHIP TRIVIA
=================================
-->
<div class="col p-0 pb-2">
<div class="bg-faded mb-2 mt-2" style="border-radius: 2em;">
<p class="text-center" style="font-size: 30px; font-weight: 300;">
Trivia
</p>
</div>
<!-- TRIVIA LIST -->
<ul class="list-group col pl-4 pl-lg-5">
<li class="pb-2">Write some facts about them or their relationship.</li>
<li class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>
<li class="pb-2">Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li class="pb-2">Curabitur ac finibus eros.</li>
<li class="pb-2">Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
<!--
=================================
MUTUAL RELATIONS
=================================
-->
<div class="col p-0 pb-2">
<div class="bg-faded mb-2 mt-2" style="border-radius: 2em;">
<p class="text-center" style="font-size: 30px; font-weight: 300;">Mutual relations</p>
</div>
<!-- CHARACTER BLOCK-->
<div class="col p-0 pt-2">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD OF "LINKHERE"-->
<img src="LINKHERE"
style="height: 150px; width: 150px; border-radius: 2em;" class="my-2 d-block mx-auto">
<p class="text-center" style="font-size: 25px; font-weight: 300; margin-top: -8px;">
<a href="LINK_HERE">
Character name
</a></p>
<div class="row no-gutters justify-content-between mb-2" style="margin-top: -10px;">
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 1 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #6296E1;">
[relationship]
</p>
</div>
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 2 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #FE9E64;">
[relationship]
</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- CHARACTER BLOCK-->
<div class="col p-0 pt-2">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD OF "LINKHERE"-->
<img src="LINKHERE"
style="height: 150px; width: 150px; border-radius: 2em;" class="my-2 d-block mx-auto">
<p class="text-center" style="font-size: 25px; font-weight: 300; margin-top: -8px;">
<a href="LINK_HERE">
Character name
</a></p>
<div class="row no-gutters justify-content-between mb-2" style="margin-top: -10px;">
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 1 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #6296E1;">
[relationship]
</p>
</div>
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 2 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #FE9E64;">
[relationship]
</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- CHARACTER BLOCK-->
<div class="col p-0 pt-2">
<!-- CHARACTER IMAGE -- INSERT YOUR LINK INSTEAD OF "LINKHERE"-->
<img src="LINKHERE"
style="height: 150px; width: 150px; border-radius: 2em;" class="my-2 d-block mx-auto">
<p class="text-center" style="font-size: 25px; font-weight: 300; margin-top: -8px;">
<a href="LINK_HERE">
Character name
</a></p>
<div class="row no-gutters justify-content-between mb-2" style="margin-top: -10px;">
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 1 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #6296E1;">
[relationship]
</p>
</div>
<div class="bg-faded" style="border-radius: 1.5em;">
<!-- RELATIONSHIP WITH CHARACTER 2 -->
<p class="m-1 ml-3 mr-3" style="font-size: 18px; font-weight: 300; color: #FE9E64;">
[relationship]
</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- CREDIT -- DO NOT REMOVE -->
<div class="bg-faded mb-2 mt-2" style="border-radius: 2em;">
<div class="row no-gutters justify-content-center">
<a href="https://twitter.com/gibb_arts/status/1158110826169020418" title="Dynamic inspired by Gibslythe" class="tooltipster m-1"><i class="fas fa-sliders-simple"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster m-1"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--
=======================================
RIGHT CHARACTER CARD
=======================================
-->
<div class="col-12 col-lg mb-3 mb-lg-0">
<div class="card border-0 m-1 bg-faded" style="border-radius: 2em; height: 600px; position: sticky; top: 120px; overflow: hidden;">
<div class="tab-content h-100">
<!--
==============================
PORTRAIT TAB
==============================
-->
<div class="tab-pane fade in active show h-100" id="ART2">
<!-- CHARACTER2 IMAGE -- insert your link instead of "LINKHERE" -->
<div class="h-100" style="
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
</div>
<!--
==============================
CHARACTER TAB
==============================
-->
<div class="tab-pane fade" id="CHAR2">
<div style="background: #FE9E64;">
<p class="text-center text-white pt-2 pb-2" style="font-size: 22px; font-weight: 300;">Basic info</p>
</div>
<div class="col p-0 mt-4" style="height: 427px; overflow: auto; font-size: 18px;">
<!-- AGE -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-calendar fa-fw fa-2x" style="color: #FE9E64;"></i>
Age
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- GENDER -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-venus-mars fa-fw fa-2x" style="color: #FE9E64;"></i>
Gender
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- ORIENTATION -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-heartbeat fa-fw fa-2x" style="color: #FE9E64;"></i>
S.O.
</span>
<span class="mr-0 mr-lg-4 text-w">
Content
</span>
</div>
<!-- DOB -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-birthday-cake fa-fw fa-2x" style="color: #FE9E64;"></i>
DoB
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- SIGN -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-stars fa-fw fa-2x" style="color: #FE9E64;"></i>
Sign
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
<!-- ROLE -->
<div class="m-3 mb-4 align-items-baseline justify-content-between">
<span><i class="fal fa-ruler-vertical fa-fw fa-2x" style="color: #FE9E64;"></i>
Height
</span>
<span class="mr-0 mr-lg-4">
Content
</span>
</div>
</div>
<div class="bg-dark" style="height: 125px;"></div>
</div>
<!--
==============================
CHARACTER TAB
==============================
-->
<div class="tab-pane fade" id="INFO2">
<div style="background: #FE9E64;">
<p class="text-center text-white pt-2 pb-2" style="font-size: 22px; font-weight: 300;">Feelings towards Character1</p>
</div>
<div class="col p-0" style="height: 427px; overflow: auto;">
<!--
==============================
SLIDERS
Change "50%" value ONLY!
You can set it to 0-100 according
to the character's feelings
Less % -- slides to left
More % -- slides to right
==============================
-->
<!-- TRUST == DISTRUST -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Distrust</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Trust</p>
</div>
</div>
<!-- RESPECT == DESPISE-->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Disrespect</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">
Respect</p>
</div>
</div>
<!-- CHERISH == NEGLECT -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Neglect</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Cherish</p>
</div>
</div>
<!-- EMPATHY == DISGUST -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Disgust</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Empathy</p>
</div>
</div>
<!-- RELAXED == NERVOUS -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Nervous</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Relaxed</p>
</div>
</div>
<!-- CARING == COLD -->
<div class="row no-gutters mt-3">
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Cold</p>
</div>
<div class="col-4 align-items-center ml-2 mr-2" style="position: relative;">
<div class="w-100 bg-dark" style="height: 4px;"></div>
<i class="fas fa-diamond fa-fw" style="position: absolute; left: calc(
50%
- 7%); color: #FE9E64;"></i>
</div>
<div class="col align-items-center justify-content-center">
<p style="font-size: 16px;">Caring</p>
</div>
</div>
<div class="col p-0 pb-1 pt-1">
<p class="text-center pt-2 pb-1" style="font-size: 22px; font-weight: 300;">
Current relationship
</p>
<div class="bg-dark ml-2 mr-2">
<p class="text-center text-white pt-2 pb-2" style="font-size: 16px; font-weight: 300;">
relationship
</p>
</div>
</div>
<div class="col p-0">
<p class="text-center pt-2 pb-1" style="font-size: 22px; font-weight: 300;">
Desired relationship
</p>
<div class="bg-dark ml-2 mr-2">
<p class="text-center text-white pt-2 pb-2" style="font-size: 16px; font-weight: 300;">
relationship
</p>
</div>
</div>
</div>
<div class="bg-dark" style="height: 125px;"></div>
</div>
</div>
<!--
==============================
CHARACTER NAME + NAVS
==============================
-->
<div class="col p-0" style="position: absolute; bottom: 0px;">
<div class="mb-2" style="background: #FE9E64;">
<p class="text-center pt-2 pb-2" style="font-size: 28px; font-weight: 300;"><a class="text-white"
href="LINK_HERE">
Character2
</a></p>
</div>
<div class="card-flex align-items-center justify-content-center mb-2" style="min-height: 50px;">
<ul class="nav row justify-content-center">
<!-- IMAGE TAB NAV-->
<li class="nav-item col">
<a class="nav-link active text-light" data-toggle="tab" href="#ART2">
<i class="fal fa-image-portrait fa-2x fa-fw" style="text-shadow: 0px 0 5px #A62B2B;"></i>
</a>
</li>
<!-- BASICS TAB NAV-->
<li class="nav-item col">
<a class="nav-link text-light" data-toggle="tab" href="#CHAR2">
<i class="fal fa-rhombus fa-2x fa-fw" style="text-shadow: 0px 0 5px #A62B2B;"></i>
</a>
</li>
<!-- INFO TAB NAV-->
<li class="nav-item col">
<a class="nav-link text-light" data-toggle="tab" href="#INFO2">
<i class="fal fa-list fa-2x fa-fw" style="text-shadow: 0px 0 5px #A62B2B;"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>