Farmstead (Harvest Lunatone)
created by:dragon-heist
Mixed ColorsHTMLCharacter
Copy
<!-- MAIN CONTAINER / SKY GRADIENT -->
<div class="col-12 d-flex flex-wrap px-0 pb-1 pt-2 rounded" style="background:linear-gradient(0deg, rgba(201,243,255,1) 0%, rgba(160,221,237,1) 100%); position:relative; overflow:hidden;">
<!-- DECOR: Sun / Clouds -->
<i class="fa-solid fa-clouds fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:40%; top:-5%;"></i>
<i class="fa-solid fa-cloud" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:31%; top:-7%;"></i>
<i class="fa-solid fa-clouds" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:-5%; top:2%;"></i>
<i class="fa-solid fa-cloud fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:9em; left:2%; top:-3%;"></i>
<i class="fa-duotone fa-sun fa-spin" style="position:absolute; color:rgba(255,192,102,0.8); font-size:12em; left:17%; top:-7%; -webkit-animation: fa-spin 15s infinite linear; animation: fa-spin 15s infinite linear;"></i>
<div class="fa-fade" style="--fa-animation-duration:3s;-webkit-animation: fa-fade 3s infinite linear;animation: fa-fade 3s infinite linear; position:absolute; height:85%; left:18%; top:-5%; transform:rotate(-16deg); clip-path: polygon(34% 0, 65% 0, 100% 100%, 0% 100%); width:300px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,242,230,0.3) 10%, rgba(252,242,230,0.2) 80%, rgba(255,255,255,0) 90%);"></div>
<div class="col-lg-6 d-none d-lg-block"></div>
<div class="col-lg-8 col-xl-7 d-none d-lg-flex h-100 align-items-end pb-2" style="position:absolute;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png" class="col-lg-12 ml-lg-n5">
<!-- BACKGROUND: Signpost -->
<img class="ml-lg-n4 mb-lg-n1 mb-xl-0 ml-xl-2 h-100" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png" style="position:absolute;">
<div class="col-12 mt-lg-5 mt-3 d-flex" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-xl-3 mr-lg-n4 mr-xl-n5" style="z-index:1;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 ml-lg-2 ml-xl-5 ml-1"><a href="https://sites.google.com/view/harvestlunatone/home"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></a></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0">
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 mt-lg-2 mb-lg-1 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
<!-- CHARACTER IMAGE -->
<div class="col-lg-10 col-xl-8 ml-lg-n5 ml-xl-5">
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="ml-lg-n5 ml-xl-0 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; max-height:95%; left:3.5rem;">
</div>
</div>
</div>
<!-- SMALL LAYOUT -->
<div class="col-lg-6 d-flex d-lg-none flex-wrap align-content-start p-0">
<div class="col-12 card border-0 p-0 bg-transparent" style="position:relative;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png" class="d-md-block d-lg-none ml-lg-0 ml-4 ml-lg-2" style="position:absolute; bottom:0; left:-15px; width:95%">
<!-- BACKGROUND: Signpost -->
<img class="d-block d-lg-none ml-3 ml-lg-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png">
<!-- CHARACTER IMAGE -->
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; right:1.8rem; height:90%;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 mt-lg-5 mt-3" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-lg-3 col-sm-4 col-5 ml-lg-5 ml-sm-1 ml-1"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0" id="myTab" role="tablist">
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;"data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
</div>
</div>
<!-- MAIN CONTENT PANELS -->
<div class="tab-content col-lg-6 px-lg-0 pt-lg-3 mt-n1 mt-lg-0" id="CONTENT-TOP">
<!-- BASICS SECTION -->
<div class="tab-pane fade show active" id="BASICS">
<a class="btn p-2 text-light d-block d-lg-none" data-toggle="tooltip" title="Back to top" href="#BASICS" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0">
<div class="col-12 p-0 d-flex flex-wrap">
<!-- BASICS CONTENT NAVIGATION -->
<div class="col-12 px-lg-3 mt-lg-0 px-0 pr-lg-4">
<ul class="nav nav-pills border-bottom-0 p-0">
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link active text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-INFO" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-regular fa-id-card"></i> <span class="d-inline">Basics</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-STATS" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-duotone fa-chart-simple"></i> <span class="d-inline">Stats</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-TRIVIA" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-light fa-question-circle"></i> <span class="d-inline">Trivia</span></a>
</li>
</ul>
</div>
<!-- BASICS TABS -->
<div class="col-12 px-lg-3 pr-0 mb-2">
<div class="col-12 rounded-0 card py-3 px-0 mb-2" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="tab-content" style="height:312px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<!-- BASICS INFO -->
<div class="tab-pane fade show active" id="BASICS-INFO">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-leaf fa-xs mr-1"></i> Basics</div>
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Name</div>
<div class="col-6 text-right">Name</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Age</div>
<div class="col-6 text-right">00</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Gender</div>
<div class="col-6 text-right">Gender</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Pronouns</div>
<div class="col-6 text-right">Pronouns</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Height</div>
<div class="col-6 text-right">0'00"</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Birthday</div>
<div class="col-6 text-right">January 1</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Orientation</div>
<div class="col-6 text-right">Orientation</div>
</div>
</div>
<!-- BASICS STATS -->
<div class="tab-pane fade" id="BASICS-STATS">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-chart-simple mr-1"></i> Stats</div>
<div class="px-3 px-md-4">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-dna mr-1"></i> Species</div></div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
Species Name
</div>
</div>
<hr class="my-3 mx-3">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-explosion mr-1"></i> Ability</div></div>
<div class="col-md-3 text-center">
Ability Name
</div>
<div class="col-md-6 text-center">
<p>Ability description can go here.</p>
</div>
</div>
<hr class="my-3 mx-3">
<div class="mx-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-swords mr-1"></i> Moveset</div>
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
</div>
</div>
<!-- BASICS TRIVIA -->
<div class="tab-pane fade" id="BASICS-TRIVIA">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-question-circle mr-1"></i> Trivia</div>
<div class="px-2 px-md-4 d-flex flex-wrap">
<div class="col-md-8">
<p><i class="fa-duotone fa-caret-right mr-2"></i> Image scrolls with trivia (on desktop).</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
</div>
<div class="col-md-4">
<div class="sticky-top">
<img src="https://placehold.co/190" class="mt-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BASICS OCCUPATION -->
<div class="col-xl-5 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-farm mr-1"></i> Occupation</div>
<div class="col-12 mt-2 p-0" style="min-height:200px;">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Job Title</div>
<div class="col-6 text-right p-0">Rancher/etc.</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Ranch Name</div>
<div class="col-6 text-right p-0">Ranch Name</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<!-- FOR NON-BUSINESS OWNERS: <hr class="col-11 mt-2 mb-4 mx-auto p-0"> -->
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Shop Stock</div>
<div class="col-6 text-right p-0">Shop Stock</div>
</div>
<div class="p-0 text-center my-auto" style="max-height:90px;">
<!-- FARMING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png -->
<!-- RANCHING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030124_V6saTQ8yY7t8IVF.png -->
<!-- BUSINESS OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030102_hduP0IAjJzLUgUN.png -->
<img class="mt-3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png" style="max-height:90px;">
</div>
</div>
</div>
</div>
<!-- BASICS STARTER POKEMON -->
<div class="col-xl-7 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-paw mr-1"></i> Starter Pokémon</div>
<div class="w-100 p-0 d-flex flex-wrap align-items-center mt-2" style="min-height:200px;">
<div class="col-lg-6 ml-lg-n2 p-0 pr-lg-0 py-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Name</div>
<div class="col-6 p-0 text-center">Name</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Species</div>
<div class="col-6 p-0 text-center">Species</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Gender</div>
<div class="col-6 p-0 text-center">Gender</div>
</div>
</div>
<div class="col-lg-6 ml-lg-2 pr-lg-0 text-center mt-3 mt-lg-0">
<img src="https://placehold.co/165x165">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY SECTION -->
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-8 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-user fa-xs mr-1"></i> Personality</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px; text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
</div>
</div>
</div>
<!-- PERSONALITY TRAITS -->
<div class="col-lg-4 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-list fa-xs mr-1"></i> Traits</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px;">
<!-- PERSONALITY POSITIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<hr>
<!-- PERSONALITY NEUTRAL TRAITS -->
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<hr>
<!-- PERSONALITY NEGATIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
</div>
</div>
</div>
</div>
<!-- PERSONALITY LIKES / DISLIKES -->
<div class="col-12 p-0 d-flex flex-wrap">
<!-- PERSONALITY LIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-pulse mr-1 text-success"></i> Likes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
<!-- PERSONALITY DISLIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-broken mr-1 text-danger"></i> Dislikes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY SECTION -->
<div class="tab-pane fade" id="HISTORY">
<a class="btn p-2 text-light" data-toggle="tooltip" title="Back to top" href="#HISTORY-TOP" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-books fa-xs mr-1"></i> History</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- HISTORY TABLE OF CONTENTS -->
<div class="col-12 p-0 d-flex flex-wrap justify-content-between">
<div class="mb-3 mb-xl-0 col-sm-8 col-xl-9 p-0">
<h3 id="HISTORY-TOP">Table of Contents</h3>
<div class="pl-3 pl-xl-4">
<p class="mb-1"><a href="#HISTORY-SECTION1TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #1</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION2TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #2</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION3TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #3</a></p>
</div>
</div>
<div class="col-sm-4 col-xl-3 p-0" style="background:url('https://placehold.co/120'); background-repeat:no-repeat; background-size:contain; background-position:center; min-height:120px;"></div>
</div>
<!-- HISTORY RETURN TO TOP INFO -->
<div class="card mx-auto bg-faded my-4 p-2" style="font-size:0.85em;">
<div class="p-0 d-flex flex-wrap justify-content-center">
<p class="mb-0"><i class="fa-regular text-secondary fa-exclamation-circle fa-lg mr-1"></i> Click on the</p>
<p class="mx-2 mb-0 text-center text-light" style="width:20px; height:20px; background:#4B803E; border-radius: 0 5px;"><i class="fa-solid fa-arrow-up"></i></p>
<p class="mb-0">to return to the top!</p>
</div>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 1 -->
<h1 class="mb-3" id="HISTORY-SECTION1TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION1CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #1</h1>
<div class="collaps show px-lg-4" id="HISTORY-SECTION1CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 2 -->
<h1 class="mb-3" id="HISTORY-SECTION2TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION2CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #2</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION2CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 3 -->
<h1 class="mb-3" id="HISTORY-SECTION3TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION3CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #3</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION3CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION -->
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-heart-pulse fa-xs mr-1"></i> Relationships</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- RELATIONSHIPS CHARACTER 1 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 2 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 3 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 4 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-12 text-right">
<a href="https://sites.google.com/view/harvestlunatone/home" class="fa-solid fa-image mr-1" data-toggle="tooltip" title="using assets from Harvest Lunatone" style="text-decoration:none;"></a>
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
Copy
<!-- MAIN CONTAINER / SKY GRADIENT -->
<div class="col-12 d-flex flex-wrap px-0 pb-1 pt-2 rounded" style="background:linear-gradient(0deg, rgba(201,243,255,1) 0%, rgba(160,221,237,1) 100%); position:relative; overflow:hidden;">
<!-- DECOR: Sun / Clouds -->
<i class="fa-solid fa-clouds fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:40%; top:-5%;"></i>
<i class="fa-solid fa-cloud" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:31%; top:-7%;"></i>
<i class="fa-solid fa-clouds" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:-5%; top:2%;"></i>
<i class="fa-solid fa-cloud fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:9em; left:2%; top:-3%;"></i>
<i class="fa-duotone fa-sun fa-spin" style="position:absolute; color:rgba(255,192,102,0.8); font-size:12em; left:17%; top:-7%; -webkit-animation: fa-spin 15s infinite linear; animation: fa-spin 15s infinite linear;"></i>
<div class="fa-fade" style="--fa-animation-duration:3s;-webkit-animation: fa-fade 3s infinite linear;animation: fa-fade 3s infinite linear; position:absolute; height:85%; left:18%; top:-5%; transform:rotate(-16deg); clip-path: polygon(34% 0, 65% 0, 100% 100%, 0% 100%); width:300px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,242,230,0.3) 10%, rgba(252,242,230,0.2) 80%, rgba(255,255,255,0) 90%);"></div>
<div class="col-lg-6 d-none d-lg-block"></div>
<div class="col-lg-8 col-xl-7 d-none d-lg-flex h-100 align-items-end pb-2" style="position:absolute;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png" class="col-lg-12 ml-lg-n5">
<!-- BACKGROUND: Signpost -->
<img class="ml-lg-n4 mb-lg-n1 mb-xl-0 ml-xl-2 h-100" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png" style="position:absolute;">
<div class="col-12 mt-lg-5 mt-3 d-flex" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-xl-3 mr-lg-n4 mr-xl-n5" style="z-index:1;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 ml-lg-2 ml-xl-5 ml-1"><a href="https://sites.google.com/view/harvestlunatone/home"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></a></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0">
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 mt-lg-2 mb-lg-1 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
<!-- CHARACTER IMAGE -->
<div class="col-lg-10 col-xl-8 ml-lg-n5 ml-xl-5">
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="ml-lg-n5 ml-xl-0 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; max-height:95%; left:3.5rem;">
</div>
</div>
</div>
<!-- SMALL LAYOUT -->
<div class="col-lg-6 d-flex d-lg-none flex-wrap align-content-start p-0">
<div class="col-12 card border-0 p-0 bg-transparent" style="position:relative;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png" class="d-md-block d-lg-none ml-lg-0 ml-4 ml-lg-2" style="position:absolute; bottom:0; left:-15px; width:95%">
<!-- BACKGROUND: Signpost -->
<img class="d-block d-lg-none ml-3 ml-lg-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png">
<!-- CHARACTER IMAGE -->
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; right:1.8rem; height:90%;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 mt-lg-5 mt-3" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-lg-3 col-sm-4 col-5 ml-lg-5 ml-sm-1 ml-1"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0" id="myTab" role="tablist">
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;"data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
</div>
</div>
<!-- MAIN CONTENT PANELS -->
<div class="tab-content col-lg-6 px-lg-0 pt-lg-3 mt-n1 mt-lg-0" id="CONTENT-TOP">
<!-- BASICS SECTION -->
<div class="tab-pane fade show active" id="BASICS">
<a class="btn p-2 text-light d-block d-lg-none" data-toggle="tooltip" title="Back to top" href="#BASICS" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0">
<div class="col-12 p-0 d-flex flex-wrap">
<!-- BASICS CONTENT NAVIGATION -->
<div class="col-12 px-lg-3 mt-lg-0 px-0 pr-lg-4">
<ul class="nav nav-pills border-bottom-0 p-0">
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link active text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-INFO" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-regular fa-id-card"></i> <span class="d-inline">Basics</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-STATS" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-duotone fa-chart-simple"></i> <span class="d-inline">Stats</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-TRIVIA" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-light fa-question-circle"></i> <span class="d-inline">Trivia</span></a>
</li>
</ul>
</div>
<!-- BASICS TABS -->
<div class="col-12 px-lg-3 pr-0 mb-2">
<div class="col-12 rounded-0 card py-3 px-0 mb-2" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="tab-content" style="height:312px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<!-- BASICS INFO -->
<div class="tab-pane fade show active" id="BASICS-INFO">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-leaf fa-xs mr-1"></i> Basics</div>
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Name</div>
<div class="col-6 text-right">Name</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Age</div>
<div class="col-6 text-right">00</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Gender</div>
<div class="col-6 text-right">Gender</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Pronouns</div>
<div class="col-6 text-right">Pronouns</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Height</div>
<div class="col-6 text-right">0'00"</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Birthday</div>
<div class="col-6 text-right">January 1</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Orientation</div>
<div class="col-6 text-right">Orientation</div>
</div>
</div>
<!-- BASICS STATS -->
<div class="tab-pane fade" id="BASICS-STATS">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-chart-simple mr-1"></i> Stats</div>
<div class="px-3 px-md-4">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-dna mr-1"></i> Species</div></div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
Species Name
</div>
</div>
<hr class="my-3 mx-3">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-explosion mr-1"></i> Ability</div></div>
<div class="col-md-3 text-center">
Ability Name
</div>
<div class="col-md-6 text-center">
<p>Ability description can go here.</p>
</div>
</div>
<hr class="my-3 mx-3">
<div class="mx-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-swords mr-1"></i> Moveset</div>
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
</div>
</div>
<!-- BASICS TRIVIA -->
<div class="tab-pane fade" id="BASICS-TRIVIA">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-question-circle mr-1"></i> Trivia</div>
<div class="px-2 px-md-4 d-flex flex-wrap">
<div class="col-md-8">
<p><i class="fa-duotone fa-caret-right mr-2"></i> Image scrolls with trivia (on desktop).</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
</div>
<div class="col-md-4">
<div class="sticky-top">
<img src="https://placehold.co/190" class="mt-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BASICS OCCUPATION -->
<div class="col-xl-5 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-farm mr-1"></i> Occupation</div>
<div class="col-12 mt-2 p-0" style="min-height:200px;">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Job Title</div>
<div class="col-6 text-right p-0">Rancher/etc.</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Ranch Name</div>
<div class="col-6 text-right p-0">Ranch Name</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<!-- FOR NON-BUSINESS OWNERS: <hr class="col-11 mt-2 mb-4 mx-auto p-0"> -->
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Shop Stock</div>
<div class="col-6 text-right p-0">Shop Stock</div>
</div>
<div class="p-0 text-center my-auto" style="max-height:90px;">
<!-- FARMING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png -->
<!-- RANCHING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030124_V6saTQ8yY7t8IVF.png -->
<!-- BUSINESS OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030102_hduP0IAjJzLUgUN.png -->
<img class="mt-3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png" style="max-height:90px;">
</div>
</div>
</div>
</div>
<!-- BASICS STARTER POKEMON -->
<div class="col-xl-7 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-paw mr-1"></i> Starter Pokémon</div>
<div class="w-100 p-0 d-flex flex-wrap align-items-center mt-2" style="min-height:200px;">
<div class="col-lg-6 ml-lg-n2 p-0 pr-lg-0 py-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Name</div>
<div class="col-6 p-0 text-center">Name</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Species</div>
<div class="col-6 p-0 text-center">Species</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Gender</div>
<div class="col-6 p-0 text-center">Gender</div>
</div>
</div>
<div class="col-lg-6 ml-lg-2 pr-lg-0 text-center mt-3 mt-lg-0">
<img src="https://placehold.co/165x165">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY SECTION -->
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-8 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-user fa-xs mr-1"></i> Personality</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px; text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
</div>
</div>
</div>
<!-- PERSONALITY TRAITS -->
<div class="col-lg-4 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-list fa-xs mr-1"></i> Traits</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px;">
<!-- PERSONALITY POSITIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<hr>
<!-- PERSONALITY NEUTRAL TRAITS -->
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<hr>
<!-- PERSONALITY NEGATIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
</div>
</div>
</div>
</div>
<!-- PERSONALITY LIKES / DISLIKES -->
<div class="col-12 p-0 d-flex flex-wrap">
<!-- PERSONALITY LIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-pulse mr-1 text-success"></i> Likes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
<!-- PERSONALITY DISLIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-broken mr-1 text-danger"></i> Dislikes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY SECTION -->
<div class="tab-pane fade" id="HISTORY">
<a class="btn p-2 text-light" data-toggle="tooltip" title="Back to top" href="#HISTORY-TOP" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-books fa-xs mr-1"></i> History</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- HISTORY TABLE OF CONTENTS -->
<div class="col-12 p-0 d-flex flex-wrap justify-content-between">
<div class="mb-3 mb-xl-0 col-sm-8 col-xl-9 p-0">
<h3 id="HISTORY-TOP">Table of Contents</h3>
<div class="pl-3 pl-xl-4">
<p class="mb-1"><a href="#HISTORY-SECTION1TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #1</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION2TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #2</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION3TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #3</a></p>
</div>
</div>
<div class="col-sm-4 col-xl-3 p-0" style="background:url('https://placehold.co/120'); background-repeat:no-repeat; background-size:contain; background-position:center; min-height:120px;"></div>
</div>
<!-- HISTORY RETURN TO TOP INFO -->
<div class="card mx-auto bg-faded my-4 p-2" style="font-size:0.85em;">
<div class="p-0 d-flex flex-wrap justify-content-center">
<p class="mb-0"><i class="fa-regular text-secondary fa-exclamation-circle fa-lg mr-1"></i> Click on the</p>
<p class="mx-2 mb-0 text-center text-light" style="width:20px; height:20px; background:#4B803E; border-radius: 0 5px;"><i class="fa-solid fa-arrow-up"></i></p>
<p class="mb-0">to return to the top!</p>
</div>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 1 -->
<h1 class="mb-3" id="HISTORY-SECTION1TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION1CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #1</h1>
<div class="collaps show px-lg-4" id="HISTORY-SECTION1CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 2 -->
<h1 class="mb-3" id="HISTORY-SECTION2TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION2CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #2</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION2CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 3 -->
<h1 class="mb-3" id="HISTORY-SECTION3TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION3CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #3</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION3CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION -->
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-heart-pulse fa-xs mr-1"></i> Relationships</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- RELATIONSHIPS CHARACTER 1 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 2 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 3 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 4 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-12 text-right">
<a href="https://sites.google.com/view/harvestlunatone/home" class="fa-solid fa-image mr-1" data-toggle="tooltip" title="using assets from Harvest Lunatone" style="text-decoration:none;"></a>
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
Copy
<!-- MAIN CONTAINER / SKY GRADIENT -->
<div class="col-12 d-flex flex-wrap px-0 pb-1 pt-2 rounded" style="background:linear-gradient(0deg, rgba(219,253,255,1) 0%, rgba(160,221,236,1) 100%); position:relative; overflow:hidden;">
<!-- DECOR: Sun / Rays -->
<i class="fa-duotone fa-sun fa-spin" style="position:absolute; color:rgba(255,192,102,0.8); font-size:12em; left:36%; top:-5%; -webkit-animation: fa-spin 15s infinite linear; animation: fa-spin 15s infinite linear;"></i>
<div class="fa-fade d-none d-xl-block" style="--fa-animation-duration:3s;-webkit-animation: fa-fade 3s infinite linear;animation: fa-fade 3s infinite linear; position:absolute; height:85%; left:26%; top:-5%; transform:rotate(24deg); clip-path: polygon(34% 0, 65% 0, 100% 100%, 0% 100%); width:300px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,242,230,0.3) 10%, rgba(252,242,230,0.3) 80%, rgba(255,255,255,0) 90%);"></div>
<!-- BACKGROUND: Water -->
<div class="w-100 bg-dark" style="position:absolute; bottom:0; left:0; right:0; height:111px; background:linear-gradient(0deg, #239F5E 25%, #77D7E5 80%);"></div>
<div class="col-lg-6 d-none d-lg-block"></div>
<div class="col-lg-8 col-xl-7 d-none d-lg-flex h-100 align-items-end pb-2" style="position:absolute;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516046_VsWdqVMpA07IFjx.png" class="col-lg-12 ml-lg-n5">
<!-- BACKGROUND: Signpost -->
<img class="ml-lg-n4 mb-lg-n1 mb-xl-0 ml-xl-2 h-100" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516032_f3TsQNjQbiPB5ue.png" style="position:absolute;">
<div class="col-12 mt-lg-5 mt-3 d-flex" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-xl-3 mr-lg-n4 mr-xl-n5" style="z-index:1;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 ml-lg-2 ml-xl-5 ml-1"><a href="https://sites.google.com/view/harvestlunatone/home"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></a></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0">
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 mt-lg-2 mb-lg-1 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
<!-- CHARACTER IMAGE -->
<div class="col-lg-10 col-xl-8 ml-lg-n5 ml-xl-5">
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="ml-lg-n5 ml-xl-0 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; max-height:95%; left:3.5rem;">
</div>
</div>
</div>
<!-- SMALL LAYOUT -->
<div class="col-lg-6 d-flex d-lg-none flex-wrap align-content-start p-0">
<div class="col-12 card border-0 p-0 bg-transparent" style="position:relative;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516046_VsWdqVMpA07IFjx.png" class="d-md-block d-lg-none ml-lg-0 ml-4 ml-lg-2" style="position:absolute; bottom:0; left:-15px; width:95%">
<!-- BACKGROUND: Signpost -->
<img class="d-block d-lg-none ml-3 ml-lg-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516032_f3TsQNjQbiPB5ue.png">
<!-- CHARACTER IMAGE -->
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; right:1.8rem; height:90%;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 mt-lg-5 mt-3" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-lg-3 col-sm-4 col-5 ml-lg-5 ml-sm-1 ml-1"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0" id="myTab" role="tablist">
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 mt-2 mb-1 rounded" style="background:#B48342;">
<a class="nav-link active text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#B48342;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;"data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
</div>
</div>
<!-- MAIN CONTENT PANELS -->
<div class="tab-content col-lg-6 px-lg-0 pt-lg-3 mt-n1 mt-lg-0" id="CONTENT-TOP">
<!-- BASICS SECTION -->
<div class="tab-pane fade show active" id="BASICS">
<a class="btn p-2 text-light d-block d-lg-none" data-toggle="tooltip" title="Back to top" href="#BASICS" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0">
<div class="col-12 p-0 d-flex flex-wrap">
<!-- BASICS CONTENT NAVIGATION -->
<div class="col-12 px-lg-3 mt-lg-0 px-0 pr-lg-4">
<ul class="nav nav-pills border-bottom-0 p-0">
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link active text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-INFO" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-regular fa-id-card"></i> <span class="d-inline">Basics</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-STATS" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-duotone fa-chart-simple"></i> <span class="d-inline">Stats</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-TRIVIA" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-light fa-question-circle"></i> <span class="d-inline">Trivia</span></a>
</li>
</ul>
</div>
<!-- BASICS TABS -->
<div class="col-12 px-lg-3 pr-0 mb-2">
<div class="col-12 rounded-0 card py-3 px-0 mb-2" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="tab-content" style="height:312px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<!-- BASICS INFO -->
<div class="tab-pane fade show active" id="BASICS-INFO">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-leaf fa-xs mr-1"></i> Basics</div>
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Name</div>
<div class="col-6 text-right">Name</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Age</div>
<div class="col-6 text-right">00</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Gender</div>
<div class="col-6 text-right">Gender</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Pronouns</div>
<div class="col-6 text-right">Pronouns</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Height</div>
<div class="col-6 text-right">0'00"</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Birthday</div>
<div class="col-6 text-right">January 1</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Orientation</div>
<div class="col-6 text-right">Orientation</div>
</div>
</div>
<!-- BASICS STATS -->
<div class="tab-pane fade" id="BASICS-STATS">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-chart-simple mr-1"></i> Stats</div>
<div class="px-3 px-md-4">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-dna mr-1"></i> Species</div></div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
Species Name
</div>
</div>
<hr class="my-3 mx-3">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-explosion mr-1"></i> Ability</div></div>
<div class="col-md-3 text-center">
Ability Name
</div>
<div class="col-md-6 text-center">
<p>Ability description can go here.</p>
</div>
</div>
<hr class="my-3 mx-3">
<div class="mx-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-swords mr-1"></i> Moveset</div>
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
</div>
</div>
<!-- BASICS TRIVIA -->
<div class="tab-pane fade" id="BASICS-TRIVIA">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-question-circle mr-1"></i> Trivia</div>
<div class="px-2 px-md-4 d-flex flex-wrap">
<div class="col-md-8">
<p><i class="fa-duotone fa-caret-right mr-2"></i> Image scrolls with trivia (on desktop).</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
</div>
<div class="col-md-4">
<div class="sticky-top">
<img src="https://placehold.co/190" class="mt-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BASICS OCCUPATION -->
<div class="col-xl-5 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-farm mr-1"></i> Occupation</div>
<div class="col-12 mt-2 p-0" style="min-height:200px;">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Job Title</div>
<div class="col-6 text-right p-0">Rancher/etc.</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Ranch Name</div>
<div class="col-6 text-right p-0">Ranch Name</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<!-- FOR NON-BUSINESS OWNERS: <hr class="col-11 mt-2 mb-4 mx-auto p-0"> -->
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Shop Stock</div>
<div class="col-6 text-right p-0">Shop Stock</div>
</div>
<div class="p-0 text-center my-auto" style="max-height:90px;">
<!-- FARMING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png -->
<!-- RANCHING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030124_V6saTQ8yY7t8IVF.png -->
<!-- BUSINESS OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030102_hduP0IAjJzLUgUN.png -->
<img class="mt-3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png" style="max-height:90px;">
</div>
</div>
</div>
</div>
<!-- BASICS STARTER POKEMON -->
<div class="col-xl-7 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-paw mr-1"></i> Starter Pokémon</div>
<div class="w-100 p-0 d-flex flex-wrap align-items-center mt-2" style="min-height:200px;">
<div class="col-lg-6 ml-lg-n2 p-0 pr-lg-0 py-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Name</div>
<div class="col-6 p-0 text-center">Name</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Species</div>
<div class="col-6 p-0 text-center">Species</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Gender</div>
<div class="col-6 p-0 text-center">Gender</div>
</div>
</div>
<div class="col-lg-6 ml-lg-2 pr-lg-0 text-center mt-3 mt-lg-0">
<img src="https://placehold.co/165x165">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY SECTION -->
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-8 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-user fa-xs mr-1"></i> Personality</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px; text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
</div>
</div>
</div>
<!-- PERSONALITY TRAITS -->
<div class="col-lg-4 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-list fa-xs mr-1"></i> Traits</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px;">
<!-- PERSONALITY POSITIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<hr>
<!-- PERSONALITY NEUTRAL TRAITS -->
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<hr>
<!-- PERSONALITY NEGATIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
</div>
</div>
</div>
</div>
<!-- PERSONALITY LIKES / DISLIKES -->
<div class="col-12 p-0 d-flex flex-wrap">
<!-- PERSONALITY LIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-pulse mr-1 text-success"></i> Likes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
<!-- PERSONALITY DISLIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-broken mr-1 text-danger"></i> Dislikes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY SECTION -->
<div class="tab-pane fade" id="HISTORY">
<a class="btn p-2 text-light" data-toggle="tooltip" title="Back to top" href="#HISTORY-TOP" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-books fa-xs mr-1"></i> History</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- HISTORY TABLE OF CONTENTS -->
<div class="col-12 p-0 d-flex flex-wrap justify-content-between">
<div class="mb-3 mb-xl-0 col-sm-8 col-xl-9 p-0">
<h3 id="HISTORY-TOP">Table of Contents</h3>
<div class="pl-3 pl-xl-4">
<p class="mb-1"><a href="#HISTORY-SECTION1TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #1</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION2TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #2</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION3TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #3</a></p>
</div>
</div>
<div class="col-sm-4 col-xl-3 p-0" style="background:url('https://placehold.co/120'); background-repeat:no-repeat; background-size:contain; background-position:center; min-height:120px;"></div>
</div>
<!-- HISTORY RETURN TO TOP INFO -->
<div class="card mx-auto bg-faded my-4 p-2" style="font-size:0.85em;">
<div class="p-0 d-flex flex-wrap justify-content-center">
<p class="mb-0"><i class="fa-regular text-secondary fa-exclamation-circle fa-lg mr-1"></i> Click on the</p>
<p class="mx-2 mb-0 text-center text-light" style="width:20px; height:20px; background:#4B803E; border-radius: 0 5px;"><i class="fa-solid fa-arrow-up"></i></p>
<p class="mb-0">to return to the top!</p>
</div>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 1 -->
<h1 class="mb-3" id="HISTORY-SECTION1TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION1CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #1</h1>
<div class="collaps show px-lg-4" id="HISTORY-SECTION1CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 2 -->
<h1 class="mb-3" id="HISTORY-SECTION2TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION2CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #2</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION2CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 3 -->
<h1 class="mb-3" id="HISTORY-SECTION3TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION3CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #3</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION3CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION -->
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #B48342; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #97672D);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-heart-pulse fa-xs mr-1"></i> Relationships</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- RELATIONSHIPS CHARACTER 1 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 2 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 3 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 4 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-12 text-right">
<a href="https://sites.google.com/view/harvestlunatone/home" class="fa-solid fa-image mr-1" data-toggle="tooltip" title="using assets from Harvest Lunatone" style="text-decoration:none;"></a>
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
Copy
<!-- MAIN CONTAINER / SKY GRADIENT -->
<div class="col-12 d-flex flex-wrap px-0 pb-1 pt-2 rounded" style="background:linear-gradient(0deg, rgba(241,168,193,1) 0%, rgba(137,98,139,1) 35%, rgba(65,49,101,1) 70%, rgba(32,27,84,1) 100%); position:relative; overflow:hidden;">
<!-- DECOR: Stars -->
<i class="fa-solid fa-sparkle fa-xs fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.4); left:0.5%; top:2%;"></i>
<i class="fa-solid fa-sparkle fa-xl fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.5); left:20%; top:15%;"></i>
<div style="position:absolute; color:rgba(204,149,245,0.5); left:40%; top:22%; transform:rotate(15deg);"><i class="fa-solid fa-sparkle fa-xl fa-beat-fade"></i></div>
<i class="fa-solid fa-sparkle fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.5); left:26%; top:5%;"></i>
<i class="fa-solid fa-sparkle fa-beat-fade" style="font-size:2em; position:absolute; color:rgba(204,149,245,0.6); left:10%; top:50%;"></i>
<div style="position:absolute; color:rgba(204,149,245,0.6); left:12%; top:49%; transform:rotate(-15deg);"><i class="fa-solid fa-sparkle fa-sm fa-beat-fade"></i></div>
<i class="fa-solid fa-sparkle fa-xs fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.7); left:45%; bottom:45%;"></i>
<div class="col-lg-6 d-none d-lg-block"></div>
<div class="col-lg-8 col-xl-7 d-none d-lg-flex h-100 align-items-end pb-2" style="position:absolute;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516073_52tZwacVk2EkUFH.png" class="col-lg-12 ml-lg-n5">
<!-- BACKGROUND: Signpost -->
<img class="ml-lg-n4 mb-lg-n1 mb-xl-0 ml-xl-2 h-100" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516088_QA3r2YxtdUiImWO.png" style="position:absolute;">
<div class="col-12 mt-lg-5 mt-3 d-flex" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-xl-3 mr-lg-n4 mr-xl-n5" style="z-index:1;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 ml-lg-2 ml-xl-5 ml-1"><a href="https://sites.google.com/view/harvestlunatone/home"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></a></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0">
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 mt-lg-2 mb-lg-1 mt-2 mb-1 rounded" style="background:#C27E58;">
<a class="nav-link active text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
<!-- CHARACTER IMAGE -->
<div class="col-lg-10 col-xl-8 ml-lg-n5 ml-xl-5">
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="ml-lg-n5 ml-xl-0 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; max-height:95%; left:3.5rem;">
</div>
</div>
</div>
<!-- SMALL LAYOUT -->
<div class="col-lg-6 d-flex d-lg-none flex-wrap align-content-start p-0">
<div class="col-12 card border-0 p-0 bg-transparent" style="position:relative;">
<!-- BACKGROUND: Fence / Ground -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516073_52tZwacVk2EkUFH.png" class="d-md-block d-lg-none ml-lg-0 ml-4 ml-lg-2" style="position:absolute; bottom:0; left:-15px; width:95%">
<!-- BACKGROUND: Signpost -->
<img class="d-block d-lg-none ml-3 ml-lg-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/85516088_QA3r2YxtdUiImWO.png">
<!-- CHARACTER IMAGE -->
<img src="https://i.ibb.co/DQ37xPx/71706316-d29-Uf-Rpzw-Q43-LML.png" class="mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; right:1.8rem; height:90%;">
<!-- NAVIGATION: Site Link / Logo -->
<div class="col-12 mt-lg-5 mt-3" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-lg-3 col-sm-4 col-5 ml-lg-5 ml-sm-1 ml-1"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></div>
<!-- NAVIGATION: Tabs -->
<ul class="nav nav-pills flex-column border-bottom-0" id="myTab" role="tablist">
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 mt-2 mb-1 rounded" style="background:#C27E58;">
<a class="nav-link active text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:#C27E58;">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;"data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
</div>
</div>
<!-- MAIN CONTENT PANELS -->
<div class="tab-content col-lg-6 px-lg-0 pt-lg-3 mt-n1 mt-lg-0" id="CONTENT-TOP">
<!-- BASICS SECTION -->
<div class="tab-pane fade show active" id="BASICS">
<a class="btn p-2 text-light d-block d-lg-none" data-toggle="tooltip" title="Back to top" href="#BASICS" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0">
<div class="col-12 p-0 d-flex flex-wrap">
<!-- BASICS CONTENT NAVIGATION -->
<div class="col-12 px-lg-3 mt-lg-0 px-0 pr-lg-4">
<ul class="nav nav-pills border-bottom-0 p-0">
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link active text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-INFO" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-regular fa-id-card"></i> <span class="d-inline">Basics</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-STATS" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-duotone fa-chart-simple"></i> <span class="d-inline">Stats</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:#744219; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-TRIVIA" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-light fa-question-circle"></i> <span class="d-inline">Trivia</span></a>
</li>
</ul>
</div>
<!-- BASICS TABS -->
<div class="col-12 px-lg-3 pr-0 mb-2">
<div class="col-12 rounded-0 card py-3 px-0 mb-2" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div class="tab-content" style="height:312px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<!-- BASICS INFO -->
<div class="tab-pane fade show active" id="BASICS-INFO">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-leaf fa-xs mr-1"></i> Basics</div>
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Name</div>
<div class="col-6 text-right">Name</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Age</div>
<div class="col-6 text-right">00</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Gender</div>
<div class="col-6 text-right">Gender</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Pronouns</div>
<div class="col-6 text-right">Pronouns</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Height</div>
<div class="col-6 text-right">0'00"</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Birthday</div>
<div class="col-6 text-right">January 1</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Orientation</div>
<div class="col-6 text-right">Orientation</div>
</div>
</div>
<!-- BASICS STATS -->
<div class="tab-pane fade" id="BASICS-STATS">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-chart-simple mr-1"></i> Stats</div>
<div class="px-3 px-md-4">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-dna mr-1"></i> Species</div></div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
Species Name
</div>
</div>
<hr class="my-3 mx-3">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-explosion mr-1"></i> Ability</div></div>
<div class="col-md-3 text-center">
Ability Name
</div>
<div class="col-md-6 text-center">
<p>Ability description can go here.</p>
</div>
</div>
<hr class="my-3 mx-3">
<div class="mx-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-swords mr-1"></i> Moveset</div>
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
<hr class="mt-2 mb-1 mx-auto col-10">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">Move Name</div>
<div class="col-md-3 text-center">
<img src="https://archives.bulbagarden.net/media/upload/2/28/NormalIC_BW.png">
</div>
<div class="col-md-6 text-center">
<p>Move description can go here.</p>
</div>
</div>
</div>
</div>
<!-- BASICS TRIVIA -->
<div class="tab-pane fade" id="BASICS-TRIVIA">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-question-circle mr-1"></i> Trivia</div>
<div class="px-2 px-md-4 d-flex flex-wrap">
<div class="col-md-8">
<p><i class="fa-duotone fa-caret-right mr-2"></i> Image scrolls with trivia (on desktop).</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
<p><i class="fa-duotone fa-caret-right mr-2"></i> Trivia goes here.</p>
</div>
<div class="col-md-4">
<div class="sticky-top">
<img src="https://placehold.co/190" class="mt-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BASICS OCCUPATION -->
<div class="col-xl-5 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-farm mr-1"></i> Occupation</div>
<div class="col-12 mt-2 p-0" style="min-height:200px;">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Job Title</div>
<div class="col-6 text-right p-0">Rancher/etc.</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Ranch Name</div>
<div class="col-6 text-right p-0">Ranch Name</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<!-- FOR NON-BUSINESS OWNERS: <hr class="col-11 mt-2 mb-4 mx-auto p-0"> -->
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Shop Stock</div>
<div class="col-6 text-right p-0">Shop Stock</div>
</div>
<div class="p-0 text-center my-auto" style="max-height:90px;">
<!-- FARMING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png -->
<!-- RANCHING OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030124_V6saTQ8yY7t8IVF.png -->
<!-- BUSINESS OCCUPATION IMAGE: https://f2.toyhou.se/file/f2-toyhou-se/images/89030102_hduP0IAjJzLUgUN.png -->
<img class="mt-3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png" style="max-height:90px;">
</div>
</div>
</div>
</div>
<!-- BASICS STARTER POKEMON -->
<div class="col-xl-7 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-paw mr-1"></i> Starter Pokémon</div>
<div class="w-100 p-0 d-flex flex-wrap align-items-center mt-2" style="min-height:200px;">
<div class="col-lg-6 ml-lg-n2 p-0 pr-lg-0 py-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Name</div>
<div class="col-6 p-0 text-center">Name</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Species</div>
<div class="col-6 p-0 text-center">Species</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Gender</div>
<div class="col-6 p-0 text-center">Gender</div>
</div>
</div>
<div class="col-lg-6 ml-lg-2 pr-lg-0 text-center mt-3 mt-lg-0">
<img src="https://placehold.co/165x165">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY SECTION -->
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-8 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-user fa-xs mr-1"></i> Personality</div>
<!-- PERSONALITY DESCRIPTION -->
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px; text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
</div>
</div>
</div>
<!-- PERSONALITY TRAITS -->
<div class="col-lg-4 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-list fa-xs mr-1"></i> Traits</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px;">
<!-- PERSONALITY POSITIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> Trait</p>
<hr>
<!-- PERSONALITY NEUTRAL TRAITS -->
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> Trait</p>
<hr>
<!-- PERSONALITY NEGATIVE TRAITS -->
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> Trait</p>
</div>
</div>
</div>
</div>
<!-- PERSONALITY LIKES / DISLIKES -->
<div class="col-12 p-0 d-flex flex-wrap">
<!-- PERSONALITY LIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-pulse mr-1 text-success"></i> Likes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
<!-- PERSONALITY DISLIKES -->
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-broken mr-1 text-danger"></i> Dislikes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> content</p>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY SECTION -->
<div class="tab-pane fade" id="HISTORY">
<a class="btn p-2 text-light" data-toggle="tooltip" title="Back to top" href="#HISTORY-TOP" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-books fa-xs mr-1"></i> History</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- HISTORY TABLE OF CONTENTS -->
<div class="col-12 p-0 d-flex flex-wrap justify-content-between">
<div class="mb-3 mb-xl-0 col-sm-8 col-xl-9 p-0">
<h3 id="HISTORY-TOP">Table of Contents</h3>
<div class="pl-3 pl-xl-4">
<p class="mb-1"><a href="#HISTORY-SECTION1TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #1</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION2TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #2</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION3TITLE"><i class="fa-solid fa-bookmark mr-1"></i> Section #3</a></p>
</div>
</div>
<div class="col-sm-4 col-xl-3 p-0" style="background:url('https://placehold.co/120'); background-repeat:no-repeat; background-size:contain; background-position:center; min-height:120px;"></div>
</div>
<!-- HISTORY RETURN TO TOP INFO -->
<div class="card mx-auto bg-faded my-4 p-2" style="font-size:0.85em;">
<div class="p-0 d-flex flex-wrap justify-content-center">
<p class="mb-0"><i class="fa-regular text-secondary fa-exclamation-circle fa-lg mr-1"></i> Click on the</p>
<p class="mx-2 mb-0 text-center text-light" style="width:20px; height:20px; background:#4B803E; border-radius: 0 5px;"><i class="fa-solid fa-arrow-up"></i></p>
<p class="mb-0">to return to the top!</p>
</div>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 1 -->
<h1 class="mb-3" id="HISTORY-SECTION1TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION1CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #1</h1>
<div class="collaps show px-lg-4" id="HISTORY-SECTION1CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 2 -->
<h1 class="mb-3" id="HISTORY-SECTION2TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION2CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #2</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION2CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
<hr class="my-4">
<!-- HISTORY SECTION 3 -->
<h1 class="mb-3" id="HISTORY-SECTION3TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION3CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> Section #3</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION3CONTENTS" style="text-indent:30px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae. Proin ut mi ut augue viverra imperdiet et fermentum sem. Proin sollicitudin nibh id risus ultricies, et vestibulum mauris molestie. Etiam a nibh eu tellus cursus auctor. Maecenas nec ante et nunc gravida varius non consectetur ante. Aliquam mattis, nibh vitae aliquam bibendum, ante ipsum facilisis velit, ac auctor odio est in nisl. In et malesuada sapien, nec hendrerit quam. Aenean placerat, quam vulputate porta pellentesque, quam arcu ultricies turpis, eu auctor ante mauris at est. Aenean ut eros sed tellus lobortis pellentesque in id urna. Sed posuere scelerisque arcu vitae egestas. Proin et euismod nibh.</p>
<p>Ut sit amet ipsum commodo, convallis augue a, efficitur est. Vivamus eu scelerisque odio, ut vestibulum enim. Aliquam tellus urna, mollis id eleifend vitae, gravida quis turpis. Aliquam finibus, sem vitae commodo fermentum, urna est laoreet enim, sed pretium nulla leo ut leo. Donec ut commodo risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacinia non quam porttitor volutpat. Fusce pharetra nibh non elementum laoreet. Phasellus mauris lectus, fringilla vel orci sit amet, porta hendrerit enim. Nullam bibendum odio eros, et dignissim leo suscipit ut.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS SECTION -->
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color: #C27E58; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0 #A26141);">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-heart-pulse fa-xs mr-1"></i> Relationships</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<!-- RELATIONSHIPS CHARACTER 1 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 2 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 3 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
<hr class="col-11 my-4">
<!-- RELATIONSHIPS CHARACTER 4 -->
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">Character Name // <span class="text-secondary">Relation</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed euismod elit. Integer ornare purus pharetra nulla accumsan lobortis. Curabitur euismod posuere massa, nec ullamcorper eros mollis vitae.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-12 text-right">
<a href="https://sites.google.com/view/harvestlunatone/home" class="fa-solid fa-image mr-1" data-toggle="tooltip" title="using assets from Harvest Lunatone" style="text-decoration:none;"></a>
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist" style="text-decoration:none;"></a>
</div>
Copy
<div class="col-12 d-flex flex-wrap px-0 pb-1 pt-2 rounded" style="
{{?Beach Theme?
background:linear-gradient(0deg, rgba(219,253,255,1) 0%, rgba(160,221,236,1) 100%);
?end?}}
{{?Daytime Theme?
background:linear-gradient(0deg, rgba(201,243,255,1) 0%, rgba(160,221,237,1) 100%);
?end?}}
{{?Nighttime Theme?
background:linear-gradient(0deg, rgba(241,168,193,1) 0%, rgba(137,98,139,1) 35%, rgba(65,49,101,1) 70%, rgba(32,27,84,1) 100%);
?end?}}
position:relative; overflow:hidden;">
{{?Beach Theme?
<!-- SUN DECO -->
<i class="fa-duotone fa-sun fa-spin" style="position:absolute; color:rgba(255,192,102,0.8); font-size:12em; left:36%; top:-5%; -webkit-animation: fa-spin 15s infinite linear; animation: fa-spin 15s infinite linear;"></i>
<div class="fa-fade d-none d-xl-block" style="--fa-animation-duration:3s;-webkit-animation: fa-fade 3s infinite linear;animation: fa-fade 3s infinite linear; position:absolute; height:85%; left:26%; top:-5%; transform:rotate(24deg); clip-path: polygon(34% 0, 65% 0, 100% 100%, 0% 100%); width:300px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,242,230,0.3) 10%, rgba(252,242,230,0.3) 80%, rgba(255,255,255,0) 90%);"></div>
<!-- OCEAN -->
<div class="w-100 bg-dark" style="position:absolute; bottom:0; left:0; right:0; height:111px; background:linear-gradient(0deg, #239F5E 25%, #77D7E5 80%);"></div>
?end?}}
{{?Daytime Theme?
<i class="fa-solid fa-clouds fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:40%; top:-5%;"></i>
<i class="fa-solid fa-cloud" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:31%; top:-7%;"></i>
<i class="fa-solid fa-clouds" style="position:absolute; color:rgba(255,255,255,0.5); font-size:10em; left:-5%; top:2%;"></i>
<i class="fa-solid fa-cloud fa-flip-horizontal" style="position:absolute; color:rgba(255,255,255,0.5); font-size:9em; left:2%; top:-3%;"></i>
<i class="fa-duotone fa-sun fa-spin" style="position:absolute; color:rgba(255,192,102,0.8); font-size:12em; left:17%; top:-7%; -webkit-animation: fa-spin 15s infinite linear; animation: fa-spin 15s infinite linear;"></i>
<div class="fa-fade" style="--fa-animation-duration:3s;-webkit-animation: fa-fade 3s infinite linear;animation: fa-fade 3s infinite linear; position:absolute; height:85%; left:18%; top:-5%; transform:rotate(-16deg); clip-path: polygon(34% 0, 65% 0, 100% 100%, 0% 100%); width:300px; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(252,242,230,0.3) 10%, rgba(252,242,230,0.2) 80%, rgba(255,255,255,0) 90%);"></div>
?end?}}
{{?Nighttime Theme?
<i class="fa-solid fa-sparkle fa-xs fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.4); left:0.5%; top:2%;"></i>
<i class="fa-solid fa-sparkle fa-xl fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.5); left:20%; top:15%;"></i>
<div style="position:absolute; color:rgba(204,149,245,0.5); left:40%; top:22%; transform:rotate(15deg);"><i class="fa-solid fa-sparkle fa-xl fa-beat-fade"></i></div>
<i class="fa-solid fa-sparkle fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.5); left:26%; top:5%;"></i>
<i class="fa-solid fa-sparkle fa-beat-fade" style="font-size:2em; position:absolute; color:rgba(204,149,245,0.6); left:10%; top:50%;"></i>
<div style="position:absolute; color:rgba(204,149,245,0.6); left:12%; top:49%; transform:rotate(-15deg);"><i class="fa-solid fa-sparkle fa-sm fa-beat-fade"></i></div>
<i class="fa-solid fa-sparkle fa-xs fa-beat-fade" style="position:absolute; color:rgba(204,149,245,0.7); left:45%; bottom:45%;"></i>
?end?}}
<div class="col-lg-6 d-none d-lg-block"></div>
<div class="col-lg-8 col-xl-7 d-none d-lg-flex h-100 align-items-end pb-2" style="position:absolute;">
<img src="
{{?Beach Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516046_VsWdqVMpA07IFjx.png
?end?}}
{{?Daytime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png
?end?}}
{{?Nighttime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516073_52tZwacVk2EkUFH.png
?end?}}
" class="col-lg-12 ml-lg-n5">
<img class="ml-lg-n4 mb-lg-n1 mb-xl-0 ml-xl-2 h-100" src="
{{?Beach Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516032_f3TsQNjQbiPB5ue.png
?end?}}
{{?Daytime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png
?end?}}
{{?Nighttime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516088_QA3r2YxtdUiImWO.png
?end?}}
" style="position:absolute;">
<div class="col-12 mt-lg-5 mt-3 d-flex" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-xl-3 mr-lg-n4 mr-xl-n5" style="z-index:1;">
<div class="col-12 ml-lg-2 ml-xl-5 ml-1 {{?Hide HL Logo?d-none?end?}}"><a href="https://sites.google.com/view/harvestlunatone/home"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></a></div>
<ul class="nav nav-pills flex-column border-bottom-0">
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 mt-lg-2 mb-lg-1 mt-2 mb-1 rounded" style="background:{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link active text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-12 ml-lg-2 ml-xl-5 my-lg-1 my-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
<div class="col-lg-10 col-xl-8 ml-lg-n5 ml-xl-4">
<img src="{{u!Character Image URL!}}" class="ml-lg-n5 ml-xl-0 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; max-height:95%; left:3.5rem;">
</div>
</div>
</div>
<div class="col-lg-6 d-flex d-lg-none flex-wrap align-content-start p-0">
<div class="col-12 card border-0 p-0 bg-transparent" style="position:relative;">
<img src="
{{?Beach Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516046_VsWdqVMpA07IFjx.png
?end?}}
{{?Daytime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85503611_LfjG5Vfmntga0SO.png
?end?}}
{{?Nighttime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516073_52tZwacVk2EkUFH.png
?end?}}
" class="d-md-block d-lg-none ml-lg-0 ml-4 ml-lg-2" style="position:absolute; bottom:0; left:-15px; width:95%">
<img class="d-block d-lg-none ml-3 ml-lg-2" src="
{{?Beach Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516032_f3TsQNjQbiPB5ue.png
?end?}}
{{?Daytime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85503602_FaD5LxXQjcTlSkg.png
?end?}}
{{?Nighttime Theme?
https://f2.toyhou.se/file/f2-toyhou-se/images/85516088_QA3r2YxtdUiImWO.png
?end?}}
">
<img src="{{u!Character Image URL!}}" class="h-100 mr-lg-5 mr-4 mb-lg-4 mb-2" style="position:absolute; bottom:0; right:1.8rem; height:90%;">
<div class="col-12 mt-lg-5 mt-3" style="position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="col-lg-3 col-sm-4 col-5 ml-lg-5 ml-sm-1 ml-1 {{?Hide HL Logo?d-none?end?}}"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/85503645_3yO00M56EVird4m.png"></div>
<ul class="nav nav-pills flex-column border-bottom-0" id="myTab" role="tablist">
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 mt-2 mb-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link active text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#BASICS">Basics</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#PERSONALITY">Personality</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;" data-toggle="pill" href="#HISTORY">History</a>
</li>
<li class="nav-item p-0 col-lg-3 col-4 ml-lg-5 ml-3 mt-lg-2 mb-lg-2 my-1 rounded" style="background:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}};">
<a class="nav-link text-light text-center px-0" style="font-variant:small-caps; font-weight:600;"data-toggle="pill" href="#RELATIONSHIPS">Relationships</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content col-lg-6 px-lg-0 pt-lg-3 mt-n1 mt-lg-0" id="CONTENT-TOP">
<div class="tab-pane fade show active" id="BASICS">
<a class="btn p-2 text-light d-block d-lg-none" data-toggle="tooltip" title="Back to top" href="#BASICS" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 mt-lg-0 px-0 pr-lg-4">
<ul class="nav nav-pills border-bottom-0 p-0">
<li class="nav-item col-4 mx-0 p-0" style="background:
{{?Beach Theme?
#744219
?end?}}
{{?Daytime Theme?
#744219
?end?}}
{{?Nighttime Theme?
#894E31
?end?}}; border-radius: 5px 5px 0 0;">
<a class="nav-link active text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-INFO" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-regular fa-id-card"></i> <span class="d-inline">Basics</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:
{{?Beach Theme?
#744219
?end?}}
{{?Daytime Theme?
#744219
?end?}}
{{?Nighttime Theme?
#894E31
?end?}}; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-STATS" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-duotone fa-chart-simple"></i> <span class="d-inline">Stats</span></a>
</li>
<li class="nav-item col-4 mx-0 p-0" style="background:
{{?Beach Theme?
#744219
?end?}}
{{?Daytime Theme?
#744219
?end?}}
{{?Nighttime Theme?
#894E31
?end?}}; border-radius: 5px 5px 0 0;">
<a class="nav-link text-light text-center border-bottom-0" data-toggle="pill" href="#BASICS-TRIVIA" style="border-radius: 5px 5px 0 0; border: 1px white solid;"><i class="fa-light fa-question-circle"></i> <span class="d-inline">Trivia</span></a>
</li>
</ul>
</div>
<div class="col-12 px-lg-3 pr-0 mb-2">
<div class="col-12 rounded-0 card py-3 px-0 mb-2" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div class="tab-content" style="height:312px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<div class="tab-pane fade show active" id="BASICS-INFO">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-leaf fa-xs mr-1"></i> Basics</div>
{{%%BASICS%
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Name</div>
<div class="col-6 text-right">{{%Character Name%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Age</div>
<div class="col-6 text-right">{{%Age%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Gender</div>
<div class="col-6 text-right">{{%Gender%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Pronouns</div>
<div class="col-6 text-right">{{%Pronouns%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Height</div>
<div class="col-6 text-right">{{%Height%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Birthday</div>
<div class="col-6 text-right">{{%Birthday%}}</div>
</div>
<hr class="mt-2 mb-1 mx-3">
<div class="col-11 mx-2 d-flex flex-wrap">
<div class="col-6 text-left" style="font-weight:600;">Orientation</div>
<div class="col-6 text-right">{{%Orientation%}}</div>
</div>
%end%}}
</div>
<div class="tab-pane fade" id="BASICS-STATS">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-chart-simple mr-1"></i> Stats</div>
<div class="px-3 px-md-4">
{{%%STATS%
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-dna mr-1"></i> Species</div></div>
<div class="col-md-3 text-center">
<img src="{{u%Primary Type Icon URL%}}">
{{?Is Dual-Type?
<img src="{{u%Secondary Type Icon URL%}}">
?end?}}
</div>
<div class="col-md-6 text-center">
{{%Species%}}
</div>
</div>
%end%}}
<hr class="my-3 mx-3">
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 p-0"> <div class="mr-lg-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-explosion mr-1"></i> Ability</div></div>
{{%%ABILITY%
<div class="col-md-3 text-center">
{{%Ability Name%}}
</div>
<div class="col-md-6 text-center">
<p>{{l%Ability Description%}}</p>
</div>
%end%}}
</div>
<hr class="my-3 mx-3">
<div class="mx-3 mb-2" style="font-size:1.2em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-swords mr-1"></i> Moveset</div>
{{%MOVESET%
<div class="col-12 d-flex flex-wrap">
<div class="col-md-3 text-center" style="font-weight:600;">{{%Move Name%}}</div>
<div class="col-md-3 text-center">
<img src="{{u%Type Icon URL%}}">
</div>
<div class="col-md-6 text-center">
<p>{{l%Move Description%}}</p>
</div>
</div>
{{?Not 4th Move?
<hr class="mt-2 mb-1 mx-auto col-10">
?end?}}
%end%}}
</div>
</div>
<div class="tab-pane fade" id="BASICS-TRIVIA">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-question-circle mr-1"></i> Trivia</div>
{{%%TRIVIA%
<div class="px-2 px-md-4 d-flex flex-wrap">
<div class="col-12{{?Include Image? col-md-8?end?}}">
{{%Trivia Points%
<p><i class="fa-duotone fa-caret-right mr-2"></i> {{%Text%}}</p>
%end%}}
</div>
{{?Include Image?
<div class="col-md-4">
<div class="sticky-top">
<img src="{{u%Trivia Image URL%}}" class="mt-5">
</div>
</div>
?end?}}
</div>
%end%}}
</div>
</div>
</div>
</div>
<div class="col-xl-5 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-farm mr-1"></i> Occupation</div>
{{%%OCCUPATION%
<div class="col-12 mt-2 p-0" style="min-height:200px;">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Job Title</div>
<div class="col-6 text-right p-0">{{?Rancher?Rancher?end?}}{{?Farmer?Farmer?end?}}{{?Business?Business Owner?end?}}</div>
</div>
<hr class="col-11 mt-2 mb-1 mx-auto p-0">
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">{{?Rancher?Ranch Name?end?}}{{?Farmer?Farm Name?end?}}{{?Business?Business Name?end?}}</div>
<div class="col-6 text-right p-0">{{%Establishment Name%}}</div>
</div>
<hr class="col-11 mt-2 mb-4 mx-auto p-0">
{{?Business?
<div class="col-12 d-flex flex-wrap p-0">
<div class="col-6 text-left p-0" style="font-weight:600;">Shop Stock</div>
<div class="col-6 text-right p-0">{{%Shop Stock%}}</div>
</div>
?end?}}
<div class="p-0 text-center my-auto" style="max-height:90px;">
<img class="mt-3" src="
{{?Rancher?
https://f2.toyhou.se/file/f2-toyhou-se/images/89030124_V6saTQ8yY7t8IVF.png
?end?}}
{{?Farmer?
https://f2.toyhou.se/file/f2-toyhou-se/images/89030118_9psV4dUcRsV0N7o.png
?end?}}
{{?Business?
https://f2.toyhou.se/file/f2-toyhou-se/images/89030102_hduP0IAjJzLUgUN.png
?end?}}
" style="max-height:90px;">
</div>
</div>
%end%}}
</div>
</div>
<div class="col-xl-7 px-lg-3 pr-0 pb-0 mb-2">
<div class="col-12 h-100 rounded-0 card p-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-duotone fa-paw mr-1"></i> Starter Pokémon</div>
{{%%STARTER POKEMON%
<div class="w-100 p-0 d-flex flex-wrap align-items-center mt-2" style="min-height:200px;">
<div class="col-lg-6 ml-lg-n2 p-0 pr-lg-0 py-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Name</div>
<div class="col-6 p-0 text-center">{{%Name%}}</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Species</div>
<div class="col-6 p-0 text-center">{{%Species%}}</div>
</div>
<hr class="mt-2 mb-1 mx-2">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-6 p-0 text-center" style="font-weight:600;">Gender</div>
<div class="col-6 p-0 text-center">{{%Gender%}}</div>
</div>
</div>
<div class="col-lg-6 ml-lg-2 pr-lg-0 text-center mt-3 mt-lg-0">
<img src="{{u%Starter Image URL%}}">
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-8 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-user fa-xs mr-1"></i> Personality</div>
{{%%PERSONALITY%
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px; text-indent:30px;">
{{%Personality Description%
<p>{{l%Paragraph%}}</p>
%end%}}
</div>
%end%}}
</div>
</div>
<div class="col-lg-4 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-list fa-xs mr-1"></i> Traits</div>
{{%%TRAITS%
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:350px;">
{{%Positive Traits%
<p class="mb-1"><i class="fa-solid fa-plus mr-1 text-success"></i> {{%Trait%}}</p>
%end%}}
<hr>
{{%Neutral Traits%
<p class="mb-1"><i class="fa-solid fa-o mr-1 text-warning"></i> {{%Trait%}}</p>
%end%}}
<hr>
{{%Negative Traits%
<p class="mb-1"><i class="fa-solid fa-minus mr-1 text-danger"></i> {{%Trait%}}</p>
%end%}}
</div>
%end%}}
</div>
</div>
</div>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}}); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-pulse mr-1 text-success"></i> Likes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
{{%LIKES%
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> {{%Like%}}</p>
%end%}}
</div>
</div>
</div>
<div class="col-lg-6 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}}); min-height:245px;">
<div class="mb-3 mx-3" style="font-size:1.5em; font-family: Lucida Bright, monospace;"><i class="fa-solid fa-heart-broken mr-1 text-danger"></i> Dislikes</div>
<div class="px-3" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; max-height:130px;">
{{%DISLIKES%
<p class="mb-1"><i class="fa-duotone fa-caret-right mr-1"></i> {{%Dislike%}}</p>
%end%}}
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="HISTORY">
<a class="btn p-2 text-light" data-toggle="tooltip" title="Back to top" href="#HISTORY-TOP" style="border-radius:0 10px 0 10px; position:absolute; bottom:5px; right:5px; z-index:10; background:#4B803E; filter:drop-shadow(0 0 5px black);"><i class="fa-solid fa-arrow-up fa-xl"></i></a>
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-books fa-xs mr-1"></i> History</div>
{{%%HISTORY%
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
<div class="col-12 p-0 d-flex flex-wrap justify-content-between">
<div class="mb-3 mb-xl-0 col-sm-8 col-xl-9 p-0">
<h3 id="HISTORY-TOP">Table of Contents</h3>
<div class="pl-3 pl-xl-4">
<p class="mb-1"><a href="#HISTORY-SECTION1"><i class="fa-solid fa-bookmark mr-1"></i> {{%Section 1 Title%}}</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION2"><i class="fa-solid fa-bookmark mr-1"></i> {{%Section 2 Title%}}</a></p>
<p class="mb-1"><a href="#HISTORY-SECTION3"><i class="fa-solid fa-bookmark mr-1"></i> {{%Section 3 Title%}}</a></p>
</div>
</div>
<div class="col-sm-4 col-xl-3 p-0" style="background:url('{{u%History Image URL%}}'); background-repeat:no-repeat; background-size:contain; background-position:center; min-height:120px;"></div>
</div>
<div class="card mx-auto bg-faded my-4 p-2" style="font-size:0.85em;">
<div class="p-0 d-flex flex-wrap justify-content-center">
<p class="mb-0"><i class="fa-regular text-secondary fa-exclamation-circle fa-lg mr-1"></i> Click on the</p>
<p class="mx-2 mb-0 text-center text-light" style="width:20px; height:20px; background:#4B803E; border-radius: 0 5px;"><i class="fa-solid fa-arrow-up"></i></p>
<p class="mb-0">to return to the top!</p>
</div>
</div>
<hr class="my-4">
<!-- SECTION 1 -->
<h1 class="mb-3" id="HISTORY-SECTION1TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION1CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> {{%Section 1 Title%}}</h1>
<div class="collaps show px-lg-4" id="HISTORY-SECTION1CONTENTS" style="text-indent:30px;">
{{%History Section 1%
<p>{{l%Paragraph%}}</p>
%end%}}
</div>
<hr class="my-4">
<!-- SECTION 2 -->
<h1 class="mb-3" id="HISTORY-SECTION2TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION2CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> {{%Section 2 Title%}}</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION2CONTENTS" style="text-indent:30px;">
{{%History Section 2%
<p>{{l%Paragraph%}}</p>
%end%}}
</div>
<hr class="my-4">
<!-- SECTION 3 -->
<h1 class="mb-3" id="HISTORY-SECTION3TITLE"><a href="#" data-toggle="collapse" data-target="#HISTORY-SECTION3CONTENTS"><i class="fa-regular fa-bookmark mr-1"></i></a> {{%Section 3 Title%}}</h1>
<div class="collapse show px-lg-4" id="HISTORY-SECTION3CONTENTS" style="text-indent:30px;">
{{%History Section 3%
<p>{{l%Paragraph%}}</p>
%end%}}
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 p-0 d-flex flex-wrap">
<div class="col-12 px-lg-3 pr-0">
<div class="col-12 rounded-0 card py-3 px-0 mb-3" style="border-color:
{{?Beach Theme?
#B48342
?end?}}
{{?Daytime Theme?
#B48342
?end?}}
{{?Nighttime Theme?
#C27E58
?end?}}; border-width:15px 15px 15px 10px; filter: drop-shadow(-15px 0
{{?Beach Theme?
#97672D
?end?}}
{{?Daytime Theme?
#97672D
?end?}}
{{?Nighttime Theme?
#A26141
?end?}});">
<div class="display-4 mb-3 mx-3" style="font-family: Lucida Bright, monospace; letter-spacing:2px;"><i class="fa-solid fa-heart-pulse fa-xs mr-1"></i> Relationships</div>
<div class="px-4" style="overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:612px;">
{{%%RELATIONSHIPS%
{{%Character Relation%
<div class="col-12 p-0 d-flex flex-wrap">
<div class="mx-auto" style="min-height:150px; min-width:150px;">
<div class="card rounded-circle h-100"></div>
</div>
<div class="col-xl-9 pl-xl-3 mt-xl-0 mt-3 p-0">
<p style="font-size:1.5em; font-weight:500;">{{%Character Name%}} // <span class="text-secondary">{{%Relation%}}</span></p>
<p>{{l%Description%}}</p>
</div>
</div>
{{?Is Not Last Relation?<hr class="col-11 my-4">?end?}}
%end%}}
%end%}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 text-right">
<a href="https://sites.google.com/view/harvestlunatone/home" class="fa-solid fa-image mr-1" data-toggle="tooltip" title="using assets from Harvest Lunatone"></a>
<a href="https://toyhou.se/dragon-heist" class="fa-solid fa-code" data-toggle="tooltip" title="code by dragon-heist"></a>
</div>