<!-- ===================================================================
COLOURS
» highlight the numbers i have written below
» hit ctrl f
» hit the plus sign
» put in your new colour or url
» click the "all" button - this automatically replaces everything
BACKGROUND
FFFFFF
TAB ONE
fal fa-diamond
355070
https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
TAB TWO
fal fa-triangle
6D597A
https://images.unsplash.com/photo-1577915332909-39e7c140bf3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80
TAB THREE
fal fa bookmark
B56576
https://images.unsplash.com/photo-1509114397022-ed747cca3f65?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80
TAB FOUR
fal fa-heart
E56B6F
https://images.unsplash.com/photo-1509114397022-ed747cca3f65?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80
TAB FIVE
fal-fa-star
E39038
https://images.unsplash.com/photo-1508808787069-421e7986016e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80
================================================================= -->
<!-- CHANGE FONT HERE -->
<div class="container" style="max-width:800px; font-family:courier; font-size:13px">
<ul class="nav nav-tabs text-uppercase border-0" style="letter-spacing:1px;">
<li class="nav-item mx-2">
<a class="nav-link active py-3" style="background:#355070; border-color:#355070; color:#FFFFFF; border-radius:50% 50% 0 0;" data-toggle="tab" href="#ONE">
<!-- TAB 1 ICON -->
<i class="fal fa-diamond fa-lg fa-fw"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link py-3" style="background:#6D597A; border-color:#6D597A; color:#FFFFFF; border-radius:50% 50% 0 0;" data-toggle="tab" href="#TWO">
<!-- TAB 2 ICON -->
<i class="fal fa-triangle fa-lg fa-fw"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link py-3" style="background:#B56576; border-color:#B56576; color:#FFFFFF; border-radius:50% 50% 0 0;" data-toggle="tab" href="#THREE">
<!-- TAB 3 ICON -->
<i class="fal fa-bookmark fa-lg fa-fw"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link py-3" style="background:#E56B6F; border-color:#E56B6F; color:#FFFFFF; border-radius:50% 50% 0 0;" data-toggle="tab" href="#FOUR">
<!-- TAB 4 ICON -->
<i class="fal fa-heart fa-lg fa-fw"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link py-3" style="background:#E39038; border-color:#E39038; color:#FFFFFF; border-radius:50% 50% 0 0;" data-toggle="tab" href="#FIVE">
<!-- TAB 5 ICON -->
<i class="fal fa-star fa-lg fa-fw"></i></a>
</li>
</ul>
<div class="tab-content">
<!-- TAB 1 START -->
<div class="tab-pane active show card p-2 border-0" id="ONE" style="background:#355070">
<div class="card border-0 rounded-0 p-1" style="color:#355070; background:#FFFFFF">
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="background-size:cover; background-color:#355070; background-attachment:fixed; background-image:url(https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);">
<h1 style="letter-spacing:1px;" class="display-4 text-uppercase m-2 text-white">
<!-- TAB 1 HEADER & ICON -->
<i class="fal fa-diamond fa-fw pull-right"></i> about</h1>
</div>
<div class="row no-gutters">
<div class="col-sm-6 p-1">
<div class="card p-2 bg-transparent rounded-0" style="border:2px solid #355070;">
<blockquote style="padding:0px 0px 0px 10px;margin:0;border-color:#355070; font-size:13px">
<div class="d-flex justify-content-between">
<span>NICKNAME</span>
<span class="text-right">or full name</span>
</div>
<div class="d-flex justify-content-between">
<span>BIRTHDATE</span>
<span class="text-right">unknown</span>
</div>
<div class="d-flex justify-content-between">
<span>AGE</span>
<span class="text-right">unknown</span>
</div>
<div class="d-flex justify-content-between">
<span>SPECIES</span>
<span class="text-right">or race</span>
</div>
<div class="d-flex justify-content-between">
<span>GENDER</span>
<span class="text-right">unknown | pro/nouns</span>
</div>
<div class="d-flex justify-content-between">
<span>ORIENTATION</span>
<span class="text-right">unknown</span>
</div>
</blockquote>
</div>
</div>
<div class="col-sm-6 p-1">
<div class="card p-2 bg-transparent rounded-0" style="border:2px solid #355070;">
<blockquote style="padding:0px 0px 0px 10px;margin:0;border-color:#355070; font-size:13px">
<div class="d-flex justify-content-between">
<span>RESIDENCE</span>
<span class="text-right">where they live</span>
</div>
<div class="d-flex justify-content-between">
<span>OCCUPATION</span>
<span class="text-right">their job</span>
</div>
<div class="d-flex justify-content-between">
<span>DEMEANOR</span>
<span class="text-right">behavior</span>
</div>
<div class="d-flex justify-content-between">
<span>ALIGNMENT</span>
<span class="text-right">dnd alignment</span>
</div>
<div class="d-flex justify-content-between">
<span>LIFE STATUS</span>
<span class="text-right">alive</span>
</div>
<div class="d-flex justify-content-between">
<span>RELATIONSHIP STATUS</span>
<span class="text-right">single</span>
</div>
</blockquote>
</div>
</div><!-- COL END -->
</div><!-- ROW END -->
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#355070; background-attachment:fixed; background-image:url(https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- OVERVIEW CARD -->
<div class="row no-gutters">
<div class="col-sm-8">
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #355070;">
<p class="mb-2"><span class="mb-0" style="font-size:20px;">OVERVIEW</span>
<!-- OVERVIEW INFO -->
A quick introduction to your character. dont delete the "overview" in the span tag, its supposed to be a cute header.</p>
<p class="mb-2">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 ICON-->
<div class="col-sm-4 p-1">
<div style="height:100%;width:100%;min-height:100px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-color:#222222;background-position:center;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/36108449_ODDsF9aToyOO2CQ.png); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
</div>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#355070; background-attachment:fixed; background-image:url(https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div><!-- WHITE CARD END -->
</div><!--TAB CONTENT END-->
<!-- TAB 2 START -->
<div class="tab-pane card p-2 border-0" id="TWO" style="background:#6D597A">
<div class="card border-0 rounded-0 p-1" style="color:#6D597A; background:#FFFFFF">
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="background-size:cover; background-color:#6D597A; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1577915332909-39e7c140bf3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);">
<h1 style="letter-spacing:1px;" class="display-4 text-uppercase m-2 text-white">
<!-- TAB 2 HEADER & ICON -->
<i class="fal fa-triangle fa-fw pull-right"></i> details</h1>
</div>
<!-- PERSONALITY CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #6D597A;">
<p class="mb-2"><span class="mb-0" style="font-size:20px;">PERSONALITY</span>
<!-- PERSONALITY DESCRIPTION -->
Describe their personality here. 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.</p>
<p class="mb-2">New paragraph. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p class="mb-0" style="font-size:20px;">TRAITS</p>
<blockquote class="pl-2 p-0 mb-0" style="font-size:13px;border-color:#6D597A">
<p class="mb-1"><i class="fas fa-plus fa-fw faded"></i> positive; pos; pos</p>
<p class="mb-1"><i class="fas fa-equals fa-fw faded"></i> neutral; neut; neut</p>
<p class="mb-1"><i class="fas fa-minus fa-fw faded"></i> negative; neg; neg</p>
</blockquote>
</div>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#6D597A; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1577915332909-39e7c140bf3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- HABITS CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #6D597A;">
<p class="mb-0" style="font-size:20px;">HABITS</p>
<blockquote class="p-0 pl-2" style="font-size:13px;border-color:#6D597A">Do they have any habits? What is it? What do they do exactly? When do they do it (when they are stressed, midlessly, etc.)</blockquote>
<blockquote class="p-0 pl-2" style="font-size:13px;border-color:#6D597A">Each habit gets its own blockquote.</blockquote>
<blockquote class="p-0 pl-2" style="font-size:13px;border-color:#6D597A">Note.</blockquote>
<p class="mb-0" style="font-size:20px">DISPOSITION</p>
<div class="row">
<!-- PERSONALITY STATS - add or remove icons as neccessary, feel free to change the shape -->
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">charisma</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">kindness</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">intelect</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">integrity</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">generosity</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">temper</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">maturity</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">optimism</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">manners</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
<div class="col-md-6 justify-content-between">
<span class="text-uppercase">humour</span>
<span class="text-right"><i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
</span>
</div>
</div> <!-- disposition ends -->
</div>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#6D597A; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1577915332909-39e7c140bf3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<div class="row no-gutters">
<div class="col-sm-4 p-1">
<!-- LIKES CARD -->
<div class="card p-2 bg-transparent rounded-0 h-100" style="border:2px solid #6D597A;">
<p class="mb-0" style="font-size:20px;">LIKES</p>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">What do they like? This can be an activity, fasion style, hobby, colours, etc. Describe what it is and why they like it.</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
</div>
</div>
<div class="col-sm-4 p-1">
<!-- DISLIKES CARD -->
<div class="card p-2 bg-transparent rounded-0 h-100" style="border:2px solid #6D597A;">
<p class="mb-0" style="font-size:20px;">DISLIKES</p>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
</div>
</div><!-- COL END -->
<div class="col-sm-4 p-1">
<!-- HOBBIES CARD -->
<div class="card p-2 bg-transparent rounded-0 h-100" style="border:2px solid #6D597A;">
<p class="mb-0" style="font-size:20px;">HOBBIES</p>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">This can also be random trivia</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">I love and hate birds. They are cute little shitheads.</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#6D597A; font-size:13px">likes</blockquote>
</div>
</div><!-- COL END -->
</div><!-- ROW END -->
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#6D597A; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1577915332909-39e7c140bf3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
</div>
<!-- TAB 3 START -->
<div class="tab-pane card p-2 border-0" id="THREE" style="background:#B56576">
<div class="card border-0 rounded-0 p-1" style="color:#B56576; background:#FFFFFF">
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="background-size:cover; background-color:#B56576; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1529417283292-30a5d5ef21a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);">
<h1 style="letter-spacing:1px;" class="display-4 text-uppercase m-2 text-white">
<!-- TAB 3 HEADER & ICON -->
<i class="fal fa-bookmark fa-fw pull-right"></i> story</h1>
</div>
<!-- PAST CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #B56576;">
<p class="mb-0" style="font-size:20px;">PAST</p>
<p><span class="px-2"></span>Feel free to change the headers. I usually use childhood, adolescence, and adulthood (or in the case of undead i have a post-mortem section). You can also add or remove the sections. 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>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#B56576; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1529417283292-30a5d5ef21a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- PRESENT CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #B56576;">
<p class="m-0" style="font-size:20px;">PRESENT</p>
<p><span class="px-2"></span>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>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#B56576; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1529417283292-30a5d5ef21a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- FUTURE CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #B56576;">
<p class="m-0" style="font-size:20px;">FUTURE</p>
<p><span class="px-2"></span>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>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#B56576; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1529417283292-30a5d5ef21a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
</div>
<!-- TAB 4 START -->
<div class="tab-pane card p-2 border-0" id="FOUR" style="background:#E56B6F">
<div class="card border-0 rounded-0 p-1" style="color:#E56B6F; background:#FFFFFF">
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="background-size:cover; background-color:#E56B6F; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1509114397022-ed747cca3f65?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1935&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);">
<h1 style="letter-spacing:1px;" class="display-4 text-uppercase m-2 text-white">
<!-- TAB 4 HEADER & ICON -->
<i class="fal fa-heart fa-fw pull-right"></i> relationships</h1>
</div>
<!-- CHRACTER 1 -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #E56B6F;">
<div class="row no-gutters p-1">
<div class="col-sm-4 pr-sm-2">
<div style="height:100%;width:100%;min-height:100px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-color:#222222;background-position:center; background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/36108449_ODDsF9aToyOO2CQ.png); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
<div class="col-sm-8 h-100">
<div class="justify-content-between">
<a href="link" style="font-size:20px">NAME</a>
<span class="faded">relationship</span>
</div>
<p>Who is this character and how are they related to your character? What's their dynamic? Do they even know each other or is it like an unseen guarian or enemy? The side image will grow to match the hight of the content here. 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><!-- character end -->
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#E56B6F; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1509114397022-ed747cca3f65?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1935&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- CHRACTER 1 -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #E56B6F;">
<div class="row no-gutters p-1">
<div class="col-sm-4 pr-sm-2">
<div style="height:100%;width:100%;min-height:100px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-color:#222222;background-position:center; background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/36108449_ODDsF9aToyOO2CQ.png); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
<div class="col-sm-8 h-100">
<div class="justify-content-between">
<a href="link" style="font-size:20px">NAME</a>
<span class="faded">relationship</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div><!-- character end -->
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#E56B6F; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1509114397022-ed747cca3f65?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1935&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- ADD MORE ABOVE -->
</div>
</div>
<!-- TAB 5 START -->
<div class="tab-pane card p-2 border-0" id="FIVE" style="background:#E39038">
<div class="card border-0 rounded-0 p-1" style="color:#E39038; background:#FFFFFF">
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="background-size:cover; background-color:#E39038; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1508808787069-421e7986016e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);">
<h1 style="letter-spacing:1px;" class="display-4 text-uppercase m-2 text-white">
<!-- TAB 5 HEADER & ICON -->
<i class="fal fa-star fa-fw pull-right"></i> design</h1>
</div>
<div class="row no-gutters">
<div class="col-sm-6 p-1">
<!-- LEFT DESIGN CARD -->
<div class="card p-2 bg-transparent rounded-0" style="border:2px solid #E39038;">
<blockquote style="padding:0px 0px 0px 10px;margin:0;border-color:#E39038; font-size:13px">
<div class="d-flex justify-content-between">
<span>BODY TYPE</span>
<span class="text-right">athletic, average, etc.</span>
</div>
<div class="d-flex justify-content-between">
<span>BODY BUILD</span>
<span class="text-right">rectangle, pear, etc.</span>
</div>
<div class="d-flex justify-content-between">
<span>HEIGHT</span>
<span class="text-right">unknown</span>
</div>
<div class="d-flex justify-content-between">
<span>WEIGHT</span>
<span class="text-right">unknown</span>
</div>
</blockquote>
</div>
</div>
<div class="col-sm-6 p-1">
<!-- RIGHT DESIGN CARD -->
<div class="card p-2 bg-transparent rounded-0" style="border:2px solid #E39038;">
<blockquote style="padding:0px 0px 0px 10px;margin:0;border-color:#E39038; font-size:13px">
<div class="d-flex justify-content-between">
<span>SKIN</span>
<span class="text-right">pale, tan, etc.</span>
</div>
<div class="d-flex justify-content-between">
<span>HAIR TYPE</span>
<span class="text-right">curly, wavy, etc.</span>
</div>
<div class="d-flex justify-content-between">
<span>HAIR COLOUR</span>
<span class="text-right">unknown</span>
</div>
<div class="d-flex justify-content-between">
<span>EYE COLOUR</span>
<span class="text-right">unknown</span>
</div>
</blockquote>
</div>
</div><!-- COL END -->
</div><!-- ROW END -->
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#E39038; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1508808787069-421e7986016e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- FEATURES CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #E39038;">
<blockquote style="padding:0px 0px 0px 10px;margin:0;border-color:#E39038; font-size:13px"><span class="mb-0" style="font-size:20px;">NOTEABLE FEATURES</span> What stands out about them? Maybe its their elf ears? Cat tail? Scars? </blockquote>
</div>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#E39038; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1508808787069-421e7986016e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
<!-- NOTES CARD -->
<div class="card p-2 m-1 bg-transparent rounded-0" style="border:2px solid #E39038;">
<p class="mb-0" style="font-size:20px;">NOTES</p>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#E39038; font-size:13px">Design notes. What are some important things for the artist to know?</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#E39038; font-size:13px">note</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#E39038; font-size:13px">note</blockquote>
<blockquote class="mb-1 p-0 pl-2" style="border-color:#E39038; font-size:13px">note</blockquote>
</div>
<!-- AESTHETIC IMAGE -->
<div class="m-1" style="height:50px; background-size:cover; background-color:#E39038; background-attachment:fixed; background-image:url(https://images.unsplash.com/photo-1508808787069-421e7986016e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80); box-shadow:inset 0 0 7px rgba(0,0,0,0.7);"></div>
</div>
</div> <!-- tab 5 end -->
</div> <!-- tab content end -->
<!-- bottom bar gradient & credit -->
<div class="card border-0 mt-2 p-1" style="background:linear-gradient(to right, #355070, #6D597A, #B56576, #E56B6F, #E39038); border-radius:4px 4px 25px 25px">
<p class="text-center">
<a href="https://toyhou.se/13551324.coloured-tabs" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="code"><i class="fal fa-ghost fa-fw"></i></a>
<a href="https://www.pexels.com/photo/blue-and-red-galaxy-artwork-1629236/" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="image 1"><i class="fal fa-diamond fa-fw"></i></a>
<a href="https://unsplash.com/photos/VQhnMgelKJs" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="image 1"><i class="fal fa-triangle fa-fw"></i></a>
<a href="https://unsplash.com/photos/6Gsq3DxFdCQ" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="image 3"><i class="fal fa-bookmark fa-fw"></i></a>
<a href="https://unsplash.com/photos/Hyu76loQLdk" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="image 4"><i class="fal fa-heart fa-fw"></i></a>
<a href="https://unsplash.com/photos/F4i5l_HY1E8" class="text-light tooltipster" style="mix-blend-mode:luminosity" title="image 5"><i class="fal fa-star fa-fw"></i></a>
</p>
</div>
</div>
