! Code Stuff (Tabbed RPG DnD 5e Profile v1)

rooty

Info


Created
3 years, 7 months ago
Creator
rooty
Favorites
45

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


NOTE: To denote Proficiency, replace the icon:
<i class="far fa-check-square"></i>
<i class="far fa-square"></i>


Code

>>> Pastebin Link

Direct 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"><!-- 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="max-height: 360px; overflow: auto; padding-right: 15px;">
                    
                      <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  <i class="fa fa-angle-right" aria-hidden="true"></i> Undercommon  <i class="fa fa-angle-right" aria-hidden="true"></i> Orc  <i class="fa fa-angle-right" aria-hidden="true"></i> Elven  <i class="fa fa-angle-right" aria-hidden="true"></i> Infernal
                      </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="max-height: 420px; overflow: auto; 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="border:none;">
                    
                    <h1 class="display-4 text-left text-muted  mb-4" style="border-bottom:1px solid;">Story</h1>
                    
                    <div style="padding-right: 15px;">
                      <!-- 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="border:none;">
                    
                    <h1 class="display-4 text-right text-muted  mb-4" style="border-bottom:1px solid;">Notable Characters</h1>
                    
                    <div style="padding-right: 15px;">
                      <!-- !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 Stats BEGIN -->
              <div class="row">
                
                <!-- class level card start -->
                <div class="col-lg-2 col-6 pr-1 pl-0">
                 <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-->1
                      </span><br>
                      <span class="text-muted display-6 mb-4">
                        <!-- !FILL! Class-->Hero
                      </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-->CN
                      </span><br>
                    </div>
                  </div>
                </div>
              </div>
              <!-- class level card end -->
              
              <!-- proficiency bonus card start -->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4"><small>Proficiency</small></span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Proficiency Bonus -->+2
                  </span>
                </div>
              </div>
              <!-- proficiency bonus card end -->
              
              <!-- hp card start -->
              <div class="col-lg-2 col-6 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <div class="row">
                    <div class="col-lg-6 col-3 text-center pr-1">
                      <span class="text-muted display-6 mb-4">HP</span><br>
                      <span class="text-primary display-4 mb-4">
                        <!-- !FILL! HP -->30
                      </span><br>
                    </div>
                    <div class="col-lg-6 col-6 text-center pl-1">
                      <span class="text-muted display-6 mb-4">HD</span><br>
                      <span class="text-primary display-4 mb-4">
                        <!-- !FILL! HD -->4d8
                      </span><br>
                    </div>
                  </div>
                </div>
              </div>
              <!-- hp card end -->
              
              <!-- ac card start -->
              <div class="col-lg-2 col-12 pr-1">
                <div class="card bg-faded card-block d-block mb-3 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">AC</span><br>
                      <span class="text-primary display-4 mb-4">
                        <!-- !FILL! Armor Class -->18
                      </span><br>
                    </div>
                    <div class="col-lg-6 col-6 text-left pl-1">
                      <span class="text-muted display-6 mb-4">Armor</span> 
                      <span class="text-primary display-6 mb-4">
                        <!-- !FILL! Base Armor -->12
                      </span><br>
                      <span class="text-muted display-6 mb-4">Shield</span> 
                      <span class="text-primary display-6 mb-4">
                        <!-- !FILL! Shield Bonus-->+2
                      </span><br>
                      <span class="text-muted display-6 mb-4">Dex</span> 
                      <span class="text-primary display-6 mb-4">
                        <!-- !FILL! Dex Bonus-->+2
                      </span><br>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ac card end -->
              
              <!-- initiative card start -->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4">Ini</span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Initiative-->+2
                  </span>
                </div>
              </div>
              <!-- initiative card end -->
              
              <!-- movement card start -->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4"><small>Movement</small></span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Movement-->30
                  </span>
                </div>
              </div>
              <!-- movement card start -->
              
              <!--spell ability mod card start-->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4">Spell<br>Ability</span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Spell Ability Mod-->+3
                  </span>
                </div>
              </div>
              <!--spell ability mod card end-->
              
              <!--spell ability mod card start-->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4">Spell<br>DC</span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Spell DC-->14
                  </span>
                </div>
              </div>
              <!--spell ability mod card end-->
              
              <!-- spell atk mod card start -->
              <div class="col-lg-1 col-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="height:90px;border:0px;">
                  <span class="text-muted display-6 mb-4">Spell<br>Attack</span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Spell Attack-->+5
                  </span>
                </div>
              </div>
              <!-- spell atk mod card end -->
            
            </div>
            <!-- DnD Stats END -->
            
            <!-- DnD Attacks START -->
            <div class="row">
              
              <!-- weapon card start -->
              <div class="col-lg-3 pr-1 pl-0">
                <div class="card bg-faded card-block d-block mb-3 text-left py-1 pl-2 pr-2" style="border:0px;">
                  <span class="text-muted align-right display-6 mb-4">
                    <!-- !FILL! Weapon 1 Weapon Type-->Simple
                  </span>
                  <span class="text-muted align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 1 Dmg Type-->Bludgeoning
                  </span>
                  <span class="text-primary align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 1 Melee/Ranged-->Melee
                  </span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Weapon 1 Name-->Mace
                  </span><br>
                  <span class="text-primary display-6 mb-4">Hit </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 1 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 1 Dmg-->1w8+1
                  </span>
                  <span class="text-primary display-6 mb-4 ml-1">Range </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 1 Range-->-
                  </span><br>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 1 Properties--> 
                  </span>
                </div> 
              </div>
              <!-- weapon card end -->
              
              <!-- weapon card start -->
              <div class="col-lg-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-left py-1 pl-2 pr-2" style="border:0px;">
                  <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>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Weapon 2 Name-->Dagger
                  </span><br>
                  <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-->1w4+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-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-left py-1 pl-2 pr-2" style="border:0px;">
                  <span class="text-muted align-right display-6 mb-4">
                    <!-- !FILL! Weapon 3 Weapon Type-->Simple
                  </span>
                  <span class="text-muted align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 3 Dmg Type-->Piercing
                  </span>
                  <span class="text-primary align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 3 Melee/Ranged-->Ranged
                  </span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Weapon 3 Name-->Light Crossbow
                  </span><br>
                  <span class="text-primary display-6 mb-4">Hit </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 3 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 3 Dmg-->1w8+1
                  </span>
                  <span class="text-primary display-6 mb-4 ml-1">Range </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 3 Range-->80/320
                  </span><br>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 3 Properties-->Loading, Range, Two-Handed
                  </span>
                </div> 
              </div>
              <!-- weapon card end -->
              
              <!-- weapon card start -->
              <div class="col-lg-3 pr-1">
                <div class="card bg-faded card-block d-block mb-3 text-left py-1 pl-2 pr-2" style="border:0px;">
                  <span class="text-muted align-right display-6 mb-4">
                    <!-- !FILL! Weapon 4 Weapon Type-->?
                  </span>
                  <span class="text-muted align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 4 Dmg Type-->?
                  </span>
                  <span class="text-primary align-right display-6 mb-4">  
                    <!-- !FILL! Weapon 4 Melee/Ranged-->?
                  </span><br>
                  <span class="text-primary display-4 mb-4">
                    <!-- !FILL! Weapon 4 Name-->-
                  </span><br>
                  <span class="text-primary display-6 mb-4">Hit </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 4 Hit-->-
                  </span>
                  <span class="text-primary display-6 mb-4 ml-1">Dmg </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 4 Dmg-->-
                  </span>
                  <span class="text-primary display-6 mb-4 ml-1">Range </span>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 4 Range-->-
                  </span><br>
                  <span class="text-muted display-6 mb-4">
                    <!-- !FILL! Weapon 4 Properties--> 
                  </span>
                </div> 
              </div>
              <!-- weapon card end -->
              
            </div>
            <!-- DnD Attacks END -->
            
            <!-- DnD Abilities & Skills START -->
            <div class="row">

            <!-- STR block START -->
            <div class="col-lg-6 col-12 pr-1 pl-0">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">STR</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! STR-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! STR Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! STR Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! STR Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>
                  <div class="col-lg-6 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Athletics Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Athletics</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Athletics -->+0
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- STR block END -->

            <!-- DEX block START -->
            <div class="col-lg-6 col-12 pr-1">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">DEX</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! DEX-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! DEX Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! DEX Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! DEX Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>
                  <div class="col-lg-6 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Acrobatics Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Acrobatics</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Acrobatics -->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Sleight of Hand Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Sleight of Hand</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Sleight of Hand-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Stealth Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Stealth</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Stealth-->+0
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- DEX block END -->

            <!-- CON block START -->
            <div class="col-lg-6 col-12 pr-1 pl-0">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">CON</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! CON-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! CON Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! CON Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! CON Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>
                  <div class="col-lg-6 col-12 text-left px-1">
                    <!-- CON Skills-->
                  </div>
                </div>
              </div>
            </div>
            <!-- CON block END -->

            <!-- INT block START -->
            <div class="col-lg-6 col-12 pr-1">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">INT</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! INT-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! INT Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! INT Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! INT Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>
                  <div class="col-lg-3 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Arcana Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Arcana</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Arcana -->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! History Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">History</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! History-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Investigation Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Investigation</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Investigation-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Nature Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Nature</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Nature-->+0
                    </span>
                  </div>
                  <div class="col-lg-3 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Religion Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Religion</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Religion-->+0
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- INT block END -->

            <!-- WIS block START -->
            <div class="col-lg-6 col-12 pr-1 pl-0">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">WIS</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! WIS-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! WIS Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! WIS Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! WIS Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>
                  <div class="col-lg-3 col-12 text-left px-0">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Animal Handling Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Animal Handle</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Animal Handling -->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Insight Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Insight</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Insight-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Medicine Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Medicine</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Medicine-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Perception Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Perception</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Perception-->+0
                    </span>
                  </div>
                  <div class="col-lg-3 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Survival Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Survival</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Survival-->+0
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- WIS block END -->

            <!-- CHA block START -->
            <div class="col-lg-6 col-12 pr-1">
              <div class="card bg-faded card-block d-block mb-3 text-center p-1" style="_height:90px;border:0px;">
                <div class="row">
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-4">CHA</span> 
                    <span class="text-primary display-3 mb-4">
                      <!-- !FILL! CHA-->10
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center pr-1">
                    <span class="text-muted display-6 mb-4">Mod</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! CHA Mod-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4"></span><br>
                    <span class="text-primary display-6 mb-4"></span>
                    </span>
                  </div>
                  <div class="col-lg-2 col-6 text-center px-1">
                    <span class="text-muted display-6 mb-4">Save</span><br>
                    <span class="text-primary display-4 mb-4">
                      <!-- !FILL! CHA Save-->+0
                    </span><br>
                    <span class="text-muted display-6 mb-4">
                      <!-- !FILL! CHA Proficiency--><i class="far fa-square"></i>/Adv
                    </span>
                  </div>

                  <div class="col-lg-6 col-12 text-left px-1">
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Deception Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Deception</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Deception -->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Intimidation Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Intimidation</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Intimidation-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Performance Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Performance</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Performance-->+0
                    </span>
                  <br>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Persuasion Proficiency--><i class="far fa-square"></i>
                    </span>
                    <span class="text-muted display-6 mb-4">Persuasion</span>
                    <span class="text-primary display-6 mb-4">
                      <!-- !FILL! Persuasion-->+0
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <!-- CHA block END -->
            
            </div>
            <!-- DnD Abilities & Skills END -->

            <!-- DnD Spells & Inventory START -->
            <div class="row">
              
              <!-- DnD Languages & Spells card start -->
              <div class="col-lg-6 pr-1 pl-0"><div class="card bg-faded card-block d-block mb-4 table-responsive"  style="border:none;">
                
                <h1 class="text-muted display-4  mb-4" style="border-bottom:1px solid;"></i> Skills & Feats</h1>
                
                <div style="padding-right: 15px;">
                  
                  <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  <i class="fa fa-angle-right" aria-hidden="true"></i> Undercommon  <i class="fa fa-angle-right" aria-hidden="true"></i> Orc  <i class="fa fa-angle-right" aria-hidden="true"></i> Elven  <i class="fa fa-angle-right" aria-hidden="true"></i> Infernal
                  </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 text-muted px-1 pt-0 pb-1">Cantrips</td>
                        <td class="text-uppercase text-left text-muted 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="http://www.d20pfsrd.com/magic/all-spells/d/detect-magic/">Detect Magic</a></li>
                            <li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/magic/all-spells/p/prestidigitation/">Prestidigitation</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="http://www.d20pfsrd.com/magic/all-spells/m/magic-missile/">Magic Missle</a></li>
                            <li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/magic/all-spells/c/cure-light-wounds/">Cute Light 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 Scrolls -->
                        <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 -->Low-Light Vision
                  </p>
                  <p style="font-size:9pt;" class="pl-3">
                    <!-- !FILL! description -->Characters with low-light vision have eyes that are so sensitive to light that they can see twice as far as normal in dim light. Characters with low-light vision can see outdoors on a moonlit night as well as they can during the day.
                  </p>
                  <!-- Trait END- Copypaste to add more -->
                </div>
              </div></div>
              <!-- DnD Languages & Spells card end -->
              
              <!-- DnD Items card start -->
              <div class="col-lg-6 pr-1"><div class="card mb-4 card-block bg-faded d-block table-responsive" style="border:0px;">
                
                <h1 class="display-4 text-right text-muted  mb-4" style="border-bottom:1px solid;">Inventory</h1>
                
                <p class="text-uppercase text-left text-muted px-1 pt-0 pb-1 mb-0">Items</p>
                <ul class="list-unstyled mb-0" style="font-size:9pt;">
                  <!-- List of items -->
                  <!-- !FILL! --><li><i class="fa fa-angle-right" aria-hidden="true"></i> <a href="http://www.d20pfsrd.com/magic/all-spells/r/read-magic/">Thieves' Tools (masterwork, 100GC)</a></li>
                  <!-- !FILL! --><li><i class="fa fa-angle-right" aria-hiddecn="true"></i> <a href="http://www.d20pfsrd.com/magic/all-spells/r/read-magic/">Tiny Glass Sculpture (stolen, 2GC)</a></li><!-- copypaste to add more -->
                </ul><br>
                
                <p class="text-uppercase text-left text-muted px-1 pt-0 pb-1 mb-0">Equipment</p>
                <ul class="list-unstyled mb-0"  style="font-size:9pt;">
                  <!-- List of equipment and armor -->
                  <!-- !FILL! --><li class="text-muted"><i class="fa fa-angle-right" aria-hidden="true"></i> Leather Amor (light armor, AC +2)</li>
                  <!-- !FILL! --><li class="text-muted"><i class="fa fa-angle-right" aria-hidden="true"></i> Necklace (Natural AC +1)</li><!-- copypaste to add more -->
                </ul>
                
                <p style="font-size:9pt;"><!-- write here to add things without bullet list--></p>
                
              </div></div>
              
            </div>
            <!-- DnD Spells & Inventory END -->
            
            </div>
            <!------------- TAB THREE END ---------------------->
               
               

          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="text-left">Layout by rooty | <a href="http://toyhou.se/1390836">codes</a></p>
