Stor8

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

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")


Main colour----------#232222
Light accent---------#e8b031
Accents--------------#d27219
Darker accents-------#cc4213
Corner decoration----#b5a799


NOTE: Top & Bottom decorations won't show up on mobile!!


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


<div style="max-width:600px" class="mx-auto mt-sm-n5 mb-sm-n5">
    
<!--================================
 
 TOP DECORATIONS
 
 ================================-->
    
    <div class="d-sm-block d-none">
    
    <div style="position:relative;z-index:10;width:100px;left:80%;top:-10px;opacity:.75;">
        
        <i class="fas fa-bone" style="color:#b5a799;font-size:150px;transform:rotate(25deg)"></i>
        
    </div>
    
    <div style="position:relative;z-index:10;width:100px;left:75%;top:-80px;opacity:.75">
        
        <i class="fas fa-bone" style="color:#b5a799;font-size:80px;transform:rotate(-10deg)"></i>
        
    </div>
    
    <div style="margin-top:-160px;"></div>
    
    </div>
    
    <div class="p-3" style="background-color:#232222;border:1px solid #d27219;z-index:1">
        
<!--================================
 
 TOP BAR
 
 ================================-->
        
        <div class="row no-gutters">
            
            <div class="col-auto">
                
<div class="row no-gutters ml-n1">
    
<!--=======

PUT THE LINK OF THE FOLDER 
THE CHARACTER IS IN

=======-->
    
    <div class="col ml-1">
        
    <a href="LINK_TO_CHARACTER_FOLDER" class="text-reset" style="z-index:10">
        
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-arrow-left"></i></div>
    </a>
        
    </div>
    
<!--=======

PUT THE LINK OF THE CHARACTER 
YOU'RE PUTTING THIS CODE ON SO
IT ACTUALLY REFRESHES THE PAGE

=======-->
    
    <div class="col ml-1">
        
    <a href="LINK_TO_SAME_PAGE" class="text-reset" style="z-index:10">
        
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-arrow-rotate-right"></i></div>
    </a>
        
    </div>
    
<!--=======-->
    
    <div class="col ml-1" style="z-index:10">
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-arrow-right faded"></i></div>
    </div>
    
<!--=======

PUT YOUR PROFILE LINK HERE

=======-->
    
    <div class="col ml-1">
        
    <a href="LINK_TO_PROFILE" class="text-reset" style="z-index:10">
        
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-house"></i></div>
    </a>
        
    </div>
    
</div>
                
            </div>
            
            <div class="col mx-sm-2 mx-1">
                <hr style="border-top:1px solid #d27219;margin-top:11px">
            </div>
            
<!--=======NON-FUNCTIONAL WINDOW BUTTONS=======-->
            
            <div class="col-auto">
                
<div class="row no-gutters ml-n1">
    
    <div class="col ml-1">
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-window-minimize"></i></div>
    </div>
    
<!--=======-->
    
    <div class="col ml-1">
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-square"></i></div>
    </div>
    
<!--=======-->
    
    <div class="col ml-1">
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219"><i class="far fa-xmark"></i></div>
    </div>
    
</div>
                
            </div>
            
        </div>
        
<hr class="mt-2 mb-3 mx-n3" style="border-top:1px solid #d27219">

<!--================================
 
 CONTENT
 
 ================================-->
        
        <div class="row no-gutters d-flex flex-wrap">
            
<!--================================
 
 LEFT SIDE
 
 ================================-->
            
            <div class="col-sm-4 col-7 d-flex flex-column mx-sm-0 mx-auto pr-1">
                
