F2U Imperial [html] (NOBLE [B&W])

clowniicat

Profile

"EUGH.. LIVING"

BLUE...

CREATOR

clownii

DESIGNER

clownii

WORTH

nothing

OBTAINED VIA

self

OFFERS?

fh nfs nft

ABOUT

Just some rude alien guy who doesn't talk much, I don't recommend interacting with him, he'll just hiss and curse at you.

FULL NAME

blue blue

AGE

ageless (01/01/20XX)

SPECIES

unknown (alien)

GENDER

unlabeled

ORIENTATION

aroace

PRONOUNS

he/they/it/star/planet

LIKES

dark places.
soft blankets.
limes.
dogs.

DISLIKES

people.
food/eating.
talking.
living.

STATS

INTELLIGENCE

EMPATHY

CHARISMA

HUMOUR

CONFIDENCE

KINDNESS

PERSONALITY

quiet | rude | impulsive

Never really talks, hisses at you like a cat, hides away from sunlight, could (and probably would) bite off your hand. Uncomfortable and crying 90% of the time.

GOOD AT

crying.
ignoring people.
murder, probably.

BAD AT

socialising.
being normal.
everything.
existing.

DESIGN

FULL REF
SHEET

DESIGN NOTES

Patterns on the antennae, tail heart and inside of the chest hole are random!
Tongue can also just be pink instead of split colour.
You can draw him in any clothes you want as long as they're similar to/in the same style as the ones in the ref.
Always crying with those beady eyes.

Since the way I colour him is kinda weird, I made a tutorial!! Please watch it if you wanna draw him.

STORY

~ CREATION ~

The exact moment of his creation is unknown, they most likley comes from a traumatic event in Bones' life. If Bones suffers, Blue takes most of it, like some kind of shield. Not everybody can see them, mostly only close friends of Bones, star only really talks to them when star's in Earthland, for the most part star stays in space. Blue is like a condensed version of Bones, a bundle of all his fears, traumas and mental illnesses, explaning his behaviour.

~ FAREWELL ~

Blue has already served his purpose, Bones doesn't need him anymore, although he can't let go to him no matter how much he wants to. His life is normal, there's nothing Blue needs to protect him from, he's useless again, back to being a dim star in the ever-expanding universe. Bones only really talks to star when his boyfriend isn't home, he thanks star a lot for everything star's done.

TRIVIA

Has an irrational fear of judgement and it's REALLY bad, he can't do anything without thinking about getting made fun of for it.
Isn't actually a real living being.
Barely eats anything and if he does it's most likely raw meat.

"*sighs* this sucks so bad, when can I go home?"

FAVOURITES

FOOD

raw meat

DRINK

water?

ACTIVITY

crying

ANIMAL

bear

WEATHER

stormy

AESTHETIC

scene/emo

LINKS

BONES

???

Him and Bones are tech- nically the same person, Blue is just an imaginary character, a broken off piece, possibly a pure form of Bones. His role was kind of a ventsona to Bones, but now that he has served his purpose, he's just a careless lonley soul wandering the universe.

FREYA

acquaintance

Freya, being another space-wandering creature, keeps trying to interact with him just to be pushed away and hissed at by Blue.

OH KLAHOMA - Jack Stauber

BLUE owned by clownii (me)

Silly alien boi who cries a lot and forever wanders space with no set destination.

AUTO SELECT
MANUAL SELECT

         
<!--==========================================

CODE BY CLOWNIICAT ON TOYHOUSE

DO NOT STEAL/REMOVE CREDIT


IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it

====================================================

Please read my TOS here, it'd be nice if you leave a comment saying you read it:

