Profile
This code is mobile-friendly and automatically adjusts to the colors of Toyhouse's themes. I recommend editing it with WYSIWYG turned off to avoid weird issues.
This theme has been optimized for a DnD 5e character sheet. For other code variants, check out the main profile!
I've tried to make the code clear and easy to use even for people with less coding experience. If there's anything I can do to make it better, please tell me.
All codes are free! Please keep the credit at the bottom. Feel free to edit the layout as you want. I can't promise personal coding help for everyone, but if there's a general edit you think is handy for lots of people, let me know!
Also, making and tweaking codes takes quite some time, so if you enjoy these, please consider a little ko-fi tip <3
This theme has been optimized for a DnD 5e character sheet. For other code variants, check out the main profile!
I've tried to make the code clear and easy to use even for people with less coding experience. If there's anything I can do to make it better, please tell me.
All codes are free! Please keep the credit at the bottom. Feel free to edit the layout as you want. I can't promise personal coding help for everyone, but if there's a general edit you think is handy for lots of people, let me know!
Also, making and tweaking codes takes quite some time, so if you enjoy these, please consider a little ko-fi tip <3
Code
>>> Pastebin LinkDirect Copypaste:
<div class="container">
<!-- !FILL! --> <h1 class="display-2 text-center text-primary">Name</h1>
<!-- !FILL! --> <h6 class="text-center">short description/keywords (e.g. Race, Job)</h6>
<!-- Image & Stats BEGIN -->
<div class="row mt-2 mb-3" >
<div class="col-lg-6 pr-0" >
<div class="card-block text-right p-0 pr-1 modal-open" style="height:400px;" >
<div>
<!-- !FILL! --> <img src="https://orig00.deviantart.net/897a/f/2017/287/0/0/scan_2_c_ss_by_milay-dbql5r1.png" style="height:400px;"> <!-- recommended images max. 400x400, but all images are made to fit automatically. Images that are wider get resized, and images that are higher get cut off --> <!-- to have higher images being resized automatically, use <img src="url" style="height:400px;"> -->
</div>
</div>
</div>
<div class="col-lg-6 pl-1"><div class="pl-0 card-block table-responsive" style="height:auto;">
<table style="margin-left:0px;margin-right:auto;border:0px;">
<tbody>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Name</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Name --> Name</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Gender/Pronouns</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! -Gender/Pronouns-->male/female/nonbinary (he/she/they)</span></td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Age/Birthday</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Age/Birthday-->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Species</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Species -->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Orientation/Status</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Orientation/Status-->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Height</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Height-->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Body Build</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Body Build-->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Unique Features</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Unique Features-->¯\_(ツ)_/¯</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Origin/Home</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Origin/Home--> ¯\_(ツ)_/¯</span></td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Personality</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Personality-->it is a mystery</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Class/Occupation</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - class/occupation--> hero</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Alignment</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Alignment--> i can be your devil or your angle</span>
</td>
</tr>
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Game/Campaign</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Game/Campaign-->DnD 5e</span>
</td>
</tr>
<!--to add another option, start copying here-->
<tr>
<td class="text-right pb-1 pt-0"><span style="font-size:9pt;"><strong>Theme Songs/Playlist</strong></span></td>
<td class="text-center pb-1 pt-0"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
<td class="text-left pb-1 pt-0"><span style="font-size:9pt;">
<!-- !FILL! - Game/Campaign--><a href="https://open.spotify.com/playlist/0ZWE8tEAyjdE4atiuArgLQ">♪♫♬</a></span>
</td>
</tr>
<!--to add another option, end copying here-->
<!-- paste here -->
</tbody>
</table>
</div></div>
</div>
<!-- Image & Stats END-->
<div class="container-fluid px-0 mx-0">
<div class="row">
<div class="col-md-12 mb-6">
<div class="card" style="border:none;">
<div class="card-header" style="border:none; padding-top:0.5rem; padding-bottom:0.5rem;">
<!--------- NAVIGATION ------ YOU CAN CHANGE THE ICONS/NAMES ---------------------------------->
<ul class="nav nav-tabs card-header-tabs nav-justified">
<li class="nav-item"><a class="nav-link active" style="border-top: 1px solid transparent;border-right: 1px solid transparent;border-left: 1px solid transparent;" data-toggle="tab" href="#ONE">
<i class="fas fa-star"></i><span class="hidden-sm-down ml-1">About</span></a>
</li>
<li class="nav-item"><a class="nav-link" style="border-top: 1px solid transparent;border-right: 1px solid transparent;border-left: 1px solid transparent;" data-toggle="tab" href="#TWO">
<i class="fas fa-bars"></i><span class="hidden-sm-down ml-1">Story</span></a>
</li>
<li class="nav-item"><a class="nav-link" style="border-top: 1px solid transparent;border-right: 1px solid transparent;border-left: 1px solid transparent;" data-toggle="tab" href="#THREE">
<i class="far fa-id-card" /><span class="hidden-sm-down ml-1">Stats</span></a>
</li>
</ul>
</div>
<div class="tab-content">
<!------------- TAB ONE ---------- BASICS --------------------------------------->
<div class="tab-pane active show card-block cc" id="ONE">
<!-- Details & About START -->
<div class="row">
<div class="col-lg-5 pr-2 pl-0">
<div class="card bg-faded card-block d-block mb-4 table-responsive" style="height:450px;overflow:hidden;border:none;">
<h1 class="text-muted display-4 mb-4" style="border-bottom:1px solid;"></i> Details</h1>
<div style="padding-right: 15px; height: 370px; overflow: auto; margin-right: -20px;padding-bottom: 20px;">
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Languages
</p>
<p style="font-size:9pt;" class="pl-3 text-muted">
<!-- !FILL! description --><i class="fa fa-angle-right" aria-hidden="true"></i> Common <br>
<i class="fa fa-angle-right" aria-hidden="true"></i> Abyssal (aka that whispering from their nightmares) <br>
<i class="fa fa-angle-right" aria-hidden="true"></i> Dwarvish</p>
<hr>
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Expertises
</p>
<p style="font-size:9pt;" class="pl-3">
<!-- !FILL! description <i class="fa fa-angle-right" aria-hidden="true"></i> Stealth (Hide in Plain Sight) <i class="fa fa-angle-right" aria-hidden="true"></i> Disable Device <i class="fa fa-angle-right" aria-hidden="true"></i> Knife Master <i class="fa fa-angle-right" aria-hidden="true"></i> Shadows-->
</p>
<hr>
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Notable Items
</p>
<p style="font-size:9pt;" class="pl-3">
<!-- !FILL! item name --><i class="fa fa-angle-right" aria-hidden="true"></i> A Knife
</p>
<p style="font-size:9pt;" class="pl-4 text-muted">
<!-- !FILL! item description -->No!!!
</p>
</div>
</div>
</div>
<div class="col-lg-7 pl-2 pr-0">
<!-- About Box -->
<div class="card mb-4 card-block bg-faded d-block rounded-bottom table-responsive" style="height:450px;overflow:hidden;border:none;">
<div style="height: 430px !important; overflow: auto !important; margin-right: -20px !important; padding-right: 15px;padding-bottom:20px;">
<!-- !FILL! image --> <img src="https://orig00.deviantart.net/897a/f/2017/287/0/0/scan_2_c_ss_by_milay-dbql5r1.png" class="float-right m1-1 ml-2" style="height:300px;"><!-- looks best with transparent images - optional - feel free to remove - images will be resized to fit automatically - for images wider than 300px, change 'height' to 'width' -->
<h1 class="display-4 text-right text-muted mb-4" style="border-bottom:1px solid;">About</h1>
<!-- About Text START -->
<p style="font-size:9pt;" >
<!-- !FILL! -->
This is where you can write about your character!
<ul style="font-size:9pt;" >
<li>You can also</li>
<li>add a bullet list</li>
</ul>
</p>
<p style="font-size:9pt;" >
Add a new paragraph like this.
</p>
<!-- About Text END -->
</div>
</div>
</div>
</div>
<!-- Details & About END-->
</div>
<!------------- TAB ONE END ---------------------->
<!------------- TAB TWO ---------- STATS --------------------------------------->
<div class="tab-pane card-block cc" id="TWO">
<!-- Backstory & Relationships START -->
<div class="row">
<div class="col-lg-6 pr-2 pl-0">
<div class="card mb-4 card-block bg-faded d-block rounded-bottom table-responsive" style="height:770px;border:0px;overflow:visible;">
<h1 class="display-4 text-left text-muted mb-4" style="border-bottom:1px solid;">Story</h1>
<div style="padding-right: 15px; height: 690px; overflow: auto; margin-right: -20px;padding-bottom: 20px;">
<!-- to add another paragaph, start copypaste here -->
<p class="text-muted" style="font-size:9pt;">
<!-- !FILL! - backstory --> <i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</i>
</p>
<!-- to add another paragaph, end copypaste here -->
<p class="text-center">
<img src="https://cdn.discordapp.com/attachments/944961272913477702/1038863493048307842/unknown.png" class="img-thumbnail"><br>
<!-- optional image source link or image description start -->
<span style="font-size:7px;">
[description]
</span><!-- optional image source link or image description end -->
</p>
<p>
<span class="display-4">Chapter 1</span>
</p>
<!-- to add another paragaph, start copypaste here -->
<p class="" style="font-size:9pt;">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p>
<!-- to add another paragaph, end copypaste here -->
</div>
</div>
</div>
<div class="col-lg-6 pr-0 pl-2">
<div class="card mb-4 card-block bg-faded d-block table-responsive" style="height:770px;border:0px;overflow:visible;">
<h1 class="display-4 text-right text-muted mb-4" style="border-bottom:1px solid;">Notable Characters</h1>
<div style="padding-right: 15px; height: 690px; overflow: auto; margin-right: -20px;padding-bottom: 20px;">
<!-- !FILL! - title --><span class="display-4">The Party</span>
<p class="text-muted" style="font-size:9pt;">
<!-- !FILL! - description -->More room to write stuff.
</p>
<!-- character start -->
<div class="mt-3 pt-2">
<!-- !FILL! image --> <img src="https://orig07.deviantart.net/4694/f/2017/104/e/e/imgres_by_milay-db5t2x3.jpg" class="float-left mr-2 img-thumbnail" style="width:110px;" >
<p class="text-left text-uppercase text-primary mb-1 pt-1">
<!-- !FILL! name --> <i class="fa fa-angle-right"></i> Name <span class="text-muted">| title/class</span>
</p>
<p style="font-size:9pt;" class="text-left pl-3">
<!-- !FILL! description --> <i>Description</i>
</p>
<br clear="all">
</div>
<!-- character end-->
<!-- character start -->
<div class="mt-3 pt-2">
<!-- !FILL! image --> <img src="https://orig07.deviantart.net/4694/f/2017/104/e/e/imgres_by_milay-db5t2x3.jpg" class="float-right ml-2 img-thumbnail" style="width:110px;" >
<p class="text-right text-uppercase text-primary mb-1 pt-1">
<!-- !FILL! name --> <span class="text-muted">title/class |</span> Name <i class="fa fa-angle-left"></i>
</p>
<p style="font-size:9pt;" class="text-right pr-3">
<!-- !FILL! description --><i>description</i>
</p>
<br clear="all">
</div>
<!-- character end-->
<!-- character start -->
<div class="mt-3 pt-2">
<!-- !FILL! image --> <img src="https://orig07.deviantart.net/4694/f/2017/104/e/e/imgres_by_milay-db5t2x3.jpg" class="float-left mr-2 img-thumbnail" style="width:110px;" >
<p class="text-left text-uppercase text-primary mb-1 pt-1">
<!-- !FILL! name --> <i class="fa fa-angle-right"></i> Name <span class="text-muted">| title/class</span>
</p>
<p style="font-size:9pt;" class="text-left pl-3">
<!-- !FILL! description --> <i>Description</i>
</p>
<br clear="all">
</div>
<!-- character end-->
<!-- character start -->
<div class="mt-3 pt-2">
<!-- !FILL! image --> <img src="https://orig07.deviantart.net/4694/f/2017/104/e/e/imgres_by_milay-db5t2x3.jpg" class="float-right ml-2 img-thumbnail" style="width:110px;" >
<p class="text-right text-uppercase text-primary mb-1 pt-1">
<!-- !FILL! name --> <span class="text-muted">title/class |</span> Name <i class="fa fa-angle-left"></i>
</p>
<p style="font-size:9pt;" class="text-right pr-3">
<!-- !FILL! description --><i>description</i>
</p>
<br clear="all">
</div>
<!-- character end-->
</div>
</div>
</div>
</div>
<!-- Backstory & Relationships END -->
</div>
<!------------- TAB TWO END ---------------------->
<!------------- TAB THREE ---------- TRIIVA --------------------------------------->
<div class="tab-pane card-block cc" id="THREE">
<!-- DnD General Stats BEGIN -->
<div class="row mb-3">
<!-- level card start -->
<div class="col-lg-2 col-8 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<div class="row">
<div class="col-lg-6 col-6 text-center pr-1">
<span class="text-muted display-6 mb-4">LVL</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! LvL-->3
</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Class-->Cleric 1
</span>
</div>
<div class="col-lg-6 col-6 text-center pl-1">
<span class="text-muted display-6 mb-4">Alignment</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! alignment-->N
</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Class-->Warlock 2
</span><br>
</div>
</div>
</div>
</div>
<!-- level card end -->
<!-- HP card start -->
<div class="col-lg-1 col-4 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<span class="text-muted display-6 mb-4">HP</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! HP-->17
</span><br>
<span class="text-muted display-6 mb-4">HD </span>
<span class="text-primary display-6 mb-4">
<!-- !FILL! HD-->3
</span>
</div>
</div> <!-- HP card end -->
<!-- AC card start -->
<div class="col-lg-1 col-4 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<span class="text-muted display-6 mb-4">AC</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! AC-->16</span><br>
<!-- remove if no shield START -->
<span class="text-muted display-6 mb-4">Shield</span>
<span class="text-primary display-6 mb-4">
<!-- !FILL! Shield bonus (if any)-->+2</span>
<!-- remove if no shield END -->
</div>
</div> <!-- AC card end -->
<!-- Init card start -->
<div class="col-lg-1 col-4 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<span class="text-muted display-6 mb-4">Init</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! Initiative -->+0
</span>
</div>
</div> <!-- Init card end -->
<!-- speed card start -->
<div class="col-lg-1 col-4 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<span class="text-muted display-6 mb-4">Move</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! speed-->30</span><br>
<span class="text-muted display-6 mb-4"><!-- !FILL! modifer-->ft.</span>
</div>
</div> <!-- speed card end -->
<!-- ability scores card start -->
<div class="col-lg-3 col-12 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<div class="row">
<div class="col-lg-2 col-2 text-center pr-1">
<span class="text-muted display-6 mb-4"> </span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! AC-->Stats</span><br>
<span class="text-muted display-6 mb-4">Mod</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Reflex-->Save</span>
</div>
<div class="col-lg-9 col-9 text-center pl-3 pr-1">
<div class="row">
<div class="col-lg-2 col-2 text-center px-1">
<span class="text-primary display-6 mb-4">STR</span><br>
<span class="text-primary display-6 mb-4 pr-1">
<!-- !FILL! STR-->10</span><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! STR mod-->+0</span><sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! STR save-->+0</span><sub style="font-size:8px;top:-5px;" class="text-primary">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- str -->
<div class="col-lg-2 col-2 text-center px-1">
<span class="text-muted display-6 mb-4">DEX</span><br>
<span class="text-muted display-6 mb-4 pr-1">
<!-- !FILL! DEX-->10</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! DEX mod-->+0</span><sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! DEX save-->+0</span><sub style="font-size:8px;top:-5px;" class="text-muted">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- dex -->
<div class="col-lg2 col-2 text-center px-1">
<span class="text-primary display-6 mb-4">CON</span><br>
<span class="text-primary display-6 mb-4 pr-1">
<!-- !FILL! CON-->10</span><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! CON mod-->+0</span><sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! CON save-->+0</span><sub style="font-size:8px;top:-5px;" class="text-primary">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- con -->
<div class="col-lg-2 col-2 text-center px-1">
<span class="text-muted display-6 mb-4">INT</span><br>
<span class="text-muted display-6 mb-4 pr-1">
<!-- !FILL! INT-->10</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! INT mod-->+0</span><sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! INT save-->+0</span><sub style="font-size:8px;top:-5px;" class="text-muted">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- int -->
<div class="col-lg-2 col-2 text-center px-1">
<span class="text-primary display-6 mb-4">WIS</span><br>
<span class="text-primary display-6 mb-4 pr-1">
<!-- !FILL! WIS-->10</span><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! WIS mod-->+0</span><sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-primary display-6 mb-4">
<!-- !FILL! WIS save-->+0</span><sub style="font-size:8px;top:-5px;" class="text-primary">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- wis -->
<div class="col-lg-2 col-2 text-center px-1">
<span class="text-muted display-6 mb-4">CHA</span><br>
<span class="text-muted display-6 mb-4 pr-1">
<!-- !FILL! CHA-->10</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! CHA save-->+0</span<sub style="font-size:8px;top:-5px;opacity:0;"> <i class="fa-solid fa-square-check"></i></sub><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! CHA mod-->+0</span><sub style="font-size:8px;top:-5px;" class="text-muted">
<!-- !FILL! Save Proficiency--><i class="far fa-square"></i><!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</sub>
</div> <!-- cha -->
</div>
</div>
</div>
</div>
</div> <!-- ability scores card end -->
<!-- proficiency start -->
<div class="col-lg-3 col-12 px-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1" style="height:90px;border:0px;">
<div class="row">
<div class="col-lg-5 col-5 text-center pr-1">
<span class="text-muted display-6 mb-4">Proficiency<br>Bonus</span><br>
<span class="text-primary display-4 mb-4">
<!-- !FILL! Proficiency Bonus-->+2</span>
</div> <!-- proficiency bonus -->
<div class="col-lg-7 col-7 text-left pr-1">
<span class="text-muted display-6 mb-4">Passive</span><br>
<span class="text-muted display-6 mb-4">Insight</span>
<span class="text-primary display-6 mb-4">
<!-- !FILL! Passive Insight-->15</span><br>
<span class="text-muted display-6 mb-4">Investigation</span>
<span class="text-primary display-6 mb-4">
<!-- !FILL! Passive Investigation-->13</span><br>
<span class="text-muted display-6 mb-4">Perception</span>
<span class="text-primary display-6 mb-4">
<!-- !FILL! Passive Perception-->13</span>
</div> <!-- passive skills -->
</div>
</div>
</div>
<!-- proficiency end -->
</div>
<!-- DnD General Stats END -->
<!-- DnD Skills & Feats START -->
<div class="row mb-3">
<!-- inventory card start -->
<div class="col-lg-3 col-12 px-2">
<div class="card card-block bg-faded d-block table-responsive" style="height:470px;border:0px;overflow:visible;">
<h1 class="display-4 text-left text-muted mb-4" style="border-bottom:1px solid;">
Inventory
</h1>
<div style="padding-right: 15px; height: 390px; overflow: auto; margin-right: -20px;padding-bottom: 20px;">
<p class="text-uppercase text-left text-primary px-1 pt-0 pb-1 mb-0">
Items
</p>
<ul class="list-unstyled mb-0" style="font-size:9pt;">
<!-- List of items -->
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hiddecn="true"></i> A Knife!
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hiddecn="true"></i> Healer's Kit
</li>
<!-- copypaste to add more START -->
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hiddecn="true"></i> Empty journal & charcoal
</li><!-- copypaste to add more END -->
</ul><br>
<p class="text-uppercase text-left text-primary px-1 pt-0 pb-1 mb-0">
Explorer's Pack
</p>
<ul class="list-unstyled mb-0" style="font-size:9pt;">
<!-- List of equipment and armor -->
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> A backpack
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> A bedroll
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> A mess kit
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> A tinderbox
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> 10 torches
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> 10 days of rations
</li>
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> A waterskin
</li>
<!-- copypaste to add more START -->
<li>
<!-- !FILL! --><i class="fa fa-angle-right" aria-hidden="true"></i> 50 feet of hempen rope
</li><!-- copypaste to add more END -->
</ul><br>
<p style="font-size:9pt;"><!-- write here to add things without bullet list--></p>
</div>
</div>
</div>
<!-- inventory card start -->
<!-- skills & feats card start -->
<div class="col-lg-6 col-12 px-2">
<div class="card bg-faded card-block d-block table-responsive" style="height:470px;border:0px;overflow:visible;">
<h1 class="text-muted display-4 mb-4" style="border-bottom:1px solid;">Feats & Features</h1>
<div style="padding-right: 15px; height: 390px; overflow: auto; margin-right: -20px;padding-bottom: 20px;">
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Languages
</p>
<p style="font-size:9pt;" class="pl-3">
<!-- !FILL! description --><i class="fa fa-angle-right" aria-hidden="true"></i> Common <br>
<i class="fa fa-angle-right" aria-hidden="true"></i> Abyssal (aka that whispering from their nightmares) <br>
<i class="fa fa-angle-right" aria-hidden="true"></i> Dwarvish</p>
<hr>
<!-- Spell Table START - can be modified to list wands etc. instead or removed-->
<table class="border-0 w-100 chart"><tbody>
<tr>
<td class="text-uppercase text-left px-1 pt-0 pb-1">Cantrips</td>
<td class="text-uppercase text-left px-1 pt-0 pb-1">Spells</td>
<td class="text-uppercase text-left text-muted px-1 pt-0 pb-1"><!--Techniques--></td>
</tr><tr>
<!-- List of Cantrips -->
<td class="py-0 pl-0 align-top" style="font-size:9pt;">
<ul class="list-unstyled mb-0">
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#sacred%20flame_phb">Sacred Flame</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#light_phb">Light</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#infestation_xge">Infestation</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#prestidigitation_phb">Prestidigitation</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#guidance_phb">Guidance</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#thaumaturgy_phb">Thaumaturgy</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#toll%20the%20dead_xge">Toll the Dead</a></li><!-- copypaste this line to add more -->
</ul>
</td>
<!-- List of Spells -->
<td class="py-0 pl-0 align-top" style="font-size:9pt;">
<ul class="list-unstyled mb-0">
<li class ="text-muted py-1" style="font-size:10pt;">1st Level</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#cure%20wounds_phb">Cure Wounds</a> (Domain)</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#command_phb">Command</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#guiding%20bolt_phb">Guiding Bolt</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#healing%20word_phb">Healing Word</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="https://5e.tools/spells.html#inflict%20wounds_phb">Inflict Wounds</a></li><!-- copypaste this line to add more -->
<!--<li class ="text-muted py-1" style="font-size:10pt;">2nd Level</li>-->
<!--<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/magic/all-spells/h/hold-person/">Hold Person</a></li>--><!-- copypaste this line to add more -->
</ul>
</td>
<!-- List of Techniques -->
<td class="py-0 pl-0 align-top" style="font-size:9pt;">
<!--<ul class="list-unstyled mb-0">
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/classes/core-classes/bard/#TOC-Countersong-Su-">Countersong</a></li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/classes/core-classes/bard/#TOC-Distraction-Su-">Distraction</a></li>--><!-- copypaste this line to add more -->
<!--</ul>-->
</td>
</tr>
</tbody></table>
<!-- Spell Table END - can be modified to list wands etc. instead or removed-->
<hr>
<!-- Trait START - Copypaste to add more -->
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Darkvision (60 ft.)
</p>
<p style="font-size:9pt;" class="pl-3">
<!-- !FILL! description -->Within a specified range, a creature with darkvision can see in dim light as if it were bright light and in darkness as if it were dim light, so areas of darkness are only lightly obscured as far as that creature is concerned. However, the creature can't discern color in that darkness, only shades of gray.
</p>
<!-- Trait END- Copypaste to add more -->
<!-- Trait START - Copypaste to add more -->
<p class="text-uppercase text-primary mb-1">
<!-- !FILL! name -->Healer
</p>
<p style="font-size:9pt;" class="pl-3">
<!-- !FILL! description -->When you use a healer's kit to stabilize a dying creature, that creature also regains 1 hit point.<br><br>
As an action. you can spend one use of a healer's kit to tend to a creature and restore 1d6 + 4 hit points to it, plus additional hit points equal to the creature's maximum number of Hit Dice. The creature can't regain hit points from this feat again until it finishes a short or long rest.<br><br>
<b class="text-primary">Healer's Kit:</b> As an action, you can expend one use of the kit to stabilize a creature that has 0 hit points, without needing to make a Wisdom (Medicine) check.
</p>
<!-- Trait END- Copypaste to add more -->
</div>
</div>
</div>
<!-- skills & feats card end -->
<!-- skills card start-->
<div class="col-lg-3 col-12 px-2">
<div class="card bg-faded card-block d-block mb-2 text-left px-3" style="height:470px;border:0px;">
<h1 class="text-muted display-4 mb-4" style="border-bottom:1px solid;">Skills</h1>
<div class="row" style="margin-top: -45px !important; padding-bottom: 10px;">
<div class="col-lg-6">
<!--leave empty for spacing-->
</div>
<div class="col-lg-6 px-2" style="text-align: right;">
<span class="text-muted display-6 mb-4" style="margin-top: 12px;font-size: 9pt;">Prof Adv</span>
</div>
</div><!-- header -->
<!--<hr class="mb-1 mt-1">-->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Acrobatics </span><span class="text-muted display-6 mb-4">(Dex)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Acrobatics Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Acrobatics Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Acrobatics Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- acrobatics-->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Animal Handling </span><span class="text-muted display-6 mb-4">(Wis)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Animal Handling Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Animal Handling Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Animal Handling Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- animal handling -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Arcana </span><span class="text-muted display-6 mb-4">(Int)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Arcana Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Arcana Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Arcana Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- arcana -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Athletics </span><span class="text-muted display-6 mb-4">(Str)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Athletics Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Athletics Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Athletics Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- athletics-->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Deception </span><span class="text-muted display-6 mb-4">(Cha)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Deception Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Deception Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Deception Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- deception -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">History </span><span class="text-muted display-6 mb-4">(Int)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - History Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - History Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - History Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- history -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Insight </span><span class="text-muted display-6 mb-4">(Wis)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Insight Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Insight Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Insight Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- insight -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Intimidation </span><span class="text-muted display-6 mb-4">(Cha)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Intimidation Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Intimidation Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Intimidation Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- intimidation -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Investigation </span><span class="text-muted display-6 mb-4">(Int)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Investigation Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Investigation Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Investigation Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- investigation -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Medicine </span><span class="text-muted display-6 mb-4">(Wis)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Medicine Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Medicine Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Medicine Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- medicine -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Nature </span><span class="text-muted display-6 mb-4">(Int)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Nature Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Nature Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Nature Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- nature -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Perception </span><span class="text-muted display-6 mb-4">(Wis)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Perception Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Perception Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Perception Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- perception -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Performance </span><span class="text-muted display-6 mb-4">(Cha)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Performance Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Performance Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Performance Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- performance -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Persuasion </span><span class="text-muted display-6 mb-4">(Cha)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Persuasion Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Persuasion Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Persuasion Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- persuasion -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Religion </span><span class="text-muted display-6 mb-4">(Int)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Religion Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Religion Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Religion Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- religion -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Sleight of Hand </span><span class="text-muted display-6 mb-4">(Dex)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Sleight of Hand Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Sleight of Hand Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Sleight of Hand Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- sleight of hand -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Stealth </span><span class="text-muted display-6 mb-4">(Dex)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Stealth Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Stealth Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Stealth Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- stealth -->
<div class="row">
<div class="col-lg-8 col-7 pr-0" style="font-size:9pt;">
<span class="display-6 mb-4">Survival </span><span class="text-muted display-6 mb-4">(Wis)</span>
</div>
<div class="col-lg-2 col-3 pr-1 pl-0">
<span class="text-primary display-6 mb-4">
<!-- FILL - Survival Value -->+0
</span>
</div>
<div class="col-lg-2 col-2 pr-1 pl-0">
<span class="text-muted display-6 mb-4" style="margin-left: -10px;">
<!-- FILL - Survival Proficiency --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box -->
</span>
<span class="text-muted display-6 mb4 ml-1">
<!-- FILL - Survival Adv/Disadv --><i class="fa-light fa-square"></i> <!-- replace with <i class="fa-solid fa-square-check"></i> for checked box, replace with <i class="fa-solid fa-square-xmark"></i> for crossed box -->
</span>
</div>
</div><!-- survival -->
</div>
</div>
<!-- skills card end -->
</div>
<!-- DnD Skills & Feats END -->
<!-- DnD Weapons & Abilities START -->
<div class="row">
<!-- weapon card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-left py-1 px-3" style="height:150px;border:0px;overflow:visible;">
<div class="text-center"><span class="text-muted display-6 mb-4 text-center">
Weapon
</span></div>
<hr class="mb-1 mt-1">
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Weapon Type-->Simple
</span>
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg Type-->Bludgeoning
</span>
<span class="text-primary align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Melee/Ranged-->Melee
</span><br>
<div class="text-primary display-4 mt-1 mb-2" style="font-size:28px !important;">
<!-- !FILL! Weapon 2 Name-->Mace
</div>
<span class="text-primary display-6 mb-4">Hit </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Hit-->+3
</span>
<span class="text-primary display-6 mb-4 ml-1">Dmg </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg-->1d6+1
</span>
<span class="text-primary display-6 mb-4 ml-1"><!--Range --></span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Range-->
</span>
<br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Properties-->
</span>
</div>
</div>
<!-- weapon card end -->
<!-- weapon card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-left py-1 px-3" style="height:150px;border:0px;overflow:visible;">
<div class="text-center"><span class="text-muted display-6 mb-4 text-center">
Weapon
</span></div>
<hr class="mb-1 mt-1">
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Weapon Type-->Simple
</span>
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg Type-->Piercing
</span>
<span class="text-primary align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Melee/Ranged-->Melee
</span><br>
<div class="text-primary display-4 mt-1 mb-2" style="font-size:28px !important;">
<!-- !FILL! Weapon 2 Name-->Dagger
</div>
<span class="text-primary display-6 mb-4">Hit </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Hit-->+1
</span>
<span class="text-primary display-6 mb-4 ml-1">Dmg </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg-->1d4+1
</span>
<span class="text-primary display-6 mb-4 ml-1">Range </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Range-->20/60
</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Properties-->Finesse, Light, Range, Thrown
</span>
</div>
</div>
<!-- weapon card end -->
<!-- weapon card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-left py-1 px-3" style="height:150px;border:0px;overflow:visible;">
<div class="text-center"><span class="text-muted display-6 mb-4 text-center">
Weapon
</span></div>
<hr class="mb-1 mt-1">
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Weapon Type-->Simple
</span>
<span class="text-muted align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg Type-->Piercing
</span>
<span class="text-primary align-right display-6 mb-4">
<!-- !FILL! Weapon 2 Melee/Ranged-->Ranged
</span><br>
<div class="text-primary display-4 mt-1 mb-2" style="font-size:28px !important;">
<!-- !FILL! Weapon 2 Name-->Light Crossbow
</div>
<span class="text-primary display-6 mb-4">Hit </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Hit-->+1
</span>
<span class="text-primary display-6 mb-4 ml-1">Dmg </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Dmg-->1d8+1
</span>
<span class="text-primary display-6 mb-4 ml-1">Range </span>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Range-->80/320
</span><br>
<span class="text-muted display-6 mb-4">
<!-- !FILL! Weapon 2 Properties-->Loading, Range, Two-Handed
</span>
</div>
</div>
<!-- weapon card end -->
<!-- ability card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1 pl-0" style="height:150px;border:0px;overflow:visible;">
<span class="text-primary display-6 mb-4">
<!-- FILL -->Ability Name
</span>
<span class="text-muted display-6 mb-4">
<!-- FILL -->Class
</span>
<hr class="mb-1 mt-1">
<div style="max-height:110px;overflow:auto; padding-right: 15px; margin-right: -3px;padding-bottom: 20px;">
<span class="text-muted display-6 mb-4">
<!-- FILL -->Ability Description
</span>
</div>
</div>
</div>
<!-- ability card end -->
<!-- ability card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1 pl-0" style="height:150px;border:0px;overflow:visible;">
<span class="text-primary display-6 mb-4">
<!-- FILL -->Ability Name
</span>
<span class="text-muted display-6 mb-4">
<!-- FILL -->Class
</span>
<hr class="mb-1 mt-1">
<div style="max-height:110px;overflow:auto; padding-right: 15px; margin-right: -3px;padding-bottom: 20px;">
<span class="text-muted display-6 mb-4">
<!-- FILL -->Ability Description
</span>
</div>
</div>
</div>
<!-- ability card end -->
<!-- ability card start -->
<div class="col-lg-4 col-12 px-2 mb-2">
<div class="card bg-faded card-block d-block mb-2 text-center p-1 pl-0" style="height:150px;border:0px;overflow:visible;">
<span class="text-primary display-6 mb-4">
<!-- FILL -->Ability Name
</span>
<span class="text-muted display-6 mb-4">
<!-- FILL -->Class
</span>
<hr class="mb-1 mt-1">
<div style="max-height:110px;overflow:auto; padding-right: 15px; margin-right: -3px;padding-bottom: 20px;">
<span class="text-muted display-6 mb-4">
<!-- FILL -->Ability Description
</span>
</div>
</div>
</div>
<!-- ability card end -->
</div>
<!-- DnD Weapons & Abilities END -->
</div>
<!------------- TAB THREE END ---------------------->
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-left">Layout by rooty | <a href="http://toyhou.se/1390836">codes</a></p>
Preview
Name
short description/keywords (e.g. Race, Job)
| Name | Name | |
| Gender/Pronouns | male/female/nonbinary (he/she/they) | |
| Age/Birthday | ¯\_(ツ)_/¯ | |
| Species | ¯\_(ツ)_/¯ | |
| Orientation/Status | ¯\_(ツ)_/¯ | |
| Height | ¯\_(ツ)_/¯ | |
| Body Build | ¯\_(ツ)_/¯ | |
| Unique Features | ¯\_(ツ)_/¯ | |
| Origin/Home | ¯\_(ツ)_/¯ | |
| Personality | it is a mystery | |
| Class/Occupation | hero | |
| Alignment | i can be your devil or your angle | |
| Game/Campaign | DnD 5e | |
| Theme Songs/Playlist | ♪♫♬ |
Story
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[description]
Chapter 1
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Notable Characters
The Party
More room to write stuff.
Name | title/class
Description
title/class | Name
description
Name | title/class
Description
title/class | Name
description
LVL
3
Cleric 1
3
Cleric 1
Alignment
N
Warlock 2
N
Warlock 2
HP
17
HD 3
17
HD 3
AC
16
Shield +2
16
Shield +2
Init
+0
+0
Move
30
ft.
30
ft.
Stats
Mod
Save
STR
10
+0
+0
10
+0
+0
DEX
10
+0
+0
10
+0
+0
CON
10
+0
+0
10
+0
+0
INT
10
+0
+0
10
+0
+0
WIS
10
+0
+0
10
+0
+0
CHA
10
+0
+0
10
+0
+0
Proficiency
Bonus
+2
Bonus
+2
Passive
Insight 15
Investigation 13
Perception 13
Insight 15
Investigation 13
Perception 13
Inventory
Items
- A Knife!
- Healer's Kit
- Empty journal & charcoal
Explorer's Pack
- A backpack
- A bedroll
- A mess kit
- A tinderbox
- 10 torches
- 10 days of rations
- A waterskin
- 50 feet of hempen rope
Feats & Features
Languages
Common
Abyssal (aka that whispering from their nightmares)
Dwarvish
| Cantrips | Spells | |
|
Darkvision (60 ft.)
Within a specified range, a creature with darkvision can see in dim light as if it were bright light and in darkness as if it were dim light, so areas of darkness are only lightly obscured as far as that creature is concerned. However, the creature can't discern color in that darkness, only shades of gray.
Healer
When you use a healer's kit to stabilize a dying creature, that creature also regains 1 hit point.
As an action. you can spend one use of a healer's kit to tend to a creature and restore 1d6 + 4 hit points to it, plus additional hit points equal to the creature's maximum number of Hit Dice. The creature can't regain hit points from this feat again until it finishes a short or long rest.
Healer's Kit: As an action, you can expend one use of the kit to stabilize a creature that has 0 hit points, without needing to make a Wisdom (Medicine) check.
Skills
Prof Adv
Acrobatics (Dex)
+0
Animal Handling (Wis)
+0
Arcana (Int)
+0
Athletics (Str)
+0
Deception (Cha)
+0
History (Int)
+0
Insight (Wis)
+0
Intimidation (Cha)
+0
Investigation (Int)
+0
Medicine (Wis)
+0
Nature (Int)
+0
Perception (Wis)
+0
Performance (Cha)
+0
Persuasion (Cha)
+0
Religion (Int)
+0
Sleight of Hand (Dex)
+0
Stealth (Dex)
+0
Survival (Wis)
+0
Weapon
Simple Bludgeoning Melee
Mace
Hit
+3
Dmg
1d6+1
Weapon
Simple Piercing Melee
Dagger
Hit
+1
Dmg
1d4+1
Range
20/60
Finesse, Light, Range, Thrown
Weapon
Simple Piercing Ranged
Light Crossbow
Hit
+1
Dmg
1d8+1
Range
80/320
Loading, Range, Two-Handed
Ability Name
Class
Ability Description
Ability Name
Class
Ability Description
Ability Name
Class
Ability Description
Comments