[CHARA] Company Terminal
created by:FlowerlyRat
Custom ColorsHTMLCharacter
Copy
<!--
Company Terminal: code by FlowerlyRat || Based on the game Lethal Company's terminal UI by Zeekerss || Idea from architeuthid_codes' "[FTU] Hub Entry 2.0" code
Replicates the look of the in-game terminal using divs and clip-paths.
Text heavy, no images, character code for all the Lethal Company enjoyers and their little critters.
Contains an optional music player via the boombox, as well as an optional image behind everything as to showcase the character. Both can easily be removed by simply deleting the lines of code concerned, which are indicated inside.
-->
<!--Background color-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background: linear-gradient(150deg, #cac6bb, #7a826a, #535648); z-index: -1"></div>
<!--Background color-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===/////////MAIN CONTENT/////////===-->
<div style="margin-left: -15px; margin-right: -15px">
<div class="card rounded-0 mx-auto" style="padding: 25px; max-width: 650px; height: 650px; border-width: 2px; border-color: #565250 ; background: linear-gradient(150deg, #e3d9cf, #9e9a77, #5f5c48); box-shadow: 30px 20px 0 #383733">
<div class="card rounded-0 h-100" style="border: 2px solid; border-color: #1e1d1e #565250 #636343 #1d2110">
<div class="card rounded-0 h-100" style="border-width: 20px; border-color: #262426 #a3a27f #878860 #2a2f18">
<div class="card rounded-0 h-100" style="border-width: 2px; font-family: monospace; color: #01fc01; border-color: #1e1d1e #323233 #323233 #1e1d1e; background: linear-gradient(150deg, #393b39, #171a15); overflow: hidden">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #9ea2a8, #6f6f73, #515453, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); clip-path: polygon(0% 0%, 55.59% 0%, 32.64% 4.51%, 34.66% 5.56%, 31.42% 9.57%, 30.17% 13.27%, 18.7% 22.84%, 11.72% 22.53%, 5.49% 29.32%, 1.25% 51.85%, 0.25% 35.37%)"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, 0), #4a4749, #353334); clip-path: polygon(97.39% 97.06%, 100% 22.65%, 100% 100%, 51.65% 100%); mix-blend-mode: multiply; opacity: 0.5; z-index: 2"></div>
<!--//////Money//////-->
<div class="p-1" style="position: absolute; top: 0; 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-rectangle-vertical mr-2" style="font-size: 15px"></i>
60
</p>
</div>
</div>
<!--//////Money end//////-->
<!--//////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="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 0; right: 0; width: 400px; opacity: 0.6;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/79741408_YBJaG320UbkuQaL.png">
</div>
<!--//////Optional character art//////-->
<!--//////Optional boombox music//////-->
<div class="pl-1" style="position: absolute; bottom: 0; left: 0; z-index: 5">
<iframe class="flex-fill" style="position :absolute; width: 25px; height: 20px; opacity: 0.00005; z-index: 1" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID_HERE"
></iframe>
<i class="fa-solid fa-boombox fa-fade" style="font-size: 20px"></i>
</div>
<!--//////Optional boombox music end//////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////PROFILE CONTENT//////-->
<div class="pt-3 px-3" style="overflow: auto; scrollbar-color: #115012 rgba(0, 0, 0, 0); z-index: 1">
<div id="PROFILE" class="carousel slide" data-ride="false" data-pause="true" style="height: 532px">
<div style="height: 60px"></div>
<div class="carousel-inner">
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MAIN MENU//////-->
<div class="carousel-item active" style="transition-duration: 0s">
<p><a href="#PROFILE" data-slide-to="1" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>ABOUT</a><br>
To see a description of the character's personality and appearance.
</p>
<p><a href="#PROFILE" data-slide-to="2" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>HISTORY</a><br>
To learn about the character's backstory.
</p>
<p><a href="#PROFILE" data-slide-to="3" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>MORE</a><br>
To learn additional information about the character, whether it be statistics or tidbits of trivia.
</p>
<p><a href="#PROFILE" data-slide-to="4" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>RELATIONSHIPS</a><br>
To see the different relationships linked to this character.
</p>
<p class="pb-4"><a href="#PROFILE" data-slide-to="5" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>CREDITS</a><br>
To see the different credits attributed to this character code.
</p>
</div>
<!--//////MAIN MENU end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////ABOUT//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Name (pro/noun)</p>
<p>Age: ##</p>
<p>Danger level: #%</p>
<p>
Description:<br>
Write a description of your character here! Can be as long or as short as you want, this entire section scrolls lol, that's why there's this weird green box on the right.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
Appearance:<br>
Write a description of your character's appearance, whether it be in a general manner or to point out details that aren't visible at first glance!
</p>
<!--back button-->
<p class="mt-4 mb-5"><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">
[Name]'s log entries
</p>
<p>To read a log, click on their name to access them.</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--===LOG BUTTONS===-->
<!--Change the # 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"-->
<!--I recommend adding them at the end so it's easier to keep track of the slide number. First log's slide number starts at "6"-->
<p>
<a href="#PROFILE" data-slide-to="6" style="color: #01fc01; box-shadow: none">
Name of log - Jan 1
</a><br>
<a href="#PROFILE" data-slide-to="7" style="color: #01fc01; box-shadow: none">
Name of log - Feb 14
</a><br>
<a 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="mt-4 mb-5"><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 character's additional information page.<br>
Below you will find complementary information as well as some fun trivia.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
COMPLEMENTARY INFORMATION:<br>
Write some complementary information here, can be anything like describing their hobbies and interests, if they have any pets or family around, some dumb little fun fact, etc.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
TRIVIA:<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here (do not forget the "br" tag at the end to go back to the line)<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
INVENTORY:<br>
<!--Object 1-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 2-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 3-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 4-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
</p>
<!--back button-->
<p class="mt-4 mb-5"><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 target="_blank" class="nav" style="color: #01fc01; display: inline-block; 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 class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--Chara 2-->
<p><a target="_blank" class="nav" style="color: #01fc01; display: inline-block; 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 class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--Chara 3-->
<p><a target="_blank" class="nav" style="color: #01fc01; display: inline-block; 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="mt-4 mb-5"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////RELATIONSHIPS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////CREDITS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Code: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat">
<i class="fi-torso user-name-icon"></i>FlowerlyRat</a></p>
<p>Layout: Based on Lethal Company's terminal UI © Zeekerss.</p>
<p>Idea: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/architeuthid_codes">
<i class="fi-torso user-name-icon"></i>architeuthid_codes</a>' "<a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/14969763.-ftu-hub-entry-2-0">[FTU] Hub Entry 2.0</a>" code.</p>
<p>More codes: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
folders</a></p>
<!--back button-->
<p class="mt-4 mb-5"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////CREDITS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 1//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
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>
date: January 1, 2543
</p>
<!--back button-->
<p class="mt-4 mb-5"><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>
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>
date: Febuary 14, 2543
</p>
<!--back button-->
<p class="mt-4 mb-5"><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>
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>
date: March 31, 2543
</p>
<!--back button-->
<p class="mt-4 mb-5"><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>
</div>
<!--//////PROFILE CONTENT end//////-->
</div>
</div>
</div>
</div>
</div>
<!--===/////////MAIN CONTENT end/////////===-->Copy
<!--
Company Terminal: code by FlowerlyRat || Based on the game Lethal Company's terminal UI by Zeekerss || Idea from architeuthid_codes' "[FTU] Hub Entry 2.0" code
Replicates the look of the in-game terminal using divs and clip-paths.
Text heavy, no images, character code for all the Lethal Company enjoyers and their little critters.
Contains an optional music player via the boombox, as well as an optional image behind everything as to showcase the character. Both can easily be removed by simply deleting the lines of code concerned, which are indicated inside.
-->
<!--Background color-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background: linear-gradient(150deg, #edeae3, #9e9e98); z-index: -1"></div>
<!--Background color-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===/////////MAIN CONTENT/////////===-->
<div style="margin-left: -15px; margin-right: -15px">
<div class="card rounded-0 mx-auto" style="padding: 25px; max-width: 650px; height: 650px; border-width: 2px; border-color: #565250 ; background: linear-gradient(150deg, #e3d9cf, #a29b8d)">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(#a29b8d, #8a867d, #77736a); clip-path: polygon(69.92% 98.78%, 72.6% 96.68%, 74.64% 95.92%, 94.07% 69.39%, 100% 67.65%, 100% 100%, 66.44% 100%)"></div>
<div class="card rounded-0 h-100" style="border: 2px solid; border-color: #1e1d1e #565250 #565250 #1e1d1e">
<div class="card rounded-0 h-100" style="border-width: 20px; border-color: #262426 #b5ac9d #b5ac9d #262426">
<div class="card rounded-0 h-100" style="border-width: 2px; font-family: monospace; color: #95f966; border-color: #1e1d1e #323233 #323233 #1e1d1e; background: linear-gradient(150deg, #737476, #4e4d4d); overflow: hidden">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(150deg, #ced1ce, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); clip-path: polygon(0% 0%, 55.59% 0%, 32.64% 4.51%, 34.66% 5.56%, 31.42% 9.57%, 30.17% 13.27%, 18.7% 22.84%, 11.72% 22.53%, 5.49% 29.32%, 1.25% 51.85%, 0.25% 35.37%)"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, 0), #4a4749, #353334); clip-path: polygon(97.39% 97.06%, 100% 22.65%, 100% 100%, 51.65% 100%); mix-blend-mode: multiply; opacity: 0.5; z-index: 2"></div>
<!--//////Money//////-->
<div class="p-1" style="position: absolute; top: 0; 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(85, 146, 56, 0.4); display: inline-block">
<p class="align-items-center"><i class="fa fa-rectangle-vertical mr-2" style="font-size: 15px"></i>
60
</p>
</div>
</div>
<!--//////Money end//////-->
<!--//////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: #519450
Is best kept at a square resolution.-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 0; right: 0; width: 400px; opacity: 0.6;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/77080888_bdT4ePbb5dmMREh.png?1706814755">
</div>
<!--//////Optional character art//////-->
<!--//////Optional boombox music//////-->
<div class="pl-1" style="position: absolute; bottom: 0; left: 0; z-index: 5">
<iframe class="flex-fill" style="position :absolute; width: 25px; height: 20px; opacity: 0.00005; z-index: 1" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID_HERE"
></iframe>
<i class="fa-solid fa-boombox fa-fade" style="font-size: 20px"></i>
</div>
<!--//////Optional boombox music end//////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////PROFILE CONTENT//////-->
<div class="pt-3 px-3" style="overflow: auto; scrollbar-color: #519450 rgba(0, 0, 0, 0); z-index: 1">
<div id="PROFILE" class="carousel slide" data-ride="false" data-pause="true" style="height: 532px">
<div style="height: 60px"></div>
<div class="carousel-inner">
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MAIN MENU//////-->
<div class="carousel-item active" style="transition-duration: 0s">
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="1" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1" style="font-size: 10px"></i>ABOUT</a><br>
To see a description of the character's personality and appearance.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>HISTORY</a><br>
To learn about the character's backstory.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="3" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>MORE</a><br>
To learn additional information about the character, whether it be statistics or tidbits of trivia.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="4" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>RELATIONSHIPS</a><br>
To see the different relationships linked to this character.
</p>
<p class="pb-4"><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="5" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>CREDITS</a><br>
To see the different credits attributed to this character code.
</p>
</div>
<!--//////MAIN MENU end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////ABOUT//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Name (pro/noun)</p>
<p>Age: ##</p>
<p>Danger level: #%</p>
<p>
Description:<br>
Write a description of your character here! Can be as long or as short as you want, this entire section scrolls lol, that's why there's this weird green box on the right.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
Appearance:<br>
Write a description of your character's appearance, whether it be in a general manner or to point out details that aren't visible at first glance!
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////ABOUT end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--///HISTORY///-->
<div class="carousel-item" style="transition-duration: 0s">
<p class="text-uppercase">
[Name]'s log entries
</p>
<p>To read a log, click on their name to access them.</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--===LOG BUTTONS===-->
<!--Change the # 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"-->
<!--I recommend adding them at the end so it's easier to keep track of the slide number. First log's slide number starts at "6"-->
<p>
<a class="nav btn mb-n3" href="#PROFILE" data-slide-to="6" style="color: #95f966; display: inline-block; box-shadow: none">
Name of log - Jan 1
</a><br>
<a class="nav btn mb-n3" href="#PROFILE" data-slide-to="7" style="color: #95f966; display: inline-block; box-shadow: none">
Name of log - Feb 14
</a><br>
<a class="nav btn mb-n3" href="#PROFILE" data-slide-to="8" style="color: #95f966; display: inline-block; box-shadow: none">
Name of log - Mar 31 (NEW)
</a>
</p>
<!--===LOG BUTTONS end===-->
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////HISTORY end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MORE//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Welcome to the character's additional information page.<br>
Below you will find complementary information as well as some fun trivia.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
COMPLEMENTARY INFORMATION:<br>
Write some complementary information here, can be anything like describing their hobbies and interests, if they have any pets or family around, some dumb little fun fact, etc.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
TRIVIA:<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here (do not forget the "br" tag at the end to go back to the line)<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> Silly trivia here<br>
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
INVENTORY:<br>
<!--Object 1-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 2-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 3-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
<br>
<!--Object 4-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
Object here
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
60
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////MORE end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////RELATIONSHIPS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<!--Chara 1-->
<p><a target="_blank" class="nav" style="color: #95f966; display: inline-block; 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 class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--Chara 2-->
<p><a target="_blank" class="nav" style="color: #95f966; display: inline-block; 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 class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--Chara 3-->
<p><a target="_blank" class="nav" style="color: #95f966; display: inline-block; 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-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////RELATIONSHIPS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////CREDITS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Code: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat">
<i class="fi-torso user-name-icon"></i>FlowerlyRat</a></p>
<p>Layout: Based on Lethal Company's terminal UI © Zeekerss.</p>
<p>Idea: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/architeuthid_codes">
<i class="fi-torso user-name-icon"></i>architeuthid_codes</a>' "<a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/14969763.-ftu-hub-entry-2-0">[FTU] Hub Entry 2.0</a>" code.</p>
<p>More codes: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
folders</a></p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////CREDITS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 1//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
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>
date: January 1, 2543
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////LOG 1 end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 2//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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>
date: Febuary 14, 2543
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////LOG 2 end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////LOG 3//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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>
date: March 31, 2543
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////LOG 3 end//////-->
</div>
</div>
</div>
<!--//////PROFILE CONTENT end//////-->
</div>
</div>
</div>
</div>
</div>
<!--===/////////MAIN CONTENT end/////////===-->Copy
<!--
Company Terminal: code by FlowerlyRat || Based on the game Lethal Company's terminal UI by Zeekerss || Idea from architeuthid_codes' "[FTU] Hub Entry 2.0" code
Replicates the look of the in-game terminal using divs and clip-paths.
Text heavy, no images, character code for all the Lethal Company enjoyers and their little critters.
Contains an optional music player via the boombox, as well as an optional image behind everything as to showcase the character. Both can easily be removed by simply deleting the lines of code concerned, which are indicated inside.
-->
<!--Background color-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background: linear-gradient(150deg, #cac6bb, #7a826a, #535648); z-index: -1"></div>
<!--Background color-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===/////////MAIN CONTENT/////////===-->
<div style="margin-left: -15px; margin-right: -15px">
<div class="card rounded-0 mx-auto" style="padding: 25px; max-width: 650px; height: 650px; border-width: 2px; border-color: #565250 ; background: linear-gradient(150deg, #e3d9cf, #9e9a77, #5f5c48); box-shadow: 30px 20px 0 #383733">
<div class="card rounded-0 h-100" style="border: 2px solid; border-color: #1e1d1e #565250 #636343 #1d2110">
<div class="card rounded-0 h-100" style="border-width: 20px; border-color: #262426 #a3a27f #878860 #2a2f18">
<div class="card rounded-0 h-100" style="border-width: 2px; font-family: monospace; color: #01fc01; border-color: #1e1d1e #323233 #323233 #1e1d1e; background: linear-gradient(150deg, #393b39, #171a15); overflow: hidden">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(135deg, #9ea2a8, #6f6f73, #515453, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); clip-path: polygon(0% 0%, 55.59% 0%, 32.64% 4.51%, 34.66% 5.56%, 31.42% 9.57%, 30.17% 13.27%, 18.7% 22.84%, 11.72% 22.53%, 5.49% 29.32%, 1.25% 51.85%, 0.25% 35.37%)"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, 0), #4a4749, #353334); clip-path: polygon(97.39% 97.06%, 100% 22.65%, 100% 100%, 51.65% 100%); mix-blend-mode: multiply; opacity: 0.5; z-index: 2"></div>
<!--//////Money//////-->
<div class="p-1" style="position: absolute; top: 0; 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-rectangle-vertical mr-2" style="font-size: 15px"></i>
{{n!Money amount!}}
</p>
</div>
</div>
<!--//////Money end//////-->
<!--//////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="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 0; right: 0; width: 400px; opacity: 0.6;">
<img src="{{u!Image link!}}">
</div>
<!--//////Optional character art//////-->
<!--//////Optional boombox music//////-->
<div class="pl-1" style="position: absolute; bottom: 0; left: 0; z-index: 5">
<iframe class="flex-fill" style="position :absolute; width: 25px; height: 20px; opacity: 0.00005; z-index: 1" frameborder="0" src="
https://www.youtube.com/embed/{{!YT video ID!}}"
></iframe>
<i class="fa-solid fa-boombox fa-fade" style="font-size: 20px"></i>
</div>
<!--//////Optional boombox music end//////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////PROFILE CONTENT//////-->
<div class="pt-3 px-3" style="overflow: auto; scrollbar-color: #115012 rgba(0, 0, 0, 0); z-index: 1">
<div id="PROFILE" class="carousel slide" data-ride="false" data-pause="true" style="height: 532px">
<div style="height: 60px"></div>
<div class="carousel-inner">
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MAIN MENU//////-->
<div class="carousel-item active" style="transition-duration: 0s">
<p><a href="#PROFILE" data-slide-to="1" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>ABOUT</a><br>
To see a description of the character's personality and appearance.
</p>
<p><a href="#PROFILE" data-slide-to="2" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>HISTORY</a><br>
To learn about the character's backstory.
</p>
<p><a href="#PROFILE" data-slide-to="3" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>MORE</a><br>
To learn additional information about the character, whether it be statistics or tidbits of trivia.
</p>
<p><a href="#PROFILE" data-slide-to="4" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>RELATIONSHIPS</a><br>
To see the different relationships linked to this character.
</p>
<p class="pb-4"><a href="#PROFILE" data-slide-to="5" style="color: #01fc01; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>CREDITS</a><br>
To see the different credits attributed to this character code.
</p>
</div>
<!--//////MAIN MENU end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////ABOUT//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>{{!Name!}} ({{!Pro/nouns!}})</p>
<p>Age: {{!Age!}}</p>
<p>Danger level: {{n!Danger level!}}%</p>
<p>
Description:<br>
{{l!Character description!}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
Appearance:<br>
{{l!Character appearance!}}
</p>
<!--back button-->
<p class="mt-4 mb-5"><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">
{{!Name!}}'s log entries
</p>
<p>To read a log, click on their name to access them.</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--===LOG BUTTONS===-->
<!--Change the # 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"-->
<!--I recommend adding them at the end so it's easier to keep track of the slide number. First log's slide number starts at "6"-->
<p>
{{%Log entries%
<a href="#PROFILE" data-slide-to="{{n%Slide number%}}" style="color: #01fc01; box-shadow: none">
{{%Name of log%}} - {{%Date of log%}}
</a><br>
%end%}}
</p>
<!--===LOG BUTTONS end===-->
<!--back button-->
<p class="mt-4 mb-5"><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 {{!Name!}}'s additional information page.<br>
Below you will find complementary information as well as some fun trivia.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
COMPLEMENTARY INFORMATION:<br>
{{l!Complementary information!}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
TRIVIA:<br>
{{%Trivia%
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> {{%Trivia%}}<br>
%end%}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
INVENTORY:<br>
{{%Inventory%
<!--Object 1-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
{{%Object%}}
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
{{n%Price%}}
<br>
%end%}}
</p>
<!--back button-->
<p class="mt-4 mb-5"><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">
{{%Character relationship%
<!--Chara 1-->
<p><a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none"
href="{{u%Link to profile%}}">
{{%Name%}} ({{%Pro/nouns%}})</a></p>
<p>Relationship type: {{%Relationship type%}}</p>
<p>
Description:<br>
{{l%Relationship description%}}
</p>
<!--Chara 1-->
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
%end%}}
<!--back button-->
<p class="mt-4 mb-5"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////RELATIONSHIPS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////CREDITS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Code: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat">
<i class="fi-torso user-name-icon"></i>FlowerlyRat</a></p>
<p>Layout: Based on Lethal Company's terminal UI © Zeekerss.</p>
<p>Idea: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/architeuthid_codes">
<i class="fi-torso user-name-icon"></i>architeuthid_codes</a>' "<a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/14969763.-ftu-hub-entry-2-0">[FTU] Hub Entry 2.0</a>" code.</p>
<p>More codes: <a target="_blank" class="nav" style="color: #01fc01; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
folders</a></p>
<!--back button-->
<p class="mt-4 mb-5"><a href="#PROFILE" data-slide-to="0" style="color: #01fc01; box-shadow: none">back</a><span class="fa-fade">|</span></p>
</div>
<!--//////CREDITS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
{{%Log entries%
<!--//////LOG 1//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
{{l%Text log%}}<br>
date: {{%Month%}} {{%Day%}}, {{%Year%}}
</p>
<!--back button-->
<p class="mt-4 mb-5"><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//////-->
%end%}}
</div>
</div>
</div>
<!--//////PROFILE CONTENT end//////-->
</div>
</div>
</div>
</div>
</div>
<!--===/////////MAIN CONTENT end/////////===-->Copy
<!--
Company Terminal: code by FlowerlyRat || Based on the game Lethal Company's terminal UI by Zeekerss || Idea from architeuthid_codes' "[FTU] Hub Entry 2.0" code
Replicates the look of the in-game terminal using divs and clip-paths.
Text heavy, no images, character code for all the Lethal Company enjoyers and their little critters.
Contains an optional music player via the boombox, as well as an optional image behind everything as to showcase the character. Both can easily be removed by simply deleting the lines of code concerned, which are indicated inside.
-->
<!--Background color-->
<div class="card border-0 rounded-0" style="position: absolute; top: -20px; bottom: 0; left: 0; width: 100%; background: linear-gradient(150deg, #edeae3, #9e9e98); z-index: -1"></div>
<!--Background color-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===/////////MAIN CONTENT/////////===-->
<div style="margin-left: -15px; margin-right: -15px">
<div class="card rounded-0 mx-auto" style="padding: 25px; max-width: 650px; height: 650px; border-width: 2px; border-color: #565250 ; background: linear-gradient(150deg, #e3d9cf, #a29b8d)">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(#a29b8d, #8a867d, #77736a); clip-path: polygon(69.92% 98.78%, 72.6% 96.68%, 74.64% 95.92%, 94.07% 69.39%, 100% 67.65%, 100% 100%, 66.44% 100%)"></div>
<div class="card rounded-0 h-100" style="border: 2px solid; border-color: #1e1d1e #565250 #565250 #1e1d1e">
<div class="card rounded-0 h-100" style="border-width: 20px; border-color: #262426 #b5ac9d #b5ac9d #262426">
<div class="card rounded-0 h-100" style="border-width: 2px; font-family: monospace; color: #95f966; border-color: #1e1d1e #323233 #323233 #1e1d1e; background: linear-gradient(150deg, #737476, #4e4d4d); overflow: hidden">
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(150deg, #ced1ce, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); clip-path: polygon(0% 0%, 55.59% 0%, 32.64% 4.51%, 34.66% 5.56%, 31.42% 9.57%, 30.17% 13.27%, 18.7% 22.84%, 11.72% 22.53%, 5.49% 29.32%, 1.25% 51.85%, 0.25% 35.37%)"></div>
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(0, 0, 0, 0), #4a4749, #353334); clip-path: polygon(97.39% 97.06%, 100% 22.65%, 100% 100%, 51.65% 100%); mix-blend-mode: multiply; opacity: 0.5; z-index: 2"></div>
<!--//////Money//////-->
<div class="p-1" style="position: absolute; top: 0; 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(85, 146, 56, 0.4); display: inline-block">
<p class="align-items-center"><i class="fa fa-rectangle-vertical mr-2" style="font-size: 15px"></i>
{{n!Money amount!}}
</p>
</div>
</div>
<!--//////Money end//////-->
<!--//////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: #519450
Is best kept at a square resolution.-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 0; right: 0; width: 400px; opacity: 0.6;">
<img src="{{u!Image link!}}">
</div>
<!--//////Optional character art//////-->
<!--//////Optional boombox music//////-->
<div class="pl-1" style="position: absolute; bottom: 0; left: 0; z-index: 5">
<iframe class="flex-fill" style="position :absolute; width: 25px; height: 20px; opacity: 0.00005; z-index: 1" frameborder="0" src="
https://www.youtube.com/embed/{{!YT video ID!}}"
></iframe>
<i class="fa-solid fa-boombox fa-fade" style="font-size: 20px"></i>
</div>
<!--//////Optional boombox music end//////-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////PROFILE CONTENT//////-->
<div class="pt-3 px-3" style="overflow: auto; scrollbar-color: #519450 rgba(0, 0, 0, 0); z-index: 1">
<div id="PROFILE" class="carousel slide" data-ride="false" data-pause="true" style="height: 532px">
<div style="height: 60px"></div>
<div class="carousel-inner">
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MAIN MENU//////-->
<div class="carousel-item active" style="transition-duration: 0s">
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="1" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1" style="font-size: 10px"></i>ABOUT</a><br>
To see a description of the character's personality and appearance.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>HISTORY</a><br>
To learn about the character's backstory.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="3" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>MORE</a><br>
To learn additional information about the character, whether it be statistics or tidbits of trivia.
</p>
<p><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="4" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>RELATIONSHIPS</a><br>
To see the different relationships linked to this character.
</p>
<p class="pb-4"><a class="nav btn mb-n2" href="#PROFILE" data-slide-to="5" style="color: #95f966; display: inline-block; box-shadow: none"><i class="fa fa-chevron-right mr-1 my-auto" style="font-size: 10px"></i>CREDITS</a><br>
To see the different credits attributed to this character code.
</p>
</div>
<!--//////MAIN MENU end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////ABOUT//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>{{!Name!}} ({{!Pro/nouns!}})</p>
<p>Age: {{!Age!}}</p>
<p>Danger level: {{n!Danger level!}}%</p>
<p>
Description:<br>
{{l!Character description!}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
Appearance:<br>
{{l!Character appearance!}}
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////ABOUT end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--///HISTORY///-->
<div class="carousel-item" style="transition-duration: 0s">
<p class="text-uppercase">
{{!Name!}}'s log entries
</p>
<p>To read a log, click on their name to access them.</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<!--===LOG BUTTONS===-->
<!--Change the # 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"-->
<!--I recommend adding them at the end so it's easier to keep track of the slide number. First log's slide number starts at "6"-->
<p>
{{%Log entries%
<a class="nav btn mb-n3" href="#PROFILE" data-slide-to="{{n%Slide number%}}" style="color: #95f966; display: inline-block; box-shadow: none">
{{%Name of log%}} - {{%Date of log%}}
</a><br>
%end%}}
</p>
<!--===LOG BUTTONS end===-->
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////HISTORY end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////MORE//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
Welcome to the {{!Name!}}'s additional information page.<br>
Below you will find complementary information as well as some fun trivia.
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
COMPLEMENTARY INFORMATION:<br>
{{l!Complementary information!}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
TRIVIA:<br>
{{%Trivia%
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i> {{%Trivia%}}<br>
%end%}}
</p>
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
<p>
INVENTORY:<br>
{{%Inventory%
<!--Object 1-->
<i class="fa-solid fa-asterisk my-auto" style="font-size: 10px"></i>
{{%Object%}}
<span class="mx-4">//</span> Price: <i class="fa fa-rectangle-vertical mr-1" style="font-size: 8px"></i>
{{n%Price%}}
<br>
%end%}}
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////MORE end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////RELATIONSHIPS//////-->
<div class="carousel-item" style="transition-duration: 0s">
{{%Character relationship%
<!--Chara 1-->
<p><a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none"
href="{{u%Link to profile%}}">
{{%Name%}} ({{%Pro/nouns%}})</a></p>
<p>Relationship type: {{%Relationship type%}}</p>
<p>
Description:<br>
{{l%Relationship description%}}
</p>
<!--Chara 1-->
<!--Divider-->
<p class="mt-n3">-----------------------------</p>
<!--Divider end-->
%end%}}
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////RELATIONSHIPS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
<!--//////CREDITS//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>Code: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat">
<i class="fi-torso user-name-icon"></i>FlowerlyRat</a></p>
<p>Layout: Based on Lethal Company's terminal UI © Zeekerss.</p>
<p>Idea: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/architeuthid_codes">
<i class="fi-torso user-name-icon"></i>architeuthid_codes</a>' "<a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/14969763.-ftu-hub-entry-2-0">[FTU] Hub Entry 2.0</a>" code.</p>
<p>More codes: <a target="_blank" class="nav" style="color: #95f966; display: inline-block; box-shadow: none" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
folders</a></p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="0" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////CREDITS end//////-->
<!--///////////////////////////////////////////////////////////////////-->
{{%Log entries%
<!--//////LOG 1//////-->
<div class="carousel-item" style="transition-duration: 0s">
<p>
{{l%Text log%}}<br>
date: {{%Month%}} {{%Day%}}, {{%Year%}}
</p>
<!--back button-->
<a class="nav btn my-4" href="#PROFILE" data-slide-to="2" style="color: #95f966; display: inline-block; box-shadow: none">back <span class="fa-fade ml-n2">|</span></a>
</div>
<!--//////LOG 1 end//////-->
%end%}}
</div>
</div>
</div>
<!--//////PROFILE CONTENT end//////-->
</div>
</div>
</div>
</div>
</div>
<!--===/////////MAIN CONTENT end/////////===-->