<!-- THIS CODE USES CUSTOM COLORS
==============================================
32. || Digital || F2U
==============================================
DEFAULT PINK == #D62A6C
DEFAULT PALE DARK BLUE == #475385
DEFAULT CYAN == #53B2C9
BG COLOR == rgba(1, 8, 38, .9)
TEXT COLOR == #F3FEFF
WHITE TEXT == #fff
BLUE PART OF TEXT/BOX SHADOW (3D EFF.) == #143FDB
Use CTRL+F to quickly find & replace the colors!
<DIR>
-->
<!-- OPTIONAL LAYOUT BACKGROUND == You can change the image link or delete the whole " style="" " to remove it -->
<div class="py-5"
style="
background-image: url(https://images.unsplash.com/photo-1598520106864-72ed7919100b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1776&q=80);
background-size: cover;
background-position: center;"
>
<div class="container" style="max-width: 1000px; color: #F3FEFF;">
<div class="row no-gutters px-lg-5 mb-4 mb-lg-0">
<!--
================================================
CHARACTER TITLE + NAME
================================================
-->
<div class="col-12 col-lg pt-lg-5" style="z-index: 2;">
<div class="row no-gutters">
<div class="col-auto mx-auto mt-lg-4 px-3 py-2 text-lowercase align-items-baseline" style="min-height: 30px; background-color: rgba(1, 8, 38, .9); box-shadow: 0 0 6px rgba(0,0,0, .3); font-variant: small-caps; border-top: solid 2px #D62A6C; border-left: solid 2px #53B2C9; padding-top: 3px; letter-spacing: 1px; line-height: 90%; font-family: Courier New, serif; font-weight: 600;"><i class="fal fa-terminal fa-xs fa-beat-fade mr-1" style="animation-duration: 2s;"></i>
<span>
character title/alias
</span>
</div>
<div class="col-12 mt-2 ml-lg-n2 p-2 align-items-center justify-content-center display-4" style="min-height: 60px; background-color: rgba(1, 8, 38, .9); box-shadow: 0 0 6px rgba(0,0,0, .3);">
<div class="w-100 p-2" style="border: solid 2px #D62A6C; border-top-color: #53B2C9; border-right-color: #53B2C9; position: relative; font-variant: small-caps; text-shadow: -1px -1px 0 #53B2C9, 2px 2px 1px #D62A6C;">
<p class="text-center text-lowercase">
Character name
</p>
</div>
</div>
</div>
</div>
<!--
================================================
CHARACTER IMAGE
================================================
-->
<div class="col-12 col-lg-5 my-3 my-lg-0">
<div class="card p-1" style="border-radius: 50%; background-color: #F0FCFF;
box-shadow: 0 0 5px #0290E7, 0 0 20px #2356E7, 0 0 20px #080F8B;">
<!-- BOX SHADOW (BLUE GLOW) OF THE CHARACTER IMAGE CIRCLE -->
<div class="p-2" style="border-radius: 50%; background: linear-gradient(to bottom, #D62A6C, #475385, #53B2C9);">
<div style="border-radius: 50%; padding: 50%;
background-image: url(URLHERE);
background-size: cover;
background-position: center; box-shadow: inset 0 0 10px rgba(0,0,0, .5);"></div>
</div>
<div class="w-100 h-100 rounded-circle ml-n2 mt-n2" style="position: absolute; border: solid 2px #fff;"></div>
<div class="w-100 h-100 rounded-circle ml-1 mt-n1" style="position: absolute; border: solid 2px #fff;"></div>
</div>
</div>
<!--
================================================
CHARACTER QUOTE
================================================
-->
<div class="col-12 col-lg pb-lg-5 align-items-end">
<div class="card mb-lg-4 ml-lg-n5 align-items-center justify-content-center rounded-0 p-1" style="background-color: rgba(1, 8, 38, .9); box-shadow: 0 0 6px rgba(0,0,0, .3); width: 120%; border-top: solid 2px #53B2C9; border-right: solid 2px #D62A6C; border-bottom: solid 2px #D62A6C; border-left: solid 2px #53B2C9;">
<div class="p-1" style="position: relative; font-size: 15px; text-shadow: 1px 1px 0 #D62A6C; font-variant: small-caps;">
<p class="font-italic text-center"><i class="fal fa-quote-left fa-xs"></i>
A quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fal fa-quote-right fa-xs"></i></p>
</div>
</div>
</div>
</div>
<!--
=========================================================
MAIN CONTENT
=========================================================
-->
<div class="container col mt-lg-n5 p-0" style="z-index: 4;">
<div class="row no-gutters">
<div class="col-12" style="border: solid 3px #D62A6C;">
<div class="d-block d-lg-flex p-1" style="border-radius: 0; overflow: hidden; border: solid 2px #D62A6C; background-color: rgba(1, 8, 38, .9); margin-left: -2px; margin-right: -2px; margin-top: -2px;">
<div class="pb-lg-1" style="flex: 1 1 0; overflow-x: auto; font-family: Courier New, serif; scroll-behavior: smooth;">
<div class="flex-column flex-lg-row h-100">
<!--
====================================================
BASICS SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="intro"></div>
<!--
============================================
BASICS HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Basics
</p>
<p class="text-uppercase my-2 hidden-md-up">
Basics
</p>
</div>
<!--
============================================
CHARACTER BASICS
============================================
-->
<div class="col-12 col-lg-6 p-1">
<div class="row no-gutters">
<!-- GENDER -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-venus-mars fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
gender
</span>
</div>
</div>
</div>
<!-- PRONOUNS -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-message-dots fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Cont/Cont
</p>
<span class="small" style="color: #53B2C9;">
pronouns
</span>
</div>
</div>
</div>
<!-- ORIENTATION -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-heartbeat fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
S.O.
</span>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-hourglass fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
age
</span>
</div>
</div>
</div>
<!-- DoB -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-calendar-day fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
DoB
</span>
</div>
</div>
</div>
<!-- SIGN -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-star-shooting fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
sign
</span>
</div>
</div>
</div>
<!-- SPECIES -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-dna fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
species
</span>
</div>
</div>
</div>
<!-- ORIGIN -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-apartment fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
origin
</span>
</div>
</div>
</div>
<!-- OCCUPATION -->
<div class="col-12 col-lg-4 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-suitcase fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
occupation
</span>
</div>
</div>
</div>
<!-- MUSIC THEME -->
<div class="col-12 p-2">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-circle-play fa-beat-fade fa-fw fa-2x" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; position: absolute; animation-duration: 2s;"></i>
<div class="card bg-transparent align-items-center justify-content-center" style="height: 32px; width: 33px; overflow: hidden;">
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -4px; left: -2px;"
src="https://www.youtube.com/embed/IDGOESHERE"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
<div class="col text-uppercase align-items-center justify-content-center text-truncate px-2" style="font-size: 16px;">
<p class="text-truncate mt-1">
Author - Song Name
</p>
</div>
</div>
</div>
</div>
</div>
<!--
============================================
CHARACTER INRO/OVERVIEW + TRIVIA
============================================
-->
<div class="card border-0 bg-transparent col-12 col-lg-5 p-1 d-block d-lg-flex">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto;">
<p class="text-uppercase font-italic" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-terminal fa-beat-fade" style="animation-duration: 2s;"></i>
Lorem ipsum...
</p>
<p class="text-justify">
Write a small intro about your character here. Lorem ipsum dolor sit amet, consec tetur 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 class="text-uppercase" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-microchip fa-beat-fade" style="animation-duration: 2s;"></i>
Trivia
</p>
<ul class="fa-ul">
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fal fa-terminal fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fal fa-terminal fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fal fa-terminal fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Duis porta eros et velit blandit dapibus.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fal fa-terminal fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE TRIVIA ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<!--
====================================================
PERSONALITY SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="stats"></div>
<!--
============================================
PERSONALITY HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Stats
</p>
<p class="text-uppercase my-2 hidden-md-up">
Stats
</p>
</div>
<!--
============================================
TWO-SIDED STATS
============================================
-->
<div class="col-12 col-lg p-1" style="font-variant: small-caps; font-size: 19px;">
<!-- EXTROVERTED == INTROVERTED -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Extroverted
</span>
<span>
Introverted
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
<!-- INSTINCTIVE == CALCULATED -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Instinctive
</span>
<span>
Calculated
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
<!-- DECEPTIVE == SINCERE -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Deceptive
</span>
<span>
Sincere
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
<!-- INDIFFERENT == EMOTIONAL -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Indifferent
</span>
<span>
Emotional
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
<!-- RESERVED == AFFECTIONATE -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Reserved
</span>
<span>
Affectionate
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
<!-- COOPERATIVE == LONE WOLF -->
<div class="col pl-lg-2 pr-lg-0">
<div class="row no-gutters text-lowercase justify-content-between">
<span>
Cooperative
</span>
<span>
Lone wolf
</span>
</div>
<div class="progress rounded-0" style="background-color: #29304C;">
<div class="progress-bar justify-content-end bg-transparent" style="height: 5px; width:
50%
;">
<div style="width: 4px; background-color: #53b2c9; margin-right: -2px;"></div>
</div>
</div>
</div>
</div>
<!-- CABLE DIVIDER -->
<div class="col-12 col-lg-auto py-2">
<div class="h-100 justify-content-center hidden-md-down" style="border-right: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; top: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; bottom: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="h-100 align-items-center hidden-md-up mt-3" style="border-top: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; left: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; right: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
<!--
============================================
STANDALONE STATS
============================================
-->
<div class="col-12 col-lg-3 px-3 p-lg-1 my-3 my-lg-0">
<!-- CHARISMA STAT -->
<div class="col p-0">
<div class="row no-gutters justify-content-between">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Charisma
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Kindness
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Patience
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Integrity
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Intellect
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Courage
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- LOYALTY STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Loyalty
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="col p-0">
<div class="row no-gutters">
<div class="col text-uppercase pt-1">
<span style="text-shadow: 1px 1px 1px #53b2c9;">
Temper
</span>
</div>
<div class="col-auto align-items-center justify-content-end">
<div class="row no-gutters w-100" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<!-- SQUARE INDICATORS
Use FAS for SOLID and FAL for EMPTY
Don't forget to delete fa-fade and the whole style="" section for solid squares!
-->
<i class="fas fa-square fa-fw"></i>
<i class="fas fa-square fa-fw"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
<i class="fal fa-square fa-fw fa-fade" style="animation-duration: 2s;"></i>
</div>
</div>
</div>
</div>
</div>
<!--
============================================
PERSONALITY BASICS + TRAITS
============================================
-->
<div class="card border-0 bg-transparent col-12 col-lg-4 p-1 d-block d-lg-flex">
<div class="p-1" style="flex: 1 1 0; overflow-y: auto;">
<div class="row no-gutters">
<!-- ATTITUDE (OPTIMIST/PESSIMIST/REALIST ETC.) -->
<div class="col-12 col-lg-6 p-1">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-masks-theater fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Skeptic
</p>
<span class="small" style="color: #53B2C9;">
attitude
</span>
</div>
</div>
</div>
<!-- DOMINANT HAND -->
<div class="col-12 col-lg-6 p-1">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-hand fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
dom. hand
</span>
</div>
</div>
</div>
<!-- MBTI -->
<div class="col-12 col-lg-6 p-1">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-head-side-brain fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
XXXX-X
</p>
<span class="small" style="color: #53B2C9;">
MBTI
</span>
</div>
</div>
</div>
<!-- SPIRIT ANIMAL -->
<div class="col-12 col-lg-6 p-1">
<div class="row no-gutters">
<div class="col-auto align-items-center justify-content-center">
<i class="fal fa-paw-claws fa-fw fa-2x mr-2" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="col text-uppercase">
<p class="mb-n2" style="font-size: 16px;">
Content
</p>
<span class="small" style="color: #53B2C9;">
animal
</span>
</div>
</div>
</div>
</div>
<p class="text-uppercase font-italic mt-2 mb-0" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-file-binary fa-beat-fade" style="animation-duration: 2s;"></i>
traits
</p>
<div class="row no-gutters ml-2">
<div class="col-auto">
<div class="h-100 justify-content-center" style="border-right: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; top: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; bottom: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
<div class="col">
<div class="row no-gutters">
<!--
===============================================
POSITIVE TRAITS
===============================================
-->
<div class="col-12 col-lg-6">
<ul class="fa-ul my-2">
<li><span class="fa-li"><i class="fal fa-1 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Pos trait
</li>
<li><span class="fa-li"><i class="fal fa-1 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Pos trait
</li>
<li><span class="fa-li"><i class="fal fa-1 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Pos trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
<!--
===============================================
NEGATIVE TRAITS
===============================================
-->
<div class="col-12 col-lg-6">
<ul class="fa-ul my-2">
<li><span class="fa-li"><i class="fal fa-0 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Neg trait
</li>
<li><span class="fa-li"><i class="fal fa-0 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Neg trait
</li>
<li><span class="fa-li"><i class="fal fa-0 fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Neg trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<p class="text-uppercase font-italic mt-4" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-brain-circuit fa-beat-fade" style="animation-duration: 2s;"></i>
demeanor
</p>
<div class="row no-gutters ml-2 mb-3 mb-lg-0">
<div class="col-auto">
<div class="h-100 justify-content-center" style="border-right: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; top: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; bottom: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
<div class="col p-2">
<p>
Write about your character demeanor. Anything will do regarding how they show themselves, how they show affection, how they treat other etc. 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>
</div>
</div>
</div>
</div>
<!--
====================================================
PREFERENCES SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="prefs"></div>
<!--
============================================
PREFERENCES HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Likings
</p>
<p class="text-uppercase my-2 hidden-md-up">
Likings
</p>
</div>
<div class="card border-0 bg-transparent col-12 col-lg-5 p-1 d-block d-lg-flex">
<div class="p-1" style="flex: 1 1 0; overflow-y: auto; transform:scaleX(-1); font-size: 12px;">
<div style="transform: scaleX(-1);">
<p class="mb-1" style="color: #fff;">
C:Users\User>type likings.txt
</p>
<p class="mb-1">
The system cannot find the file specified.
</p>
<p class="mb-1">
C:Users\User>dir
</p>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">01:42</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">.</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">01:42</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">..</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">11:56</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">Desktop</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">18:35</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">Documents</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">20:07</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">Downloads</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">00:16</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">Favorites</div>
</div>
<p class="mb-1">
C:Users\User>cd Favorites
</p>
<p class="mb-1">
C:Users\User\Favorites>dir
</p>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">00:16</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">.</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">00:16</div>
<div class="col"><div class="row no-gutters">
<div class="col-auto"><i class="fal fa-angle-left" style="margin-top: 2px; margin-right: 1px;"></i></div>
<div class="col-auto">DIR</div>
<div class="col-auto"><i class="fal fa-angle-right" style="margin-top: 2px; margin-left: 1px;"></i></div>
</div></div>
<div class="col">..</div>
</div>
<div class="row no-gutters">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">01:54</div>
<div class="col"></div>
<div class="col">Likings.txt</div>
</div>
<div class="row no-gutters mb-1">
<div class="col-auto mr-2">xx.xx.20xx</div>
<div class="col">01:54</div>
<div class="col"></div>
<div class="col">Digital.url</div>
</div>
<p class="mb-0">
C:Users\User\Favorites>type Likings.txt
</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6 p-1">
<!-- FAVORITE FOOD -->
<div class="row no-gutters">
<div class="col-12 col-lg-5 p-1">
<div class="row no-gutters">
<div class="col-6 p-1" style="background-color: #475385; border: solid 2px #475385;">
<span>
data_type
</span>
</div>
<div class="col-6 p-1 border-left-0" style="border: solid 2px #475385;">
<span>
fav_food
</span>
</div>
</div>
</div>
<div class="col-12 col-lg-7 p-1">
<div class="row no-gutters">
<div class="col-3 p-1" style="background-color: #475385; border: solid 2px #475385;">
<span>
value
</span>
</div>
<div class="col-9 p-1 border-left-0" style="border: solid 2px #475385;">
<span>
content
</span>
</div>
</div>
</div>
</div>
<!-- FAVORITE DRINK -->
<div class="row no-gutters">
<div class="col-12 col-lg-5 p-1">
<div class="row no-gutters">
<div class="col-6 p-1" style="background-color: #53b2c9; border: solid 2px #53b2c9;">
<span>
data_type
</span>
</div>
<div class="col-6 p-1 border-left-0" style="border: solid 2px #53b2c9;">
<span>
fav_drink
</span>
</div>
</div>
</div>
<div class="col-12 col-lg-7 p-1">
<div class="row no-gutters">
<div class="col-3 p-1" style="background-color: #53b2c9; border: solid 2px #53b2c9;">
<span>
value
</span>
</div>
<div class="col-9 p-1 border-left-0" style="border: solid 2px #53b2c9;">
<span>
content
</span>
</div>
</div>
</div>
</div>
<!-- FAVORITE SCENT -->
<div class="row no-gutters fa-fade" style="animation-duration: 3s;">
<div class="col-12 col-lg-5 p-1">
<div class="row no-gutters">
<div class="col-6 p-1" style="background-color: #d62a6c; border: solid 2px #d62a6c;">
<span>
data_type
</span>
</div>
<div class="col-6 p-1 border-left-0" style="border: solid 2px #d62a6c;">
<span>
fav_scent
</span>
</div>
</div>
</div>
<div class="col-12 col-lg-7 p-1">
<div class="row no-gutters">
<div class="col-3 p-1" style="background-color: #d62a6c; border: solid 2px #d62a6c;">
<span>
value
</span>
</div>
<div class="col-9 p-1 border-left-0" style="border: solid 2px #d62a6c;">
<span>
content
</span>
</div>
</div>
</div>
</div>
<!-- FAVORITE COLOR -->
<div class="row no-gutters">
<div class="col-12 col-lg-5 p-1">
<div class="row no-gutters">
<div class="col-6 p-1" style="background-color: #475385; border: solid 2px #475385;">
<span>
data_type
</span>
</div>
<div class="col-6 p-1 border-left-0" style="border: solid 2px #475385;">
<span>
fav_color
</span>
</div>
</div>
</div>
<div class="col-12 col-lg-7 p-1">
<div class="row no-gutters">
<div class="col-3 p-1" style="background-color: #475385; border: solid 2px #475385;">
<span>
value
</span>
</div>
<div class="col-9 p-1 border-left-0" style="border: solid 2px #475385;">
<span>
content
</span>
</div>
</div>
</div>
</div>
<!-- FAVORITE MUSIC -->
<div class="row no-gutters">
<div class="col-12 col-lg-5 p-1">
<div class="row no-gutters">
<div class="col-6 p-1" style="background-color: #53b2c9; border: solid 2px #53b2c9;">
<span>
data_type
</span>
</div>
<div class="col-6 p-1 border-left-0" style="border: solid 2px #53b2c9;">
<span>
fav_music
</span>
</div>
</div>
</div>
<div class="col-12 col-lg-7 p-1">
<div class="row no-gutters">
<div class="col-3 p-1" style="background-color: #53b2c9; border: solid 2px #53b2c9;">
<span>
value
</span>
</div>
<div class="col-9 p-1 border-left-0" style="border: solid 2px #53b2c9;">
<span>
content
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================================
DESIGN SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="design"></div>
<!--
============================================
DESIGN HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Design
</p>
<p class="text-uppercase my-2 hidden-md-up">
Design
</p>
</div>
<!--
================================================
PALETTE + BASICS SECTION
================================================
-->
<div class="col-12 col-lg-4 flex-column p-1">
<div class="row no-gutters" style="height: 40px;">
<!-- PALETTE COLOR (EYES)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-eye" style="color: #222;"
title="Eyes"></i>
</div>
</div>
<!-- PALETTE COLOR (SKIN)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-hand" style="color: #222;"
title="Skin"></i>
</div>
</div>
<!-- PALETTE COLOR (HAIR)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-wind" style="color: #222;"
title="Hair"></i>
</div>
</div>
<!-- PALETTE COLOR (EXTRA1)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-circle" style="color: #222;"
title="Extra1"></i>
</div>
</div>
<!-- PALETTE COLOR (EXTRA2)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-circle" style="color: #222;"
title="Extra2"></i>
</div>
</div>
<!-- PALETTE COLOR (EXTRA3)-->
<div class="col p-1 h-100">
<div class="h-100 align-items-center justify-content-center" style="box-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;
background-color: #ccc;">
<!-- TOOLTIPSTER ICON == Change the hex-code color below to something lighter (white, perhaps) if you're using dark palette color -->
<i class="tooltipster fal fa-circle" style="color: #222;"
title="Extra3"></i>
</div>
</div>
</div>
<div class="col p-1 flex-grow-1 align-items-center justify-content-center">
<div class="w-100 p-1" style="position: relative;">
<div class="card bg-transparent w-100 h-25 rounded-0 border-right-0 border-bottom-0" style="border: solid 2px; border-top-color: #d62a6c; border-left-color: #53b2c9; position: absolute; left: 0; top: 0;"></div>
<!-- HEIGHT -->
<div class="row no-gutters justify-content-between text-uppercase p-1 px-2">
<span style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-ruler-vertical fa-fw"></i>
Height
</span>
<span>
content
</span>
</div>
<!-- WEIGHT -->
<div class="row no-gutters justify-content-between text-uppercase p-1 px-2">
<span style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-weight fa-fw"></i>
Weight
</span>
<span>
content
</span>
</div>
<!-- BODY TYPE -->
<div class="row no-gutters justify-content-between text-uppercase p-1 px-2">
<span style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-person fa-fw"></i>
Body type
</span>
<span>
content
</span>
</div>
<!-- HAIR TYPE -->
<div class="row no-gutters justify-content-between text-uppercase p-1 px-2">
<span style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-user-hair-long fa-fw"></i>
Hair type
</span>
<span>
content
</span>
</div>
<!-- STYLE -->
<div class="row no-gutters justify-content-between text-uppercase p-1 px-2">
<span style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-shirt fa-fw"></i>
Style
</span>
<span>
content
</span>
</div>
<div class="card bg-transparent w-100 h-25 rounded-0 border-left-0 border-top-0" style="border: solid 2px; border-right-color: #d62a6c; border-bottom-color: #53b2c9; position: absolute; right: 0; bottom: 0;"></div>
</div>
</div>
</div>
<!--
================================================
DESIGN NOTES SECTION
================================================
-->
<div class="card border-0 bg-transparent col-12 col-lg-4 p-1 d-block d-lg-flex">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto;">
<p class="text-uppercase font-italic mb-0" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-brackets-curly fa-beat-fade" style="animation-duration: 2s;"></i>
Facial features
</p>
<p class="text-justify">
Write about those here. Lorem ipsum dolor sit amet, consec tetur 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 class="text-uppercase font-italic mb-0" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-brackets-curly fa-beat-fade" style="animation-duration: 2s;"></i>
Tattoos
</p>
<p class="text-justify">
Write about those here. Lorem ipsum dolor sit amet, consec tetur 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 class="text-uppercase font-italic mb-0" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-brackets-curly fa-beat-fade" style="animation-duration: 2s;"></i>
Piercings
</p>
<p class="text-justify">
Write about those here. Lorem ipsum dolor sit amet, consec tetur 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 class="text-uppercase font-italic mb-0" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-brackets-curly fa-beat-fade" style="animation-duration: 2s;"></i>
Wardrobe
</p>
<p class="text-justify">
Write about those here. Lorem ipsum dolor sit amet, consec tetur 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 class="text-uppercase" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-usb-drive fa-beat-fade" style="animation-duration: 2s;"></i>
Design notes
</p>
<ul class="fa-ul">
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fab fa-usb fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fab fa-usb fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fab fa-usb fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Duis porta eros et velit blandit dapibus.
</li>
<!-- TRIVIA ITEM -->
<li><span class="fa-li"><i class="fab fa-usb fa-beat-fade" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE TRIVIA ITEMS ABOVE -->
</ul>
</div>
</div>
<!--
================================================
MOODBOARD SECTION
================================================
-->
<div class="col-12 col-lg-3 p-1">
<div class="row no-gutters h-100">
<!-- MOODBOARD IMAGE -->
<div class="col-6 h-50 p-2">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col-6 h-50 p-2">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #D62A6C; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col-6 h-50 p-2">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #D62A6C; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col-6 h-50 p-2">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================================
STORY SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="story"></div>
<!--
============================================
STORY HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);" id="story">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Story
</p>
<p class="text-uppercase my-2 hidden-md-up">
Story
</p>
</div>
<div class="card border-0 bg-transparent p-0 col-12 col-lg-11 d-block d-lg-flex">
<div style="flex: 1 1 0; overflow-y: auto;">
<div class="row no-gutters">
<!--
============================================
STORY PART BLOCK
============================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
LEFT STORY PART (IMAGE + QUOTE)
=========================================
-->
<div class="col-12 col-lg-7">
<div style="position: sticky; top: 0;">
<div class="row no-gutters">
<!--
=========================================
STORY PART IMAGE
=========================================
-->
<div class="col-12 col-lg-5 px-2">
<div class="p-2" style="height: 216px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
=========================================
STORY PART SUBHEADER + QUOTE
=========================================
-->
<div class="col-12 col-lg-7 p-2 flex-column">
<p class="text-uppercase font-italic" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-file-lines fa-beat-fade" style="animation-duration: 2s;"></i>
Subheader
</p>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2 align-items-center justify-content-center text-center" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<i class="fas fa-quote-left fa-xs" style="position: absolute; left: 8px; top: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i style="font-size: 13px;">
A very small intro to this story part as a quote.
</i>
<i class="fas fa-quote-right fa-xs" style="position: absolute; right: 8px; bottom: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RIGHT STORY PART (TEXT)
=========================================
-->
<div class="col-12 col-lg-5 p-2">
<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 -->
</div>
</div>
</div>
<!--
============================================
STORY PART BLOCK
============================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
LEFT STORY PART (IMAGE + QUOTE)
=========================================
-->
<div class="col-12 col-lg-7">
<div style="position: sticky; top: 0;">
<div class="row no-gutters">
<!--
=========================================
STORY PART IMAGE
=========================================
-->
<div class="col-12 col-lg-5 px-2">
<div class="p-2" style="height: 216px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
=========================================
STORY PART SUBHEADER + QUOTE
=========================================
-->
<div class="col-12 col-lg-7 p-2 flex-column">
<p class="text-uppercase font-italic" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-file-lines fa-beat-fade" style="animation-duration: 2s;"></i>
Subheader
</p>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2 align-items-center justify-content-center text-center" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<i class="fas fa-quote-left fa-xs" style="position: absolute; left: 8px; top: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i style="font-size: 13px;">
A very small intro to this story part as a quote.
</i>
<i class="fas fa-quote-right fa-xs" style="position: absolute; right: 8px; bottom: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RIGHT STORY PART (TEXT)
=========================================
-->
<div class="col-12 col-lg-5 p-2">
<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 -->
</div>
</div>
</div>
<!--
============================================
STORY PART BLOCK
============================================
-->
<div class="col-12">
<div class="row no-gutters">
<!--
=========================================
LEFT STORY PART (IMAGE + QUOTE)
=========================================
-->
<div class="col-12 col-lg-7">
<div style="position: sticky; top: 0;">
<div class="row no-gutters">
<!--
=========================================
STORY PART IMAGE
=========================================
-->
<div class="col-12 col-lg-5 px-2">
<div class="p-2" style="height: 216px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<!--
=========================================
STORY PART SUBHEADER + QUOTE
=========================================
-->
<div class="col-12 col-lg-7 p-2 flex-column">
<p class="text-uppercase font-italic" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fal fa-file-lines fa-beat-fade" style="animation-duration: 2s;"></i>
Subheader
</p>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2 align-items-center justify-content-center text-center" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<i class="fas fa-quote-left fa-xs" style="position: absolute; left: 8px; top: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i style="font-size: 13px;">
A very small intro to this story part as a quote.
</i>
<i class="fas fa-quote-right fa-xs" style="position: absolute; right: 8px; bottom: 8px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=========================================
RIGHT STORY PART (TEXT)
=========================================
-->
<div class="col-12 col-lg-5 p-2">
<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 -->
</div>
</div>
</div>
<!-- YOU CAN ADD MORE STORY PART BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
<!--
====================================================
RELATIONSHIPS SECTION
====================================================
-->
<div class="col-12 p-0">
<div class="flex-column flex-lg-row h-100">
<div class="w-100" style="position: absolute; left: 0; top: -380px;" id="links"></div>
<!--
============================================
RELATIONSHIPS HEADER
============================================
-->
<div class="col-12 col-lg-1 p-1 align-items-center justify-content-center display-4" style="background: linear-gradient(to bottom, #D62A6C -10%, rgba(0,0,0, 0) 110%);">
<p class="fa-rotate-270 text-uppercase hidden-md-down mx-lg-n4">
Related
</p>
<p class="text-uppercase my-2 hidden-md-up">
Related
</p>
</div>
<!--
============================================
FAKE CHARACTER PICKER SCREEN
Delete the empty block and double the non-empty
one to add more characters. Keep the amount of blocks
that correspond to the amount of linked characters you
have on the right side, with a bit more information.
Insert the link to a character here, in the block, as well
as in the hyperlink name later.
DO NOT add more than 12!
============================================
-->
<div class="col-12 col-lg-4 hidden-md-down">
<div style="height: 216px; position: sticky; top: 0;">
<div class="row no-gutters">
<!-- CHARACTER LITTLE BLOCK -->
<div class="col-3 p-2">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
href="LINK_HERE"></a>
</div>
</div>
<!-- CHARACTER LITTLE BLOCK -->
<div class="col-3 p-2">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
href="LINK_HERE"></a>
</div>
</div>
<!-- CHARACTER LITTLE BLOCK -->
<div class="col-3 p-2">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
href="LINK_HERE"></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
<!-- EMPLTY LITTLE BLOCK-->
<div class="col-3 p-2 fa-fade" style="animation-duration: 2s;">
<div class="p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; position: relative;">
<div style="border-radius: .25em; padding: 50%;
background-image: url(LINKHERE);
background-size: cover;
background-position: center;"></div>
<a class="w-100 h-100" style="position: absolute; left: 0; top: 0;"
></a>
</div>
</div>
</div>
</div>
</div>
<!--
============================================
RELATED CHARACTERS BLOCKS
============================================
-->
<div class="card border-0 bg-transparent col-12 col-lg-7 p-1 d-block d-lg-flex">
<div style="flex: 1 1 0; overflow-y: auto; scroll-behavior: smooth;">
<!--
============================================
RELATED CHARACTERS BLOCK
============================================
-->
<div class="mb-5 mb-lg-0">
<div class="row no-gutters">
<!-- RELATED CHARACTER IMAGE -->
<div class="col-12 col-lg-3 p-1" style="height: 208px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col-12 col-lg-9 p-1 px-2 flex-column">
<div class="row no-gutters" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<div class="col-12 col-lg-auto text-center order-lg-1 ml-lg-2">
<a class="text-uppercase font-italic" style="color: #fff;" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</div>
<div class="col-12 col-lg-auto text-center">
<!-- RELATIONSHIP ICON == Replace "rings-wedding" with another FA icon name -->
<i class="fal fa-rings-wedding fa-beat-fade tooltipster" style="animation-duration: 2s;"
title="Relationship"></i>
</div>
</div>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<!-- RELATED CHARACTER TITLE -->
<div class="row no-gutters text-uppercase">
<div class="col">
<span>
related character title
</span>
</div>
<div class="col-auto ml-2">
<i class="fal fa-barcode-read fa-beat-fade" style="animation-duration: 2s;"></i>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<div class="align-items-center mt-2 mb-3" style="border-top: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; left: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; right: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="row no-gutters">
<!-- RELATED CHARACTER ADJECTIVES -->
<div class="col-12 col-lg-5">
<ul class="fa-ul small">
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
</ul>
</div>
<!-- RELATED CHARACTER QUOTE -->
<div class="col-12 col-lg-7 align-items-center justify-content-center text-center small">
<i><i class="fas fa-quote-left fa-xs"></i>
A small quote about the relationship. Just a sentence or two.
<i class="fas fa-quote-right fa-xs"></i></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
============================================
RELATED CHARACTERS BLOCK
============================================
-->
<div class="mb-5 mb-lg-0">
<div class="row no-gutters">
<!-- RELATED CHARACTER IMAGE -->
<div class="col-12 col-lg-3 p-1" style="height: 208px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col-12 col-lg-9 p-1 px-2 flex-column">
<div class="row no-gutters" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<div class="col-12 col-lg-auto text-center order-lg-1 ml-lg-2">
<a class="text-uppercase font-italic" style="color: #fff;" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</div>
<div class="col-12 col-lg-auto text-center">
<!-- RELATIONSHIP ICON == Replace "rings-wedding" with another FA icon name -->
<i class="fal fa-rings-wedding fa-beat-fade tooltipster" style="animation-duration: 2s;"
title="Relationship"></i>
</div>
</div>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<!-- RELATED CHARACTER TITLE -->
<div class="row no-gutters text-uppercase">
<div class="col">
<span>
related character title
</span>
</div>
<div class="col-auto ml-2">
<i class="fal fa-barcode-read fa-beat-fade" style="animation-duration: 2s;"></i>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<div class="align-items-center mt-2 mb-3" style="border-top: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; left: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; right: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="row no-gutters">
<!-- RELATED CHARACTER ADJECTIVES -->
<div class="col-12 col-lg-5">
<ul class="fa-ul small">
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
</ul>
</div>
<!-- RELATED CHARACTER QUOTE -->
<div class="col-12 col-lg-7 align-items-center justify-content-center text-center small">
<i><i class="fas fa-quote-left fa-xs"></i>
A small quote about the relationship. Just a sentence or two.
<i class="fas fa-quote-right fa-xs"></i></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
============================================
RELATED CHARACTERS BLOCK
============================================
-->
<div class="mb-5 mb-lg-0">
<div class="row no-gutters">
<!-- RELATED CHARACTER IMAGE -->
<div class="col-12 col-lg-3 p-1" style="height: 208px;">
<div class="h-100 p-1" style="border-radius: .5em; border: solid 3px #fff; box-shadow: -1px -1px 1px #143FDB, 3px 3px 1px #475385; min-height: 80px;">
<div class="h-100" style="border-radius: .25em;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
<div class="col-12 col-lg-9 p-1 px-2 flex-column">
<div class="row no-gutters" style="font-size: 24px; color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;">
<div class="col-12 col-lg-auto text-center order-lg-1 ml-lg-2">
<a class="text-uppercase font-italic" style="color: #fff;" target="_BLANK"
href="LINK_HERE">
Character name
</a>
</div>
<div class="col-12 col-lg-auto text-center">
<!-- RELATIONSHIP ICON == Replace "rings-wedding" with another FA icon name -->
<i class="fal fa-rings-wedding fa-beat-fade tooltipster" style="animation-duration: 2s;"
title="Relationship"></i>
</div>
</div>
<div class="flex-grow-1 p-2" style="border: solid 2px; border-top-color: #53b2c9; border-right-color: #53b2c9; border-left-color: #d62a6c; border-bottom-color: #d62a6c;">
<div class="h-100 p-2" style="position: relative;">
<div class="card rounded-0 border-0 h-100 w-100" style="position: absolute; left: 0; top: 0; background-color: #475385; opacity: .2;"></div>
<!-- RELATED CHARACTER TITLE -->
<div class="row no-gutters text-uppercase">
<div class="col">
<span>
related character title
</span>
</div>
<div class="col-auto ml-2">
<i class="fal fa-barcode-read fa-beat-fade" style="animation-duration: 2s;"></i>
</div>
</div>
<!-- HORIZONTAL DIVIDER -->
<div class="align-items-center mt-2 mb-3" style="border-top: solid 2px #fff; position: relative;">
<i class="fas fa-square" style="position: absolute; left: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
<i class="fas fa-square" style="position: absolute; right: 0; font-size: 6px; margin-top: 1px; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"></i>
</div>
<div class="row no-gutters">
<!-- RELATED CHARACTER ADJECTIVES -->
<div class="col-12 col-lg-5">
<ul class="fa-ul small">
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
<!-- ADJECTIVE -->
<li><span class="fa-li"><i class="fal fa-merge fa-beat-fade" style="text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C; animation-duration: 2s;"></i></span>
adjective
</li>
</ul>
</div>
<!-- RELATED CHARACTER QUOTE -->
<div class="col-12 col-lg-7 align-items-center justify-content-center text-center small">
<i><i class="fas fa-quote-left fa-xs"></i>
A small quote about the relationship. Just a sentence or two.
<i class="fas fa-quote-right fa-xs"></i></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- YOU CAN ADD MORE BLOCKS ABOVE -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
================================================
NAVIGATION (HIDDEN ON MOBILE)
================================================
-->
<div class="p-2 px-4 rounded-0 text-uppercase text-center" style="background-color: #D62A6C; margin-left: -1px; margin-right: -1px; margin-bottom: -1px;">
<div class="align-items-center justify-content-center hidden-md-down" style="position: relative;">
<i class="fas fa-square" style="position: absolute; left: 0; font-size: 6px; margin-top: 1px; text-shadow: 2px 2px 1px #53B2C9, 0 0 5px #fff;"></i>
<hr class="w-100" style="position: absolute; border-top: solid 2px #fff;">
<i class="fas fa-square" style="position: absolute; right: 0; font-size: 6px; margin-top: 1px; text-shadow: 2px 2px 1px #53B2C9, 0 0 5px #fff;"></i>
<div class="row no-gutters w-100 justify-content-around" style="text-shadow: 2px 2px 1px #53B2C9, 0 0 5px #fff;">
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#intro" class="text-white card border-0 bg-transparent" style="z-index: 10;">Intro</a>
<div class="w-100 border-bottom-0" style="border: solid 2px #fff; position: absolute; left: 0; top: 0; height: calc(50% + 1px);"></div>
</div>
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#stats" class="text-white card border-0 bg-transparent" style="z-index: 10;">Stats</a>
<div class="w-100 border-top-0" style="border: solid 2px #fff; position: absolute; left: 0; bottom: 0; height: calc(50% + 1px);"></div>
</div>
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#prefs" class="text-white card border-0 bg-transparent" style="z-index: 10;">Likings</a>
<div class="w-100 border-bottom-0" style="border: solid 2px #fff; position: absolute; left: 0; top: 0; height: calc(50% + 1px);"></div>
</div>
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#design" class="text-white card border-0 bg-transparent" style="z-index: 10;">Design</a>
<div class="w-100 border-top-0" style="border: solid 2px #fff; position: absolute; left: 0; bottom: 0; height: calc(50% + 1px);"></div>
</div>
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#story" class="text-white card border-0 bg-transparent" style="z-index: 10;">Story</a>
<div class="w-100 border-bottom-0" style="border: solid 2px #fff; position: absolute; left: 0; top: 0; height: calc(50% + 1px);"></div>
</div>
<div class="col-auto p-1 px-3" style="background-color: #D62A6C;">
<a href="#links" class="text-white card border-0 bg-transparent" style="z-index: 10;">Related</a>
<div class="w-100 border-top-0" style="border: solid 2px #fff; position: absolute; left: 0; bottom: 0; height: calc(50% + 1px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<p class="text-center mt-1">
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster" style="color: #fff; text-shadow: -1px -1px 1px #143FDB, 2px 2px 1px #D62A6C;"><i class="fas fa-code"></i></a>
</p>
</div>
</div>