<!--------------------------------------------
"Rain World" - F2U HTML by @StormyStarlight
VERSION - 5 Oct 2023
https://toyhou.se/18761520.-f2u-html-rain-world
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------------------->
<div class="rw-content rounded text-white" style="background: #090410; overflow: hidden;">
<!-------------- TOP BAR -------------------->
<div class="rounded-top align-items-center" style="background: url(
https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/longhall.png
) right top no-repeat; height: 165px;">
<!------------ AVATAR --------------------->
<div><a class="rw-not-a"
href="CREDITLINK"
><img
src="IMAGELINK"
class="mr-3" style="max-height: 135px; max-width: 135px; margin-left: 15px; border: double 6px; border-color: rgba(255, 255, 255, .2); border-radius: .15rem; z-index: 1;"></a></div>
<!------------ CHARACTER NAME ------------->
<div class="h-100 w-100 mb-4" style="position: relative;"><p class="display-3 text-uppercase" style="position: absolute; bottom: 0; font-size: 2.5em; filter: drop-shadow(0px 0px 15px #fff); overflow-wrap: anywhere;">
<!-------- SMALL/TRANSPARENT TEXT ----->
<span style="font-size: .8em; opacity: .4;">
SMALLNAME
<br></span>
CHARACTERNAME
</p></div>
</div>
<!-------------- LOWER SECTION -------------->
<div class="row no-gutters">
<div class="col row no-gutters">
<!---------- KARMA BTN NAV -------------->
<div class="col-12 col-md-auto justify-content-center align-items-center px-2" style="position: relative;">
<div class="h-100 bg-white hidden-sm-down" style="position: absolute; width: 4px; opacity: .2;"></div>
<div class="w-100 bg-white hidden-md-up" style="position: absolute; height: 4px; opacity: .2;"></div>
<ul class="karma-nav flex-row no-gutters flex-md-column align-self-center py-2 py-md-4 nav nav-tabs border-bottom-0">
<li><a class="nav-item active tooltipster" style="position: relative;" title="Basics" data-toggle="tab" href="#basics">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_bg.png">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_reinforced.png" class="karma-reinforced" style="position: absolute; left: 0; top: -18.8px; opacity: 0;">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_5.png" class="karma-btn" style="position: absolute; left: 0; top: -18.8px;">
</a></li>
<li><a class="nav-item tooltipster" style="position: relative;" title="Design" data-toggle="tab" href="#design">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_bg.png">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_reinforced.png" class="karma-reinforced" style="position: absolute; left: 0; top: -18.8px; opacity: 0;">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_4.png" class="karma-btn" style="position: absolute; left: 0; top: -18.8px;">
</a></li>
<li><a class="nav-item tooltipster" style="position: relative;" title="Relationships" data-toggle="tab" href="#relationships">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_bg.png">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_reinforced.png" class="karma-reinforced" style="position: absolute; left: 0; top: -18.8px; opacity: 0;">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_3.png" class="karma-btn" style="position: absolute; left: 0; top: -18.8px;">
</a></li>
<li><a class="nav-item tooltipster" style="position: relative;" title="History" data-toggle="tab" href="#history">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_bg.png">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_reinforced.png" class="karma-reinforced" style="position: absolute; left: 0; top: -18.8px; opacity: 0;">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_2.png" class="karma-btn" style="position: absolute; left: 0; top: -18.8px;">
</a></li>
<li><a class="nav-item tooltipster" style="position: relative;" title="Miscellaneous" data-toggle="tab" href="#miscellaneous">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_bg.png">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_reinforced.png" class="karma-reinforced" style="position: absolute; left: 0; top: -18.8px; opacity: 0;">
<img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_1.png" class="karma-btn" style="position: absolute; left: 0; top: -18.8px;">
</a></li>
</ul>
</div>
<!---------- MAIN CONTENT --------------->
<div class="col-12 col-md pl-2 pl-md-0 tab-content" style="position: relative;">
<!-------- BASICS --------------------->
<div class="tab-pane fade pt-md-3 active show" id="basics">
<p class="display-4 text-uppercase align-content-center mb-0 ml-2 ml-md-0" style="filter: drop-shadow(0px 0px 40px #fff);"><img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_5.png" class="mr-1 fa-fade" style="height: 40px; filter: drop-shadow(0px 0px 30px #fff); animation-duration: 4s;">Basics</p>
<hr class="mt-2 mb-0 mr-3 mr-md-2 ml-2 ml-md-0" style="background: #fff; opacity: .1;">
<div class="row no-gutters pr-3 pr-md-2 pl-2 pl-md-0 pb-1 pt-2" style="overflow: auto; max-height: 354px;">
<!---- SIDEBAR --------------------
This will scroll after the rest of the box's contents
have scrolled if it gets any longer, so you can add as
many more fields/stat bars as you want! :)
If you want to add links formatted like the ones in the
live preview (rather than theme-colored ones), use this:
<a style="color: #fff; text-decoration: underline;" href="LINK">CONTENT</a>
---------------------------------->
<div class="col-12 col-lg-auto pr-lg-3 pb-2" style="width: 250px;"><div class="pb-1" style="position: sticky; top: 0px;">
<!-- FIELDS -------------------->
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Name</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Title</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Pronouns</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Age</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Species</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Diet</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Status</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Residence</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<!-- STAT BARS ----------------->
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Attack</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Defense</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Speed</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Stealth</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Perception</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
<p class="mb-0 mt-1 text-uppercase font-weight-bold small">Intelligence</p>
<div class="progress" style="border-radius: 0; background: rgba(255, 255, 255, .2);"><div class="progress-bar" role="progressbar" style="background: #fff; height: 4px; width:
50%;"></div></div>
</div></div>
<!---- OTHER BOX CONTENTS -------->
<div class="col row no-gutters">
<p class="mb-2">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.</p>
<!-- LIKES --------------------->
<div class="col-12 col-sm-6">
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Likes</p>
<ul class="mb-2 fa-ul">
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_saint.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_saint.png">Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_saint.png">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
</ul>
</div>
<!------------------------------>
<!-- DISLIKES ------------------>
<div class="col-12 col-sm-6">
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Dislikes</p>
<ul class="mb-2 fa-ul">
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_outlaw.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_outlaw.png">Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_outlaw.png">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
</ul>
</div>
<!------------------------------>
<p class="mb-2">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>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
<!-- ABILITIES ----------------->
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Abilities</p>
<ul class="mb-2 fa-ul">
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_survivor.png"><b>Ability:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_survivor.png"><b>Ability:</b> 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.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_survivor.png"><b>Ability:</b> Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
<!------------------------------>
</div>
</div>
</div>
<!-------- DESIGN --------------------->
<div class="tab-pane fade pt-md-3" id="design">
<p class="display-4 text-uppercase align-content-center mb-0 ml-2 ml-md-0" style="filter: drop-shadow(0px 0px 40px #fff);"><img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_4.png" class="mr-1 fa-fade" style="height: 40px; filter: drop-shadow(0px 0px 30px #fff); animation-duration: 4s;">Design</p>
<hr class="mt-2 mb-0 mr-3 mr-md-2 ml-2 ml-md-0" style="background: #fff; opacity: .1;">
<div class="row no-gutters pl-2 pl-md-0">
<!---- REFERENCE IMAGES ----------
If you only want one, delete the second block of code contained
in "<a></a>" in "IMAGES" and the entire "NAV BUTTONS" section
--------------------------------->
<div class="col-lg-auto pr-3 pr-lg-2 mt-2 mb-2 justify-content-center">
<!-- IMAGES -------------------->
<div class="align-items-center justify-content-center h-100 w-100 tab-content" style="border: double 6px; border-color: rgba(255, 255, 255, .1); max-height: 338px; border-radius: .15rem;">
<a
href="CREDITLINK"
class="rw-not-a tab-pane fade active show" id="one"><img
src="IMAGELINK"
style="max-width: 324px; max-height: 324px;"></a>
<a
href="CREDITLINK"
class="rw-not-a tab-pane fade" id="two"><img
src="IMAGELINK"
style="max-width: 324px; max-height: 324px;"></a>
</div>
<!------------------------------>
<!-- NAV BUTTONS --------------->
<ul class="nav nav-tabs card-header-tabs" style="position: absolute; bottom: 25px;">
<li><a class="rw-btn nav-link btn px-2 py-1 mr-1 active" style="border: 0; color: #fff; background: rgba(255, 255, 255, .2); filter: drop-shadow(0px 0px 4px #090410);" data-toggle="tab" href="#one">CONTENT</a></li>
<li><a class="rw-btn nav-link btn px-2 py-1 ml-1" style="border: 0; color: #fff; background: rgba(255, 255, 255, .2); filter: drop-shadow(0px 0px 4px #090410);" data-toggle="tab" href="#two">CONTENT</a></li>
</ul>
<!------------------------------>
</div>
<!-------------------------------->
<div class="col-lg pb-1 pt-0 pt-lg-2 pr-3 pr-md-2" style="overflow: auto; height: 354px;">
<!-- PALETTE --------------------
Copy these blocks of code to add as many as you'd like!
They will wrap into another line if they run out of space.
Change "color: white;" to "color: black" if your color is light.
-------------------------------->
<span class="row no-gutters mb-2" style="overflow: hidden; border-radius: .15rem;">
<span class="col tooltipster align-items-center justify-content-center text-center px-2" style="
background-color: #000000;
color: white; padding-top: .15rem; padding-bottom: .15rem; line-height: 1.25;"
title="#000000"
>CONTENT</span>
<span class="col tooltipster align-items-center justify-content-center text-center px-2" style="
background-color: #000000;
color: white; padding-top: .15rem; padding-bottom: .15rem; line-height: 1.25;"
title="#000000"
>CONTENT</span>
<span class="col tooltipster align-items-center justify-content-center text-center px-2" style="
background-color: #000000;
color: white; padding-top: .15rem; padding-bottom: .15rem; line-height: 1.25;"
title="#000000">
CONTENT</span>
<span class="col tooltipster align-items-center justify-content-center text-center px-2" style="
background-color: #000000;
color: white; padding-top: .15rem; padding-bottom: .15rem; line-height: 1.25;"
title="#000000">
CONTENT</span>
</span>
<!-- FIELDS ---------------------
Here's the code I used for the two heights in the live
preview if you have any fields that need two values:
CONTENT <span style="opacity: .4;">(CONTENT)</span>
<span style="opacity: .1;">|</span>
CONTENT <span style="opacity: .4;">(CONTENT)</span>
This can also be used in the miscellaneous tab fields, but in
most cases it'll probably be too long for the basics sidebar.
-------------------------------->
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Height</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Weight</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Build</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<!-- DESIGN NOTES -------------->
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Design Notes</p>
<ul class="mb-2 fa-ul">
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_scholar.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_scholar.png">Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_scholar.png">Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li style="opacity: .4;"><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_scholar.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li style="opacity: .4;"><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_scholar.png">Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
</div>
<!-------- RELATIONSHIPS -------------->
<div class="tab-pane fade pt-md-3" id="relationships">
<p class="display-4 text-uppercase align-content-center mb-0 ml-2 ml-md-0" style="filter: drop-shadow(0px 0px 40px #fff);"><img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_3.png" class="mr-1 fa-fade" style="height: 40px; filter: drop-shadow(0px 0px 30px #fff); animation-duration: 4s;">Relationships</p>
<hr class="mt-2 mb-0 mr-3 mr-md-2 ml-2 ml-md-0" style="background: #fff; opacity: .1;">
<div class="pr-3 pr-md-2 pl-2 pl-md-0 pb-2" style="overflow: auto; max-height: 354px;">
<!---- CHARACTER ----------------->
<div class="row no-gutters">
<div class="col-12 col-sm-auto mt-2 mr-sm-2" style="z-index: 1;"><a class="rw-btn"
href="CREDITLINK"
><img
src="IMAGELINK"
style="width: 100px; height: 100px; border: double 6px; border-color: rgba(255, 255, 255, .1); border-radius: .15rem;"></a></div>
<div class="col">
<div class="row no-gutters mb-1 mt-2" style="filter: drop-shadow(0px 0px 20px #fff);"><div class="col-12 d-flex no-gutters">
<div class="col-auto display-4 text-uppercase" style="font-size: 1.6em;"><a
href="CHARACTERLINK"
style="color: #fff; text-decoration: none;">
CHARACTERNAME
</a></div>
<hr class="col my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="col-auto pull-right" style="font-size: 1.2em; margin-top: -3px;">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
</div>
</div></div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---- CHARACTER ----------------->
<div class="row no-gutters">
<div class="col-12 col-sm-auto mt-2 mr-sm-2" style="z-index: 1;"><a class="rw-btn"
href="CREDITLINK"
><img
src="IMAGELINK"
style="width: 100px; height: 100px; border: double 6px; border-color: rgba(255, 255, 255, .1); border-radius: .15rem;"></a></div>
<div class="col">
<div class="row no-gutters mb-1 mt-2" style="filter: drop-shadow(0px 0px 20px #fff);"><div class="col-12 d-flex no-gutters">
<div class="col-auto display-4 text-uppercase" style="font-size: 1.6em;"><a
href="CHARACTERLINK"
style="color: #fff; text-decoration: none;">
CHARACTERNAME
</a></div>
<hr class="col my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="col-auto pull-right" style="font-size: 1.2em; margin-top: -3px;">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
</div>
</div></div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---- CHARACTER ----------------->
<div class="row no-gutters">
<div class="col-12 col-sm-auto mt-2 mr-sm-2" style="z-index: 1;"><a class="rw-btn"
href="CREDITLINK"
><img
src="IMAGELINK"
style="width: 100px; height: 100px; border: double 6px; border-color: rgba(255, 255, 255, .1); border-radius: .15rem;"></a></div>
<div class="col">
<div class="row no-gutters mb-1 mt-2" style="filter: drop-shadow(0px 0px 20px #fff);"><div class="col-12 d-flex no-gutters">
<div class="col-auto display-4 text-uppercase" style="font-size: 1.6em;"><a
href="CHARACTERLINK"
style="color: #fff; text-decoration: none;">
CHARACTERNAME
</a></div>
<hr class="col my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="col-auto pull-right" style="font-size: 1.2em; margin-top: -3px;">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
</div>
</div></div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---- CHARACTER ----------------->
<div class="row no-gutters">
<div class="col-12 col-sm-auto mt-2 mr-sm-2" style="z-index: 1;"><a class="rw-btn"
href="CREDITLINK"
><img
src="IMAGELINK"
style="width: 100px; height: 100px; border: double 6px; border-color: rgba(255, 255, 255, .1); border-radius: .15rem;"></a></div>
<div class="col">
<div class="row no-gutters mb-1 mt-2" style="filter: drop-shadow(0px 0px 20px #fff);"><div class="col-12 d-flex no-gutters">
<div class="col-auto display-4 text-uppercase" style="font-size: 1.6em;"><a
href="CHARACTERLINK"
style="color: #fff; text-decoration: none;">
CHARACTERNAME
</a></div>
<hr class="col my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="col-auto pull-right" style="font-size: 1.2em; margin-top: -3px;">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
<img style="height: 20px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/food_pip_empty.png">
</div>
</div></div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
<!-------- HISTORY -------------------->
<div class="tab-pane fade pt-md-3" id="history">
<p class="display-4 text-uppercase align-content-center mb-0 ml-2 ml-md-0" style="filter: drop-shadow(0px 0px 40px #fff);"><img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_2.png" class="mr-1 fa-fade" style="height: 40px; filter: drop-shadow(0px 0px 30px #fff); animation-duration: 4s;">History</p>
<hr class="mt-2 mb-0 mr-3 mr-md-2 ml-2 ml-md-0" style="background: #fff; opacity: .1;">
<div class="pr-3 pr-md-2 pl-2 pl-md-0 pb-1 pt-2" style="overflow: auto; max-height: 354px;">
<p class="mb-2">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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-2">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>
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Subheader</p>
<p class="mb-2">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.</p>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-------- MISCELLANEOUS -------------->
<div class="tab-pane fade pt-md-3" id="miscellaneous">
<p class="display-4 text-uppercase align-content-center mb-0 ml-2 ml-md-0" style="filter: drop-shadow(0px 0px 40px #fff);"><img src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/karma/karma_1.png" class="mr-1 fa-fade" style="height: 40px; filter: drop-shadow(0px 0px 30px #fff); animation-duration: 4s;">Miscellaneous</p>
<hr class="mt-2 mb-0 mr-3 mr-md-2 ml-2 ml-md-0" style="background: #fff; opacity: .1;">
<div class="row no-gutters pl-2 pl-md-0">
<!---- MUSIC/IMAGE BOX ----------->
<div class="col-lg-3 pr-3 pr-lg-2 mt-2 mb-2"><div class="row no-gutters justify-content-center h-100" style="border: double 6px; border-color: rgba(255, 255, 255, .1); max-height: 338px; border-radius: .15rem;">
<div class="col-12 h-100" style="min-height: 150px; background: url(
https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/rainfall.gif
) right; background-size: cover;"></div>
<!-- MUSIC ----------------------
I left in the track from the live preview in case you want to keep that one,
but if you want to replace it, copy the video ID of the YouTube video you want
to use (from the end of its URL) and put it in place of the current video ID
in both links below (currently rgmFR9MBRTQ). Don't forget to change the title too!
-------------------------------->
<div style="position: absolute; bottom: 10px;" class="tooltipster"
title="'Urban Jungle' - James Primate">
<iframe
src="https://www.youtube.com/embed/rgmFR9MBRTQ?loop=1"
loop="1" frameborder="0" style="position: absolute; height: .8rem; width: 1rem; bottom: .3rem; opacity: 0.00001;"></iframe>
<i class="fa-solid fa-play-pause"></i>
<a
href="https://www.youtube.com/watch?v=rgmFR9MBRTQ"
target="_blank" class="rw-not-a text-white"><i class="fa-brands fa-youtube"></i></a>
</div>
</div></div>
<!-------------------------------->
<div class="col-lg pb-1 pt-0 pt-lg-2 pr-3 pr-md-2" style="overflow: auto; height: 354px;">
<!-- FIELDS -------------------->
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Value</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Creation Date</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<div class="row no-gutters" style="white-space: nowrap;"><div class="col-12 d-flex">
<div class="text-uppercase font-weight-bold">Obtained</div>
<hr class="w-100 my-auto mx-2" style="background: #fff; opacity: .1;">
<div class="pull-right">CONTENT</div>
</div></div>
<!-- TRIVIA -------------------->
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Trivia</p>
<ul class="mb-2 fa-ul">
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_wanderer.png">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.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_wanderer.png">Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li><img class="fa-li" style="position: absolute; height: 25px; width: 25px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/passages/passage_wanderer.png">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.</li>
</ul>
<!-- RIBBONS -------------------->
<p class="display-4 text-uppercase mb-1 mt-1" style="font-size: 1.6em; filter: drop-shadow(0px 0px 20px #fff);">Ribbons</p>
<div class="row no-gutters">
<a class="rw-not-a"
href="CREDITLINK"
><img style="padding: .2rem;" class="tooltipster"
title="TITLE"
src="IMAGELINK"
></a>
<a class="rw-not-a"
href="CREDITLINK"
><img style="padding: .2rem;" class="tooltipster"
title="TITLE"
src="IMAGELINK"
></a>
<a class="rw-not-a"
href="CREDITLINK"
><img style="padding: .2rem;" class="tooltipster"
title="TITLE"
src="IMAGELINK"
></a>
<a class="rw-not-a"
href="CREDITLINK"
><img style="padding: .2rem;" class="tooltipster"
title="TITLE"
src="IMAGELINK"
></a>
</div>
</div>
</div>
</div>
<!-------- CREDIT - DON'T DELETE ----->
<span class="mr-3 mr-md-2 mt-2" style="position: absolute; top: 0; right: 0; opacity: .4;">
<a href="https://rainworldgame.com/"><img class="tooltipster" data-placement="left" title="Graphics From Rain World by VIDEOCULT" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/slug.png"></a><a href="https://toyhou.se/18761520.-f2u-html-rain-world"><img class="tooltipster" data-placement="left" title="F2U HTML by StormyStarlight" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/neuron.png"></a></span>
</div>
</div>
<!------------ RIGHT BLOCK IMG ------------>
<div class="col-auto hidden-lg-down" style="background: url(
https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/rainworld/slugshelter.png
); height: 419px; width: 233px; border-radius: 0 0 .25rem 0;"></div>
</div>
</div>
