API tools faq
paste
SparklyLightus

D&D: Extensive

SparklyLightus
Feb 1st, 2021 (edited)
844
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.36 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-2 row no-gutters">
  2.    
  3. <!-- LEFT - STATS -->
  4. <div class="col-sm-3 col-lg-2">
  5.     <div id="stats" class="m-0 row sticky-top">
  6.         <!-- STRENGTH -->
  7.         <div class="p-0 col-6 col-sm-12">
  8.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  9.                 <h1 class="m-0 text-primary">0</h1>
  10.                 <p class="m-0 text-secondary"> +0</p>
  11.                 <!-- COLLAPSE -->
  12.                 <a href="#strength" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">STR <i class="fas fa-caret-down"></i></a>
  13.                 <div id="strength" data-parent="#stats" class="collapse text-left">
  14.                     <div class="p-2 card rounded-0 border-0">
  15.                         <p class="m-0">Athletics
  16.                             <span class="pull-right text-secondary">+0</span></p>
  17.                     </div>
  18.                 </div><!-- end collapse -->
  19.             </div>
  20.         </div>
  21.         <!-- DEXTERITY -->
  22.         <div class="p-0 col-6 col-sm-12">
  23.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  24.                 <h1 class="m-0 text-primary">0</h1>
  25.                 <p class="m-0 text-secondary">+0</p>
  26.                 <!-- COLLAPSE -->
  27.                 <a href="#dexterity" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">DEX <i class="fas fa-caret-down"></i></a>
  28.                 <div id="dexterity" data-parent="#stats" class="collapse text-left">
  29.                     <div class="p-2 card rounded-0 border-0">
  30.                         <p class="m-0">Acrobatics
  31.                             <span class="pull-right text-secondary">+0</span></p>
  32.                         <p class="m-0">Sleight of hand
  33.                             <span class="pull-right text-secondary">+0</span></p>
  34.                         <p class="m-0">Stealth
  35.                             <span class="pull-right text-secondary">+0</span></p>
  36.                     </div>
  37.                 </div><!-- end collapse -->
  38.             </div>
  39.         </div>
  40.         <!-- CONSTITUTION -->
  41.         <div class="p-0 col-6 col-sm-12">
  42.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  43.                 <h1 class="m-0 text-primary">0</h1>
  44.                 <p class="m-0 text-secondary">+0</p>
  45.                 <!-- COLLAPSE -->
  46.                 <a class="p-1 btn btn-secondary rounded-0">CON</a>
  47.                 <!-- end collapse -->
  48.             </div>
  49.         </div>
  50.         <!-- INTELLIGENCE -->
  51.         <div class="p-0 col-6 col-sm-12">
  52.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  53.                 <h1 class="m-0 text-primary">0</h1>
  54.                 <p class="m-0 text-secondary">+0</p>
  55.                 <!-- COLLAPSE -->
  56.                 <a href="#intelligence" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">INT <i class="fas fa-caret-down"></i></a>
  57.                 <div id="intelligence" data-parent="#stats" class="collapse text-left">
  58.                     <div class="p-2 card rounded-0 border-0">
  59.                         <p class="m-0">Arcana
  60.                             <span class="pull-right text-secondary">+0</span></p>
  61.                         <p class="m-0">History
  62.                             <span class="pull-right text-secondary">+0</span></p>
  63.                         <p class="m-0">Investigation
  64.                             <span class="pull-right text-secondary">+0</span></p>
  65.                         <p class="m-0">Nature
  66.                             <span class="pull-right text-secondary">+0</span></p>
  67.                         <p class="m-0">Religion
  68.                             <span class="pull-right text-secondary">+0</span></p>
  69.                     </div>
  70.                 </div><!-- end collapse -->
  71.             </div>
  72.         </div>
  73.         <!-- WISDOM -->
  74.         <div class="p-0 col-6 col-sm-12">
  75.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  76.                 <h1 class="m-0 text-primary">0</h1>
  77.                 <p class="m-0 text-secondary">+0</p>
  78.                 <!-- COLLAPSE -->
  79.                 <a href="#wisdom" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">WIS <i class="fas fa-caret-down"></i></a>
  80.                 <div id="wisdom" data-parent="#stats" class="collapse text-left">
  81.                     <div class="p-2 card rounded-0 border-0">
  82.                         <p class="m-0">Animal Handling
  83.                             <span class="pull-right text-secondary">+0</span></p>
  84.                         <p class="m-0">Insight
  85.                             <span class="pull-right text-secondary">+0</span></p>
  86.                         <p class="m-0">Medicine
  87.                             <span class="pull-right text-secondary">+0</span></p>
  88.                         <p class="m-0">Perception
  89.                             <span class="pull-right text-secondary">+0</span></p>
  90.                         <p class="m-0">Survival
  91.                             <span class="pull-right text-secondary">+0</span></p>
  92.                     </div>
  93.                 </div><!-- end collapse -->
  94.             </div>
  95.         </div>
  96.         <!-- CHARISMA -->
  97.         <div class="p-0 col-6 col-sm-12">
  98.             <div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
  99.                 <h1 class="m-0 text-primary">0</h1>
  100.                 <p class="m-0 text-secondary">+0</p>
  101.                 <!-- COLLAPSE -->
  102.                 <a href="#charisma" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">CHA <i class="fas fa-caret-down"></i></a>
  103.                 <div id="charisma" data-parent="#stats" class="collapse text-left">
  104.                     <div class="p-2 card rounded-0 border-0">
  105.                         <p class="m-0">Deception
  106.                             <span class="pull-right text-secondary">+0</span></p>
  107.                         <p class="m-0">Intimidation
  108.                             <span class="pull-right text-secondary">+0</span></p>
  109.                         <p class="m-0">Performance
  110.                             <span class="pull-right text-secondary">+0</span></p>
  111.                         <p class="m-0">Persuasion
  112.                             <span class="pull-right text-secondary">+0</span></p>
  113.                     </div>
  114.                 </div><!-- end collapse -->
  115.             </div>
  116.         </div>
  117.         <!-- CREDIT, DON'T MOVE -->
  118.         <div class="p-0 col-12 text-center">
  119.             <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  120.         </div>
  121.     </div>
  122. </div>
  123. <!-- RIGHT -->
  124. <div class="col-sm-9 col-lg-10">
  125.     <!-- NAVIGATION -->
  126.     <div class="sticky-top text-uppercase hidden-sm-down">
  127.         <div class="m-1 p-1 card rounded-0 border-0 bg-faded">
  128.             <p class="m-0">
  129.                 <a href="#intro">Introduction</a> •
  130.                 <a href="#about">About</a> •
  131.                 <a href="#story">Story/Tastes/Trivia</a> •
  132.                 <a href="#proficiencies">Proficiency/Inventory</a> •
  133.                 <a href="#attacks">Attacks/Spells</a> •
  134.                 <a href="#links">Links</a>
  135.             </p>
  136.         </div>
  137.     </div>
  138.     <!-- BIOGRAPHY -->
  139.     <div class="m-1 card bg-faded rounded-0 border-0">
  140.         <!-- INTRODUCTION -->
  141.         <div id="intro" class="m-1 p-2 card border-0 rounded-0">
  142.             <div class="m-0 row">
  143.                 <!-- NAME -->
  144.                 <div class="p-1 my-auto col-lg-6 text-center">
  145.                     <h1 class="m-0 mt-2 display-3">Name</h1>
  146.                     <p class="m-1"><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</i></p>
  147.                     <div class="m-1 card border-bottom-0"></div>
  148.                     <p class="m-1 text-secondary font-italic">
  149.                         trait <i class="fas fa-star"></i>
  150.                         trait <i class="fas fa-star"></i>
  151.                         trait
  152.                     </p>
  153.                 </div>
  154.                 <!-- SUMMARY -->
  155.                 <div class="p-0 col-lg-6" style="max-height: 150px; overflow: auto;">
  156.                     <h1 class="m-0 text-primary">Summary</h1><hr class="m-0 mt-1">
  157.                     <p class="m-1">Introduce your character here. This box will scroll. Phasellus molestie iaculis enim, a malesuada dui vulputate non. Proin blandit massa id varius imperdiet. Aenean nec venenatis nunc. Pellentesque facilisis condimentum metus, non ullamcorper massa volutpat quis. Mauris mollis purus in nisl maximus ullamcorper. Nunc sodales lectus metus. Vestibulum laoreet, risus in dapibus laoreet, ex metus eleifend purus, eu mollis dui ligula et tellus.</p>
  158.                 </div>
  159.             </div>
  160.         </div> <!-- end introduction -->
  161.         <!-- ABOUT -->
  162.         <div id="about">
  163.             <div class="m-1 row text-center">
  164.                 <div class="p-1 col-6 col-md">
  165.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Proficiency Bonus</span><br> +0</h5>
  166.                 </div>
  167.                 <div class="p-1 col-6 col-md">
  168.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Passive Wisdom</span><br> 0</h5>
  169.                 </div>
  170.                 <div class="p-1 col-6 col-md">
  171.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Armor Class</span><br> 0</h5>
  172.                 </div>
  173.                 <div class="p-1 col-6 col-md">
  174.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Initiative</span><br> 0</h5>
  175.                 </div>
  176.                 <div class="p-1 col-6 col-md">
  177.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Speed</span><br> 0ft</h5>
  178.                 </div>
  179.                 <div class="p-1 col-6 col-md">
  180.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Hit Points</span><br> 0</h5>
  181.                 </div>
  182.                 <div class="p-1 col-6 col-md">
  183.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Hit Dice</span><br> 1d6</h5>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.         <div class="m-1 p-0 card border-0 rounded-0">
  188.             <div class="m-1 row text-center">
  189.                 <div class="p-1 col-6 col-md">
  190.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Age</span><br> content</h5>
  191.                 </div>
  192.                 <div class="p-1 col-6 col-md">
  193.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Gender</span><br> content</h5>
  194.                 </div>
  195.                 <div class="p-1 col-6 col-md">
  196.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Height</span><br> content</h5>
  197.                 </div>
  198.                 <div class="p-1 col-6 col-md">
  199.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Weight</span><br> content</h5>
  200.                 </div>
  201.                 <div class="p-1 col-6 col-md">
  202.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Build</span><br> content</h5>
  203.                 </div>
  204.                 <hr class="p-0 m-1 col-12">
  205.                
  206.                 <div class="p-1 col-6 col-md">
  207.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Class</span><br> content</h5>
  208.                 </div>
  209.                 <div class="p-1 col-6 col-md">
  210.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Level</span><br> content</h5>
  211.                 </div>
  212.                 <div class="p-1 col-6 col-md">
  213.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Race</span><br> content</h5>
  214.                 </div>
  215.                 <div class="p-1 col-6 col-md">
  216.                     <h5 class="m-0"><span class="mb-1 badge bg-secondary">Background</span><br> content</h5>
  217.                 </div>
  218.             </div>
  219.         </div>
  220.         <div class="m-0 row">
  221.             <!-- TRAITS/FEATURES -->
  222.             <div class="m-1 p-1 col-lg card border-0 rounded-0">
  223.                 <h1 class="m-0 text-primary">Traits & Features</h1><hr class="m-0 mt-1">
  224.                <!-- RACE -->
  225.                <div class="m-1 p-1">
  226.                    <h5 class="m-0 text-secondary">Race: [race]</h5>
  227.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  228.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  229.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  230.                </div>
  231.                <!-- CLASS -->
  232.                <div class="m-1 p-1">
  233.                    <h5 class="m-0 text-secondary">Class: [class]</h5>
  234.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  235.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  236.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  237.                </div>
  238.                <!-- BACKGROUND -->
  239.                <div class="m-1 p-1">
  240.                    <h5 class="m-0 text-secondary">Background: [background]</h5>
  241.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  242.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  243.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  244.                </div>
  245.            </div>
  246.            <!-- ALIGNMENT -->
  247.            <div class="m-1 p-1 col-lg card border-0 rounded-0">
  248.                <h1 class="m-0 text-primary">Alignment</h1><hr class="m-0 mt-1">
  249.                <p class="m-0 ml-4"><b>Alignment here:</b> [alignment content/explanation]</p>
  250.                <!-- PERSONALITY -->
  251.                <div class="m-1 p-1">
  252.                    <h5 class="m-0 text-secondary">Personality Traits:</h5>
  253.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  254.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  255.                </div>
  256.                <!-- IDEALS -->
  257.                <div class="m-1 p-1">
  258.                    <h5 class="m-0 text-secondary">Ideals:</h5>
  259.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  260.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  261.                </div>
  262.                <!-- BONDS -->
  263.                <div class="m-1 p-1">
  264.                    <h5 class="m-0 text-secondary">Bonds:</h5>
  265.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  266.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  267.                </div>
  268.                <!-- FLAWS -->
  269.                <div class="m-1 p-1">
  270.                    <h5 class="m-0 text-secondary">Flaws:</h5>
  271.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  272.                    <p class="ml-3 m-0">Lorem ipsum.</p>
  273.                </div>
  274.            </div>
  275.        </div>
  276.        <!-- end about -->
  277.        <!-- NAV -->
  278.        <ul class="m-1 nav nav-pills rounded d-flex text-center">
  279.            <li class="nav-item flex-fill"><a data-toggle="tab" href="#background" role="tab" class="nav-link active" style="border-radius: 0px;">Story</a></li>
  280.             <li class="nav-item flex-fill"><a data-toggle="tab" href="#tastes" role="tab" class="nav-link" style="border-radius: 0px;">Tastes</a></li>
  281.             <li class="nav-item flex-fill"><a data-toggle="tab" href="#trivia" role="tab" class="nav-link" style="border-radius: 0px;">Trivia</a></li>
  282.         </ul>
  283.         <div id="story" class="tab-content m-1 p-1 card border-0 rounded-0" style="max-height: 300px; overflow: auto;">
  284.             <!-- STORY -->
  285.             <div class="tab-pane fade show active" id="background">
  286.                 <h1 class="m-0 text-primary">Story</h1><hr class="m-0 mt-1">
  287.                 <div class="m-1 p-1">
  288.                     <h5 class="m-0 text-secondary">HEADER</h5>
  289.                     <p class="m-0">This could be a campaign log or their backstory. This box will scroll. In a diam risus. Donec tortor sem, faucibus non aliquam in, sollicitudin non erat. Integer vel mi et arcu vehicula fermentum. Sed eu leo mattis mi euismod convallis. Donec non porttitor nisl. Etiam eget dolor eu leo laoreet blandit. Quisque vel sapien ante. Nulla rutrum erat vitae velit elementum, sed viverra eros euismod.</p>
  290.                    
  291.                     <h5 class="m-0 text-secondary">HEADER</h5>
  292.                     <p class="m-0">Fusce vitae magna ut mauris congue viverra eu a ipsum. Donec porta ac dolor eget blandit. Maecenas lorem nisl, auctor et nulla vel, semper egestas ligula. Duis blandit orci at elit condimentum, at consequat leo molestie. Quisque malesuada metus lorem, in dictum mi imperdiet sit amet.</p>
  293.                     <p class="m-0">Integer vitae tincidunt sapien. Nunc aliquet aliquam ex, sit amet ullamcorper ipsum finibus id. Ut commodo enim sed tellus malesuada, et imperdiet sem ullamcorper. Vivamus nec cursus sem. Aenean nec lobortis sem, in iaculis urna.</p>
  294.                 </div>
  295.             </div>
  296.             <!-- TASTES -->
  297.             <div class="tab-pane fade" id="tastes">
  298.                 <h1 class="m-0 text-primary">Tastes</h1><hr class="m-0 mt-1">
  299.                 <div class="m-1 p-1 row">
  300.                     <!-- LIKES -->
  301.                     <div class="p-0 col-md">
  302.                         <h5 class="m-0 text-secondary">Likes</h5>
  303.                             <p class="ml-3 m-0">Lorem ipsum.</p>
  304.                             <p class="ml-3 m-0">Lorem ipsum.</p>
  305.                             <p class="ml-3 m-0">Lorem ipsum.</p>
  306.                     </div>
  307.                     <!-- DISLIKES -->
  308.                     <div class="p-0 col-md">
  309.                         <h5 class="m-0 text-secondary">Dislikes</h5>
  310.                             <p class="mr-3 m-0">Lorem ipsum.</p>
  311.                             <p class="mr-3 m-0">Lorem ipsum.</p>
  312.                             <p class="mr-3 m-0">Lorem ipsum.</p>
  313.                     </div>
  314.                 </div>
  315.             </div>
  316.             <!-- PERSONALITY -->
  317.             <div class="tab-pane fade" id="trivia">
  318.                 <h1 class="m-0 text-primary">Trivia</h1><hr class="m-0 mt-1">
  319.                 <div class="m-1 p-1">
  320.                     <h5 class="m-0 text-secondary">Personality</h5>
  321.                     <p class="m-0">Describe the character's personality in more detail here if you want to. This box will scroll. In a diam risus. Donec tortor sem, faucibus non aliquam in, sollicitudin non erat. Integer vel mi et arcu vehicula fermentum. Sed eu leo mattis mi euismod convallis. Donec non porttitor nisl. Etiam eget dolor eu leo laoreet blandit. Quisque vel sapien ante. Nulla rutrum erat vitae velit elementum, sed viverra eros euismod.</p>
  322.                     <p class="m-0">Integer vitae tincidunt sapien. Nunc aliquet aliquam ex, sit amet ullamcorper ipsum finibus id. Ut commodo enim sed tellus malesuada, et imperdiet sem ullamcorper. Vivamus nec cursus sem. Aenean nec lobortis sem, in iaculis urna.</p>
  323.                    
  324.                     <h5 class="m-0 text-secondary">Notes</h5>
  325.                     <ul class="m-0 pl-4">
  326.                         <li>Nullam quis ante venenatis, condimentum dui ac, aliquet magna.</li>
  327.                         <li>Vivamus congue lectus bibendum aliquam tempor.</li>
  328.                         <li>Sed aliquet, dui at vestibulum sollicitudin, purus sapien finibus neque, eu egestas mauris nunc dapibus dolor.</li>
  329.                         <li>Pellentesque a viverra nunc, faucibus lobortis nunc. </li>
  330.                     </ul>
  331.                 </div>
  332.             </div>
  333.         </div>
  334.         <!-- end nav -->
  335.         <!-- PANELS: PROFICIENCIES, INVENTORY, ATTACKS, SPELLS -->
  336.         <div class="m-0 row">
  337.             <!-- PROFICIENCIES -->
  338.             <div id="proficiencies" class="m-1 p-2 col-md card border-0 rounded-0">
  339.                 <h1 class="m-0 text-primary">Proficiencies</h1><hr class="m-0 mt-1">
  340.                 <!--CONTENT -->
  341.                 <div class="m-0 row">
  342.                     <div class="p-1 col-6">
  343.                         <h5 class="m-0 text-secondary">Armor</h5>
  344.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  345.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  346.                     </div>
  347.                     <div class="p-1 col-6">
  348.                         <h5 class="m-0 text-secondary">Weapons</h5>
  349.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  350.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  351.                     </div>
  352.                     <div class="p-1 col-6">
  353.                         <h5 class="m-0 text-secondary">Tools</h5>
  354.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  355.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  356.                     </div>
  357.                     <div class="p-1 col-6">
  358.                         <h5 class="m-0 text-secondary">Saving Throws</h5>
  359.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  360.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  361.                     </div>
  362.                     <div class="p-1 col-6">
  363.                         <h5 class="m-0 text-secondary">Skills</h5>
  364.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  365.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  366.                     </div>
  367.                     <div class="p-1 col-6">
  368.                         <h5 class="m-0 text-secondary">Languages</h5>
  369.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  370.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  371.                     </div>
  372.                 </div>
  373.             </div>
  374.             <!-- INVENTORY -->
  375.             <div class="m-1 p-2 col-md card border-0 rounded-0">
  376.                 <!--  -->
  377.                 <h1 class="m-0 text-primary">Inventory</h1><hr class="m-0 mt-1">
  378.                     <p class="ml-3 m-0"><b>Max carrying capacity:</b> 0lbs.</p>
  379.                     <p class="ml-3 m-0"><b>Max pushing capacity:</b> 0lbs.</p>
  380.                 <!-- CONTENT -->
  381.                 <div class="m-0 row">
  382.                     <div class="p-1 col-6">
  383.                         <h5 class="m-0 text-secondary">Weapons</h5>
  384.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  385.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  386.                     </div>
  387.                     <div class="p-1 col-6">
  388.                         <h5 class="m-0 text-secondary">Armor/Clothing</h5>
  389.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  390.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  391.                     </div>
  392.                     <div class="p-1 col-6">
  393.                         <h5 class="m-0 text-secondary">Miscellaneous</h5>
  394.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  395.                         <p class="ml-3 m-0">Lorem ipsum.</p>
  396.                     </div>
  397.                     <div class="p-1 col-6" style="font-size:17px;">
  398.                         <h5 class="m-0 text-secondary">Currency</h5>
  399.                         <p class="ml-3 m-0"><a data-toggle="tooltip" title="Gold Pieces" class="mb-1 badge bg-info">GP</a> 0</p>
  400.                         <p class="ml-3 m-0"><a data-toggle="tooltip" title="Silver Pieces" class="mb-1 badge bg-info">SP</a> 0</p>
  401.                         <p class="ml-3 m-0"><a data-toggle="tooltip" title="Copper Pieces" class="mb-1 badge bg-info">CP</a> 0</p>
  402.                         <p class="ml-3 m-0"><a class="mb-1 badge bg-info">Gems</a> 0 (0GP each)</p>
  403.                     </div>
  404.                 </div>
  405.             </div>
  406.         </div>
  407.         <div class="m-0 row">
  408.             <!-- ATTACKS -->
  409.             <div id="attacks" class="m-1 p-2 col-md card border-0 rounded-0">
  410.                 <h1 class="m-0 text-primary">Attacks</h1><hr class="m-0 mt-1">
  411.                 <div class="m-1 p-1 flex-column">
  412.                     <!-- FIRST ONE IS AN EXAMPLE, REST ARE BLANK -->
  413.                     <!-- ATTACK 1 -->
  414.                     <a href="#atk1" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Rapier <i class="fas fa-caret-down"></i></a>
  415.                     <div id="atk1" data-parent="#attacks" class="collapse show text-left" style="font-size: 17px;">
  416.                         <p class="m-0"><a class="mb-1 badge bg-info">Type</a> Melee Weapon/Piercing</p>
  417.                         <p class="m-0"><a class="mb-1 badge bg-info">Damage</a> 1d8</p>
  418.                         <p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +3</p>
  419.                     </div><!-- end atk 1 -->
  420.                     <!-- ATTACK 2 -->
  421.                     <a href="#atk2" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Name <i class="fas fa-caret-down"></i></a>
  422.                     <div id="atk2" data-parent="#attacks" class="collapse text-left" style="font-size: 17px;">
  423.                         <p class="m-0"><a class="mb-1 badge bg-info">Type</a> Content</p>
  424.                         <p class="m-0"><a class="mb-1 badge bg-info">Damage</a> Content</p>
  425.                         <p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +0</p>
  426.                     </div><!-- end atk 2 -->
  427.                     <!-- ATTACK 3 -->
  428.                     <a href="#atk3" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Name <i class="fas fa-caret-down"></i></a>
  429.                     <div id="atk3" data-parent="#attacks" class="collapse text-left" style="font-size: 17px;">
  430.                         <p class="m-0"><a class="mb-1 badge bg-info">Type</a> Content</p>
  431.                         <p class="m-0"><a class="mb-1 badge bg-info">Damage</a> Content</p>
  432.                         <p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +0</p>
  433.                     </div><!-- end atk 3 -->
  434.                 </div>
  435.             </div>
  436.             <!-- SPELLS -->
  437.             <div class="m-1 p-2 col-md card border-0 rounded-0">
  438.                 <h1 class="m-0 text-primary">Spells</h1><hr class="m-0 mt-1">
  439.                 <div class="m-1 p-1">
  440.                     <h5 class="m-0 text-secondary">Name</h5>
  441.                     <p class="ml-3 m-0">Lorem ipsum.</p>
  442.                 </div>
  443.                 <div class="m-1 p-1">
  444.                     <h5 class="m-0 text-secondary">Name</h5>
  445.                     <p class="ml-3 m-0">Lorem ipsum.</p>
  446.                 </div>
  447.                 <div class="m-1 p-1">
  448.                     <h5 class="m-0 text-secondary">Name</h5>
  449.                     <p class="ml-3 m-0">Lorem ipsum.</p>
  450.                 </div>
  451.             </div>
  452.         </div>
  453.         <!-- end panels -->
  454.     </div>
  455.     <!-- LINKS -->
  456.     <div class="m-1 card bg-faded rounded-0 border-0">
  457.         <div id="links" class="m-1 p-1 card border-0 rounded-0">
  458.             <!-- CHARACTER -->
  459.             <div class="row m-0">
  460.                 <!-- IMAGE -->
  461.                 <img class="m-1 p-1 col-sm-auto img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  462.                 <!-- INFO -->
  463.                 <div class="p-1 col-sm">
  464.                     <a href="LINK"><h1 class="m-0 display-4">Name</h1></a>
  465.                     <p class="m-0">
  466.                         Relationship •
  467.                         <!-- CHANGE FAS TO FAL FOR OUTLINE ONLY -->
  468.                         <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fal fa-star"></i><i class="fal fa-star"></i>
  469.                     </p>
  470.                     <p>Describe relationship. This Box will expand. Nam et iaculis urna. Vivamus mattis accumsan suscipit. Praesent vulputate neque sed lorem luctus, eu condimentum urna eleifend. Nunc vel magna in enim euismod cursus a nec arcu. Nulla convallis pulvinar ipsum, ac efficitur massa aliquam in.</p>
  471.                 </div>
  472.             </div>
  473.             <!-- CHARACTER -->
  474.             <div class="row m-0">
  475.                 <!-- IMAGE -->
  476.                 <img class="m-1 p-1 col-sm-auto img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  477.                 <!-- INFO -->
  478.                 <div class="p-1 col-sm">
  479.                     <a href="LINK"><h1 class="m-0 display-4">Name</h1></a>
  480.                     <p class="m-0">
  481.                         Relationship •
  482.                         <!-- CHANGE FAS TO FAL FOR OUTLINE ONLY -->
  483.                         <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fal fa-star"></i><i class="fal fa-star"></i>
  484.                     </p>
  485.                     <p>Describe relationship. This Box will expand. Nam et iaculis urna. Vivamus mattis accumsan suscipit. Praesent vulputate neque sed lorem luctus, eu condimentum urna eleifend. Nunc vel magna in enim euismod cursus a nec arcu. Nulla convallis pulvinar ipsum, ac efficitur massa aliquam in.</p>
  486.                 </div>
  487.             </div>
  488.             <!-- ADD MORE ABOVE HERE -->
  489.         </div> <!-- end links -->
  490.     </div>
  491. </div>
  492.  
  493. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!