<!--------------------------------
"Dragon Tears" - F2U HTML by @StormyStarlight
VERSION - 5 Oct 2023
https://toyhou.se/22231082.f2u-html-dragon-tears
• 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 style="overflow: hidden; border-radius: 1rem; color: #2C2422; background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/tile_dark.png);">
<!------ HEADER ----------------->
<div class="justify-content-center align-items-center px-3 pt-3" style="background-color: #F8F8DF;">
<img style="height: 9px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_dark.png">
<h1 class="display-3 text-center text-uppercase font-weight-bold px-3" style="font-family: serif;">
NAME
</h1>
<img style="height: 9px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_dark.png">
</div>
<div style="height: 20.8px; background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/trim_light_bottom.png); background-size: 100px;"></div>
<!------ MID SECTION ------------>
<div class="row no-gutters flex-lg-row-reverse p-2">
<!------ RIGHT BLOCK ---------->
<div class="col-lg-4 p-2 align-self-end">
<!------ REF IMAGE ---------->
<a class="justify-content-center" href="
CREDITLINK
"><img src="
IMAGELINK
" class="w-100" style="border-radius: 0.5rem;
max-width: 400px;
"></a>
<!------ INFOBOX -------------
↑ Adjust "max-width" to control how wide
the image is allowed to be on medium screens
(set to "none" if your image is landscape-oriented)
↓ Adjust "margin-top" to control how much
of the image is covered by the infobox
----------------------------->
<div style="
margin-top: -75px;
background: #F2EDD0 url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/overlay_light_e.png) right no-repeat; background-size: cover; border-radius: 0.5rem; white-space: nowrap; position: relative; z-index: 6;" class="p-2">
<!------ FIELDS ----------->
<div class="d-flex"><span class="text-uppercase font-weight-bold">Name</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">Pronouns</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">Orientation</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">Age</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">People</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">Residence</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<div class="d-flex"><span class="text-uppercase font-weight-bold">Occupation</span>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right">CONTENT</span></div>
<!------------------------->
</div>
</div>
<!------ LEFT BLOCK ----------->
<div class="col-lg-8 p-2">
<div class="h-100 d-block d-lg-flex flex-column" style="border-radius: 0.5rem; overflow: hidden; background: #F2EDD0 url('https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/overlay_light_sw.png') bottom left no-repeat; background-size: 300px;">
<!------ NAV BUTTONS ------>
<div class="row no-gutters nav nav-tabs px-2" style="background: #BEA670; border-bottom: solid 2px #BEA670;">
<a href="#character" class="col px-2 btn nav-item text-uppercase font-weight-bold" style="border-radius: 0; background: #BEA670; color: #F8F8DF;" data-toggle="tab"><i class="fa-solid fa-swords"></i> Character</a>
<a href="#design" class="col px-2 btn nav-item text-uppercase font-weight-bold" style="border-radius: 0; background: #BEA670; color: #F8F8DF;" data-toggle="tab"><i class="fa-solid fa-shield-halved"></i> Design</a>
<a href="#history" class="col px-2 btn nav-item text-uppercase font-weight-bold" style="border-radius: 0; background: #BEA670; color: #F8F8DF;" data-toggle="tab"><i class="fa-solid fa-apple-whole"></i> History</a>
<a href="#relationships" class="col px-2 btn nav-item text-uppercase font-weight-bold" style="border-radius: 0; background: #BEA670; color: #F8F8DF;" data-toggle="tab"><i class="fa-solid fa-star"></i> Relationships</a>
</div>
<!------ MAIN CONTENT ------
↓ Adjust "min-height" to control how tall the
box is if your ref image is landscape-oriented
--------------------------->
<div class="tab-content p-3" style="
min-height: 450px;
flex: 1 1 200px; overflow-y: auto; background: url('https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/overlay_light_ne.png') top right no-repeat; background-size: 300px; scrollbar-color: #BEA670 rgba(0, 0, 0, 0); scrollbar-width: thin;">
<!------ CHARACTER ------>
<div id="character" class="tab-pane fade active show">
<div class="d-flex" style="white-space: nowrap;">
<h2 class="text-uppercase"><i class="fa-light fa-swords"></i> Character</h2>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<p class="my-2 text-center">
<img style="height: 26px; margin-top: -2px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/eye_tan_left.png">
<span class="badge" style="background: #BEA670; color: #F8F8DF;">ADJECTIVE</span>
<span class="badge" style="background: #BEA670; color: #F8F8DF;">ADJECTIVE</span>
<span class="badge" style="background: #BEA670; color: #F8F8DF;">ADJECTIVE</span>
<img style="height: 26px; margin-top: -2px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/eye_tan_right.png">
</p>
<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.</p>
<div class="row no-gutters my-3">
<div class="col-6 col-xl-3 pr-2">
<div class="d-flex" style="white-space: nowrap;">
<h3>Likes</h3>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div><ul class="fa-ul mb-0">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
</ul></div>
<div class="col-6 col-xl-3 pl-2 pr-xl-2">
<div class="d-flex" style="white-space: nowrap;">
<h3>Dislikes</h3>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div><ul class="fa-ul mb-0">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum.</li>
</ul></div>
<div class="col-12 col-xl-6 mt-3 mt-xl-0 pl-xl-2">
<div class="d-flex" style="white-space: nowrap;">
<h3>Notes</h3>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div><ul class="fa-ul mb-0">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum dolor sit amet, consectetur.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum dolor sit amet, consectetur.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i> Lorem ipsum dolor sit amet, consectetur.</li>
</ul></div>
</div>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Statistics</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<div class="row no-gutters mb-4">
<div class="col-6 pr-1"><p class="mb-0 mt-1">Introvert<span class="pull-right">Extrovert</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pl-1"><p class="mb-0 mt-1">Optimist<span class="pull-right">Pessimist</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pr-1"><p class="mb-0 mt-1">Thinking<span class="pull-right">Feeling</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pl-1"><p class="mb-0 mt-1">Apathetic<span class="pull-right">Empathetic</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pr-1"><p class="mb-0 mt-1">Cautious<span class="pull-right">Careless</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pl-1"><p class="mb-0 mt-1">Mature<span class="pull-right">Immature</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pr-1"><p class="mb-0 mt-1">Lawful<span class="pull-right">Chaotic</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
<div class="col-6 pl-1"><p class="mb-0 mt-1">Good<span class="pull-right">Evil</span></p>
<div class="progress" style="background: #BEA670; overflow: visible;"><div class="progress-bar justify-content-end" role="progressbar" style="width:
50%
; height: 4px; color: #2C2422; background: none;">
<i class="fa-light fa-bullseye" style="font-size: 1rem; margin-top: -6px; margin-right: -8px;"></i></div></div></div>
</div>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Skills & Abilities</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<p class="my-0"><ul class="fa-ul mb-0">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
</ul></p>
</div>
<!----------------------->
<!------ DESIGN --------->
<div id="design" class="tab-pane fade">
<div class="d-flex" style="white-space: nowrap;">
<h2 class="text-uppercase"><i class="fa-light fa-shield-halved"></i> Design</h2>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<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.</p>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Design Notes</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<p class="my-0"><ul class="fa-ul">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
</ul></p>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Palette</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<div class="row no-gutters mx-n1 my-2" style="word-break: break-word; font-family: monospace;">
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
<div class="col-4 col-sm-3 col-xl-2 p-1"><div class="p-1 text-center" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><div class="px-2 py-1 rounded" style="color: white; background: #000000;">#000000</div></div></div>
</div>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Moodboard</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<div class="row no-gutters mx-n1 mb-n1 mt-2" style="word-break: break-word; font-family: monospace;">
<!------ IMAGE ------>
<div class="col-6 col-sm-3 p-1"><a class="d-block p-1 text-center" href="
CREDITLINK
" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><span class="d-block rounded" style="padding-top: 100%; background: url(
IMAGELINK
) center; background-size: cover;"></span></a></div>
<!------ IMAGE ------>
<div class="col-6 col-sm-3 p-1"><a class="d-block p-1 text-center" href="
CREDITLINK
" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><span class="d-block rounded" style="padding-top: 100%; background: url(
IMAGELINK
) center; background-size: cover;"></span></a></div>
<!------ IMAGE ------>
<div class="col-6 col-sm-3 p-1"><a class="d-block p-1 text-center" href="
CREDITLINK
" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><span class="d-block rounded" style="padding-top: 100%; background: url(
IMAGELINK
) center; background-size: cover;"></span></a></div>
<!------ IMAGE ------>
<div class="col-6 col-sm-3 p-1"><a class="d-block p-1 text-center" href="
CREDITLINK
" style="border: solid 2px #BEA670; background: #F8F8DF; color: white;"><span class="d-block rounded" style="padding-top: 100%; background: url(
IMAGELINK
); background-size: cover;"></span></a></div>
<!------------------->
</div>
</div>
<!----------------------->
<!------ HISTORY -------->
<div id="history" class="tab-pane fade">
<div class="d-flex" style="white-space: nowrap;">
<h2 class="text-uppercase"><i class="fa-light fa-apple-whole"></i> History</h2>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<p class="my-2 mx-sm-5 text-center">
<img style="height: 26px; margin-top: -2px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/eye_tan_left.png">
<i class="font-weight-bold" style="color: #BEA670;">"Quote text goes here."</i>
<img style="height: 26px; margin-top: -2px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/eye_tan_right.png">
</p>
<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. 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 class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Subheading</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<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.</p>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Subheading</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<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.</p>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1">Trivia</h3>
<span class="w-100 ml-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<p class="my-0"><ul class="fa-ul mb-0">
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
<li><i class="fa-li fa-light fa-bullseye" style="color: #BEA670;"></i>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.</li>
</ul></p>
</div>
<!----------------------->
<!------ RELATIONSHIPS -->
<div id="relationships" class="tab-pane fade">
<div class="d-flex mb-n2" style="white-space: nowrap;">
<h2 class="text-uppercase"><i class="fa-light fa-star"></i> Relationships</h2>
<span class="w-100 ml-2 mb-1" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
</div>
<!------ CHARACTER ---->
<div class="clearfix mb-3"></div>
<a class="p-1 mr-3 pull-left" style="max-width: 100px; border: solid 2px #BEA670; background: #F8F8DF; position: relative;" href="
CHARACTERLINK
"><img class="rounded" src="
IMAGELINK
"><i class="fa-solid
fa-heart
p-1 rounded" style="font-size: 1rem; color: #BEA670; background: #F8F8DF; position: absolute; right: 0px; bottom: 0px;"></i></a>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1"><a style="color: #2C2422;" href="CHARACTERLINK">CHARACTER</a></h3>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right font-weight-bold" style="color: #BEA670;">RELATIONSHIP</span>
</div>
<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.</p>
<!--------------------->
<!------ CHARACTER ---->
<div class="clearfix mb-3"></div>
<a class="p-1 mr-3 pull-left" style="max-width: 100px; border: solid 2px #BEA670; background: #F8F8DF; position: relative;" href="
CHARACTERLINK
"><img class="rounded" src="
IMAGELINK
"><i class="fa-solid
fa-heart
p-1 rounded" style="font-size: 1rem; color: #BEA670; background: #F8F8DF; position: absolute; right: 0px; bottom: 0px;"></i></a>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1"><a style="color: #2C2422;" href="CHARACTERLINK">CHARACTER</a></h3>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right font-weight-bold" style="color: #BEA670;">RELATIONSHIP</span>
</div>
<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.</p>
<!--------------------->
<!------ CHARACTER ---->
<div class="clearfix mb-3"></div>
<a class="p-1 mr-3 pull-left" style="max-width: 100px; border: solid 2px #BEA670; background: #F8F8DF; position: relative;" href="
CHARACTERLINK
"><img class="rounded" src="
IMAGELINK
"><i class="fa-solid
fa-heart
p-1 rounded" style="font-size: 1rem; color: #BEA670; background: #F8F8DF; position: absolute; right: 0px; bottom: 0px;"></i></a>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1"><a style="color: #2C2422;" href="CHARACTERLINK">CHARACTER</a></h3>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right font-weight-bold" style="color: #BEA670;">RELATIONSHIP</span>
</div>
<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.</p>
<!--------------------->
<!------ CHARACTER ---->
<div class="clearfix mb-3"></div>
<a class="p-1 mr-3 pull-left" style="max-width: 100px; border: solid 2px #BEA670; background: #F8F8DF; position: relative;" href="
CHARACTERLINK
"><img class="rounded" src="
IMAGELINK
"><i class="fa-solid
fa-heart
p-1 rounded" style="font-size: 1rem; color: #BEA670; background: #F8F8DF; position: absolute; right: 0px; bottom: 0px;"></i></a>
<div class="d-flex mb-1" style="white-space: nowrap;">
<h3 class="mb-1"><a style="color: #2C2422;" href="CHARACTERLINK">CHARACTER</a></h3>
<span class="w-100 mx-2" style="background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_tan.png) left repeat-x; background-size: 100px;"></span>
<span class="pull-right font-weight-bold" style="color: #BEA670;">RELATIONSHIP</span>
</div>
<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.</p>
<!--------------------->
</div>
<!----------------------->
</div>
</div>
</div>
</div>
<!------ FOOTER ----------------->
<div style="height: 20px; background: url(https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/trim_light_top.png); background-size: 100px;"></div>
<div class="justify-content-end align-items-center px-3 pb-2" style="background-color: #F8F8DF;">
<img style="height: 9px;" src="https://file.garden/ZR9T2HeuqFVzWPzq/toyhouse/dragontears/runes_dark.png">
<!------ CREDIT - DON'T DELETE ------>
<a href="https://www.nintendo.com/store/products/the-legend-of-zelda-tears-of-the-kingdom-switch/" style="color: #2C2422;" class="tooltipster" title="Graphics by Nintendo" data-placement="left"><i class="fa-solid fa-icons pl-2"></i></a>
<a href="https://toyhou.se/22231082.f2u-html-dragon-tears" style="color: #2C2422;" class="tooltipster" title="F2U HTML by StormyStarlight" data-placement="left"><i class="fa-solid fa-code pl-2"></i></a>
</div>
</div>