[ https://toyhou.se/~bulletins/1459193.tos-rules ]

Support me here:

[ https://ko-fi.com/onionx2 ]

====================================================

If you need a code editor with live preview use this:

[ https://th.circlejourney.net/# ]

If you want to change the icons, find more here:

[ https://fontawesome.com/search ]

====================================================

Palette to change colours!!
select the colour and press Ctrl+F to replace it

(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")


Accent colour--------#000000
Everything else------#ffffff

>>>>NOTE: this code uses sharp icons, there might be some icons that don't yet have a sharp version<<<<


==========================================-->

<div style="max-width:700px" class="mx-auto">
    
    <div class="row no-gutters">
        
<!--================================
 
 LITTLE DECORTATION CORNER TOP LEFT
 
 ================================-->
        
<div class="col-2">
    
    <div style="height:50px;background-color:#000000">
        
        <i class="fas fa-sharp fa-sun" style="font-size:30px;margin-top:10px;margin-left:10px;color:#ffffff"></i>
        
    </div>
    
</div>

<!--================================

 END OF DECORATION CORNER
 
 ==================================
 
 QUOTE BOX
 
 ================================-->

<div class="col-10 pl-2">
    
    <div class="rounded-0 font-weight-bold p-1 font-italic pl-2 flex-column" style="height: 50px; font-size: 25px; font-family: Georgia, serif; overflow: auto; background-color: #ffffff;color:#000000;border: 2px solid #000000">
        
        "QUOTE OR SMTH"
        
    </div>
    
</div>

<!--================================
 END OF QUOTE BOX
 ================================-->
        
    </div>
    
    <div class="row no-gutters my-2" style="color:#000000;">
        
<!--================================
 
 LEFT INFO BOX
 
 ================================-->
        
<div class="col-lg-4 mb-lg-0 mb-2">
    
    <div class="rounded-0 p-2 flex-column" style="height: 400px; background-color: #ffffff;border: 2px solid #000000">
        
<!--================================
 
 DECORATIVE CROWN
 
 ================================-->
        
<i class="fas fa-sharp fa-crown fa-2xl mx-auto" style="z-index:5;font-size:50px;margin-bottom:5px;color:#000000;filter: drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) ;"></i>


<!--================================
 
 ICON & NAME
 
 ================================-->

 <div class="img-thumbnail rounded-circle p-1 mx-auto" style="background-color:#ffffff;border: 2px solid #000000">

    <img src="https://via.placeholder.com/500/ececec" class="mx-auto rounded-circle" style="max-width:160px;background-color:#000000;border: 2px solid #000000">
    
</div>
    
<div class="text-center font-weight-bold" style="font-size:30px;font-family:Georgia, serif">NAME!!</div>

<div style="overflow:auto;height:180px" class="mb-1 px-sm-0 px-3">
    
<!--================================
 
 META DATA INFO STUFFS
 
 ================================-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

CREATOR

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

DESIGNER

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

WORTH

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

$$$

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

OBTAINED VIA

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">
    
<!--================================
 
 put stuff like trade, sale, self, etc.
 
 ================================-->

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

OFFERS?

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">
    
<!--================================
 
 put stuff like nfs/nft/nfo, eo, fh, etc.
 
 ================================-->

content

</div>

</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 
 CREDIT, DO NOT REMOVE!!!
 
 ================================-->
    
<a href="https://toyhou.se/clowniicat" class="text-reset text-center">
        
        <i class="fas fa-sharp fa-code"></i>
        
    </a>
    
<!--================================
 END OF CREDIT
 ================================-->
    

    </div>
    
</div>

<!--================================
 
 END OF LEFT INFO BOX
 
 ==================================
 
 CENTER NAV BUTTON BOX
 
 ================================-->

<div class="col-sm-2 px-lg-2 pr-sm-2 mb-sm-0 mb-2">
    
    <div class="p-2 h-100" style="background-color:#000000;">
        
<!--================================
 
 NAV BUTTONS
 
 ================================-->
        
<ul class="nav nav-tabs card-header-tabs justify-content-center row mb-1 mt-sm-3" style="mix-blend-mode:luminosity;">
    
  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary active" data-toggle="tab" href="#aboutIMPERIAL">
      
      <i class="fas fa-sharp fa-user" style="font-size:35px"></i>
      
  </a>
  
  </li>
  
<!--=======-->
 
  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#statsIMPERIAL">
      
      <i class="fas fa-sharp fa-sliders" style="font-size:35px"></i>
      
  </a>

      
      </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#designIMPERIAL">
      
      <i class="fas fa-sharp fa-swatchbook" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#storyIMPERIAL">
      
      <i class="fas fa-sharp fa-book-open-cover" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#triviaIMPERIAL">
      
      <i class="fas fa-sharp fa-star" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#linksIMPERIAL">
      
      <i class="fas fa-sharp fa-link" style="font-size:35px"></i>
      
  </a>

      
  </li>

</ul>

<!--================================
 END OF NAV BUTTONS
 ================================-->
        
    </div>
    
</div>

<!--================================
 
 RIGHT INFO BOX
 
 ================================-->

<div class="col-lg-6 col-sm-10">
    
    <div class="rounded-0 p-2 overflow-auto flex-column" style="height: 400px; background-color: #ffffff;border: 2px solid #000000">
        
<div class="tab-content">
    
<!--================================
 
 ABOUT SECTION
 
 ================================-->
    
    <div class="tab-pane active show" id="aboutIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
 
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        ABOUT
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 Little character description, keep
 it pretty short for a nicer look
 
 ================================-->
     
<div class="text-justify">
    
Write a bit about them 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.
    
</div>

<!--================================
 
 END OF DESCRIPTION
 
 ==================================
 
 BASIC INFO STUFF
 
 ================================-->

<div class="mt-2">

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    FULL NAME
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    AGE
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    ## (##/##/####)
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    SPECIES
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    GENDER
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    ORIENTATION
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    PRONOUNS
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    cont/ent
    
</div>
        
    </div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 END OF BASIC INFO STUFF
 ================================-->

<div class="mt-2">
    
    <div class="row no-gutters">
        
<!--================================
 
 LIKES BOX
 
 ================================-->
        
<div class="col-6 pr-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
LIKES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 LIKES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF LIKES LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 
 END OF LIKES BOX
 
 ==================================
 
 DISLIKES BOX
 
 ================================-->
 
 <div class="col-6 pl-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DISLIKES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 DISLIKES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF DISLIKES LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 END OF DISLIKES BOX
 ================================-->
        
    </div>
    
</div>
        
    </div>
    
<!--================================
 
 END OF ABOUT SECTION
 
 ==================================
 
 STATS SECTION
 
 ================================-->
    
    <div class="tab-pane" id="statsIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        STATS
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 STAT PROGRESS BARS
 
 ================================-->
 
 <div class="row no-gutters mx-n1">
     
<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">INTELLIGENCE</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">EMPATHY</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">CHARISMA</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">HUMOUR</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">CONFIDENCE</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">KINDNESS</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
     
 </div>
 
<!--================================

 END OF STAT PROGRESS BARS
 
 ==================================
 
 PERSONALITY BOX
 
 ================================-->
 
 <div class="p-2 rounded-0 mt-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
     
<!--================================
 
 HEADER
 
 ================================-->
     
<div style="font-family:Georgia, serif;font-weight:bold;text-align:center;font-size:18px">PERSONALITY</div>

<!--================================
 
 ADJECTIVES
 
 add a positive, neutral & negative adjective,
 feel free to add more
 
 ================================-->

<div style="font-weight:200;text-align:center;font-size:12px" class="mb-1">
    
    POSITIVE | NEUTRAL | NEGATIVE
    
</div>

<!--================================
 
 PERSONALITY DESCRIPTION
 
 ================================-->

<div style="max-height:100px;overflow:auto">

Write about their personality here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

</div>
     
 </div>
 
 <!--================================
 END OF PERSONALITY BOX
 ================================-->
 

<div class="mt-2">
    
    <div class="row no-gutters">
        
<!--================================
 
 GOOD AT BOX
 
 ================================-->
        
<div class="col-6 pr-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
GOOD AT
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 GOOD AT THINGS LIST
 
 write stuff like talents here
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF GOOD AT THINGS LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 
 END OF GOOD AT BOX
 
 ==================================
 
 BAD AT BOX
 
 ================================-->
 
 <div class="col-6 pl-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
BAD AT
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 BAD AT THINGS LIST
 
 write stuff they're bad at here
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF BAD AT THINGS LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 END OF BAD AT BOX
 ================================-->
        
    </div>
    
</div>

        
    </div>
    
<!--================================
 
 END OF STATS SECTION
 
 ==================================
 
 DESIGN SECTION
 
 note: this section uses column
 ordering stuff so some boxes' code is
 before/after others' even though
 they dont show up like that
 
 ================================-->

    <div class="tab-pane" id="designIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        DESIGN
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ================================-->
 
<div class="row no-gutters">
 
<!--================================
 
 REFERENCE SHEET IMAGE
 
 ================================-->

<div class="col-6 mb-2 order-3">
    
    <div class="p-2 rounded-0 text-center flex-column" style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000">
        
<div style="height:180px;background-size:cover;background-position:center;border: 2px solid #000000;

/* insert reference image url here */

;background-image:url('https://via.placeholder.com/500/ececec');"></div>

<!--================================
 
 BUTTON TO FULL REF SHEET LINK
 
 ================================-->
        
<a href="REFERENCE_SHEET_LINK" class="text-reset font-weight-bold rounded-0 btn mt-1" style="border: 2px solid #000000;background-color:#ffffff">
    
    FULL REF <br> SHEET
    
</a>
        
    </div>
    
</div>

<!--================================

 END OF REF SHEET IMAGE
 
 ==================================
 
 DESIGN NOTES BOX
 
 ================================-->
 
  <div class="col-6 order-2 pr-1">
 
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DESIGN NOTES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 overflow-auto flex-column" style="height: 225px; background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 DESIGN NOTES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2 mb-2">
    
<li>
Lorem ipsum dolor sit amet.
</li>

<li>
consectetur adipiscing elit.
</li>

<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>

<li>
Donec accumsan tempor lacus.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF DESIGN NOTES LIST
 ================================-->
 
</div>

</div>
 
 <!--================================
 
 END OF DESIGN NOTES BOX
 
 ===================================
 
 COLOUR PALETTE
 
 ================================-->
 
 <div class="mb-2 col-12 rounded-0 order-1 flex-column border-left-0" style="background-color: #ffffff;border: 2px solid #000000">
     
     <div class="row no-gutters">
         
<!--================================
 
 don't forget to change the tooltip
 title too!! add in the hex code and
 a placement note if needed
 
 example: title="#000000 HAIR"
 
 ================================-->
         
<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

         
     </div>
     
 </div>
 
<!--================================
 
 LITTLE DESIGN DESCRIPTION
 
 ================================-->
 
 <div class="col-12 rounded-0 p-2 order-4 mb-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
     
     Just write some stuff about it here idk. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
     
 </div>
 
<!--================================

 END OF DESCRIPTION

 ===================================
 
 MOODBOARD
 
 ================================-->

<div class="col-12 rounded-0 p-2 order-5 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="row no-gutters" style="border: 2px solid #000000">
        

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-flower" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-crown" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-gem" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

        
    </div>
    
</div>

<!--================================
 END OF MOODBOARD
 ================================-->
 
 </div>

    </div>
    
<!--================================
 
 END OF DESIGN SECTION
 
 ==================================
 
 STORY SECTION
 
 ================================-->

    <div class="tab-pane" id="storyIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        STORY
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 STORY BOXES just replace the subheader 
 title with stuff like "past" "present" 
 "future"
 
 copy the div with the mb-2 class to put
 another one
 
 ================================-->
 
 
  <!--=======TW/CW, REMOVE IF NOT NEEDED=======-->
 
 <div class="font-weight-bold mb-2" style="font-family:Georgia, serif;">
     
     TW/CW: thing...thing...thing
     
 </div>
 
  <!--=========================================-->

 
 <div class="mb-2">
     

     
<div style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000" class="text-center text-uppercase font-weight-bold p-2 rounded-0 flex-column">
    
~ SUBHEADER ~
    
</div>


<div class="rounded-0 border-top-0 p-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
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.
    
</div>
     
 </div>
 
  <!--=======DECORATION DIVIDER=======-->
 
  <div class="text-center mb-2 row no-gutters">
      
      <hr class="col mx-2" style="border: 1px solid #000000">
     
     <div class="col-auto">
     <i class="fas fa-sharp fa-flower"></i> 
     <i class="fas fa-sharp fa-crown fa-2x"></i>
     <i class="fas fa-sharp fa-flower"></i>
     </div>
     
      <hr class="col mx-2" style="border: 1px solid #000000">
     
 </div>
 
  <!--================================-->
 
 <div class="mb-2">
     

     
<div style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000" class="text-center text-uppercase font-weight-bold p-2 rounded-0 flex-column">
    
~ SUBHEADER ~
    
</div>


<div class="rounded-0 border-top-0 p-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
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.
    
</div>
     
 </div>

 
 <!--=======ADD/DELETE ABOVE THIS LINE=======-->
 
 
 <!--================================
 END OF STORY BOXES
 ================================-->
        
    </div>
    
<!--================================
 
 END OF STORY SECTION
 
 ==================================
 
 TRIVIA SECTION
 
 ================================-->

    <div class="tab-pane" id="triviaIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        TRIVIA
        
    </div>
    
</div>

<!--================================
 END OF HEADER
 ================================-->
 
 <div class="row no-gutters mx-n1">
     
<!--================================
 
 TRIVIA BOX
 
 just some facts and stuff about the character
 
 ================================-->
     
     <div class="col-12 mb-2 px-1">
         
<div class="p-2 rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">


<!--================================
 
 TRIVIA LIST
 
 add another <li> for a new list item
 
 ================================-->

<ul class="mb-0 ml-n3">
    
<!--================================
 
 PAGEDOLL THINGY
 
 just add an image of the character,
 preferably with a transparent bg
 
 ================================-->
 
<li style="list-style:none">
    
<img src="https://via.placeholder.com/500/ececec" style="width:100px;max-height:200px" class="float-right">

</li>

<!--=======-->

    
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>

<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 
</li>

<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF TRIVIA LIST
 ================================-->

</div>
         
     </div>
     
<!--================================
 
 END OF TRIVIA BOX
 
 ==================================
 
 CHARACTER QUOTE (?)
 
 ================================-->
 
     <div class="col-12 px-1 mb-1">
     
     <div class="p-2 font-italic" style="border-left-width: 5px; border-left-style: solid; border-left-color: currentcolor;color:#000000;">"Something they'd say, can be anything, keep it short."</div>
     
 </div>
 
<!--================================
 
 END OF CHARACTER QUOTE
 
 ===================================
 
 FAVOURITES HEADER
 
 ================================-->
     
     <div class="col-12">
         
<div class="row no-gutters">
    
    <div class="col px-1 mt-n1"> <hr style="border: 1px solid #000000"> </div>
    
<div class="text-uppercase mx-1 col-auto" style="font-family:Georgia, serif;text-align:center;font-weight:bold">FAVOURITES</div>
    
    <div class="col px-1 mt-n1"> <hr style="border: 1px solid #000000"> </div>
    
    
</div>
         
     </div>
     
<!--================================
 
 END OF HEADER
 
 ==================================
 
 FAVOURTIE BOXES STUFFS
 
 stuff they like a lot
 
 ================================-->
 
     <div class="row no-gutters justify-content-center col-12">
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
FOOD
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DRINK
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
ACTIVITY
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
ANIMAL
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
WEATHER
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
AESTHETIC
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 END OF FAVOURITE BOXES
 ================================-->
 
 </div>
 
        
    </div>
    
<!--================================
 
 END OF TRIVIA SECTION
 
 ==================================
 
 LINKS SECTION
 
 ================================-->

    <div class="tab-pane" id="linksIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        LINKS
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ===================================
 
 RELATIONSHIP THINGIES!!!
 every <div class="mb-2"> is a new
 one, just copy paste it above the
 indicated line to add another one
 
 tip: use the little triangle thingy
 next to the line number to collapse
 elements and make it easier to manage
 large parts
 
 ================================-->
 
 <!--=======ONE=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
 <!--=======TWO=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
 <!--=======THREE=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
<!--=======ADD/DELETE ABOVE THIS LINE=======-->

        
    </div>
    
<!--================================
 END OF LINKS SECTION
 ================================-->

    
</div>
        
    </div>

    
</div>

<!--================================
 END OF RIGHT INFO BOX
 ================================-->
        
    </div>
    
    <div class="row no-gutters">
        
<!--================================
 
 MUSIC PLAYER SECTION
 
 ================================-->
        
<div class="col-10 pr-2">
    
    <div class="rounded-0 font-weight-bold p-1 font-italic px-sm-2 flex-column" style="height: 50px; font-size: 20px; font-family: Georgia, serif; background-color: #ffffff;color:#000000;border: 2px solid #000000">
        
<div class="row no-gutters">
    
<div class="col-auto">

<div class="rounded-circle flex-column" style="width: 40px; height: 40px; padding: 9px 9px 9px 13px; background-color: #ffffff;border: 2px solid #000000">
    
    
<!--================================
 
 Replace the "URLHERE" with 
 this part of your video link
 
                         vvvvvvvvvvv
 https://www.youtube.com/93Tz84N1Epc
 
 so it would be
 
 https://www.youtube.com/embed/93Tz84N1Epc
 
 ================================-->
    
<iframe frameborder="0" style="height:40px;width:40px;opacity:.001;position:absolute;top:0;left:0" src="https://www.youtube.com/embed/URLHERE"></iframe>
    
    <i class="fas fa-sharp fa-play d-inline"></i>
    
</div>

</div>

<div class="col">
    
    <hr class="mx-3" style="margin-top:19px;border: 1px solid #000000">
    
</div>

<!--================================
 
 TITLE & ARTIST THING
 
 ================================-->

<div class="col-auto pt-1">

TITLE - artist

</div>

</div>

    </div>
    
</div>

<!--================================
 
 END OF MUSIC PLAYER SECTION
 
 ==================================
 
 LITTLE DECORTATION CORNER BOTTOM RIGHT
 
 ================================-->

<div class="col-2">
    
    <div style="height:50px;background-color:#000000;">
        
        <i class="fas fa-sharp fa-moon pull-right" style="font-size:30px;margin-top:10px;margin-right:10px;color:#ffffff"></i>
        
    </div>
    
</div>

<!--================================
 END OF DECORATION CORNER
 ================================-->

    </div>

    
</div>


<!--================================================================
 
 
                             CODE END!!! 
 
                             you BINGUS
 
 
 ================================================================-->

         
<!--==========================================

CODE BY CLOWNIICAT ON TOYHOUSE

DO NOT STEAL/REMOVE CREDIT


IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it

====================================================

Please read my TOS here, it'd be nice if you leave a comment saying you read it:

[ https://toyhou.se/~bulletins/1459193.tos-rules ]

Support me here:

[ https://ko-fi.com/onionx2 ]

====================================================

If you need a code editor with live preview use this:

[ https://th.circlejourney.net/# ]

If you want to change the icons, find more here:

[ https://fontawesome.com/search ]

====================================================

Palette to change colours!!
select the colour and press Ctrl+F to replace it

(if you're on mobile, in the code editor select the color you want to change, press the 3 dots to the right and press "find")


Accent colour--------#000000
Everything else------#ffffff

>>>>NOTE: this code uses sharp icons, there might be some icons that don't yet have a sharp version<<<<


==========================================-->

<div style="max-width:700px" class="mx-auto">
    
    <div class="row no-gutters">
        
<!--================================
 
 LITTLE DECORTATION CORNER TOP LEFT
 
 ================================-->
        
<div class="col-2">
    
    <div style="height:50px;background-color:#000000">
        
        <i class="fas fa-sharp fa-sun" style="font-size:30px;margin-top:10px;margin-left:10px;color:#ffffff"></i>
        
    </div>
    
</div>

<!--================================

 END OF DECORATION CORNER
 
 ==================================
 
 QUOTE BOX
 
 ================================-->

<div class="col-10 pl-2">
    
    <div class="rounded-0 font-weight-bold p-1 font-italic pl-2 flex-column" style="height: 50px; font-size: 25px; font-family: Georgia, serif; overflow: auto; background-color: #ffffff;color:#000000;border: 2px solid #000000">
        
        "QUOTE OR SMTH"
        
    </div>
    
</div>

<!--================================
 END OF QUOTE BOX
 ================================-->
        
    </div>
    
    <div class="row no-gutters my-2" style="color:#000000;">
        
<!--================================
 
 LEFT INFO BOX
 
 ================================-->
        
<div class="col-lg-4 mb-lg-0 mb-2">
    
    <div class="rounded-0 p-2 flex-column" style="height: 400px; background-color: #ffffff;border: 2px solid #000000">
        
<!--================================
 
 DECORATIVE CROWN
 
 ================================-->
        
<i class="fas fa-sharp fa-crown fa-2xl mx-auto" style="z-index:5;font-size:50px;margin-bottom:5px;color:#000000;filter: drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) drop-shadow(0px 0px 1px #ffffff) ;"></i>


<!--================================
 
 ICON & NAME
 
 ================================-->

 <div class="img-thumbnail rounded-circle p-1 mx-auto" style="background-color:#ffffff;border: 2px solid #000000">

    <img src="https://via.placeholder.com/500/ececec" class="mx-auto rounded-circle" style="max-width:160px;background-color:#000000;border: 2px solid #000000">
    
</div>
    
<div class="text-center font-weight-bold" style="font-size:30px;font-family:Georgia, serif">NAME!!</div>

<div style="overflow:auto;height:180px" class="mb-1 px-sm-0 px-3">
    
<!--================================
 
 META DATA INFO STUFFS
 
 ================================-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

CREATOR

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

DESIGNER

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

WORTH

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">

$$$

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

OBTAINED VIA

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">
    
<!--================================
 
 put stuff like trade, sale, self, etc.
 
 ================================-->

content

</div>

</div>

<!--=======-->

<div class="row no-gutters">
    
<div class="col-auto text-uppercase">

OFFERS?

</div>

<div class="col">
    
    <hr class="mx-2" style="margin-top:10px;border: 1px solid #000000">
    
</div>

<div class="col-auto">
    
<!--================================
 
 put stuff like nfs/nft/nfo, eo, fh, etc.
 
 ================================-->

content

</div>

</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 
 CREDIT, DO NOT REMOVE!!!
 
 ================================-->
    
<a href="https://toyhou.se/clowniicat" class="text-reset text-center">
        
        <i class="fas fa-sharp fa-code"></i>
        
    </a>
    
<!--================================
 END OF CREDIT
 ================================-->
    

    </div>
    
</div>

<!--================================
 
 END OF LEFT INFO BOX
 
 ==================================
 
 CENTER NAV BUTTON BOX
 
 ================================-->

<div class="col-sm-2 px-lg-2 pr-sm-2 mb-sm-0 mb-2">
    
    <div class="p-2 h-100" style="background-color:#000000;">
        
<!--================================
 
 NAV BUTTONS
 
 ================================-->
        
<ul class="nav nav-tabs card-header-tabs justify-content-center row mb-1 mt-sm-3" style="mix-blend-mode:luminosity;">
    
  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary active" data-toggle="tab" href="#aboutIMPERIAL">
      
      <i class="fas fa-sharp fa-user" style="font-size:35px"></i>
      
  </a>
  
  </li>
  
<!--=======-->
 
  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#statsIMPERIAL">
      
      <i class="fas fa-sharp fa-sliders" style="font-size:35px"></i>
      
  </a>

      
      </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#designIMPERIAL">
      
      <i class="fas fa-sharp fa-swatchbook" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#storyIMPERIAL">
      
      <i class="fas fa-sharp fa-book-open-cover" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#triviaIMPERIAL">
      
      <i class="fas fa-sharp fa-star" style="font-size:35px"></i>
      
  </a>

      
  </li>

<!--=======-->

  <li class="col-lg-12 col-auto mb-2">
      
      <a class="btn bg-transparent border-0 btn-block btn-outline-secondary" data-toggle="tab" href="#linksIMPERIAL">
      
      <i class="fas fa-sharp fa-link" style="font-size:35px"></i>
      
  </a>

      
  </li>

</ul>

<!--================================
 END OF NAV BUTTONS
 ================================-->
        
    </div>
    
</div>

<!--================================
 
 RIGHT INFO BOX
 
 ================================-->

<div class="col-lg-6 col-sm-10">
    
    <div class="rounded-0 p-2 overflow-auto flex-column" style="height: 400px; background-color: #ffffff;border: 2px solid #000000">
        
<div class="tab-content">
    
<!--================================
 
 ABOUT SECTION
 
 ================================-->
    
    <div class="tab-pane active show" id="aboutIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
 
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        ABOUT
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 Little character description, keep
 it pretty short for a nicer look
 
 ================================-->
     
<div class="text-justify">
    
Write a bit about them 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.
    
</div>

<!--================================
 
 END OF DESCRIPTION
 
 ==================================
 
 BASIC INFO STUFF
 
 ================================-->

<div class="mt-2">

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    FULL NAME
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    AGE
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    ## (##/##/####)
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    SPECIES
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    GENDER
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    ORIENTATION
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    content
    
</div>
        
    </div>
    
</div>

<!--=======-->

<div class="row no-gutters">
    
    <div class="col-4">
        
<div class="rounded-0 border-top-0 p-1 text-uppercase flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    PRONOUNS
    
</div>
        
    </div>
    
    <div class="col-8">
        
<div class="rounded-0 border-top-0 border-left-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    cont/ent
    
</div>
        
    </div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 END OF BASIC INFO STUFF
 ================================-->

<div class="mt-2">
    
    <div class="row no-gutters">
        
<!--================================
 
 LIKES BOX
 
 ================================-->
        
<div class="col-6 pr-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
LIKES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 LIKES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF LIKES LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 
 END OF LIKES BOX
 
 ==================================
 
 DISLIKES BOX
 
 ================================-->
 
 <div class="col-6 pl-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DISLIKES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 DISLIKES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF DISLIKES LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 END OF DISLIKES BOX
 ================================-->
        
    </div>
    
</div>
        
    </div>
    
<!--================================
 
 END OF ABOUT SECTION
 
 ==================================
 
 STATS SECTION
 
 ================================-->
    
    <div class="tab-pane" id="statsIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        STATS
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 STAT PROGRESS BARS
 
 ================================-->
 
 <div class="row no-gutters mx-n1">
     
<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">INTELLIGENCE</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">EMPATHY</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">CHARISMA</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">HUMOUR</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">CONFIDENCE</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======-->

<div class="col-6 px-1">
    
<div style="font-family:Georgia;font-weight:bold">KINDNESS</div>

<div class="progress rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
        
    </div>
    
    
</div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
     
 </div>
 
<!--================================

 END OF STAT PROGRESS BARS
 
 ==================================
 
 PERSONALITY BOX
 
 ================================-->
 
 <div class="p-2 rounded-0 mt-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
     
<!--================================
 
 HEADER
 
 ================================-->
     
<div style="font-family:Georgia, serif;font-weight:bold;text-align:center;font-size:18px">PERSONALITY</div>

<!--================================
 
 ADJECTIVES
 
 add a positive, neutral & negative adjective,
 feel free to add more
 
 ================================-->

<div style="font-weight:200;text-align:center;font-size:12px" class="mb-1">
    
    POSITIVE | NEUTRAL | NEGATIVE
    
</div>

<!--================================
 
 PERSONALITY DESCRIPTION
 
 ================================-->

<div style="max-height:100px;overflow:auto">

Write about their personality here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.

</div>
     
 </div>
 
 <!--================================
 END OF PERSONALITY BOX
 ================================-->
 

<div class="mt-2">
    
    <div class="row no-gutters">
        
<!--================================
 
 GOOD AT BOX
 
 ================================-->
        
<div class="col-6 pr-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
GOOD AT
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 GOOD AT THINGS LIST
 
 write stuff like talents here
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF GOOD AT THINGS LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 
 END OF GOOD AT BOX
 
 ==================================
 
 BAD AT BOX
 
 ================================-->
 
 <div class="col-6 pl-1">
    
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
BAD AT
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 BAD AT THINGS LIST
 
 write stuff they're bad at here
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2">
    
<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<li>
thing.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF BAD AT THINGS LIST
 ================================-->
    
</div>

    
</div>

<!--================================
 END OF BAD AT BOX
 ================================-->
        
    </div>
    
</div>

        
    </div>
    
<!--================================
 
 END OF STATS SECTION
 
 ==================================
 
 DESIGN SECTION
 
 note: this section uses column
 ordering stuff so some boxes' code is
 before/after others' even though
 they dont show up like that
 
 ================================-->

    <div class="tab-pane" id="designIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        DESIGN
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ================================-->
 
<div class="row no-gutters">
 
<!--================================
 
 REFERENCE SHEET IMAGE
 
 ================================-->

<div class="col-6 mb-2 order-3">
    
    <div class="p-2 rounded-0 text-center flex-column" style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000">
        
<div style="height:180px;background-size:cover;background-position:center;border: 2px solid #000000;

/* insert reference image url here */

;background-image:url('https://via.placeholder.com/500/ececec');"></div>

<!--================================
 
 BUTTON TO FULL REF SHEET LINK
 
 ================================-->
        
<a href="REFERENCE_SHEET_LINK" class="text-reset font-weight-bold rounded-0 btn mt-1" style="border: 2px solid #000000;background-color:#ffffff">
    
    FULL REF <br> SHEET
    
</a>
        
    </div>
    
</div>

<!--================================

 END OF REF SHEET IMAGE
 
 ==================================
 
 DESIGN NOTES BOX
 
 ================================-->
 
  <div class="col-6 order-2 pr-1">
 
<!--================================
 
 HEADER
 
 ================================-->
    
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DESIGN NOTES
    
</div>

<!--================================
 END OF HEADER
 ================================-->

<div class="border-top-0 rounded-0 p-1 overflow-auto flex-column" style="height: 225px; background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 DESIGN NOTES LIST
 
 add another <li> for a new list item
 
 ================================-->
    
<ul class="mb-0 ml-n2 mb-2">
    
<li>
Lorem ipsum dolor sit amet.
</li>

<li>
consectetur adipiscing elit.
</li>

<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</li>

<li>
Donec accumsan tempor lacus.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF DESIGN NOTES LIST
 ================================-->
 
</div>

</div>
 
 <!--================================
 
 END OF DESIGN NOTES BOX
 
 ===================================
 
 COLOUR PALETTE
 
 ================================-->
 
 <div class="mb-2 col-12 rounded-0 order-1 flex-column border-left-0" style="background-color: #ffffff;border: 2px solid #000000">
     
     <div class="row no-gutters">
         
<!--================================
 
 don't forget to change the tooltip
 title too!! add in the hex code and
 a placement note if needed
 
 example: title="#000000 HAIR"
 
 ================================-->
         
<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#ffffff;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======-->

<div class="col rounded-0 p-2 tooltipster" style="background-color:#000000;border-left: 2px solid #000000" data-toggle="tooltip" title="#HEXCODE"></div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

         
     </div>
     
 </div>
 
<!--================================
 
 LITTLE DESIGN DESCRIPTION
 
 ================================-->
 
 <div class="col-12 rounded-0 p-2 order-4 mb-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
     
     Just write some stuff about it here idk. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
     
 </div>
 
<!--================================

 END OF DESCRIPTION

 ===================================
 
 MOODBOARD
 
 ================================-->

<div class="col-12 rounded-0 p-2 order-5 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="row no-gutters" style="border: 2px solid #000000">
        

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-flower" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-crown" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-position:center;background-size:cover;
    
    /* put here your image url */
    
    ;background-image:url('https://via.placeholder.com/500/ececec')
    
    
    "></div>
    
</div>

<!--=======-->

<div class="col-4">
    
    <div style="height:80px;background-color:#000000;padding-top:20px;text-align:center;">
        
<!--================================
 
 DECORATIVE ICON
 
 find more at:
 
 [ https://fontawesome.com ]
 
 ================================-->
        
<i class="far fa-sharp fa-gem" style="color:#fff;text-shadow:0 0 5px black;font-size:40px"></i>
        
        
        
    </div>
    
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

        
    </div>
    
</div>

<!--================================
 END OF MOODBOARD
 ================================-->
 
 </div>

    </div>
    
<!--================================
 
 END OF DESIGN SECTION
 
 ==================================
 
 STORY SECTION
 
 ================================-->

    <div class="tab-pane" id="storyIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        STORY
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ==================================
 
 STORY BOXES just replace the subheader 
 title with stuff like "past" "present" 
 "future"
 
 copy the div with the mb-2 class to put
 another one
 
 ================================-->
 
 
  <!--=======TW/CW, REMOVE IF NOT NEEDED=======-->
 
 <div class="font-weight-bold mb-2" style="font-family:Georgia, serif;">
     
     TW/CW: thing...thing...thing
     
 </div>
 
  <!--=========================================-->

 
 <div class="mb-2">
     

     
<div style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000" class="text-center text-uppercase font-weight-bold p-2 rounded-0 flex-column">
    
~ SUBHEADER ~
    
</div>


<div class="rounded-0 border-top-0 p-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
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.
    
</div>
     
 </div>
 
  <!--=======DECORATION DIVIDER=======-->
 
  <div class="text-center mb-2 row no-gutters">
      
      <hr class="col mx-2" style="border: 1px solid #000000">
     
     <div class="col-auto">
     <i class="fas fa-sharp fa-flower"></i> 
     <i class="fas fa-sharp fa-crown fa-2x"></i>
     <i class="fas fa-sharp fa-flower"></i>
     </div>
     
      <hr class="col mx-2" style="border: 1px solid #000000">
     
 </div>
 
  <!--================================-->
 
 <div class="mb-2">
     

     
<div style="font-family: Georgia, serif; background-color: #ffffff;border: 2px solid #000000" class="text-center text-uppercase font-weight-bold p-2 rounded-0 flex-column">
    
~ SUBHEADER ~
    
</div>


<div class="rounded-0 border-top-0 p-2 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
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.
    
</div>
     
 </div>

 
 <!--=======ADD/DELETE ABOVE THIS LINE=======-->
 
 
 <!--================================
 END OF STORY BOXES
 ================================-->
        
    </div>
    
<!--================================
 
 END OF STORY SECTION
 
 ==================================
 
 TRIVIA SECTION
 
 ================================-->

    <div class="tab-pane" id="triviaIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        TRIVIA
        
    </div>
    
</div>

<!--================================
 END OF HEADER
 ================================-->
 
 <div class="row no-gutters mx-n1">
     
<!--================================
 
 TRIVIA BOX
 
 just some facts and stuff about the character
 
 ================================-->
     
     <div class="col-12 mb-2 px-1">
         
<div class="p-2 rounded-0 flex-column" style="background-color: #ffffff;border: 2px solid #000000">


<!--================================
 
 TRIVIA LIST
 
 add another <li> for a new list item
 
 ================================-->

<ul class="mb-0 ml-n3">
    
<!--================================
 
 PAGEDOLL THINGY
 
 just add an image of the character,
 preferably with a transparent bg
 
 ================================-->
 
<li style="list-style:none">
    
<img src="https://via.placeholder.com/500/ececec" style="width:100px;max-height:200px" class="float-right">

</li>

<!--=======-->

    
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>

<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 
</li>

<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>

<!--================================
 END OF TRIVIA LIST
 ================================-->

</div>
         
     </div>
     
<!--================================
 
 END OF TRIVIA BOX
 
 ==================================
 
 CHARACTER QUOTE (?)
 
 ================================-->
 
     <div class="col-12 px-1 mb-1">
     
     <div class="p-2 font-italic" style="border-left-width: 5px; border-left-style: solid; border-left-color: currentcolor;color:#000000;">"Something they'd say, can be anything, keep it short."</div>
     
 </div>
 
<!--================================
 
 END OF CHARACTER QUOTE
 
 ===================================
 
 FAVOURITES HEADER
 
 ================================-->
     
     <div class="col-12">
         
<div class="row no-gutters">
    
    <div class="col px-1 mt-n1"> <hr style="border: 1px solid #000000"> </div>
    
<div class="text-uppercase mx-1 col-auto" style="font-family:Georgia, serif;text-align:center;font-weight:bold">FAVOURITES</div>
    
    <div class="col px-1 mt-n1"> <hr style="border: 1px solid #000000"> </div>
    
    
</div>
         
     </div>
     
<!--================================
 
 END OF HEADER
 
 ==================================
 
 FAVOURTIE BOXES STUFFS
 
 stuff they like a lot
 
 ================================-->
 
     <div class="row no-gutters justify-content-center col-12">
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
FOOD
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
DRINK
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
ACTIVITY
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
ANIMAL
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
WEATHER
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>
     
<!--=======-->
     
     <div class="col-4 mb-2 px-1">
         
<div class="rounded-0 p-1 flex-column" style="font-family: Georgia, serif; text-align: center; font-weight: bold; background-color: #ffffff;border: 2px solid #000000">
    
AESTHETIC
    
</div>

<div class="border-top-0 rounded-0 p-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
content
    
</div>

    
     </div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->

</div>

<!--================================
 END OF FAVOURITE BOXES
 ================================-->
 
 </div>
 
        
    </div>
    
<!--================================
 
 END OF TRIVIA SECTION
 
 ==================================
 
 LINKS SECTION
 
 ================================-->

    <div class="tab-pane" id="linksIMPERIAL">
        
<!--================================
 
 HEADER
 
 ================================-->
        
<div class="row no-gutters">
    
    <div class="col">
        
        <hr class="mx-sm-2 mx-3" style="margin-top:23px;border: 1px solid #000000">
        
    </div>
    
    <div class="col-auto font-italic pr-2" style="font-size:30px;font-family:Georgia, serif;font-weight:bold">
        
        LINKS
        
    </div>
    
</div>

<!--================================

 END OF HEADER
 
 ===================================
 
 RELATIONSHIP THINGIES!!!
 every <div class="mb-2"> is a new
 one, just copy paste it above the
 indicated line to add another one
 
 tip: use the little triangle thingy
 next to the line number to collapse
 elements and make it easier to manage
 large parts
 
 ================================-->
 
 <!--=======ONE=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
 <!--=======TWO=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
 <!--=======THREE=======-->
 
 <div class="mb-2">
     
<div class="row no-gutters">
    
<!--================================
 
 LEFT SIDE, ICON AND CLOSENESS SLIDER
 
 ================================-->
    
    <div class="col-4">
        
<div style="position:sticky;top:0">
    
<!--================================
 ICON
 ================================-->
        
<div class="img-thumbnail rounded-circle" style="background-color:#ffffff;border: 2px solid #000000">
        
        <img src="https://via.placeholder.com/500/ececec" class="rounded-circle" style="background-color:#000000;border: 2px solid #000000">
        
</div>
        
<!--================================
 
 CLOSENESS SLIDER/PROGRESS BAR
 
 basically how much the two characters
 are close, you could also change
 fa-heart to fa-skull or fa-heart-crack
 to indicate how much they hate eachother
 
 ================================-->
        
<div class="row no-gutters">
    
<!--=======-->
    
    <div class="col-2">
        
        <i class="fas fa-sharp fa-heart" style="color:#000000"></i>
        
    </div>
    
<!--=======-->
    
    <div class="col-10">
        
<div class="progress rounded-0 mt-1 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
    <div class="progress-bar bg-transparent" style="border-right: 5px solid #000000;height:12px;
    
    /* change the width percentage */
    
    ;width:50%;
    
    ">
        
    </div>
    
    
</div>

        
    </div>
    
</div>
        


</div>
        
    </div>
    
<!--================================
 
 END OF LEFT SIDE
 
 ===================================
 
 RIGHT SIDE, DESCRIPTION ETC
 
 ================================-->
    
    <div class="col-8 pl-2">
        
<div class="p-2 rounded-0 h-100 flex-column" style="background-color: #ffffff;border: 2px solid #000000">
    
<!--================================
 
 NAME, LINK & RELATIONSHIP STATUS
 
 ================================-->
    
    <div class="row no-gutters">
        
<div class="col-auto" style="font-family:Georgia, serif;font-weight:bold">
            
<a href="LINK_TO_CHARACTER" class="text-reset">
            
            NAME
            
</a>
            
</div>
        
<!--=======-->
        
        <div class="col px-2"> <hr style="margin-top:9px;border: 1px solid #000000"> </div>
        
<!--=======-->
        
<div class="col-auto" style="font-weight:200;font-size:12px">
            
            relationship
            
</div>
        
    </div>
    
<!--================================
 
 DESCRIPTION OF THE RELATIONSHIP
 
 ================================-->
    
<div style="max-height:180px;overflow:auto">
    
Write about the relationship here. Lorem ipsum dolor sit amet, consectetur adipisc- ing elit. Duis sollicitudin elit sed tellus blandit viverra s- ed eget odio. Donec accum- san tempor lacus, et vene- natis elit feugiat non.
    
</div>

<!--=======-->

    
</div>
        
    </div>
    
<!--================================
 
 END OF RIGHT SIDE
 
 ================================-->
    
</div>
     
 </div>
 
<!--=======ADD/DELETE ABOVE THIS LINE=======-->

        
    </div>
    
<!--================================
 END OF LINKS SECTION
 ================================-->

    
</div>
        
    </div>

    
</div>

<!--================================
 END OF RIGHT INFO BOX
 ================================-->
        
    </div>
    
    <div class="row no-gutters">
        
<!--================================
 
 MUSIC PLAYER SECTION
 
 ================================-->
        
<div class="col-10 pr-2">
    
    <div class="rounded-0 font-weight-bold p-1 font-italic px-sm-2 flex-column" style="height: 50px; font-size: 20px; font-family: Georgia, serif; background-color: #ffffff;color:#000000;border: 2px solid #000000">
        
<div class="row no-gutters">
    
<div class="col-auto">

<div class="rounded-circle flex-column" style="width: 40px; height: 40px; padding: 9px 9px 9px 13px; background-color: #ffffff;border: 2px solid #000000">
    
    
<!--================================
 
 Replace the "URLHERE" with 
 this part of your video link
 
                         vvvvvvvvvvv
 https://www.youtube.com/93Tz84N1Epc
 
 so it would be
 
 https://www.youtube.com/embed/93Tz84N1Epc
 
 ================================-->
    
<iframe frameborder="0" style="height:40px;width:40px;opacity:.001;position:absolute;top:0;left:0" src="https://www.youtube.com/embed/URLHERE"></iframe>
    
    <i class="fas fa-sharp fa-play d-inline"></i>
    
</div>

</div>

<div class="col">
    
    <hr class="mx-3" style="margin-top:19px;border: 1px solid #000000">
    
</div>

<!--================================
 
 TITLE & ARTIST THING
 
 ================================-->

<div class="col-auto pt-1">

TITLE - artist

</div>

</div>

    </div>
    
</div>

<!--================================
 
 END OF MUSIC PLAYER SECTION
 
 ==================================
 
 LITTLE DECORTATION CORNER BOTTOM RIGHT
 
 ================================-->

<div class="col-2">
    
    <div style="height:50px;background-color:#000000;">
        
        <i class="fas fa-sharp fa-moon pull-right" style="font-size:30px;margin-top:10px;margin-right:10px;color:#ffffff"></i>
        
    </div>
    
</div>

<!--================================
 END OF DECORATION CORNER
 ================================-->

    </div>

    
</div>


<!--================================================================
 
 
                             CODE END!!! 
 
                             you BINGUS
 
 
 ================================================================-->

F2U Imperial [html] (NOBLE [B&W])

clowniicat

Profile

Images