<!-- 06 | INFOBOX by trunswicked
> Edit with WYSIWYG *OFF* and Code Editor *ON* in your display settings
> Please do NOT remove my credit!
> Comments indicate where information should be placed/edited
> Feel free to PM me or comment with any questions or concerns! Thank you :D
!!! Code uses FontAwesome icons: https://fontawesome.com/icons
-->
<div class="container">
<div class="row">
<div class="col-12 col-lg-4 order-1 order-md-2 px-3">
<!-- ======== STICKY: Makes the infobox stick to the top when scrolling! You can remove this div if you don't want it to move ======== -->
<div style="position:sticky;top:0;">
<!-- ================ -->
<div class="text-center">
<!-- Image -->
<img src="https://file.toyhou.se/characters/3311671?" class="img-thumbnail" style="max-width:200px;height:200px;object-fit:cover;border-radius:100%;z-index:2;">
</div>
<div class="bg-faded" style="border-radius:10px 10px 0px 0px;position:relative;top:-25px;z-index:1;">
<div class="pt-4">
<!-- Name -->
<p class="lead text-uppercase text-center" style="color:red;font-size:30px;">Name</p>
<hr class="my-1">
<!-- First section -->
<div class="p-2">
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Full Name</span>
<span>Name</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Gender</span>
<span>Gender</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Pronouns</span>
<span>Pronouns</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Age</span>
<span>Age</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Species</span>
<span>Species</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">D.O.B</span>
<span>Date of birth</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Sexuality</span>
<span>Sexuality</span>
</div>
</div>
</div>
<!-- First section end -->
<!-- Appearance section -->
<div class="py-1 px-3" style="background:red;" id="2">
<a data-toggle="collapse" data-target="#appearance" aria-expanded="true">
<div class="lead text-uppercase text-white">
<div class="float-left">
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="text-center">
Appearance
</div>
</div>
</a>
</div>
<div id="appearance" class="collapse show">
<div class="p-2">
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Height</span>
<span>Height</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Weight</span>
<span>Weight</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Skin Color</span>
<span>Skin color</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Hair Color</span>
<span>Hair color</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Eye Color</span>
<span>Eye color</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Scars</span>
<span>Scars</span>
</div>
</div>
</div>
</div>
<!-- Appearance section end -->
<!-- Personal section -->
<div class="py-1 px-3" style="background:red;" id="1">
<a data-toggle="collapse" data-target="#personal" aria-expanded="true">
<div class="lead text-uppercase text-white">
<div class="float-left">
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="text-center">
Personal
</div>
</div>
</a>
</div>
<div id="personal" class="collapse show">
<div class="p-2">
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Origin</span>
<span>Hometown</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Affiliation</span>
<span>Affiliation</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Occupation</span>
<span>Job</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Role</span>
<span>Role</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Status</span>
<span>Status</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Family</span>
<ul class="m-0 text-right" style="list-style:none;">
<li><a href="/" style="color:red;">Name</a> (mother)</li>
<li><a href="/" style="color:red;">Name</a> (father)</li>
<li><a href="/" style="color:red;">Name</a> (partner)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Personal section end -->
<!-- Ownership section -->
<div class="py-1 px-3" style="background:red;" id="1">
<a data-toggle="collapse" data-target="#ownership" aria-expanded="true">
<div class="lead text-uppercase text-white">
<div class="float-left">
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="text-center">
Ownership
</div>
</div>
</a>
</div>
<div id="ownership" class="collapse show">
<div class="p-2">
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Designer</span>
<span>trunswicked</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Obtained</span>
<span>Obtained</span>
</div>
</div>
<div class="py-1">
<div class="d-flex justify-content-between">
<span class="text-uppercase text-muted">Worth</span>
<span>$$$</span>
</div>
</div>
</div>
</div>
<!-- Ownership section end (add more sections below, if desired) -->
<!-- ======== Credit (Do not remove) ======== -->
<hr class="m-0">
<div class="p-2 text-right text-muted" style="font-size:11px;">
<p><a href="/" style="color:red;"><i class="fa-solid fa-image"></i> Image credit</a> - Code by <a href="https://toyhou.se/trunswicked" style="color:red;">trunswicked</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- ======== Infobox end ======== -->
<!-- ======== Main section ======== -->
<div class="col-12 col-lg-8 order-2 order-lg-1 px-3">
<div class="p-2">
<!-- Summary -->
<p><b>Character Name</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- Table of Contents -->
<div class="card p-2 mb-3" style="width:60%;">
<div class="d-flex justify-content-between">
<span>Contents</span>
<span><i class="fa-solid fa-list"></i></span>
</div>
<hr class="w-100 my-1">
<ol class="m-0 pl-3">
<li><a href="#personality" style="color:red;">Personality</a></li>
<li><a href="#history" style="color:red;">History</a>
<ul>
<li><a href="#subheading1" style="color:red;">Subheading 1</a></li>
<li><a href="#subheading2" style="color:red;">Subheading 2</a></li>
</ul>
</li>
<li><a href="#relationships" style="color:red;">Relationships</a>
<ul>
<li><a href="#character1" style="color:red;">Character 1</a></li>
<li><a href="#character2" style="color:red;">Character 2</a></li>
<li><a href="#character3" style="color:red;">Character 3</a></li>
</ul>
</li>
<li><a href="#trivia" style="color:red;">Trivia</a></li>
<li><a href="GALLERY_LINK" style="color:red;">Gallery</a></li>
</ol>
</div>
<!-- Personality section -->
<span id="personality" class="lead text-uppercase">Personality</span>
<hr class="mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- History section -->
<span id="history" class="lead text-uppercase">History</span>
<hr class="mt-1">
<span id="subheading1"><b>Subheading 1</b></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<span id="subheading2"><b>Subheading 2</b></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- ======== Relationships section ======== -->
<span id="relationships" class="lead text-uppercase">Relationships</span>
<hr class="mt-1">
<!-- Character start -->
<div id="character1" class="d-flex align-items-center justify-content-between">
<span><b><a href="/" style="color:red;">Character</a></b></span>
<hr class="w-100 mx-2">
<span>Relationship</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- Character end -->
<!-- Character start -->
<div id="character2" class="d-flex align-items-center justify-content-between">
<span><b><a href="/" style="color:red;">Character</a></b></span>
<hr class="w-100 mx-2">
<span>Relationship</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- Character end -->
<!-- Character start -->
<div id="character3" class="d-flex align-items-center justify-content-between">
<span><b><a href="/" style="color:red;">Character</a></b></span>
<hr class="w-100 mx-2">
<span>Relationship</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- Character end (add more characters below, if desired) -->
<!-- Trivia section -->
<p id="trivia" class="lead text-uppercase">Trivia</p>
<hr class="mt-1">
<ul>
<li>Trivia 1</li>
<li>Trivia 2</li>
<li>Trivia 3</li>
</ul>
<!-- ======== Main section end ======== -->
</div>
</div>
</div>
</div>