Profile
<!-- THIS CODE USES CUSTOM COLORS
10. || Out There || F2U
MAIN ACCENT (LIGHT) == #90d5f5
SECONDARY COLOR (DULL) == #617eae
TEXT COLOR (WHITE) == #fff
CARDS COLOR (DARK) == #111115
TEXT & WIRES SHADOW == #0117C6
PROGRESS BAR BG == #5A5354
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container p-4" style="color: #fff; border-radius: 3em; max-width: 1200px;
/* Here goes the background photo. You can change it to the one you like by changing the image link */;
background-image: url(https://images.unsplash.com/photo-1519810755548-39cd217da494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);
background-size: cover;
background-position: bottom;">
<div class="row no-gutters">
<!--
====================================
NAME BLOCK
====================================
-->
<div class="col-12 p-2">
<div class="row no-gutters">
<!-- LEFT WIRES COLUMN -->
<div class="col mt-2">
<div class="card border-0 hidden-lg-down" style="height:120%; position: absolute; top: -6px; width: 25px; background: #111115;"></div>
<div class="card border-0 hidden-lg-down" style="height:120%; position: absolute; top: -6px; left: 30px; width: 10px; background: #111115;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #fff; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
</div>
<!-- CHARACTER NAME CARD -->
<div class="rounded col-auto mr-2 ml-2 p-1 pl-4 pr-4" style="background: rgba(144, 213, 245, .7); border-radius: 1em;">
<p class="text-white" style="font-size: 20px; font-family: Lucida Console, monospace;"><i class="fad fa-user-astronaut hidden-lg-down"></i>
Character Name
</p>
</div>
<!-- RIGHT WIRES COLUMN -->
<div class="col col-lg-2 mt-2">
<div class="card border-0 hidden-lg-down" style="height:120%; position: absolute; top: -6px; right: -2px; width: 25px; background: #111115;"></div>
<div class="card border-0 hidden-lg-down" style="height:120%; position: absolute; top: -6px; right: 28px; width: 10px; background: #111115;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #fff; box-shadow: 0px 0px 4px #0117C6;"></div>
<div class="rounded mb-1" style="height: 3px; background: #90d5f5; box-shadow: 0px 0px 4px #0117C6;"></div>
</div>
</div>
</div>
<!--
====================================
IMAGE + MAIN INFO BLOCK
====================================
-->
<div class="col-12" style="border-radius: 3em; background: #111115;">
<div class="row no-gutters">
<div class="p-4 col-12 col-lg-5 align-items-center justify-content-center">
<div class="card border-0" style="position: absolute; height: 120px; width: 280px; border-radius: 2em; background: linear-gradient(to bottom, #90d5f5 -50%, #617eae 150%);"></div>
<div class="card border-0 rounded-circle" style="height: 250px; width: 250px; background: linear-gradient(to bottom, #90d5f5, #617eae);">
<div class="h-100 card-flex align-items-center">
<div style="width: 102%; position: absolute; height: 10px; background: #111115; transform: rotate(40deg);"></div>
<div style="width: 102%; position: absolute; height: 10px; background: #111115; transform: rotate(-40deg);"></div>
<div style="width: 102%; position: absolute; height: 10px; background: #111115; transform: rotate(90deg);"></div>
</div>
<div class="rounded-circle p-3" style="position: absolute; top: -1px; left: -1px; height: 250px; width: 250px;">
<!-- CHARACTER IMAGE == INSERT YOUR IMAGE LINK HERE -->
<div class="card rounded-circle h-100" style="border: solid 8px #111115;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-7">
<p class="text-uppercase text-center mt-2 mb-2" style="color: #fff; font-size: 17px; font-family: Courier New, monospace;">[ ...astronaut passport verified. ]</p>
<div class="row no-gutters">
<!-- GENDER -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Gender
</p>
</div>
</div>
</div>
<!-- AGE -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Age
</p>
</div>
</div>
</div>
<!-- PRONOUNS -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Cont/Cont
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Pronouns
</p>
</div>
</div>
</div>
<!-- RACE -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Race
</p>
</div>
</div>
</div>
<!-- DOB -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
xx.xx.xxxx
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
DoB
</p>
</div>
</div>
</div>
<!-- SIGN -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Sign
</p>
</div>
</div>
</div>
<!-- HEIGHT -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
S.O.
</p>
</div>
</div>
</div>
<!-- ROLE -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Role
</p>
</div>
</div>
</div>
<!-- HOMEWORLD -->
<div class="col-12 col-lg-4">
<div class="row no-gutters p-2">
<div class="col-auto mr-2" style="width: 5px; background: #90d5f5;"></div>
<div class="col" style="font-size: 17px; font-family: Courier New, monospace;">
<code style="color: #fff; font-size: 17px; font-family: Courier New, monospace; background: #617eae;">
Content
</code>
<p class="text-uppercase small ml-1" style="color: #90d5f5; text-shadow: 0px 0px 5px #90d5f5;">
Homeworld
</p>
</div>
</div>
</div>
<div class="card-flex pr-5 pb-3 pb-lg-0 pl-2 pl-lg-0 col-12 align-items-center mt-3">
<div class="col-11">
<div class="row no-gutters" style="color: #fff; font-size: 17px; font-family: Courier New, monospace;">
<div class="col-auto">[</div>
<div class="col-10 text-center">
Out There OST - Journey Begins
</div>
<div class="col-auto">]</div>
</div>
</div>
<div class="card border-0 col-auto align-items-center justify-content-center" style=" background: none; height: 33px; width: 33px; overflow: hidden;">
<i class="fat fa-compact-disc fa-2x" style="color: #fff;"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -6px; left: -8px;"
src="https://www.youtube.com/embed/r5bBylUflYo"></iframe>
<!--
====================================================
VIDEO EMBED -- INSERT VIDEO ID
If you are struggling with what YT video ID is, let
me show you an example on the video that is embedded
here in code's blank.
Here's the whole video link:
https://www.youtube.com/watch?v=r5bBylUflYo
And what we need is a string after "=":
https://www.youtube.com/watch?v= r5bBylUflYo
And we put it here (without spaces):
https://www.youtube.com/embed/ r5bBylUflYo
That's it!
====================================================
-->
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================
NAV BUTTONS BLOCK
====================================
-->
<div class="card-flex align-items-center justify-content-center col-12 col-lg-1 mt-3">
<!-- NAV WIRES (PC) -->
<div class="row no-gutters h-100 ml-4 hidden-lg-down">
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #111115;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #fff;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #111115;"></div>
<div class="card rounded mr-1" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded" style="width: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card border-0" style="position: absolute; right: 0px; width: 65px; height: 25px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; right: 0px; top: 30px; width: 65px; height: 10px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; right: 0px; bottom: 30px; width: 65px; height: 10px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; right: 0px; bottom: 0px; width: 65px; height: 25px; background: #111115;"></div>
</div>
<!-- NAV WIRES (MOBILE) -->
<div class="col no-gutters w-100 ml-0 ml-lg-4 hidden-md-up">
<div class="card border-0 rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #111115;"></div>
<div class="card rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #fff;"></div>
<div class="card border-0 rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #111115;"></div>
<div class="card rounded mb-1" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card rounded" style="height: 3px; box-shadow: 0px 0px 4px #0117C6; background: #90d5f5;"></div>
<div class="card border-0" style="position: absolute; right: 0px; top: -5px; height: 65px; width: 25px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; right: 30px; top: -5px; height: 65px; width: 10px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; left: 30px; top: -5px; height: 65px; width: 10px; background: #111115;"></div>
<div class="card border-0" style="position: absolute; left: 0px; top: -5px; height: 65px; width: 25px; background: #111115;"></div>
</div>
<!-- NAVIGATION BUTTONS-->
<div class="w-100 ml-0 ml-lg-4" style="position: absolute;">
<ul class="nav row no-gutters justify-content-center" style="text-shadow: 0px 0px 10px #0117C6;">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#stats"><i class="fas fa-address-card text-white fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#look"><i class="fas fa-folder-medical text-white fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mood"><i class="fas fa-image text-white fa-2x fa-fw"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#story"><i class="fas fa-cassette-tape text-white fa-2x fa-fw"></i></a>
</li>
</ul>
</div>
</div>
<!--
====================================
TABS INFO BLOCK
====================================
-->
<div class="card border-0 col-12 col-lg mt-3 ml-0 ml-lg-3" style="border-radius: 3em; background: #111115; overflow: hidden;">
<div class="tab-content">
<!--
====================================
BASICS
====================================
-->
<div class="tab-pane fade in active show" id="stats">
<div class="row no-gutters">
<!-- BASICS HEADER (PC) -->
<div class="card border-0 col-lg-1 align-items-center justify-content-center hidden-lg-down" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<span>B</span>
<span class="mt-0 mt-lg-n3">A</span>
<span class="mt-0 mt-lg-n3">S</span>
<span class="mt-0 mt-lg-n3">I</span>
<span class="mt-0 mt-lg-n3">C</span>
<span class="mt-0 mt-lg-n3">S</span>
</div>
<!-- BASICS HEADER (MOBILE) -->
<div class="card border-0 col-12 align-items-center justify-content-center hidden-md-up mb-2" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<p class="text-uppercase" style="letter-spacing: .1em;">Basics</p>
<div class="col-8" style="max-height: 5px; background: #90d5f5;"></div>
</div>
<!-- CYAN DIVIDER (PC) -->
<div class="col-auto mt-5 mb-5 hidden-lg-down" style="width: 5px; background: #90d5f5;"></div>
<!-- MAIN BASICS CONTENT -->
<div class="col-12 col-lg p-3 text-justify" style="font-family: Courier New, monospace; height: 300px; overflow: auto;">
<div class="row no-gutters">
<!--
==============================
PROGRESS BAR STATS
==============================
-->
<div class="col-12 col-lg-6 p-2">
<!-- STRENGHT STAT -->
<div class="row no-gutters align-items-center mt-1" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Strenght
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar bar-striped" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Courage
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- AGILITY STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Agility
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- CHARISMA STAT-->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Charisma
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Integrity
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- PAITIENCE STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Paitience
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Intellect
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Maturity
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- LOYALTY STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Loyalty
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
<!-- TEAMWORK STAT -->
<div class="row no-gutters align-items-center" style="font-size: 16px;">
<div class="col-4 text-uppercase text-truncate">
Teamwork
</div>
<div class="col">
<div class="progress" style="border-radius: 0px; background: #5A5354;">
<!-- PROGRESS BAR == CHANGE 50% VALUE TO 1-100% -->
<div class="progress-bar" style="background: linear-gradient(to right, #617eae, #90d5f5 120%); width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
==============================
PERSONALITY & STUFF
==============================
-->
<div class="col-12 col-lg-6 p-2" style="font-size: 16px;">
<!-- PERSONALITY TYPE -->
<div class="row no-gutters justify-content-between">
<span>
[Personality]:
</span>
<span style="color: #90d5f5;">
Intro/Extro
</span>
</div>
<!-- ATTITUDE -->
<div class="row no-gutters justify-content-between">
<span>
[Attitude]:
</span>
<span style="color: #90d5f5;">
Opti/pessimist
</span>
</div>
<!-- MBTI -->
<div class="row no-gutters justify-content-between">
<span>
[MBTI]:
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
<!-- DIVIDER -->
<div class="row no-gutters">
<div class="col pl-2 mt-2" style="height: 5px; background: linear-gradient(to left, #90d5f5, #111115);"></div>
<div class="col-auto"><i class="fad fa-square-dashed pl-2 pr-2"></i></div>
<div class="col pr-2 mt-2" style="height: 5px; background: linear-gradient(to right, #90d5f5, #111115);"></div>
</div>
<!-- DOMINANT HAND -->
<div class="row no-gutters justify-content-between">
<span>
[Dom. Hand]:
</span>
<span style="color: #90d5f5;">
Left/Right
</span>
</div>
<!-- LEADING TRAIT -->
<div class="row no-gutters justify-content-between">
<span>
[Leading trait]:
</span>
<span style="color: #90d5f5;">
Trait
</span>
</div>
<!-- BIGGEST FLAW -->
<div class="row no-gutters justify-content-between">
<span>
[Biggest flaw]:
</span>
<span style="color: #90d5f5;">
Trait
</span>
</div>
<!-- BIGGEST FLAW -->
<div class="row no-gutters justify-content-between">
<span>
[Quirks]:
</span>
<span class="text-right" style="color: #90d5f5;">
One <br>
Two <br>
Three
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================
APPEARANCE
====================================
-->
<div class="tab-pane fade" id="look">
<div class="row no-gutters">
<!-- DESIGN HEADER (PC) -->
<div class="card border-0 col-lg-1 align-items-center justify-content-center hidden-lg-down" style="background: none; border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<span>D</span>
<span class="mt-0 mt-lg-n3">E</span>
<span class="mt-0 mt-lg-n3">S</span>
<span class="mt-0 mt-lg-n3">I</span>
<span class="mt-0 mt-lg-n3">G</span>
<span class="mt-0 mt-lg-n3">N</span>
</div>
<!-- DESIGN HEADER (MOBILE) -->
<div class="card border-0 col-12 align-items-center justify-content-center hidden-md-up mb-2" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<p class="text-uppercase" style="letter-spacing: .1em;">Design</p>
<div class="col-8" style="max-height: 5px; background: #90d5f5;"></div>
</div>
<!-- CYAN DIVIDER (PC) -->
<div class="col-auto mt-5 mb-5 hidden-lg-down" style="width: 5px; background: #90d5f5;"></div>
<!-- DESIGN STORY CONTENT -->
<div class="col-12 col-lg text-justify" style="font-family: Courier New, monospace; height: 300px; overflow: auto;">
<div class="row no-gutters">
<div class="col-12 col-lg-7">
<div style="min-height: 300px; position: sticky; top: 0px;">
<div class="row no-gutters">
<div class="col-12 col-lg-5 pl-2 pr-2 mt-3 mt-lg-0 mb-2 mb-lg-0" style="position: relative;">
<!-- CHARACTER IMAGE == INSERT YOUR IMAGE LINK HERE -->
<div class="h-100" style="min-height: 150px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<div class="col-12 col-lg" style="min-height: 300px;">
<!--
===============================
COLOR PALETTE
===============================
-->
<div class="row no-gutters">
<!-- HAIR COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
Hair
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
<!-- SKIN COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
SKIN
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
<!-- LEFT EYE COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
Eye(L)
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
<!-- RIGHT EYE COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
Eye(R)
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
<!-- EXTRA1 COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
Extra
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
<!-- EXTRA2 COLOR -->
<div class="col-6">
<div class="row no-gutters p-2">
<!-- INPUT YOUR HEXCODE HERE AND DOUBLE IT BELOW -->
<div class="col-auto m-1 mr-1" style="width: 15px; background:
#617eae
;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-size: 18px;">
Extra
</p>
<span style="color: #90d5f5">
#hexcode
</span>
</div>
</div>
</div>
</div>
<!--
===============================
BODY INFO
===============================
-->
<div class="p-2">
<!-- HEIGHT -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase">
Height
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
<!-- WEIGHT -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase">
Weight
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
<!-- BODY TYPE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase">
Body type
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
<!-- FACE TYPE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase">
Face shape
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
<!-- HAIRLINE TYPE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase">
Hairline
</span>
<span style="color: #90d5f5;">
Content
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
===============================
DETAILS (SCROLLABLE)
You can delete separate divs if
you don't need them!
===============================
-->
<div class="col-12 col-lg">
<!-- FACIAL FEATURES -->
<div class="col p-2">
<p class="text-uppercase text-center mt-1" style="font-size: 18px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
Facial features
</p>
<p>Lorem ipsum dolor sit amet, consecte adipiscing elit. Morbi nec ex in mi fermentum gravida. Pellentesque quis dapibus nisi, eget malesuada purus.</p>
</div>
<!-- SCARS & MARKS -->
<div class="col p-2">
<p class="text-uppercase text-center mt-1" style="font-size: 18px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
Scars & marks
</p>
<p>Lorem ipsum dolor sit amet, consecte adipiscing elit. Morbi nec ex in mi fermentum gravida. Pellentesque quis dapibus nisi, eget malesuada purus.</p>
</div>
<!-- TATTOOS -->
<div class="col p-2">
<p class="text-uppercase text-center mt-1" style="font-size: 18px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
Tattoos
</p>
<p>Lorem ipsum dolor sit amet, consecte adipiscing elit. Morbi nec ex in mi fermentum gravida. Pellentesque quis dapibus nisi, eget malesuada purus.</p>
</div>
<!-- PIERCINGS -->
<div class="col p-2">
<p class="text-uppercase text-center mt-1" style="font-size: 18px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
Piercings
</p>
<p>Lorem ipsum dolor sit amet, consecte adipiscing elit. Morbi nec ex in mi fermentum gravida. Pellentesque quis dapibus nisi, eget malesuada purus.</p>
</div>
<!-- DESIGN NOTES -->
<div class="col p-2">
<p class="text-uppercase text-center mt-1" style="font-size: 18px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
Design notes
</p>
<ul class="fa-ul pr-2">
<li class="mb-2"><span class="fa-li"><i class="fad fa-square-dashed"></i></span>
Add a note.
</li>
<li class="mb-2"><span class="fa-li"><i class="fad fa-square-dashed"></i></span>
And another one.
</li>
<li class="mb-2"><span class="fa-li"><i class="fad fa-square-dashed"></i></span>
You can add more than five if you want.
</li>
<li class="mb-2"><span class="fa-li"><i class="fad fa-square-dashed"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="mb-2"><span class="fa-li"><i class="fad fa-square-dashed"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================
MOODBOARD
====================================
-->
<div class="tab-pane fade" id="mood">
<div class="row no-gutters">
<!-- MOODBOARD HEADER (PC) -->
<div class="card border-0 col-lg-1 align-items-center justify-content-center hidden-lg-down" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<span>T</span>
<span class="mt-0 mt-lg-n3">H</span>
<span class="mt-0 mt-lg-n3">E</span>
<span class="mt-0 mt-lg-n3">M</span>
<span class="mt-0 mt-lg-n3">E</span>
</div>
<!-- MOODBOARD HEADER (MOBILE) -->
<div class="card border-0 col-12 align-items-center justify-content-center hidden-md-up mb-2" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<p class="text-uppercase" style="letter-spacing: .1em;">Theme</p>
<div class="col-8" style="max-height: 5px; background: #90d5f5;"></div>
</div>
<!-- CYAN DIVIDER (PC) -->
<div class="col-auto mt-5 mb-5 hidden-lg-down" style="width: 5px; background: #90d5f5;"></div>
<!-- MAIN MOODBOARD CONTENT -->
<div class="col-12 col-lg p-3 text-justify" style="font-family: Courier New, monospace; height: 300px; overflow: auto;">
<div class="h-100" style="border-radius: 2em;">
<div class="row no-gutters h-100">
<div class="col mr-2 h-100">
<!-- MOODBOARD IMAGE -->
<div class="col-12 h-100" style="max-height: 130px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 2em 0em 0em 0em;
border: solid 3px #617eae;"></div>
<!-- MOODBOARD IMAGE -->
<div class="col-12 mt-2 h-100" style="max-height: 130px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 0em 0em 0em 2em;
border: solid 3px #617eae;"></div>
</div>
<div class="col-6 col-lg-3 h-100" style="background: #617eae;">
<i class="fad fa-quote-left" style="position: absolute; top: 5px; left: 5px;"></i>
<i class="fad fa-quote-right" style="position: absolute; bottom: 5px; right: 5px;"></i>
<div class="col p-2 p-lg-3 h-100 align-items-center justify-content-center">
<div class="col p-0 p-lg-2">
<!-- FA ICON -- You can change "moon" to another FA icon name -->
<p class="text-center"><i class="fat fa-moon fa-2x"></i></p>
<!-- QUOTE -- TRY TO KEEP IT SHORT-->
<p class="small" style="font-style: italic;">
That's one small step for a man, one giant leap for mankind.
</p>
</div>
</div>
</div>
<div class="col ml-2 h-100">
<!-- MOODBOARD IMAGE -->
<div class="col-12 h-100" style="max-height: 130px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 0em 2em 0em 0em;
border: solid 3px #617eae;"></div>
<!-- MOODBOARD IMAGE -->
<div class="col-12 mt-2 h-100" style="max-height: 130px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;
border-radius: 0em 0em 2em 0em;
border: solid 3px #617eae;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================
STORY
====================================
-->
<div class="tab-pane fade" id="story">
<div class="row no-gutters">
<!-- STORY HEADER (PC) -->
<div class="card border-0 col-lg-1 align-items-center justify-content-center hidden-lg-down" style="background: none; border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<span>S</span>
<span class="mt-0 mt-lg-n3">T</span>
<span class="mt-0 mt-lg-n3">O</span>
<span class="mt-0 mt-lg-n3">R</span>
<span class="mt-0 mt-lg-n3">Y</span>
</div>
<!-- STORY HEADER (MOBILE) -->
<div class="card border-0 col-12 align-items-center justify-content-center hidden-md-up mb-2" style="background: none;border-radius: 0px; font-size: 30px; font-family: Lucida Console, monospace; text-shadow: 0px 0px 5px #90d5f5;">
<p class="text-uppercase" style="letter-spacing: .1em;">Story</p>
<div class="col-8" style="max-height: 5px; background: #90d5f5;"></div>
</div>
<!-- CYAN DIVIDER (PC) -->
<div class="col-auto mt-5 mb-5 hidden-lg-down" style="width: 5px; background: #90d5f5;"></div>
<!-- MAIN STORY CONTENT -->
<div class="col-12 col-lg p-3 text-justify" style="font-family: Courier New, monospace; height: 300px; overflow: auto;">
<div class="col">
<!-- SUBHEADER -->
<div class="card-flex align-items-center text-uppercase p-1 col-10 col-lg-5 mb-1 ml-n3" style="background: linear-gradient(to right, #617eae, #111115 );">
<p class="ml-3 mt-1" style="font-size: 18px; font-family: Lucida Console, monospace;">
SUBHEADER
</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus massa elit, vitae molestie turpis suscipit ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta leo id euismod tincidunt. Proin porttitor pretium sem, quis ullamcorper tortor efficitur ac. Integer blandit ligula a neque tempus, sed bibendum odio suscipit.</p>
<!-- SUBHEADER -->
<div class="card-flex align-items-center text-uppercase p-1 col-10 col-lg-5 mb-1 mt-3 ml-n3" style="background: linear-gradient(to right, #617eae, #111115 );">
<p class="ml-3 mt-1" style="font-size: 18px; font-family: Lucida Console, monospace;">
SUBHEADER
</p>
</div>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse imperdiet ligula iaculis, rutrum libero ornare, fringilla turpis. Duis commodo augue eu pretium pulvinar. Aliquam fringilla faucibus scelerisque. Fusce leo tellus, efficitur eu malesuada id, pellentesque eget ligula. Nunc eget elementum augue.</p>
<p>Sed malesuada ac lorem laoreet bibendum. Nulla gravida est est, nec euismod ante volutpat sit amet. Mauris porttitor mauris magna, quis elementum felis luctus ac. Aenean lacus dui, pellentesque vel auctor eu, suscipit et enim. Quisque ultrices elit fermentum dolor iaculis auctor. Nam luctus risus lorem, quis mattis lectus faucibus dapibus. Donec elit turpis, mattis id lobortis non, commodo in elit.</p>
<!-- SUBHEADER -->
<div class="card-flex align-items-center text-uppercase p-1 col-10 col-lg-5 mb-1 mt-3 ml-n3" style="background: linear-gradient(to right, #617eae, #111115 );">
<p class="ml-3 mt-1" style="font-size: 18px; font-family: Lucida Console, monospace;">
SUBHEADER
</p>
</div>
<p>Praesent in euismod ligula. Sed consequat nibh sit amet turpis tempus, vitae sodales nisl aliquet. Vestibulum congue elit vel sollicitudin fermentum. In id mollis turpis. Sed interdum tempus posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque accumsan turpis et volutpat rutrum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
====================================
RELATIONSHIP BLOCK
====================================
-->
<div class="col-12 mt-3" style="border-radius: 3em; background: #111115; min-height: 200px; font-family: Courier New, monospace;">
<!-- You can change the number according to -->
<p class="text-uppercase mt-4 mt-lg-2 mb-2 pl-2 pl-lg-5 m-3 m-lg-0" style="color: #fff; font-size: 17px;">
[ ...4 people linked with this person were found. ]
</p>
<div class="row no-gutters p-2">
<!-- CHARACTER RELATIONSHIP BLOCK -->
<div class="col-12 col-lg-6 p-2">
<div class="justify-content-center float-lg-left">
<!-- CHARACTER IMAGE == INSERT YOUR LINK HERE -->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center; border: solid 3px #617eae;" class="mr-0 mr-lg-2" align="center">
</div>
<div class="row no-gutters pt-3 pl-2 pl-lg-0">
<div class="col-auto mr-1" style="width: 5px; background: #90d5f5;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-family: Lucida Console, monospace; font-size: 18px;">
<a style="color: #90d5f5;"
href="LINK_HERE">
Character Name
</a>
</p>
<span>[
relationship
]</span>
</div>
</div>
<div class="pl-2 pr-2 pr-lg-0 mt-2 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>
</div>
</div>
<!-- CHARACTER RELATIONSHIP BLOCK -->
<div class="col-12 col-lg-6 p-2">
<div class="justify-content-center float-lg-left">
<!-- CHARACTER IMAGE == INSERT YOUR LINK HERE -->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center; border: solid 3px #617eae;" class="mr-0 mr-lg-2" align="center">
</div>
<div class="row no-gutters pt-3 pl-2 pl-lg-0">
<div class="col-auto mr-1" style="width: 5px; background: #90d5f5;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-family: Lucida Console, monospace; font-size: 18px;">
<a style="color: #90d5f5;"
href="LINK_HERE">
Character Name
</a>
</p>
<span>[
relationship
]</span>
</div>
</div>
<div class="pl-2 pr-2 pr-lg-0 mt-2 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>
</div>
</div>
<!-- CHARACTER RELATIONSHIP BLOCK -->
<div class="col-12 col-lg-6 p-2">
<div class="justify-content-center float-lg-left">
<!-- CHARACTER IMAGE == INSERT YOUR LINK HERE -->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center; border: solid 3px #617eae;" class="mr-0 mr-lg-2" align="center">
</div>
<div class="row no-gutters pt-3 pl-2 pl-lg-0">
<div class="col-auto mr-1" style="width: 5px; background: #90d5f5;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-family: Lucida Console, monospace; font-size: 18px;">
<a style="color: #90d5f5;"
href="LINK_HERE">
Character Name
</a>
</p>
<span>[
relationship
]</span>
</div>
</div>
<div class="pl-2 pr-2 pr-lg-0 mt-2 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>
</div>
</div>
<!-- CHARACTER RELATIONSHIP BLOCK -->
<div class="col-12 col-lg-6 p-2">
<div class="justify-content-center float-lg-left">
<!-- CHARACTER IMAGE == INSERT YOUR LINK HERE -->
<img src="URLHERE"
style="height: 150px; width: 150px; border-radius: 2em; object-fit: cover; object-position: center; border: solid 3px #617eae;" class="mr-0 mr-lg-2" align="center">
</div>
<div class="row no-gutters pt-3 pl-2 pl-lg-0">
<div class="col-auto mr-1" style="width: 5px; background: #90d5f5;"></div>
<div class="col">
<p class="text-uppercase mb-n2" style="font-family: Lucida Console, monospace; font-size: 18px;">
<a style="color: #90d5f5;"
href="LINK_HERE">
Character Name
</a>
</p>
<span>[
relationship
]</span>
</div>
</div>
<div class="pl-2 pr-2 pr-lg-0 mt-2 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>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE! -->
<a title="COde by ChiiAka" class="tooltipster" href="https://toyhou.se/ChiiAka" style="position: absolute; right: 35px; bottom: 20px; color: #fff; z-index: 2; text-shadow: 0px 0px 5px #90d5f5;"><i class="fad fa-code"></i></a>
</div>
</div>