[CHARA] Lethal Terminal
created by:FlowerlyRat
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Lethal Terminal CSS emulator: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Text color: #01fc01
Secondary color: #115012
Background color: #010400
Any links added use the following formats:
<a style="color: #01fc01; text-decoration: underline" href="LINK_HERE"><b>text_here</b></a>
If you need on-theme scrollbars, add this snippet to whichever div is supposed to be scrollable [bright and darkened version]:
scrollbar-width: thin; scrollbar-color: #01fc01 rgba(0, 0, 0, 0);
scrollbar-width: thin; scrollbar-color: #115012 rgba(0, 0, 0, 0);
Any areas that need the character's ID have the "CHARA_ID" placeholder -> to replace everything at once, highlight "CHARA_ID", then do ctrl+F and replace it with your character's.
Same goes for the character name, replace the "CHARA_NAME" placeholeder
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="font-family: monospace; color: #01fc01; left: -40vw; z-index: 5">
<div style="width: 100vw">
<!--///BACKGROUND IMAGE///-->
<div class="card rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-color: #010400"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
OPTIONAL CHARACTER ART
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Drawing has to have a transparent background and is best looking when it only shows lineart. The color used has the following hex code: #115012
Is best kept at a square resolution.-->
<div class="align-items-center fixed-bottom" style=" width: 500px; left: inherit; opacity: 0.5">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/79741408_YBJaG320UbkuQaL.png
">
</div>
<!--===////// OPTIONAL CHARACTER ART end //////===-->
<div class="container p-0" style="max-width: 100%; z-index: 1030">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FILE DIRECTORY
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="characters-folders-top justify-content-end mr-2" style="margin-top: 10px; margin-bottom: -32px; z-index: 50">
file:///
<a class="hidden-sm-down" style="color: #01fc01" href="https://toyhou.se/USERNAME_HERE">
halden-el/
</a>
<a class="hidden-sm-down" style="color: #01fc01" href="https://toyhou.se/USERNAME_HERE/characters">
directory/
</a>
<span class="hidden-sm-up">.../</span>
<a style="color: #01fc01" href="https://toyhou.se/USERNAME_HERE/characters/folder:FOLDER_ID">
employees/
</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID.">
CHARA_NAME
</a>
</div>
<div class="col-md-10 ml-auto hidden-sm-up" style="position: absolute; top: 40px; left: 0; right: 0; border-width: 3px 0 0 0; border-style: solid"></div>
<!--===////// FILE DIRECTORY end //////===-->
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down">
<div class="card rounded-0 bg-transparent py-2 pr-2 h-100" style="border-width: 0 3px 0 0; border-color: #01fc01;">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR + CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters align-items-center ml-2">
<div class="col-auto">
<div style="height: 70px; width: 70px;
background: #01fc01 url(AVATAR_HERE) center center;
background-size: cover; background-blend-mode: luminosity; opacity: 0.9;">
</div>
</div>
<div class="col pl-2">
<a class="justify-content-end mt-1 text-uppercase" style="font-size: 1.2em; font-weight: bold; color: #01fc01" href="https://toyhou.se/CHARA_ID.">
<i class="fa fa-sharp fa-chevron-right mr-2" style="margin-top: 6px; font-size: 14px"></i>
CHARA_NAME
</a>
</div>
</div>
<!--===////// AVATAR + CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div style="position: relative; margin-top: 10px; margin-bottom: -8.5px; margin-left: 25px; z-index: 1">
<div class="card rounded-0 p-2 ml-2" style="width:15px; border-width: 1px 1px 0 0; border-color: #115012; background-color: #010400; transform:rotate(315deg)"></div>
</div>
<div class="card rounded-0 p-2 mb-3 ml-2" style="font-size: 12px; border-width: 1px; border-color: #115012; background-color: #010400">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=== ADDITIONAL SIDE LINK ===-->
<a style="color: #01fc01" href="
ADDITIONAL_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Link
</a>
<!--=== ADDITIONAL SIDE LINK end ===-->
<!--===////// BONUS LINKS [computer] end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<a style="color: #01fc01" href="
TAB_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Tab
</a>
<!--===////// TAB 1 end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--===////// CHARACTER BUTTONS //////===-->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./gallery">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Gallery</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./literatures">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Library</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./worlds">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Worlds</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./links">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Links</a>
<!--===////// CHARACTER BUTTONS end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--===////// PROFILE BUTTONS //////===-->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./comments">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Comments</a>
<a href="#" style="color:#01fc01;" data-toggle="th-favorite">
<span class="favorite toggle-favorite my-auto">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Favorite
</span>
<span class="unfavorite toggle-favorite my-auto">
<i class="fa fa-check" style="margin-right: -2.5px; font-size: 10px"></i>
Unfavorite
</span>
</a>
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./ownership">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Ownership</a>
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<a style="color: #01fc01" href="https://toyhou.se/~tickets/create/character/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Report</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./block">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Block</a>
<!--===////// PROFILE BUTTONS end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MANAGE CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="accordion container p-0 " id="accordion">
<!--/// Character ///-->
<a href="#MANA_CHARA" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage character</a>
<div id="MANA_CHARA" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~characters/avatar/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Avatar</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/edit/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Edit profile</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/tabs/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Tabs</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/history/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
History</a><br>
<div class="my-2" style="border-width: 1px 0 0 0; height: 5px; border-style: dashed"></div>
<a style="color: #01fc01" href="https://toyhou.se/~characters/warnings/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Warnings</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/keys/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Access keys</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/trade-listing/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Trade listings</a>
<div class="my-2" style="border-width: 1px 0 0 0; height: 5px; border-style: dashed"></div>
<a style="color: #01fc01" href="https://toyhou.se/~characters/delete/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Delete</a>
</div>
<!--/// Character end ///-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--/// Images ///-->
<a href="#MANA_IMG" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage images</a>
<div id="MANA_IMG" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~images/upload/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Upload image</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~images/manage-character/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Manage images</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~images/sort/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Sort images</a>
</div>
<!--/// Images end ///-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--/// Literatures ///-->
<a href="#MANA_LIT" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage literatures</a>
<div id="MANA_LIT" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~literatures/upload/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Upload literature</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~literatures/sort/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Sort literatures</a>
</div>
<!--/// Literatures end ///-->
</div>
<!--===////// SIDEBAR BUTTONS end //////===-->
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto p-2 h-100 mt-5">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent mx-auto rounded-0 border-0 hidden-sm-up" style="margin-top: -3px; width: 100%">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR + CHARACTER NAME [mobile]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<div style="height: 70px; width: 70px;
background: #01fc01 url(AVATAR_HERE) center center;
background-size: cover; background-blend-mode: luminosity; opacity: 0.9;">
</div>
</div>
<div class="col pl-2">
<a class="justify-content-end mt-1 text-uppercase" style="font-size: 1.2em; font-weight: bold; color: #01fc01" href="https://toyhou.se/CHARA_ID.">
<i class="fa fa-sharp fa-chevron-right mr-2" style="margin-top: 6px; font-size: 14px"></i>
CHARA_NAME
</a>
</div>
</div>
<!--===////// AVATAR CHARACTER NAME [mobile] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [mobile]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div style="position: relative; margin-top: 10px; margin-bottom: -9px; margin-left: 25px; z-index: 1">
<div class="card rounded-0 p-2" style="width:15px; border-width: 1px 1px 0 0; border-color: #115012; background-color: #010400; transform:rotate(315deg)"></div>
</div>
<div class="card rounded-0 p-2 mb-3" style="font-size: 12px; border-width: 1px; border-color: #115012; background-color: #010400">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [mobile] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [mobile] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=== ADDITIONAL SIDE LINK ===-->
<a style="color: #01fc01" href="
ADDITIONAL_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Link
</a>
<!--=== ADDITIONAL SIDE LINK end ===-->
<!--===////// BONUS LINKS [mobile] end //////===-->
</div>
<div class="mt-md-n3 my-3 mx-n2" style="border-width: 3px 0 0 0; height: 5px; border-style: solid"></div>
<!--===/////////////////////////////////// UPPER CARD ON PHONE end ///////////////////////////////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////// OPTIONAL CONTENT //////-->
<div class="row no-gutters mt-1 mb-3">
<!--//////Money//////-->
<div class="col" style="left: 0; right: 0; z-index: 5">
<div class="card border-0 rounded-0 pl-3 pr-4 " style="font-size: 35px; background-color: rgba(17, 80, 18, 0.4); display: inline-block">
<p class="align-items-center"><i class="fa fa-sharp fa-rectangle-vertical mr-2" style="font-size: 15px"></i>
60
</p>
</div>
</div>
<!--//////Money end//////-->
<!--//////Boombox music//////-->
<div class="col align-items-center justify-content-end tooltipster" title="
Title - artist
" style="z-index: 5">
<div class="d-inline-block" style="position: relative; overflow: hidden">
<i class="fas fa-sharp fa-boombox fa-fade" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; top: -40vh; left: -25vw; height: 100vh; width: 100vw; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEOID
"><!--ONLY REPLACE "VIDEOID"-->
</iframe>
</div>
</div>
<!--//////Boombox music end//////-->
</div>
<!--////// OPTIONAL CONTENT end //////-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MAIN CONTENT
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="PROFILE" class="carousel slide pt-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MAIN MENU//////-->
<div class="carousel-item active" style="transition-duration: 0s">
<p><a class="mb-n2" href="#PROFILE" data-slide-to="1" style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fas fa-sharp fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>ABOUT</a><br>
To see a description of CHARA_NAME's personality and appearance.
</p>
<p><a class="mb-n2" href="#PROFILE" data-slide-to="2" style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fas fa-sharp fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>HISTORY</a><br>
To learn about CHARA_NAME's backstory.
<p><a class="mb-n2" href="#PROFILE" data-slide-to="3" style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fas fa-sharp fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>MORE</a><br>
To learn additional information about CHARA_NAME, whether it be statistics or tidbits of trivia.
</p>
<p><a class="mb-n2" href="#PROFILE" data-slide-to="4" style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fas fa-sharp fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>RELATIONSHIPS</a><br>
To see the different relationships linked to CHARA_NAME.
</p>
<p><a class="mb-n2" href="#PROFILE" data-slide-to="5" style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fas fa-sharp fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>METADATA</a><br>
To see metadata information concerning CHARA_NAME.
</p>
</div>
<!--//////MAIN MENU end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////ABOUT//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>CHARA_NAME (she/her)</p>
<p>Age: ###</p>
<p>Danger level: ###%</p>
<p>
Description:<br>
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>
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<p>
Appearance:<br>
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>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////ABOUT end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--///HISTORY///-->
<div class="carousel-item" style="transition-duration: 0s">
<p class="text-uppercase">
CHARA_NAME's log entries
</p>
<p>To read a log, click on their name to access them.</p>
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<!--===LOG BUTTONS===-->
<!--Change the number in "data-slide-to" with the correct slide number if you add any (you need to count them in the order they have been written in the code), the main menu is always "0"-->
<!--Logs can be found after the metadata section, it's easier to keep track of the slide number that way. First log's slide number starts at "6"-->
<p>
<a class="mb-n3" href="#PROFILE" data-slide-to="6" style="color: #01fc01; box-shadow: none">
Name of log - Jan 1
</a><br>
<a class="mb-n3" href="#PROFILE" data-slide-to="7" style="color: #01fc01; box-shadow: none">
Name of log - Feb 14
</a><br>
<a class="mb-n3" href="#PROFILE" data-slide-to="8" style="color: #01fc01; box-shadow: none">
Name of log - Mar 31 (NEW)
</a>
</p>
<!--===LOG BUTTONS end===-->
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////HISTORY end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MORE//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Welcome to the CHARA_NAME's additional information page.<br>
Below you will find complementary information as well as some fun trivia.
</p>
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<p>COMPLEMENTARY INFORMATION:<br>
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>
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<p>TRIVIA:<br>
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i> trivia<br>
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i> trivia<br>
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i> trivia<br>
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i> trivia<br>
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i> trivia<br>
</p>
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<p>INVENTORY:<br>
<!--Object 1-->
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i>
Object
<span class="mx-4">//</span> Price: <i class="fa fa-sharp fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
###
<br>
<!--Object 2-->
<i class="fas fa-sharp fa-asterisk my-auto" style="font-size: 10px"></i>
Object
<span class="mx-4">//</span> Price: <i class="fa fa-sharp fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
###
<br>
</p>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////MORE end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////RELATIONSHIPS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<!--Chara 1-->
<p><a style="color: #01fc01; box-shadow: none"
href="LINK_TO_PROFILE_HERE">
Name (pro/noun)</a></p>
<p>Relationship type: platonic, familial, romantic, etc.</p>
<p>Description<br>
To add a written description of the relationship between the 2 characters.
</p>
<!--Chara 1-->
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<!--Chara 2-->
<p><a style="color: #01fc01; box-shadow: none"
href="LINK_TO_PROFILE_HERE">
Name (pro/noun)</a></p>
<p>Relationship type: platonic, familial, romantic, etc.</p>
<p>Description:<br>
To add a written description of the relationship between the 2 characters.
</p>
<!--Chara 2-->
<!--Divider-->
<p >-----------------------------</p>
<!--Divider end-->
<!--Chara 3-->
<p><a style="color: #01fc01; box-shadow: none"
href="LINK_TO_PROFILE_HERE">
Name (pro/noun)</a></p>
<p>Relationship type: platonic, familial, romantic, etc.</p>
<p>Description:<br>
To add a written description of the relationship between the 2 characters.
</p>
<!--Chara 3-->
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////RELATIONSHIPS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////METADATA//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Created: 1 jan 2000, 0:00:00 am</p>
<p>Creator: <a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/USERNAME_HERE">
<i class="fi-torso user-name-icon"></i>Username</a></p>
<p>Owner: <a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/USERNAME_HERE">
<i class="fi-torso user-name-icon"></i>Username</a></p>
<p>Tags:
<a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:all/tagged:tag_nam">tag</a>,
<a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:all/tagged:tag_nam">tag</a>,
<a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:all/tagged:tag_nam">tag</a>,
<a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:all/tagged:tag_nam">tag</a>,
<a style="color: #01fc01; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:all/tagged:tag_nam">tag</a>,
</p>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////METADATA end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 1//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Date: January 1, 2543<br>
Log entry for your character, so the backstory can be told from their perspective to follow the game's way of telling the lore! You can write as little or as much as you want, this entire section will end up scrolling after it hits a certain height limit (that's why there's this green box to the right, it's for the scrollbox so it appears green just like in-game).
</p>
<p>
Just add another "p" tag to start a new paragraph and leave a bit of breathing room for the reader(s).<br>
And just add a "br" tag to go back to the line without leaving a space between the 2 sentences!<br>
</p>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="2" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////LOG 1 end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 2//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Date: Febuary 14, 2543<br>
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.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.<br>
</p>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="2" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////LOG 2 end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 3//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Date: March 31, 2543<br>
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.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.<br>
</p>
<!--back button-->
<p class="my-4"><a href="#PROFILE" data-slide-to="2" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////LOG 3 end//////-->
</div>
</div>
<!--===////// MAIN CONTENT end //////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="my-3 mx-n2" style=" border-width: 3px 0 0 0; border-style: solid"></div>
<div class="card bg-transparent border-0 rounded-0 mb-2">
<a href="https://toyhou.se/CHARA_ID./gallery" style="font-weight: bold; color: #01fc01; box-shadow: none">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
FEATURED IMAGES</a>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<li class="gallery-item">
<div class="gallery-thumb text-center m-0">
<div class="card rounded-0 border-0 bg-transparent thumb-image m-0">
<!-- Gallery image link [aka paste the link of the image's URL from the gallery - go to gallery, click on image, copy what's in the url] -->
<a href="GALLERY_IMAGE_LINK_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span style="position: absolute; top: 6.5px; bottom: 6.5px; left: 6.5px; right: 6.5px; background: #01fc01; mix-blend-mode: multiply; z-index: 1"></span>
<span class="card bg-transparent thumb-sensitive m-0" style=" border-radius: 0px; border: 3px solid #01fc01; z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of either the thumbnail or full size image - "click right + copy image address"] -->
<img src="THUMBNAIL_IMAGE_LINK_HERE"
style="max-height: 200px; object-fit: contain; object-position: center; filter: saturate(0%)">
</a>
</div>
</div>
</li>
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--///Image ///--> <!--Duplicate this entire "image" section to add an image - only put a maximum of 6-->
<li class="gallery-item">
<div class="gallery-thumb text-center m-0">
<div class="card rounded-0 border-0 bg-transparent thumb-image m-0">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span style="position: absolute; top: 6.5px; bottom: 6.5px; left: 6.5px; right: 6.5px; background: #01fc01; mix-blend-mode: multiply; z-index: 1"></span>
<span class="card bg-transparent thumb-sensitive m-0" style=" border-radius: 0px; border: 3px solid #01fc01; z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of either the thumbnail or full size image - "click right + copy image address"] -->
<img src="THUMBNAIL_IMAGE_LINK_HERE"
style="max-height: 200px; object-fit: contain; object-position: center; filter: saturate(0%)">
</a>
<!--===/////// IMAGE METADATA ///////===--> <!--Feel free to remove this entire section if you don't need it-->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="font-family: monospace; color: #01fc01">
<div class="card rounded-0 p-2" style="border-width: 2px; border-color: #01fc01; background: #010400">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters mb-n2">
<div class="col-md-6 justify-content-end order-md-2" style="font-size: 18px; font-weight: bold">
<!--===FULL SIZE IMAGE BUTTON===-->
<!--Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#']-->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
style="color: #01fc01">
Full size</a>
<!--===FULL SIZE IMAGE BUTTON end===-->
<span class="mx-4">//</span>
<!--===EDIT IMAGE BUTTON===-->
<!--Edit link [aka copy the image ID - it's the numbers found at the end of the URL after the '#']-->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
style="color: #01fc01">
Edit</a>
<!--===EDIT IMAGE BUTTON end ===-->
</div>
<div class="col-md-6 order-md-1"><p style="font-size: 20px; font-weight: bold">Details</p></div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-2" style="font-weight: bold; color: #115012">
Viewing full image.
</p>
<div class="mt-2 mb-3 mx-n2" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!--===/// OPTIONAL CAPTION ///===--> <!--Remove this entire section if going unused-->
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p style="font-weight: bold; color: #115012">
Caption here.
</p>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="mt-4 mb-3 mx-n2" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-5">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p style="font-weight: bold; color: #115012">
<!--Date-->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2" style="line-height: 25px">
<!--Username [star/premium]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"https://toyhou.se/USERNAME_HERE">
<i class="fi-star user-name-icon"></i>Username
</a>
<!--Username [torso/normal]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"https://toyhou.se/USERNAME_HERE">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!--Username [external link]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"EXTERNAL_LINK_HERE">
Username<i class="fas fa-sharp fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<div class="col-auto hidden-md-down mt-n3 mb-n2" style="height: auto; border-width: 0 2px 0 0; border-style: dashed"></div>
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-5 ml-md-n2">
<div class="mt-4 mb-3 mx-n2 hidden-sm-up" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<p style="font-size: 20px; font-weight: bold">Characters</p>
<!--===///NAME///===--> <!--Duplicate this entire "name" section to add a character/tab/gallery-->
<a href="
LINK_TO_CHARACTER_OR_SUBGALLERY
"style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
character_name
</a><br>
<!--===///NAME end///===-->
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--///Image ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/////////////////////////////////// FEATURED GALLERY end ///////////////////////////////////===-->
</div>
<!--===////// MAIN CODE //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card bg-transparent rounded-0 justify-content-center align-items-center p-2" style="height: ; color: #115012; border-width: 3px 0 0; border-color: #01fc01;z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">CSS emulator by FlowerlyRat<br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">Search</a>
<br>Lethal Company © Zeekerss
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
</div>
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Lethal Terminal CSS emulator [blank version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Text color: #01fc01
Secondary color: #115012
Background color: #010400
Any links added use the following formats:
<a style="color: #01fc01; text-decoration: underline" href="LINK_HERE"><b>text_here</b></a>
If you need on-theme scrollbars, add this snippet to whichever div is supposed to be scrollable [bright and darkened version]:
scrollbar-width: thin; scrollbar-color: #01fc01 rgba(0, 0, 0, 0);
scrollbar-width: thin; scrollbar-color: #115012 rgba(0, 0, 0, 0);
Any areas that need the character's ID have the "CHARA_ID" placeholder -> to replace everything at once, highlight "CHARA_ID", then do ctrl+F and replace it with your character's.
Same goes for the character name, replace the "CHARA_NAME" placeholeder
Code should be compatible with any and all other HTML codes, I have tested it with over 80 codes, from multiple creators, to make sure of it. If adding one breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="font-family: monospace; color: #01fc01; left: -40vw; z-index: 5">
<div style="width: 100vw">
<!--///BACKGROUND IMAGE///-->
<div class="card rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-color: #010400"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
OPTIONAL CHARACTER ART
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Drawing has to have a transparent background and is best looking when it only shows lineart. The color used has the following hex code: #115012
Is best kept at a square resolution.-->
<div class="align-items-center fixed-bottom" style=" width: 500px; left: inherit; opacity: 0.5">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/79741408_YBJaG320UbkuQaL.png
">
</div>
<!--===////// OPTIONAL CHARACTER ART end //////===-->
<div class="container p-0" style="max-width: 100%; z-index: 1030">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FILE DIRECTORY
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="characters-folders-top justify-content-end mr-2" style="margin-top: 10px; margin-bottom: -32px; z-index: 50">
file:///
<a class="hidden-sm-down" style="color: #01fc01" href="https://toyhou.se/USERNAME_HERE">
halden-el/
</a>
<a class="hidden-sm-down" style="color: #01fc01" href="https://toyhou.se/USERNAME_HERE/characters">
directory/
</a>
<span class="hidden-sm-up">.../</span>
<a style="color: #01fc01" href="https://toyhou.se/FlowerlyRat/USERNAME_HERE/folder:FOLDER_ID">
employees/
</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID.">
CHARA_NAME
</a>
</div>
<div class="col-md-10 ml-auto hidden-sm-up" style="position: absolute; top: 40px; left: 0; right: 0; border-width: 3px 0 0 0; border-style: solid"></div>
<!--===////// FILE DIRECTORY end //////===-->
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down">
<div class="card rounded-0 bg-transparent py-2 pr-2 h-100" style="border-width: 0 3px 0 0; border-color: #01fc01;">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR + CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters align-items-center ml-2">
<div class="col-auto">
<div style="height: 70px; width: 70px;
background: #01fc01 url(AVATAR_HERE) center center;
background-size: cover; background-blend-mode: luminosity; opacity: 0.9;">
</div>
</div>
<div class="col pl-2">
<a class="justify-content-end mt-1 text-uppercase" style="font-size: 1.2em; font-weight: bold; color: #01fc01" href="https://toyhou.se/CHARA_ID.">
<i class="fa fa-sharp fa-chevron-right mr-2" style="margin-top: 6px; font-size: 14px"></i>
CHARA_NAME
</a>
</div>
</div>
<!--===////// AVATAR + CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div style="position: relative; margin-top: 10px; margin-bottom: -8.5px; margin-left: 25px; z-index: 1">
<div class="card rounded-0 p-2 ml-2" style="width:15px; border-width: 1px 1px 0 0; border-color: #115012; background-color: #010400; transform:rotate(315deg)"></div>
</div>
<div class="card rounded-0 p-2 mb-3 ml-2" style="font-size: 12px; border-width: 1px; border-color: #115012; background-color: #010400">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=== ADDITIONAL SIDE LINK ===-->
<a style="color: #01fc01" href="
ADDITIONAL_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Link
</a>
<!--=== ADDITIONAL SIDE LINK end ===-->
<!--===////// BONUS LINKS [computer] end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<a style="color: #01fc01" href="
TAB_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Tab
</a>
<!--===////// TAB 1 end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--===////// CHARACTER BUTTONS //////===-->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./gallery">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Gallery</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./literatures">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Library</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./worlds">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Worlds</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./links">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Links</a>
<!--===////// CHARACTER BUTTONS end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--===////// PROFILE BUTTONS //////===-->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./comments">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Comments</a>
<a href="#" style="color:#01fc01;" data-toggle="th-favorite">
<span class="favorite toggle-favorite my-auto">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Favorite
</span>
<span class="unfavorite toggle-favorite my-auto">
<i class="fa fa-check" style="margin-right: -2.5px; font-size: 10px"></i>
Unfavorite
</span>
</a>
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./ownership">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Ownership</a>
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<a style="color: #01fc01" href="https://toyhou.se/~tickets/create/character/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Report</a>
<a style="color: #01fc01" href="https://toyhou.se/CHARA_ID./block">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Block</a>
<!--===////// PROFILE BUTTONS end //////===-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MANAGE CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="accordion container p-0 " id="accordion">
<!--/// Character ///-->
<a href="#MANA_CHARA" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage character</a>
<div id="MANA_CHARA" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~characters/avatar/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Avatar</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/edit/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Edit profile</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/tabs/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Tabs</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/history/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
History</a>
<div class="my-2" style="border-width: 1px 0 0 0; height: 5px; border-style: dashed"></div>
<a style="color: #01fc01" href="https://toyhou.se/~characters/warnings/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Warnings</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/keys/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Access keys</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~characters/trade-listing/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Trade listings</a>
<div class="my-2" style="border-width: 1px 0 0 0; height: 5px; border-style: dashed"></div>
<a style="color: #01fc01" href="https://toyhou.se/~characters/delete/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Delete</a>
</div>
<!--/// Character end ///-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--/// Images ///-->
<a href="#MANA_IMG" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage images</a>
<div id="MANA_IMG" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~images/upload/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Upload image</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~images/manage-character/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Manage images</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~images/sort/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Sort images</a>
</div>
<!--/// Images end ///-->
<!-- Divider -->
<div class="my-2 mx-md-n2" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!-- Divider -->
<!--/// Literatures ///-->
<a href="#MANA_LIT" class="text-uppercase" data-toggle="collapse" style="color: #01fc01; box-shadow: none">
Manage literatures</a>
<div id="MANA_LIT" class="collapse ml-2" data-parent="#accordion">
<a style="color: #01fc01" href="https://toyhou.se/~literatures/upload/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Upload literature</a><br>
<a style="color: #01fc01" href="https://toyhou.se/~literatures/sort/CHARA_ID">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Sort literatures</a>
</div>
<!--/// Literatures end ///-->
</div>
<!--===////// SIDEBAR BUTTONS end //////===-->
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto p-2 h-100 mt-5">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent mx-auto rounded-0 border-0 hidden-sm-up" style="margin-top: -3px; width: 100%">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR + CHARACTER NAME [mobile]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<div style="height: 70px; width: 70px;
background: #01fc01 url(AVATAR_HERE) center center;
background-size: cover; background-blend-mode: luminosity; opacity: 0.9;">
</div>
</div>
<div class="col pl-2">
<a class="justify-content-end mt-1 text-uppercase" style="font-size: 1.2em; font-weight: bold; color: #01fc01" href="https://toyhou.se/CHARA_ID.">
<i class="fa fa-sharp fa-chevron-right mr-2" style="margin-top: 6px; font-size: 14px"></i>
CHARA_NAME
</a>
</div>
</div>
<!--===////// AVATAR CHARACTER NAME [mobile] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [mobile]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div style="position: relative; margin-top: 10px; margin-bottom: -9px; margin-left: 25px; z-index: 1">
<div class="card rounded-0 p-2" style="width:15px; border-width: 1px 1px 0 0; border-color: #115012; background-color: #010400; transform:rotate(315deg)"></div>
</div>
<div class="card rounded-0 p-2 mb-3" style="font-size: 12px; border-width: 1px; border-color: #115012; background-color: #010400">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [mobile] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [mobile] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=== ADDITIONAL SIDE LINK ===-->
<a style="color: #01fc01" href="
ADDITIONAL_LINK_HERE
"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
Link
</a>
<!--=== ADDITIONAL SIDE LINK end ===-->
<!--===////// BONUS LINKS [mobile] end //////===-->
</div>
<div class="mt-md-n3 my-3 mx-n2" style="border-width: 3px 0 0 0; height: 5px; border-style: solid"></div>
<!--===/////////////////////////////////// UPPER CARD ON PHONE end ///////////////////////////////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
If adding the code breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="my-3 mx-n2" style=" border-width: 3px 0 0 0; border-style: solid"></div>
<div class="card bg-transparent border-0 rounded-0 mb-2">
<a href="https://toyhou.se/CHARA_ID./gallery" style="font-weight: bold; color: #01fc01; box-shadow: none">
<i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
FEATURED IMAGES</a>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<li class="gallery-item">
<div class="gallery-thumb text-center m-0">
<div class="card rounded-0 border-0 bg-transparent thumb-image m-0">
<!-- Gallery image link [aka paste the link of the image's URL from the gallery - go to gallery, click on image, copy what's in the url] -->
<a href="GALLERY_IMAGE_LINK_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span style="position: absolute; top: 6.5px; bottom: 6.5px; left: 6.5px; right: 6.5px; background: #01fc01; mix-blend-mode: multiply; z-index: 1"></span>
<span class="card bg-transparent thumb-sensitive m-0" style=" border-radius: 0px; border: 3px solid #01fc01; z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of either the thumbnail or full size image - "click right + copy image address"] -->
<img src="THUMBNAIL_IMAGE_LINK_HERE"
style="max-height: 200px; object-fit: contain; object-position: center; filter: saturate(0%)">
</a>
</div>
</div>
</li>
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--///Image ///--> <!--Duplicate this entire "image" section to add an image - only put a maximum of 6-->
<li class="gallery-item">
<div class="gallery-thumb text-center m-0">
<div class="card rounded-0 border-0 bg-transparent thumb-image m-0">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span style="position: absolute; top: 6.5px; bottom: 6.5px; left: 6.5px; right: 6.5px; background: #01fc01; mix-blend-mode: multiply; z-index: 1"></span>
<span class="card bg-transparent thumb-sensitive m-0" style=" border-radius: 0px; border: 3px solid #01fc01; z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of either the thumbnail or full size image - "click right + copy image address"] -->
<img src="THUMBNAIL_IMAGE_LINK_HERE"
style="max-height: 200px; object-fit: contain; object-position: center; filter: saturate(0%)">
</a>
<!--===/////// IMAGE METADATA ///////===--> <!--Feel free to remove this entire section if you don't need it-->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="font-family: monospace; color: #01fc01">
<div class="card rounded-0 p-2" style="border-width: 2px; border-color: #01fc01; background: #010400">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters mb-n2">
<div class="col-md-6 justify-content-end order-md-2" style="font-size: 18px; font-weight: bold">
<!--===FULL SIZE IMAGE BUTTON===-->
<!--Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#']-->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
style="color: #01fc01">
Full size</a>
<!--===FULL SIZE IMAGE BUTTON end===-->
<span class="mx-4">//</span>
<!--===EDIT IMAGE BUTTON===-->
<!--Edit link [aka copy the image ID - it's the numbers found at the end of the URL after the '#']-->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
style="color: #01fc01">
Edit</a>
<!--===EDIT IMAGE BUTTON end ===-->
</div>
<div class="col-md-6 order-md-1"><p style="font-size: 20px; font-weight: bold">Details</p></div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-2" style="font-weight: bold; color: #115012">
Viewing full image.
</p>
<div class="mt-2 mb-3 mx-n2" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<!--===/// OPTIONAL CAPTION ///===--> <!--Remove this entire section if going unused-->
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p style="font-weight: bold; color: #115012">
Caption here.
</p>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="mt-4 mb-3 mx-n2" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-5">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p style="font-weight: bold; color: #115012">
<!--Date-->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2" style="line-height: 25px">
<!--Username [star/premium]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"https://toyhou.se/USERNAME_HERE">
<i class="fi-star user-name-icon"></i>Username
</a>
<!--Username [torso/normal]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"https://toyhou.se/USERNAME_HERE">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!--Username [external link]-->
<a class="mx-2" target="_blank" style="font-weight: bold; color: #01fc01" href=
"EXTERNAL_LINK_HERE">
Username<i class="fas fa-sharp fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<div class="col-auto hidden-md-down mt-n3 mb-n2" style="height: auto; border-width: 0 2px 0 0; border-style: dashed"></div>
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-5 ml-md-n2">
<div class="mt-4 mb-3 mx-n2 hidden-sm-up" style="width: auto; border-width: 2px 0 0 0; height: 5px; border-style: dashed"></div>
<p style="font-size: 20px; font-weight: bold">Characters</p>
<!--===///NAME///===--> <!--Duplicate this entire "name" section to add a character/tab/gallery-->
<a href="
LINK_TO_CHARACTER_OR_SUBGALLERY
"style="font-weight: bold; color: #01fc01; box-shadow: none"><i class="fa fa-sharp fa-chevron-right" style="font-size: 10px"></i>
character_name
</a><br>
<!--===///NAME end///===-->
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--///Image ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/////////////////////////////////// FEATURED GALLERY end ///////////////////////////////////===-->
</div>
<!--===////// MAIN CODE //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card bg-transparent rounded-0 justify-content-center align-items-center p-2" style="height: ; color: #115012; border-width: 3px 0 0; border-color: #01fc01;z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">CSS emulator by FlowerlyRat<br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #01fc01">Search</a>
<br>Lethal Company © Zeekerss
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
</div>
</div>
</div>
</div>
</div>