Alcyon Corporation
Personality
Traits Other Keywords Etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Background
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.
Subheader
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.
Connections
Character Name
Relationship Type Other Keywords Etc.
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.
Character Name
Relationship Type Other Keywords Etc.
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.
Identifying Features
Traits Other Keywords Etc.
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.
Physical:
- Lorem ipsum dolor sit amet,
- consectetur adipiscing elit.
- Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
Demeanor:
- Donec accumsan tempor lacus,
- et venenatis elit feugiat non.
- Duis porta eros et velit blandit dapibus.
Style:
- Curabitur ac finibus eros.
- Duis placerat velit vitae massa sodales,
- eget mattis nibh pellentesque.
Combat Profile
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.
Mist Control Proficiency
Detection:
Not achieved 1 2 3 4 5
Physical Boosting:
Not achieved 1 2 3 4 5
Attacks:
Not achieved 1 2 3 4 5
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.
Shell Specs
Not installed Vent Eject
Time Limit in Reality:
<1 minute 1-5 minutes 5-10 minutes 10-30 minutes Other: time
Vent Slots:
Horn Arms Etc.
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.
Unique Ability
Not achieved Mare Wake
Mantle ( Shift-type / Domain-type )
Ability name description. 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.
Techniques:
- Name: 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.
- Name: Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Miscellaneous
- 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.
Personnel File
Status:
Active Inactive Archived
| Name: | Character Name |
| Age: | xx |
| Pronouns: | x/x |
| Height: | xxx |
| ID: | 000 000 000 |
| Type: | xyz |
| Division: | xyz |
| Rank: | xyz |
Notes
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.
<!--profile container; change 1000px to change the width of the entire profile-->
<div class="m-auto" style="max-width: 1000px;">
<!--page header-->
<div class="bg-light mx-3 pb-2 flex-row justify-content-between align-items-center">
<!--left-->
<div class="card border-0 rounded-0" style="height: 50px; width: 50px; position: relative;">
<!--collapse toggle / folded corner. invisible text is for accessibility-->
<a href="#file" data-toggle="collapse" class="d-block bg-secondary" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; clip-path: polygon(100% 0, 0% 100%, 100% 100%); color: rgba(0,0,0,0);">expand</a>
</div>
<!--right-->
<h1 class="text-dark mr-2 mb-0" style="font-family: courier new, monospace; font-size: 1.1em;">
<!--company name-->
<b>Alcyon Corporation</b>
<!--logo-->
<img src="https://i.imgur.com/dus4dNM.png" style="height: 40px;" alt="kingfisher logo">
</h1>
</div>
<!--end page header-->
<!--collapse-->
<div class="collapse" id="file">
<!--paper-->
<div class="text-dark bg-light mx-3">
<!--scrollbox-->
<div class="p-3" style="max-height: 500px; overflow-y: auto;">
<!----------personality header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Personality
</h2>
<!--quick info. fa-square = unchecked, fa-square-check = checked-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Traits</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Other Keywords</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Etc.</span>
</p>
<!--personality description-->
<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>
<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>
<!----------background header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Background
</h2>
<!--background description-->
<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>
<!--subheader; paste these in wherever-->
<h3 class="bg-dark text-light p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
Subheader
</h3>
<!--subheader description-->
<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>
<!----------connections (relationships) header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Connections
</h2>
<!--relationship 1-->
<div class="row no-gutters mb-2">
<!--left side (image)-->
<div class="col-md-auto bg-white text-center p-1 mb-2" style="transform:rotate(2deg); height: 120px; width: 120px; box-shadow: 0px 0px 5px rgba(0,0,0,0.4);">
<!--image (use a square one)-->
<img src="https://via.placeholder.com/500x500.png">
</div>
<!--end left side-->
<!--right side-->
<div class="col-md pl-md-3">
<!--character name header-->
<h3 class="bg-dark p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
<!--link & name-->
<a href="#" class="text-light">Character Name</a>
</h3>
<!--quick info. fa-square = unchecked, fa-square-check = checked-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Relationship Type</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Other Keywords</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Etc.</span>
</p>
<!--relationship description-->
<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>
</div>
<!--end right side-->
</div>
<!--end relationship 1-->
<!--relationship 2-->
<div class="row no-gutters mb-2">
<!--left side (image)-->
<div class="col-md-auto bg-white text-center p-1 mb-2" style="transform:rotate(-2deg); height: 120px; width: 120px; box-shadow: 0px 0px 5px rgba(0,0,0,0.4);">
<!--image (use a square one)-->
<img src="https://via.placeholder.com/500x500.png">
</div>
<!--end left side-->
<!--right side-->
<div class="col-md pl-md-3">
<!--character name header-->
<h3 class="bg-dark p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
<!--link & name-->
<a href="#" class="text-light">Character Name</a>
</h3>
<!--quick info. fa-square = unchecked, fa-square-check = checked-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Relationship Type</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Other Keywords</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Etc.</span>
</p>
<!--relationship description-->
<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>
<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>
</div>
<!--end right side-->
</div>
<!--end relationship 2-->
<!--to add more relationships, paste above this line-->
<!----------identifying features (design notes) header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Identifying Features
</h2>
<!--design notes row container-->
<div class="row no-gutters mb-2">
<!--left side (image)-->
<div class="col-md-4 ">
<div class="bg-white text-center p-1 mb-2" style="transform:rotate(-1deg); box-shadow: 0px 0px 5px rgba(0,0,0,0.4);">
<!--img here-->
<img src="https://via.placeholder.com/500x500.png">
</div>
</div>
<!--end left side-->
<!--right side-->
<div class="col-md-8 pl-md-3">
<!--quick info. fa-square = unchecked, fa-square-check = checked-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Traits</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Other Keywords</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Etc.</span>
</p>
<!--basic design notes-->
<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>
<!--physical notes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Physical:</p>
<ul>
<li>Lorem ipsum dolor sit amet,</li>
<li>consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
</ul>
<!--demeanor notes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Demeanor:</p>
<ul>
<li>Donec accumsan tempor lacus,</li>
<li>et venenatis elit feugiat non. </li>
<li>Duis porta eros et velit blandit dapibus. </li>
</ul>
<!--style notes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Style:</p>
<ul>
<li>Curabitur ac finibus eros.</li>
<li>Duis placerat velit vitae massa sodales, </li>
<li>eget mattis nibh pellentesque.</li>
</ul>
</div>
<!--end right side-->
</div>
<!--end design notes row container-->
<!----------combat profile header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Combat Profile
</h2>
<!--basic summary. how op is this guy. etc-->
<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>
<!--basic powers subheader-->
<h3 class="bg-dark text-light p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
Mist Control Proficiency
</h3>
<!--for all checkboxes: fa-square = empty box, fa-square-check = filled box-->
<!--detection checkboxes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Detection:</p>
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> Not achieved</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 1</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 2</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> 3</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 4</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 5</span>
</p>
<!--boosting checkboxes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Physical Boosting:</p>
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> Not achieved</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 1</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 2</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> 3</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 4</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 5</span>
</p>
<!--attack checkboxes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Attacks:</p>
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> Not achieved</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 1</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 2</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> 3</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 4</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 5</span>
</p>
<!--more optional text-->
<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>
<!--vent section for diels-->
<h3 class="bg-dark text-light p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
Shell Specs
</h3>
<!--checkboxes-->
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> Not installed</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Vent</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> Eject</span>
</p>
<!--checkboxes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Time Limit in Reality:</p>
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> <1 minute</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 1-5 minutes</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> 5-10 minutes</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> 10-30 minutes</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> Other: <u>time</u></span>
</p>
<!--checkboxes-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Vent Slots:</p>
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Horn</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Arms</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Etc.</span>
</p>
<!--more optional text-->
<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>
<!--unique ability subheader-->
<h3 class="bg-dark text-light p-1 d-inline-block" style="font-weight: bold; font-family: courier new, monospace;">
Unique Ability
</h3>
<!--checkboxes-->
<p>
<span class="mr-2"><i class="fa-regular fa-square"></i> Not achieved</span>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Mare</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> Wake</span>
</p>
<!--checkboxes row 2-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Mantle</span>
(
<i class="fa-regular fa-square-check"></i> Shift-type
/
<i class="fa-regular fa-square"></i> Domain-type
)
</p>
<!--description-->
<p><u>Ability name</u> description. 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>
<!--technique sub-subheader-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Techniques:</p>
<!--techniques list-->
<ul>
<li><u>Name:</u> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<li><u>Name:</u> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
<!---------misc (trivia) header---------->
<h2 class="bg-dark text-light p-1" style="font-weight: bold; font-family: courier new, monospace;">
Miscellaneous
</h2>
<!--list-->
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. </li>
<li>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
<!--padding to ensure visibility. if adding more sections, paste above this line-->
<p style="height: 30px;"></p>
</div>
<!--end scrollbox-->
</div>
<!--end paper-->
</div>
<!--end collapse-->
<!--folder tab shape thing-->
<div class="flex-row justify-content-end" style="margin-top: -30px;">
<div class="bg-secondary" style="width: 30%; height: 30px; clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);"></div>
</div>
<!--folder (bottom section with basic info)-->
<div class="bg-secondary p-4" style="border-radius: 10px 0 0 0;">
<!--top row-->
<div class="row no-gutters">
<!--left side-->
<div class="col-md-8">
<!--personnel file header-->
<h1 class="bg-dark text-light d-inline-block p-2 mb-0 font-weight-bold" style="border-radius: 5px 5px 0 0; font-family: courier new, monospace;">Personnel File</h1>
<!--status box-->
<div class="bg-light text-dark p-2 mb-2" style="border-radius: 0 5px 5px 5px">
<!--status subheader-->
<p class="mb-0 font-weight-bold" style="font-family: courier new, monospace;">Status:</p>
<!--fa-square = unchecked, fa-square-check = checked-->
<p>
<span class="mr-2"><i class="fa-regular fa-square-check"></i> Active</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> Inactive</span>
<span class="mr-2"><i class="fa-regular fa-square"></i> Archived</span>
</p>
</div>
<!--end status box-->
<!--fields-->
<div class="row no-gutters">
<!--left side-->
<div class="col-md-6 pr-md-1">
<div class="bg-light text-dark p-2 mb-2" style="border-radius: 5px">
<!--left field table-->
<table class="table border-0 mb-0"><tbody>
<!--field 1-->
<tr>
<!--left-->
<td style="text-align: right; padding:5px 5px 0; font-weight:bold; font-family: courier new, monospace;">Name: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">Character Name</td>
</tr>
<!--field 2-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Age: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">xx </td>
</tr>
<!--field 3-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Pronouns: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">x/x</td>
</tr>
<!--field 4-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Height: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">xxx </td>
</tr>
<!--if adding more fields, paste above this line-->
</tbody></table>
<!--end left field table-->
</div>
</div>
<!--end left side-->
<!--right side-->
<div class="col-md-6 pl-md-1">
<div class="bg-light text-dark p-2 mb-2" style="border-radius: 5px">
<!--right field table-->
<table class="table border-0 mb-0"><tbody>
<!--field 1-->
<tr>
<!--left-->
<td style="text-align: right; padding:5px 5px 0; font-weight:bold; font-family: courier new, monospace;">ID: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">000 000 000</td>
</tr>
<!--field 2-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Type: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">xyz </td>
</tr>
<!--field 3-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Division: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">xyz</td>
</tr>
<!--field 4-->
<tr>
<!--left-->
<td style="text-align:right;padding:5px 5px 0;font-weight:bold; font-family: courier new, monospace;">Rank: </td>
<!--right-->
<td class="w-100" style="border-bottom: 1px solid; padding:5px 5px 0;">xyz</td>
</tr>
<!--if adding more fields, paste above this line-->
</tbody></table>
<!--end right field table-->
</div>
</div>
<!--end right side-->
</div>
<!--end fields-->
</div>
<!--end left side-->
<!--right side (img)-->
<div class="col-md-4 flex-row justify-content-center align-items-center">
<div class="bg-light text-center p-3" style="transform:rotate(2deg); max-width: 240px; box-shadow: 0px 0px 5px rgba(0,0,0,0.4);">
<!--img goes here-->
<img src="https://via.placeholder.com/500x500.png">
</div>
</div>
<!--end right side-->
</div>
<!--end top row-->
<!--notes header-->
<h2 class="bg-dark text-light d-inline-block p-2 mb-0 font-weight-bold" style="border-radius: 5px 5px 0 0; font-family: courier new, monospace;">Notes</h2>
<!--notes box-->
<div class="bg-light text-dark p-2 mb-2" style="border-radius: 0 5px 5px 5px">
<!--notes go here-->
<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>
</div>
<!--end notes box-->
</div>
<!--end folder-->
<!--credit; you can move this but please don't remove it-->
<div class="text-right">
<a class="fal fa-code tooltipster" title="code by octopi" data-placement="bottom" href="https://toyhou.se/octopi"></a>
</div>
</div>
<!--end profile container-->