</div>
  

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 ♪♫♬

Details

Languages

 Common   Undercommon   Orc   Elven   Infernal


Expertises

 Stealth (Hide in Plain Sight)   Disable Device   Knife Master   Shadows


Notable Items

 A Knife

No!!!

scan_2_c_ss_by_milay-dbql5r1.png

About

This is where you can write about your character!

  • You can also
  • add a bullet list

Add a new paragraph like this.

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.

unknown.png
[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.

imgres_by_milay-db5t2x3.jpg

Name | title/class

Description


imgres_by_milay-db5t2x3.jpg

title/class | Name

description


imgres_by_milay-db5t2x3.jpg

Name | title/class

Description


imgres_by_milay-db5t2x3.jpg

title/class | Name

description


LVL
1
Hero
Alignment
CN
Proficiency
+2
HP
30
HD
4d8
AC
18
Armor  12
Shield  +2
Dex  +2
Ini
+2
Movement
30
Spell
Ability

+3
Spell
DC

14
Spell
Attack

+5
Simple    Bludgeoning    Melee
Mace
Hit +3 Dmg 1w8+1 Range -
 
Simple    Piercing    Melee
Dagger
Hit +1 Dmg 1w4+1 Range 20/60
Finesse, Light, Range, Thrown
Simple    Piercing    Ranged
Light Crossbow
Hit +1 Dmg 1w8+1 Range  80/320
Loading, Range, Two-Handed
?    ?    ?
-
Hit - Dmg - Range -
 
STR  10
Mod
+0

Save
+0
/Adv
Athletics +0
DEX  10
Mod
+0

Save
+0
/Adv
Acrobatics +0
Sleight of Hand +0
Stealth +0
CON  10
Mod
+0

Save
+0
/Adv
INT  10
Mod
+0

Save
+0
/Adv
Arcana +0
History +0
Investigation +0
Nature +0
Religion +0
WIS  10
Mod
+0

Save
+0
/Adv
Animal Handle +0
Insight +0
Medicine +0
Perception +0
Survival +0
CHA  10
Mod
+0

Save
+0
/Adv
Deception +0
Intimidation +0
Performance +0
Persuasion +0

Skills & Feats

Languages

 Common   Undercommon   Orc   Elven   Infernal


Cantrips Spells Techniques

Low-Light Vision

Characters with low-light vision have eyes that are so sensitive to light that they can see twice as far as normal in dim light. Characters with low-light vision can see outdoors on a moonlit night as well as they can during the day.

Inventory

Items


Equipment

  •  Leather Amor (light armor, AC +2)
  •  Necklace (Natural AC +1)

Layout by rooty | codes