<!--=======DECORATIVE TAPE AND STARS=======-->
                
                <div class="mt-n3">
                <div style="border:4px dotted #d27219;border-style: none dotted none dotted;width:160px;transform:rotate(5deg) translateX(-50%);left: 50%;position:relative;bottom:-20px;z-index:2;opacity:.75">
                    <div style="height:30px;background-color:#cc4213;"></div>
                </div>
                
                <div style="margin-top:-65px">
                    <i class="fas fa-steak" style="color:#cc4213;font-size:65px;position:relative;z-index:2;bottom:-200px;left:140px;transform:rotate(-15deg);text-shadow:0 0 3px black"></i>
                    <i class="fas fa-knife-kitchen" style="color:#b5a799;font-size:30px;position:relative;z-index:2;bottom:-210px;left:50px;transform:rotate(100deg);text-shadow:0 0 3px black"></i>
                </div>
                
            </div>
            
<!--=======CHARACTER ICON AND NAME=======-->
                
                <div class="p-2 mb-2 pb-3 text-center mx-auto" style="background-color:#232222;border:1px solid #d27219;color:#cc4213;font-size:17px">
                    
<!--=======PUT AN ICON OF THE CHARACTER HERE=======-->
                    
<img src="https://via.placeholder.com/500/ececec" class="mb-1">

NAME!!
                    
                </div>
                
                <div class="p-2 d-flex align-items-center justify-content-center mx-sm-0 mx-n5 flex-fill text-center" style="border:1px solid #d27219;color:#cc4213;">
                    
<!--================================
 
 MUSIC PLAYER
 
 
 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
 
 ================================-->
                    
<p>
<iframe frameborder="0" style="height:50px;width:50px;opacity:.001;position:absolute;margin-left:6px;z-index:10px"
 
src="https://www.youtube.com/embed/URLHERE"></iframe>
 
<span class="fa-stack fa-2x mb-2 mt-sm-n2" style="font-size:25px;color:#e8b031">
  <i class="fal fa-circle fa-stack-2x"></i>
  <i class="fas fa-play pl-1 fa-stack-1x"></i>
</span>
<br>

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

<span class="h5 font-weight-bold" style="color:#d27219">
    SONG
</span><br>

artist

</p>
                    
                </div>
                
            </div>
            
<!--================================
 
 RIGHT SIDE
 
 ================================-->
            
            <div class="col-sm-8 pl-sm-1 mt-2">
                
                <div style="background-color:#232222;border:1px solid #d27219">
                    
<!--=======NAV, DON'T MESS WITH IT TOO MUCH=======-->
                    
                    <div class="mb-2 p-2 px-3" style="background-color:#d27219">
                <ul class="row no-gutters nav border-0 nav-tabs ml-n1">
                        
<li class="col text-center">
    <a href="#ABOUTbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-house"></i>
    </a>
</li>

<li class="col text-center pl-1">
    <a href="#STATSbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-sliders"></i>
    </a>
</li>

<li class="col text-center pl-1">
    <a href="#DESIGNbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-brush"></i>
    </a>
</li>

<li class="col text-center pl-1">
    <a href="#STORYbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-books"></i>
    </a>
</li>

<li class="col text-center pl-1">
    <a href="#TRIVIAbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-star"></i>
    </a>
</li>

<li class="col text-center pl-1">
    <a href="#LINKSbiohazard" data-toggle="tab" class="btn btn-outline-secondary bg-transparent border-0 p-0" style="font-size:30px;mix-blend-mode:screen">
        <i class="fas fa-link"></i>
    </a>
</li>
                        
                </ul>
                        
                    </div>
                    
<!--=======TABS=======-->
                    
<div class="p-2" style="overflow:auto;scroll-behavior:smooth;height:300px;color:#cc4213">
    
<div class="tab-content">
    
<!--=======ABOUT=======-->
    
    <div id="ABOUTbiohazard" class="tab-pane fade active show">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> ABOUT
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
<!--=======BASIC INFO=======-->
        
        <div class="mb-n2">
        
        <div style="height:150px;overflow:auto">
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">FULL NAME</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">content content</div>
    
</div>

        
                
            </div>
            
<!--=======-->
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">AGE</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">## (##/##/####)</div>
    
</div>

        
                
            </div>
            
<!--=======-->
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">SPECIES</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">content</div>
    
