using this! tysm, it's so cute!
This user is not visible to guests.
Replace LINK_TO_SAME_PAGE with the url of the character you're using the code for, replace LINK_TO_CHARACTER_FOLDER with the url of the folder the character is in. You can use CTRL + F to replace these, make sure to keep the double quotes (href="...") intact
If you're using the biohazard version of the code, there is a slight error in the code that needs fixing. Do CTRL+F and look for z-index:10, replace it with z-index:10;position:relative; if there are more than two instances of z-index:10 only replace the first two
Used it! I am having trouble getting the youtube embed to work though, its like its there but it wont play or anything
I have a question for the embed. I tried it and it sends me to YouTube but no song, how do I fix this? also its a great code everything else is working so well!
Did you follow the instructions above that section? Make sure it has /embed/ before the video URL (ex: https://www.youtube.com/embed/93Tz84N1Epc)
Yes I followed the instructions above but no matter what I add it doesn’t play anything, is there anything specific I should keep in mind when retrieving the URL? I followed the instructions to a T but it’s still not going through.
This user is not visible to guests.
Tysm!! Tbh, the code is all kinda different so here's that code but with all the info removed:
<!--==========================================
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----------#1b1a1a
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:650px" 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;position:relative">
<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;position:relative">
<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;position:relative">
<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;position:relative">
<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-n4">
<div style="border:4px dotted #d27219;border-style: none dotted none dotted;width:160px;transform:rotate(5deg) translateX(-50%);left: 50%;position:relative;bottom:-45px;z-index:2;opacity:.75;margin-top:-20px">
<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:-220px;left:140px;transform:rotate(-15deg);text-shadow:0 0 3px black"></i>
<i class="fas fa-skull" style="color:#b5a799;font-size:30px;position:relative;z-index:2;bottom:-225px;left:50px;transform:rotate(20deg);text-shadow:0 0 3px black"></i>
</div>
<i class="fas fa-spider-web" style="color:#b5a799;font-size:65px;position:relative;z-index:2;bottom:-60px;left:-15px;transform:rotate(-15deg);text-shadow:0 0 3px black;margin-top:-65px"></i>
</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!!<br>
<!--=======
PRIDE FLAGS
find more here:
[ https://toyhou.se/21355465.my-tiny-pride-flags ]
=======-->
<div class="mx-n1">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/64524683_tKSKififGiDZRr5.png" style="width:25px;height:16px;display:inline" class="tooltipster" title="TITLE" data-toggle="tooltip">
</div>
</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:55px;width:55px;opacity:.001;position:absolute;margin-left:6px;z-index:5"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<span class="fa-stack fa-2x mb-3 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:350px;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">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">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</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:210px">
<!--=======PUT THE LINK TO THE REFERENCE SHEET HERE=======-->
<a href="REFERENCE_SHET_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>
<!--=======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:40px" data-toggle="tooltip"></div>
<div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:40px" data-toggle="tooltip"></div>
<div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:40px" data-toggle="tooltip"></div>
<div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:40px" data-toggle="tooltip"></div>
<div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:40px" data-toggle="tooltip"></div>
<div class="col mx-1 p-2 mb-2 tooltipster" title="#HEXCODE" style="background-color:#cc4213;min-width:40px" data-toggle="tooltip"></div>
<!--=======ADD/DELETE ABOVE THIS LINE=======-->
</div>
</div>
<!--=======INFO BOXES=======-->
<div class="mb-2">
<div class="row no-gutters mx-n1 d-flex flex-wrap justify-content-center">
<div class="col-4 px-1 d-flex flex-column">
<div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">HEIGHT</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 d-flex flex-column">
<div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">BUILD</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 d-flex flex-column">
<div class="p-1 font-weight-bold text-center" style="background-color:#d27219;border:1px solid #d27219;color:#232222">DEMEANOUR</div>
<div class="p-1 flex-fill" style="background-color:#232222;border:1px solid #d27219;color:#cc4213">content</div>
</div>
</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="https://toyhou.se/eberine" class="text-reset">
username
</a>
</p>
</div>
<!--=======DESIGNER=======-->
<div class="col-auto">
<p>
<span class="font-weight-bold">
DESIGNER:
</span>
<a href="https://toyhou.se/eberine" 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>
<!--=======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" style="color:#e8b031"></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" style="color:#e8b031"></i>
</div>
</div>
<!--=======STORY STUFF=======-->
<p class="mt-n2 mb-4">
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>
<li>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</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" style="color:#e8b031"></i>
FAVOURITES
<i class="fas fa-biohazard" style="color:#e8b031"></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:155px">
<!--=======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 text-break" style="max-height:150px;overflow:auto">
Write 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:155px">
<!--=======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 text-break" style="max-height:150px;overflow:auto">
Write 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:155px">
<!--=======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 text-break" style="max-height:150px;overflow:auto">
Write 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>
<!--=======PRIDE FLAGS CREDIT=======-->
<div class="pull-right mx-2 mt-2">
<a href="https://toyhou.se/21355465.my-tiny-pride-flags" class="text-reset">
<div class="px-1" style="background-color:#232222;border:1px solid #d27219;color:#d27219;"><i class="far fa-flag"></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
================================================================-->
F2U Stardust [html]'s Comments