Signalis
created by:HTMLobster
HTMLCustom ColorsCharacter
Copy
<!------------------------------------
Signalis - Character Profile
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<!-- adjust accent colors here -->
<div class="container" style="font-family:'Courier New', monospace;
--accent1: #dd4815;
--accent2: #0092c4;
--text: #000;
--light: #fff;
--background: #202020;">
<div class="row">
<!-- navigation buttons -->
<div class="col-12 order-lg-1 order-2">
<!-- carousel -->
<div id="carouselBasics" class="carousel slide h-100 mt-3 mb-lg-3" data-ride="false" data-pause="true">
<div class="d-flex justify-content-between mx-sm-3 mx-1">
<!-- previous button -->
<a class="btn rounded-0 d-flex align-items-center mr-sm-3 px-sm-2" style="box-shadow:none; color:var(--accent1);" type="button" href="#carouselBasics" data-slide="prev">
<i class="fa-solid fa-sharp fa-play fa-flip-horizontal fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<!-- previous button end -->
<!-- navigation -->
<div class="carousel-inner">
<!-- slide one -->
<div class="carousel-item active">
<div class="row justify-content-center">
<!-- overview -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".aboutme" role="button" aria-expanded="true" aria-controls="aboutme">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
OVERVIEW
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526915_i7NCqkyLIidbEC2.png">
</span>
</span>
</a>
</div>
<!-- history -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".hist" role="button" aria-expanded="false" aria-controls="hist">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
HISTORY
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526917_pYFrA65EmppZzxN.png">
</span>
</span>
</a>
</div>
<!-- inventory -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".items" role="button" aria-expanded="false" aria-controls="items">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
INVENTORY
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526914_IE4So6sitizEtz2.png">
</span>
</span>
</a>
</div>
<!-- skills -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".skills" role="button" aria-expanded="false" aria-controls="skills">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
SKILLS
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526909_AGMGp54JyuVMIwk.png">
</span>
</span>
</a>
</div>
</div>
</div>
<!-- slide one end -->
<!-- slide two -->
<div class="carousel-item">
<div class="row justify-content-center">
<!-- preferences -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".prefs" role="button" aria-expanded="true" aria-controls="prefs">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
PREFERENCES
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526918_YhkCKfLbecDkx9j.png">
</span>
</span>
</a>
</div>
<!-- links -->
<div class="col-lg-3 col-sm-6">
<a class="btn btn-outline-secondary p-1 rounded-0 w-100 h-100 justify-content-center align-items-center border-0" style="box-shadow:none;" data-toggle="collapse" data-target=".links" role="button" aria-expanded="false" aria-controls="links">
<span class="card card-outline-primary rounded-0 h-100 w-100" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<span class="display-block mb-0 px-1 text-left" style="background:var(--accent1); color:var(--text); font-size:1.2em;">
LINKS
</span>
<span class="p-2 text-center text-white h-100" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- image -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109526911_SLcbKdQX811kfBW.png">
</span>
</span>
</a>
</div>
</div>
</div>
<!-- slide two end -->
</div>
<!-- navigation end -->
<!-- next button -->
<a class="btn rounded-0 d-flex align-items-center ml-sm-3 px-2" style="box-shadow:none; color:var(--accent1);" type="button" href="#carouselBasics" data-slide="next">
<i class="fa-solid fa-sharp fa-play fa-2x"></i>
<span class="sr-only">Next</span>
<!-- next button end -->
</a>
</div>
</div>
<!-- carousel end -->
</div>
<!-- navigation end -->
<!-- character status column -->
<div class="col-lg-3 order-lg-2 order-1">
<div class="card card-outline-primary rounded-0 p-2 h-100" style="border-top-width:1.5em; border-color:var(--accent1); background:var(--background);">
<div>
<!-- heading -->
<h3 class="bg-white text-dark text-center mb-1 px-1">
STATUS
</h3>
<!-- character -->
<div class="card rounded-0 mb-2" style="border-color:var(--light); background:var(--light); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); overflow:hidden;">
<!-- character icon -->
<div style="background-color:var(--accent2); clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);" class="progress-bar-striped progress-bar-animated">
<!-- health status -->
<div class="align-items-center" style="color:var(--text); position:absolute; top:.25rem; left:.25rem;">
<i class="fa-sharp fa-solid fa-plus"></i>
<span class="mx-1" style="font-size: 1.35rem; line-height: 1rem; margin-top:1px;">
OK
</span>
</div>
<div style="color:var(--light); position:absolute; bottom:-.25rem; left:-.25rem;">
<i class="fa-sharp fa-thin fa-wave-pulse fa-4x"></i>
</div>
<!-- character image -->
<div class="p-5" style="background:url(image_url) no-repeat right bottom; clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);">
<div class="p-4"></div>
</div>
</div>
</div>
<!-- object -->
<div class="card rounded-0" style="border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<h3 class="mb-0 px-1" style="background:var(--accent1); color:var(--text);">
OBJECT
</h3>
<div class="p-2 text-center" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- large image - height is set to 60px so it will stretch images that are smaller -->
<img src="image_url" style="height:60px;">
</div>
</div>
<!-- equipped item -->
<div class="card rounded-0 mt-2 text-white" style="border-left-width:1.5em; border-color:var(--accent1); background:var(--accent1); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<div class="p-2 text-center" style="background:var(--background); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);">
<!-- small image -->
<img src="image_url">
</div>
</div>
</div>
</div>
</div>
<!-- character status column end -->
<!-- character info columns -->
<div class="col order-3">
<!-- accordion container -->
<div class="accordion row h-100" id="accordionContainer">
<!-- left info column -->
<div class="col-lg mt-lg-0 mt-3 text-white d-block d-lg-flex flex-column">
<div class="card card-outline-primary rounded-0 p-2 d-block" style="border-top-width:1.5em; border-color:var(--accent1); background:var(--background); flex:1 1 364px; min-height:364px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin; overflow-y:auto; overflow-x:hidden;">
<!-- summary -->
<div class="collapse show aboutme" data-parent="#accordionContainer">
<!-- heading -->
<h1 style="color:var(--accent1);">
SUMMARY
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst. Pellentesque suscipit nunc nec dui condimentum, imperdiet suscipit nibh accumsan. Duis faucibus pulvinar porttitor. Morbi quis neque dictum, tincidunt ligula non, consectetur libero.
</p>
<p>
Vestibulum mattis neque non vulputate ultrices. Nulla consectetur aliquam placerat. Morbi maximus gravida orci, vel aliquet justo dapibus in. Pellentesque hendrerit et erat et vestibulum.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
STANDARD APPEARANCE
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
<p>
Vestibulum mattis neque non vulputate ultrices. Nulla consectetur aliquam placerat. Morbi maximus gravida orci, vel aliquet justo dapibus in. Pellentesque hendrerit et erat et vestibulum.
</p>
</div>
<!-- summary end -->
<!-- history -->
<div class="collapse hist" data-parent="#accordionContainer">
<!-- heading -->
<h1 style="color:var(--accent1);">
MODEL DEVELOPMENT
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst. Pellentesque suscipit nunc nec dui condimentum, imperdiet suscipit nibh accumsan. Duis faucibus pulvinar porttitor. Morbi quis neque dictum, tincidunt ligula non, consectetur libero.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
GENERAL PURPOSE
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
<p>
Vestibulum mattis neque non vulputate ultrices. Nulla consectetur aliquam placerat. Morbi maximus gravida orci, vel aliquet justo dapibus in. Pellentesque hendrerit et erat et vestibulum.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
HANDLING
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
KNOWN ISSUES
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
</div>
<!-- history end -->
<!-- inventory -->
<div class="collapse items" data-parent="#accordionContainer">
<div class="row no-gutters">
<!-- item -->
<div class="col-6 pr-1">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".item1" role="button" aria-expanded="true" aria-controls="item1">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- item -->
<div class="col-6 pl-1">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".item2" role="button" aria-expanded="true" aria-controls="item2">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- item -->
<div class="col-6 pr-1 mt-2">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".item3" role="button" aria-expanded="true" aria-controls="item3">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- item -->
<div class="col-6 pl-1 mt-2">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".item4" role="button" aria-expanded="true" aria-controls="item4">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- paste more items above - every other item should have pr-1 or pl-1 in the col class -->
</div>
</div>
<!-- inventory end -->
<!-- skills description -->
<div class="collapse skills" data-parent="#accordionContainer">
<!-- heading -->
<h1 style="color:var(--accent1);">
COMBAT ATTRIBUTES
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst. Pellentesque suscipit nunc nec dui condimentum, imperdiet suscipit nibh accumsan. Duis faucibus pulvinar porttitor. Morbi quis neque dictum, tincidunt ligula non, consectetur libero.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
ADMINISTRATIVE ATTRIBUTES
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
<p>
Vestibulum mattis neque non vulputate ultrices. Nulla consectetur aliquam placerat. Morbi maximus gravida orci, vel aliquet justo dapibus in. Pellentesque hendrerit et erat et vestibulum.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
LABOR ATTRIBUTES
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
<!-- heading -->
<h1 style="color:var(--accent1);">
ENTERTAINMENT ATTRIBUTES
</h1>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam erat at nisi malesuada, id lacinia dolor aliquam. Ut iaculis elit ut libero facilisis tempor. Phasellus non bibendum nisl. Suspendisse in sodales leo. In hac habitasse platea dictumst.
</p>
</div>
<!-- skills description end -->
<!-- preferences - favorites -->
<div class="collapse prefs" data-parent="#accordionContainer">
<!-- heading -->
<h1 class="mb-0" style="color:var(--accent1);">
FAVORITES
</h1>
<!-- song -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-music mr-2"></i>
SONG
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- song end -->
<!-- color -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-palette mr-2"></i>
COLOR
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- color end -->
<!-- season -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-flower-tulip mr-2"></i>
SEASON
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- season end -->
<!-- weather -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-cloud-showers mr-2"></i>
WEATHER
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- weather end -->
<!-- time of day -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-sun mr-2"></i>
TIME
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- time of day end -->
<!-- food -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-utensils mr-2"></i>
FOOD
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- food end -->
<!-- animal -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-paw mr-2"></i>
ANIMAL
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- animal end -->
<!-- book -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-book mr-2"></i>
BOOK
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- book end -->
<!-- movie -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-camera-movie mr-2"></i>
MOVIE
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- movie end -->
<!-- number -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-hashtag mr-2"></i>
NUMBER
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- number end -->
</div>
<!-- preferences - favorites end -->
<!-- links - images -->
<div class="collapse links" data-parent="#accordionContainer">
<div class="row no-gutters">
<!-- relationship -->
<div class="col-6 pr-1">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".link1" role="button" aria-expanded="true" aria-controls="link1">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- relationship -->
<div class="col-6 pl-1">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".link2" role="button" aria-expanded="true" aria-controls="link2">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- relationship -->
<div class="col-6 pr-1 mt-2">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".link3" role="button" aria-expanded="true" aria-controls="link3">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- relationship -->
<div class="col-6 pl-1 mt-2">
<!-- btn link - data-target must be UNIQUE and match the corresponding accordion class -->
<a class="btn p-1 rounded-0 w-100 h-100 justify-content-center align-items-center" style="border:1px solid var(--light); box-shadow:none;" data-toggle="collapse" data-target=".link4" role="button" aria-expanded="true" aria-controls="link4">
<!-- image -->
<img src="image_url">
</a>
</div>
<!-- paste more relationships above - every other one should have pr-1 or pl-1 in the col class -->
</div>
</div>
<!-- links - images end -->
</div>
</div>
<!-- left info column end -->
<!-- right info column -->
<div class="col-lg mt-lg-0 mt-3 text-white d-block d-lg-flex flex-column">
<!-- unit logo in corner - replace image_url -->
<div class="card card-outline-primary rounded-0 p-2 d-block" style="background:var(--background) url(image_url) bottom right no-repeat; border-top-width:1.5em; border-color:var(--accent1); flex:1 1 364px; min-height:364px; scrollbar-color:var(--accent1) transparent; scrollbar-width:thin; overflow-y:auto; overflow-x:hidden;">
<!-- basic info -->
<div class="collapse show aboutme pb-5" data-parent="#accordionContainer">
<!-- heading -->
<h1 class="mb-0" style="color:var(--accent1);">
BASIC INFO
</h1>
<!-- name -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
NAME
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content - e.g. Elster, "Magpie" -->
<div>
content
</div>
</div>
</div>
<!-- abbreviation -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
ABBREVIATION
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content - e.g. LSTR -->
<div>
content
</div>
</div>
</div>
<!-- extended name -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
EXTENDED
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content - e.g. Landvermessungs-/Schiff-Techniker Replika-->
<div>
<!-- words - <span style="color:var(--accent1);">L</span>orem-
replika - <span style="color:var(--accent2);">R</span>eplika -->
content
</div>
</div>
</div>
<!-- model -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
MODEL
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content - e.g. Generation 2, 3, 4, 5, 6 -->
<div>
content
</div>
</div>
</div>
<!-- height -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
HEIGHT
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
XXcm | Xft XXin
</div>
</div>
</div>
<!-- assignment -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
ASSIGNMENT
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
type | Planet
</div>
</div>
</div>
<!-- pronouns -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div>
PRONOUNS
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
</div>
<!-- basic info end -->
<!-- history gestalt -->
<div class="collapse hist pb-5" data-parent="#accordionContainer">
<!-- heading -->
<h1 style="color:var(--accent1);">
GESTALT PROFILE
</h1>
<!-- basics -->
<ul>
<!-- name -->
<li>
Name: last, first
</li>
<!-- origin -->
<li>
Origin: ██████, planet
</li>
<!-- gender -->
<li>
Gender: content
</li>
<!-- ID number (first two letters of last name, consonants in first name, origin planet, number) -->
<li>
PKZ: XXXXXX-V-000000
</li>
</ul>
<!-- heading -->
<h1 style="color:var(--accent1);">
GENERAL HISTORY
</h1>
<!-- description -->
<p>
History of the Gestalt's life. Cras ut tortor leo. Nunc ullamcorper hendrerit ligula non tristique. Quisque sit amet dolor aliquam tellus ornare eleifend ac eu tortor. Morbi eu augue ac est pellentesque ornare non in enim. Curabitur leo turpis, congue sit amet est vitae, laoreet egestas ligula. Mauris quis iaculis ante, eu posuere turpis.
</p>
</div>
<!-- history gestalt end -->
<!-- inventory info -->
<div class="collapse items" data-parent="#accordionContainer">
<div class="accordion" id="accordionItems">
<!-- item - class must have item1, item2, etc and be unique/match the corresponding button -->
<div class="collapse show item1" data-parent="#accordionItems">
<!-- heading -->
<h1 style="color:var(--accent1);">
ITEM 1 NAME
</h1>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
<!-- menu (not functional) -->
<div class="card rounded-0 mt-3 d-inline-block" style="border-color:var(--accent1); background:var(--accent1);">
<h3 class="mb-0 p-2" style="background:var(--accent1); color:var(--text);"></h3>
<div class="pl-2 pr-3 py-2" style="background:var(--background);">
<h2 class="mb-0" style="color:var(--accent1);">
USE
</h2>
<h2 class="mb-0" style="color:#ccc;">
EQUIP
</h2>
<h2 class="mb-0" style="color:#ccc;">
INSPECT
</h2>
</div>
</div>
</div>
<!-- item - class must have item1, item2, etc and be unique/match the corresponding button -->
<div class="collapse item2" data-parent="#accordionItems">
<!-- heading -->
<h1 style="color:var(--accent1);">
ITEM 2 NAME
</h1>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
<!-- menu (not functional) -->
<div class="card rounded-0 mt-3 d-inline-block" style="border-color:var(--accent1); background:var(--accent1);">
<h3 class="mb-0 p-2" style="background:var(--accent1); color:var(--text);"></h3>
<div class="pl-2 pr-3 py-2" style="background:var(--background);">
<h2 class="mb-0" style="color:var(--accent1);">
USE
</h2>
<h2 class="mb-0" style="color:#ccc;">
EQUIP
</h2>
<h2 class="mb-0" style="color:#ccc;">
INSPECT
</h2>
</div>
</div>
</div>
<!-- item - class must have item1, item2, etc and be unique/match the corresponding button -->
<div class="collapse item3" data-parent="#accordionItems">
<!-- heading -->
<h1 style="color:var(--accent1);">
ITEM 3 NAME
</h1>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
<!-- menu (not functional) -->
<div class="card rounded-0 mt-3 d-inline-block" style="border-color:var(--accent1); background:var(--accent1);">
<h3 class="mb-0 p-2" style="background:var(--accent1); color:var(--text);"></h3>
<div class="pl-2 pr-3 py-2" style="background:var(--background);">
<h2 class="mb-0" style="color:var(--accent1);">
USE
</h2>
<h2 class="mb-0" style="color:#ccc;">
EQUIP
</h2>
<h2 class="mb-0" style="color:#ccc;">
INSPECT
</h2>
</div>
</div>
</div>
<!-- item - class must have item1, item2, etc and be unique/match the corresponding button -->
<div class="collapse item4" data-parent="#accordionItems">
<!-- heading -->
<h1 style="color:var(--accent1);">
ITEM 4 NAME
</h1>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
<!-- menu (not functional) -->
<div class="card rounded-0 mt-3 d-inline-block" style="border-color:var(--accent1); background:var(--accent1);">
<h3 class="mb-0 p-2" style="background:var(--accent1); color:var(--text);"></h3>
<div class="pl-2 pr-3 py-2" style="background:var(--background);">
<h2 class="mb-0" style="color:var(--accent1);">
USE
</h2>
<h2 class="mb-0" style="color:#ccc;">
EQUIP
</h2>
<h2 class="mb-0" style="color:#ccc;">
INSPECT
</h2>
</div>
</div>
</div>
<!-- paste more items above - must have a unique class corresponding to item image button -->
</div>
</div>
<!-- inventory info end -->
<!-- skills rating -->
<div class="collapse skills pb-5" data-parent="#accordionContainer">
<!-- heading -->
<h1 class="mb-0" style="color:var(--accent1);">
SKILLS
</h1>
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
COMBAT
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
ADMIN
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
REPAIR
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
COMMAND
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
MINING
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
SECURITY
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
SURVIVAL
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
VOCALS
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
DANCE
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
MUSIC
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
<!-- skill -->
<div class="row mt-2 align-items-center">
<!-- skill name -->
<div class="col-sm-4 col-5" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<!-- content -->
<div>
WRITING
</div>
</div>
<!-- skill name end -->
<!-- skill info -->
<div style="border:1px solid var(--accent1);background:var(--background);" class="col pl-1 pr-2">
<div class="row no-gutters align-items-sm-center px-2">
<!-- text -->
<div class="col-sm-auto text-right">
25/100
</div>
<!-- text end -->
<!-- skill bar -->
<div class="col-sm ml-sm-2 mb-1 mb-sm-0">
<div style="background:#5e5e5e;" class="progress rounded-0">
<!-- adjust width % -->
<div style="width:25%; background:var(--accent2); height:4px;" class="progress-bar"></div>
</div>
</div>
<!-- skill bar end -->
</div>
</div>
<!-- skill info end -->
</div>
<!-- skill end -->
</div>
<!-- skills rating end -->
<!-- dislikes -->
<div class="collapse prefs pb-5" data-parent="#accordionContainer">
<!-- heading -->
<h1 class="mb-0" style="color:var(--accent1);">
DISLIKES
</h1>
<!-- song -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-music mr-2"></i>
SONG
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- song end -->
<!-- color -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-palette mr-2"></i>
COLOR
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- color end -->
<!-- season -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-flower-tulip mr-2"></i>
SEASON
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- season end -->
<!-- weather -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-cloud-showers mr-2"></i>
WEATHER
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- weather end -->
<!-- time of day -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-sun mr-2"></i>
TIME
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- time of day end -->
<!-- food -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-utensils mr-2"></i>
FOOD
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- food end -->
<!-- animal -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-paw mr-2"></i>
ANIMAL
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- animal end -->
<!-- book -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-book mr-2"></i>
BOOK
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- book end -->
<!-- movie -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-camera-movie mr-2"></i>
MOVIE
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- movie end -->
<!-- number -->
<div class="row mt-2 align-items-center">
<div class="col-auto" style="border:1px solid var(--accent1); background:var(--accent1); color:var(--text);">
<div class="align-items-center">
<i class="fa-sharp fa-solid fa-hashtag mr-2"></i>
NUMBER
</div>
</div>
<div class="col text-right" style="border:1px solid var(--accent1); background:var(--background);">
<!-- content -->
<div>
content
</div>
</div>
</div>
<!-- number end -->
</div>
<!-- dislikes end -->
<!-- links info -->
<div class="collapse links pb-5" data-parent="#accordionContainer">
<div class="accordion" id="accordionLinks">
<!-- relationship - class must have link1, link2, etc and be unique/match the corresponding button -->
<div class="collapse show link1" data-parent="#accordionLinks">
<!-- heading -->
<h1 style="color:var(--accent1);">
CHARACTER NAME
</h1>
<!-- rating -->
<p style="background:var(--accent2); color:var(--light);" class="mx-n2 px-2 py-1 align-items-center justify-content-center mb-2">
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart-half-stroke mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
</p>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
</div>
<!-- relationship - class must have link1, link2, etc and be unique/match the corresponding button -->
<div class="collapse link2" data-parent="#accordionLinks">
<!-- heading -->
<h1 style="color:var(--accent1);">
CHARACTER NAME
</h1>
<!-- rating -->
<p style="background:var(--accent2); color:var(--light);" class="mx-n2 px-2 py-1 align-items-center justify-content-center mb-2">
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart-half-stroke mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
</p>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
</div>
<!-- relationship - class must have link1, link2, etc and be unique/match the corresponding button -->
<div class="collapse link3" data-parent="#accordionLinks">
<!-- heading -->
<h1 style="color:var(--accent1);">
CHARACTER NAME
</h1>
<!-- rating -->
<p style="background:var(--accent2); color:var(--light);" class="mx-n2 px-2 py-1 align-items-center justify-content-center mb-2">
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart-half-stroke mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
</p>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
</div>
<!-- relationship - class must have link1, link2, etc and be unique/match the corresponding button -->
<div class="collapse link4" data-parent="#accordionLinks">
<!-- heading -->
<h1 style="color:var(--accent1);">
CHARACTER NAME
</h1>
<!-- rating -->
<p style="background:var(--accent2); color:var(--light);" class="mx-n2 px-2 py-1 align-items-center justify-content-center mb-2">
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart mx-2"></i>
<i class="fa-sharp fa-solid fa-heart-half-stroke mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
<i class="fa-sharp fa-regular fa-heart mx-2"></i>
</p>
<!-- description -->
<p>
Ut lacinia scelerisque nisi, et euismod massa ornare non. Phasellus massa ex, vehicula et dictum quis, pellentesque a diam. Nulla facilisi. Proin dolor arcu, imperdiet ac magna a, pharetra rutrum elit. Cras blandit enim nunc, nec sollicitudin est auctor non. Sed gravida lorem suscipit tempus vehicula.
</p>
</div>
<!-- paste more links above - must have a unique class corresponding to link image button -->
</div>
</div>
<!-- links info end -->
</div>
</div>
<!-- right info column end -->
</div>
<!-- accordion container end -->
</div>
<!-- character info columns -->
</div>
<!-- credit -->
<div class="mt-2 text-right">
Code by @HTMLobster
</div>
</div>