</div>

        
                
            </div>
            
<!--=======-->
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">GENDER</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">content</div>
    
</div>

        
                
            </div>
            
<!--=======-->
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">ORIENTATION</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">content</div>
    
</div>

        
                
            </div>
            
<!--=======-->
            
    <div class="row no-gutters mb-2">
        
<div class="col-auto">
    
    <div class="p-2 font-weight-bold" style="background-color:#d27219;border:1px solid #d27219;color:#232222">PRONOUNS</div>
    
</div>

<div class="col pl-2">
    
    <div class="p-2" style="background-color:#232222;border:1px solid #d27219">cont/ent</div>
    
</div>

        
                
            </div>
            
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
            
        </div>
            
        </div>
        
<!--=======DESCRIPTION=======-->
        
        <div class="mb-2 mt-3">
            
<p>
Write a bit about your character 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.
</p>
            
        </div>
        
    </div>
    
<!--=======STATS=======-->
    
    <div id="STATSbiohazard" class="tab-pane fade">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> STATS
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
        <div class="mb-2">
            
            <div class="row no-gutters justify-content-center mx-n1 mb-1">

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

    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        INTELLECT
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>
    
<!--=======-->
    
    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        EMPATHY
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>
    
<!--=======-->
    
    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        CHARISMA
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>
    
<!--=======-->

    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        HUMOUR
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>
    
<!--=======-->
    
    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        PATIENCE
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>
    
<!--=======-->
    
    <div class="mb-1 col-6 px-1 font-weight-bold">
        
        CONFIDENCE
        
    <div class="p-1" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
<div class="progress rounded-0 bg-transparent"><div class="progress-bar" style="background-color:#d27219;

/* Modify the percentage below to change how filled up the bar is */

;width:50%;

"></div></div></div>
        
    </div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
                
            </div>
            
        </div>
        
        <div class="mb-2">
            
            <div class="row no-gutters">
                
<!--=======GOOD AT=======-->
                
<div class="col-6">
    
    <span class="font-weight-bold">
        
        GOOD AT:
        
    </span>
    
    <ul class="text-break">

<li>
    thing.
</li>

<li>
    thing.
</li>

<li>
    thing.
</li>

<li>
    thing.
</li>

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

    </ul>
    
</div>

<!--=======BAD AT=======-->

<div class="col-6">
    
    <span class="font-weight-bold">
        
        BAD AT:
        
    </span>
    
    <ul class="text-break">

<li>
    thing.
</li>

<li>
    thing.
</li>

<li>
    thing.
</li>

<li>
    thing.
</li>

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

    </ul>
    
</div>
                
            </div>
            
        </div>
        
    </div>
    
<!--=======DESIGN=======-->
    
    <div id="DESIGNbiohazard" class="tab-pane fade">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> DESIGN
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
<!--=======REFERENCE SHEET=======-->
        
        <div class="mb-2">
            
    <div class="p-1 text-center" style="border-width:2px;border-color:#cc4213;border-style:dotted dotted solid solid">
        
<!--=======PUT YOUR REFERENCE SHEET URL HERE=======-->
        
        <img src="https://via.placeholder.com/500/ececec" class="w-100 mb-1" style="object-fit:cover;max-height:180px">
        
<!--=======PUT THE LINK TO THE REFERENCE SHEET HERE=======-->
        
        <a href="REF_SHEET_LINK" class="text-reset font-weight-bold">
            
            VIEW FULL IMAGE
            
        </a>
        
    </div>
            
        </div>
        
<!--=======DESIGN NOTES=======-->
        
        <div class="mb-2">
            
<span class="mb-2 font-weight-bold">
    DESIGN NOTES:
</span>

<ul style="max-height:160px;overflow:auto">

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

<li>
    Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>

<li>
    Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>

<li>
    Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque
</li>

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

</ul>
            
        </div>
        
<!--=======COLOUR PALETTE=======-->
        
        <div class="mb-2">
            
<!--================================
 
 don't forget to change the tooltip
 title too!! add in the hex code and
 a placement note if needed
 
 example: title="#cc4213 HAIR"
 
 ================================-->
            
<div class="row no-gutters mx-n1">
    
    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>
    
    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>

    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>

    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>

    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>

    <div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:50px" data-toggle="tooltip"></div>
    
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</div>
            
        </div>
        
<!--=======GENERAL INFO=======-->
        
        <div class="mb-2">
            
            <div class="row no-gutters justify-content-around">
                
<!--=======CREATOR=======-->
                
<div class="col-auto">
    <p>
    
<span class="font-weight-bold">
    
    CREATOR:
    
</span>

<a href="LINK_TO_CREATOR" class="text-reset">
    
    username
    
</a>
    
    </p>
</div>

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

<div class="col-auto">
    <p>
    
<span class="font-weight-bold">
    
    DESIGNER:
    
</span>

<a href="LINK_TO_DESIGNER" class="text-reset">
    
    username
    
</a>
    
    </p>
</div>

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

<div class="col-auto">
    <p>
    
<span class="font-weight-bold">
    
    WORTH:
    
</span>

    $$$
    
    </p>
</div>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
                
            </div>
            
        </div>
        
    </div>
    
<!--=======STORY=======-->
    
    <div id="STORYbiohazard" class="tab-pane fade">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> STORY
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
<!--=======TW/CW=======-->
        
        <div class="mb-2">
            <p>
<span class="font-weight-bold">
    TW/CW:
</span>

thing...thing...thing
            </p>
            
        </div>
        
<!--=======SUBHEADER 1=======-->
        
        <div class="mb-2">
            
<!--=======TITLE=======-->

<div class="row no-gutters mb-2">
    
    <div class="col-auto h5 font-weight-bold">
        
        SUBHEADER
        
    </div>
    
    <div class="col">
        
        <hr style="border-top:1px solid #d27219" class="mx-1 mb-0 mt-2">
        
    </div>
    
    <div class="col-auto h5 font-weight-bold">
        
        <i class="fas fa-biohazard"></i>
        
    </div>
    
</div>

<!--=======STORY STUFF=======-->

<p class="mt-n2">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
</p>

            
        </div>
        
<!--=======SUBHEADER 2=======-->
        
        <div class="mb-2">
            
<!--=======TITLE=======-->

<div class="row no-gutters mb-2">
    
    <div class="col-auto h5 font-weight-bold">
        
        SUBHEADER
        
    </div>
    
    <div class="col">
        
        <hr style="border-top:1px solid #d27219" class="mx-1 mb-0 mt-2">
        
    </div>
    
    <div class="col-auto h5 font-weight-bold">
        
        <i class="fas fa-biohazard"></i>
        
    </div>
    
</div>

<!--=======STORY STUFF=======-->

<p class="mt-n2">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
</p>

            
        </div>
        
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
        
    </div>
    
<!--=======TRIVIA=======-->
    
    <div id="TRIVIAbiohazard" class="tab-pane fade">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> TRIVIA
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
<!--=======QUOTE=======-->
        
        <div class="mb-2">
            
<div class="font-italic p-1" style="background-color:#d27219;color:#232222">
    
    "Something silly they'd say or a quote they like"
    
</div>
            
        </div>
        
<!--=======TRIVIA LIST=======-->
        
        <div class="mb-1">
            
<ul>
    
<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.
</li>

<!--=======ADD/DELETE ABOVE THIS LINE=======-->
    
</ul>
            
        </div>
        
<!--=======FAVOURITES=======-->
        
        <div class="mb-2">
            
<!--=======FAVS HEADER=======-->
            
<div class="row no-gutters">
    
    <div class="col">
        <hr style="border-top: 1px solid #cc4213" class="mt-2 mx-1">
    </div>
    
    <div class="col-auto h5 font-weight-bold text-center mb-3">
        <i class="fas fa-biohazard"></i>
FAVOURITES
        <i class="fas fa-biohazard"></i>
    </div>
    
    <div class="col">
        <hr style="border-top: 1px solid #cc4213" class="mt-2 mx-1">
    </div>
    
</div>

<!--=======FAV BOXES=======-->

    <div class="row no-gutters mx-n1 d-flex flex-wrap justify-content-center">
    
<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">FOOD</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">DRINK</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">WEATHER</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
    </div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">HOBBY</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">ANIMAL</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">COLOUR</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">AESTHETIC</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

<div class="col-4 px-1 mb-2 d-flex flex-column">
    
    <div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">OBJECT</div>
    
    <div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>

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

</div>
            
        </div>
        
    </div>
    
<!--=======LINKS=======-->
    
    <div id="LINKSbiohazard" class="tab-pane fade">
        
<!--=======HEADER=======-->
        
        <div class="mb-2">
            
<p class="mt-n1 h1 font-weight-bold">
    <i class="fas fa-biohazard fa-sm" style="color:#e8b031"></i> LINKS
</p>

<hr class="mx-n2 my-2" style="border-top:1px solid #d27219">
            
        </div>
        
<!--=======LINK 1=======-->
        
        <div class="mb-2">
            
<div class="row no-gutters">
    
<!--=======ICON AND NAME=======-->
    
    <div class="col-sm-4 mb-2">
        
        <div class="p-1 pb-2 text-center mx-auto" style="border:1px solid #d27219;position:sticky;top:0;max-width:150px">
            
<!--=======PUT THE LINK TO THE CHARACTER HERE=======-->
            
<a href="CHARACTER_LINK" class="text-reset">
    
<!--=======PUT AN ICON OF THE CHARACTER HERE=======-->

<img src="https://via.placeholder.com/500/ececec" class="w-100 mb-1">
    
    NAME
    
</a>
            
        </div>
        
    </div>
    
    <div class="col-sm-8 pl-sm-2 mb-2">
        
        <div class="p-2" style="border:1px solid #d27219;">
            
<!--=======RELATIONSHIP STUFF=======-->
            
<div class="row no-gutters justify-content-between mb-1">
    
<!--=======THEIR RELATIONSHIP=======-->
    
    <div class="col-auto">
        
        relationship
        
    </div>
    
<!--================================
 
 HEART-METER?
 
 fas = filled heart
 far = empty heart
 
 you can also change fa-heart to
 fa-heart-crack or fa-skull if they
 hate eachother.
 
 ================================-->
    
    <div class="col-auto small">
    <p>
        
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="far fa-heart"></i>
        <i class="far fa-heart"></i>
        
    </p>
    </div>
    
</div>

<hr style="border-top:1px solid #d27219;" class="mt-0 mb-1 mx-n2">

<!--=======RELATIONSHIP DESCRIPTION=======-->

<p class="m-0" style="max-height:150px;overflow:auto">
    
    Write a bit about their relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
</p>

            
        </div>
        
    </div>
    
</div>
            
        </div>
        
<!--=======LINK 2=======-->
        
        <div class="mb-2">
            
<div class="row no-gutters">
    
<!--=======ICON AND NAME=======-->
    
    <div class="col-sm-4 mb-2">
        
        <div class="p-1 pb-2 text-center mx-auto" style="border:1px solid #d27219;position:sticky;top:0;max-width:150px">
            
<!--=======PUT THE LINK TO THE CHARACTER HERE=======-->
            
<a href="CHARACTER_LINK" class="text-reset">
    
<!--=======PUT AN ICON OF THE CHARACTER HERE=======-->

<img src="https://via.placeholder.com/500/ececec" class="w-100 mb-1">
    
    NAME
    
</a>
            
        </div>
        
    </div>
    
    <div class="col-sm-8 pl-sm-2 mb-2">
        
        <div class="p-2" style="border:1px solid #d27219;">
            
<!--=======RELATIONSHIP STUFF=======-->
            
<div class="row no-gutters justify-content-between mb-1">
    
<!--=======THEIR RELATIONSHIP=======-->
    
    <div class="col-auto">
        
        relationship
        
    </div>
    
<!--================================
 
 HEART-METER?
 
 fas = filled heart
 far = empty heart
 
 you can also change fa-heart to
 fa-heart-crack or fa-skull if they
 hate eachother.
 
 ================================-->
    
    <div class="col-auto small">
    <p>
        
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="far fa-heart"></i>
        <i class="far fa-heart"></i>
        
    </p>
    </div>
    
</div>

<hr style="border-top:1px solid #d27219;" class="mt-0 mb-1 mx-n2">

<!--=======RELATIONSHIP DESCRIPTION=======-->

<p class="m-0" style="max-height:150px;overflow:auto">
    
    Write a bit about their relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
</p>

            
        </div>
        
    </div>
    
</div>
            
        </div>
        
<!--=======LINK 3=======-->
        
        <div class="mb-2">
            
<div class="row no-gutters">
    
<!--=======ICON AND NAME=======-->
    
    <div class="col-sm-4 mb-2">
        
        <div class="p-1 pb-2 text-center mx-auto" style="border:1px solid #d27219;position:sticky;top:0;max-width:150px">
            
<!--=======PUT THE LINK TO THE CHARACTER HERE=======-->
            
<a href="CHARACTER_LINK" class="text-reset">
    
<!--=======PUT AN ICON OF THE CHARACTER HERE=======-->

<img src="https://via.placeholder.com/500/ececec" class="w-100 mb-1">
    
    NAME
    
</a>
            
        </div>
        
    </div>
    
    <div class="col-sm-8 pl-sm-2 mb-2">
        
        <div class="p-2" style="border:1px solid #d27219;">
            
<!--=======RELATIONSHIP STUFF=======-->
            
<div class="row no-gutters justify-content-between mb-1">
    
<!--=======THEIR RELATIONSHIP=======-->
    
    <div class="col-auto">
        
        relationship
        
    </div>
    
<!--================================
 
 HEART-METER?
 
 fas = filled heart
 far = empty heart
 
 you can also change fa-heart to
 fa-heart-crack or fa-skull if they
 hate eachother.
 
 ================================-->
    
    <div class="col-auto small">
    <p>
        
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="fas fa-heart"></i>
        <i class="far fa-heart"></i>
        <i class="far fa-heart"></i>
        
    </p>
    </div>
    
</div>

<hr style="border-top:1px solid #d27219;" class="mt-0 mb-1 mx-n2">

<!--=======RELATIONSHIP DESCRIPTION=======-->

<p class="m-0" style="max-height:150px;overflow:auto">
    
    Write a bit about their relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    
</p>

            
        </div>
        
    </div>
    
</div>
            
        </div>
        
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
        
    </div>
    
</div>
    
</div>
                    
                </div>
                
            </div>
            
        </div>
        
<!--================================
 
 CREDIT, DO NOT REMOVE!!!
 
 ================================-->
        
    <div class="pull-right mt-2">
        
<a href="https://toyhou.se/clowniicat" class="text-reset">
        
        <div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219;"><i class="far fa-code"></i></div>
        
</a>

    </div>
    
<!--=======END OF CREDIT=======-->
        
    </div>
    
<!--================================
 
 BOTTOM DECORATIONS
 
 ================================-->
    
    <div class="d-sm-block d-none">
        
    <div style="margin-top:-100px;"></div>
    
    <div style="position:relative;z-index:10;width:100px;left:-12%;top:-10px;opacity:.75">
        
        <i class="fas fa-bone" style="color:#b5a799;font-size:150px;transform:rotate(-25deg)"></i>
        
    </div>
    
    <div style="position:relative;z-index:10;width:100px;left:6%;top:-80px;opacity:.75">
        
        <i class="fas fa-bone" style="color:#b5a799;font-size:80px;transform:rotate(10deg)"></i>
        
    </div>
    

    </div>

    
</div>

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