API tools faq
paste
SparklyLightus

Spoiler Masterlist

SparklyLightus
Sep 23rd, 2020 (edited)
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.22 KB | None | 0 0
raw download clone embed print report
  1. <!-- MAIN BODY -->
  2. <div class="m-1 card rounded-0 border-0 bg-faded">
  3.     <div class="m-1 card rounded-0 bg-faded">
  4.         <!-- NAME/TITLE -->
  5.         <h2 class="text-uppercase text-primary m-2">c:\[your username]\classified\NAME</h2>
  6.        
  7.         <!-- DIVIDER --><div class="card bg-primary rounded-0 mt-0 ml-1 mr-1 mb-2"></div>
  8.        
  9.         <!-- This is where you put some basic info about your character. This could be used to write down info about secretive characters, or just to remember who they are. -->
  10.         <h3 class="text-info m-2"><i class="fad fa-user"></i> Basics</h3>
  11.         <div class="card border-0 rounded-0">
  12.             <div class="row m-1">
  13.                 <!-- FIRST COL -->
  14.                 <div class="m-0 col-lg">
  15.                     <table class="border-0 w-100">
  16.                         <tbody>
  17.                             <tr>
  18.                                 <td class="text-muted col-lg-2">NAME</td>
  19.                                 <td class="text-right col-lg-2">INFO</td>
  20.                             </tr>
  21.                             <tr>
  22.                                 <td class="text-muted col-lg-2">AGE</td>
  23.                                 <td class="text-right col-lg-2">INFO</td>
  24.                             </tr>
  25.                             <tr>
  26.                                 <td class="text-muted col-lg-2">GENDER</td>
  27.                                 <td class="text-right col-lg-2">INFO</td>
  28.                             </tr>
  29.                         </tbody>
  30.                     </table>
  31.                 </div>
  32.                 <!-- SECOND COL -->
  33.                 <div class="m-0 col-lg">
  34.                     <table class="border-0 w-100">
  35.                         <tbody>
  36.                             <tr>
  37.                                 <td class="text-muted col-lg-2">BIRTHDAY</td>
  38.                                 <td class="text-right col-lg-2">INFO</td>
  39.                             </tr>
  40.                             <tr>
  41.                                 <td class="text-muted col-lg-2">RACE</td>
  42.                                 <td class="text-right col-lg-2">INFO</td>
  43.                             </tr>
  44.                             <tr>
  45.                                 <td class="text-muted col-lg-2">ROLE</td>
  46.                                 <td class="text-right col-lg-2">INFO</td>
  47.                             </tr>
  48.                         </tbody>
  49.                     </table>
  50.                 </div>
  51.                 <!-- THIRD COL -->
  52.                 <div class="m-0 col-lg">
  53.                     <table class="border-0 w-100">
  54.                         <tbody>
  55.                             <tr>
  56.                                 <td class="text-muted col-lg-2">OCCUPATION</td>
  57.                                 <td class="text-right col-lg-2">INFO</td>
  58.                             </tr>
  59.                             <tr>
  60.                                 <td class="text-muted col-lg-2">ORIENTATION</td>
  61.                                 <td class="text-right col-lg-2">INFO</td>
  62.                             </tr>
  63.                             <tr>
  64.                                 <td class="text-muted col-lg-2">STATUS</td>
  65.                                 <td class="text-right col-lg-2">INFO</td>
  66.                             </tr>
  67.                         </tbody>
  68.                     </table>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.        
  73.         <h3 class="text-info m-2"><i class="fad fa-bookmark"></i> Subheader1</h3>
  74.         <div class="card border-0 rounded-0">
  75.             <table class="table-hover border-0 w-100">
  76.                 <tbody>
  77.                     <!-- SPOILER 1 -->
  78.                         <!-- TITLE -->
  79.                     <tr>
  80.                         <td>SPOILER1:</td>
  81.                         <td class="text-right" style="font-size: 15px;">STATUS:
  82.                         <!-- status buttons - chose one -->
  83.                             <a data-toggle="tooltip" title="REVEALED"><i class="fas fa-check-circle text-success"></i></a>
  84.                             <a data-toggle="tooltip" title="HIDDEN"><i class="fas fa-times-circle text-danger"></i></a>
  85.                             <a data-toggle="tooltip" title="HINTED"><i class="fas fa-minus-circle text-warning"></i></a>
  86.                         </td>
  87.                     </tr>
  88.                         <!-- BODY -->
  89.                     <tr>
  90.                         <td class="text-muted" colspan="2"><p>Put your notes and details here. This whole box will grow with the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis, est vitae consectetur efficitur, felis massa consectetur augue, nec aliquet arcu odio eu nibh. Etiam non suscipit orci, quis scelerisque nulla. Pellentesque a ligula id purus interdum lacinia id et tortor. Sed aliquet massa quis libero lobortis, at luctus odio ultrices. Praesent condimentum augue eros. Nam rutrum, diam eget molestie faucibus, mauris libero sagittis nibh, quis sagittis risus ex ut nulla. Praesent vel sem felis.</p> </td>
  91.                     </tr>
  92.                    
  93.                     <!-- SPOILER 2 -->
  94.                         <!-- TITLE -->
  95.                     <tr>
  96.                         <td>SPOILER2:</td>
  97.                         <td class="text-right" style="font-size: 15px;">STATUS:
  98.                         <!-- status buttons - chose one -->
  99.                             <a data-toggle="tooltip" title="REVEALED"><i class="fas fa-check-circle text-success"></i></a>
  100.                             <a data-toggle="tooltip" title="HIDDEN"><i class="fas fa-times-circle text-danger"></i></a>
  101.                             <a data-toggle="tooltip" title="HINTED"><i class="fas fa-minus-circle text-warning"></i></a>
  102.                         </td>
  103.                     </tr>
  104.                         <!-- BODY -->
  105.                     <tr>
  106.                         <td class="text-muted" colspan="2"><p>Cras enim nunc, facilisis in quam at, hendrerit suscipit elit. Nunc vitae est et augue vestibulum euismod sit amet aliquet dui. In hendrerit ex egestas fermentum dignissim. Ut venenatis pellentesque lectus. Quisque vel dignissim sapien. Suspendisse potenti. Nunc in dignissim orci, quis congue nibh. Phasellus dignissim vulputate viverra. Aenean at aliquam orci, rhoncus gravida lacus. Phasellus at turpis libero. Aliquam tristique nunc purus, ut accumsan nisl maximus non. Fusce ut massa nisl.</p>
  107.                         <p>Nunc maximus mauris et eros cursus placerat. Etiam ultrices porta odio mollis posuere. Proin sit amet semper sem, vel ullamcorper metus. Etiam ante ipsum, tempus in tincidunt quis, auctor nec magna.</p></td>
  108.                     </tr>
  109.                    
  110.                     <!-- put more spoilers here -->
  111.                 </tbody>
  112.             </table>
  113.         </div>
  114.        
  115.         <h3 class="text-info m-2"><i class="fad fa-bookmark"></i> Subheader2</h3>
  116.         <div class="card border-0 rounded-0">
  117.             <table class="table-hover border-0 w-100">
  118.                 <tbody>
  119.                     <!-- SPOILER 3 -->
  120.                         <!-- TITLE -->
  121.                     <tr>
  122.                         <td>SPOILER3:</td>
  123.                         <td class="text-right" style="font-size: 15px;">STATUS:
  124.                         <!-- status buttons - chose one -->
  125.                             <a data-toggle="tooltip" title="REVEALED"><i class="fas fa-check-circle text-success"></i></a>
  126.                             <a data-toggle="tooltip" title="HIDDEN"><i class="fas fa-times-circle text-danger"></i></a>
  127.                             <a data-toggle="tooltip" title="HINTED"><i class="fas fa-minus-circle text-warning"></i></a>
  128.                         </td>
  129.                     </tr>
  130.                         <!-- BODY -->
  131.                     <tr>
  132.                         <td class="text-muted" colspan="2"><p>Nam leo leo, ultrices eget ex id, fringilla consectetur neque. Duis ornare sapien sed justo eleifend ornare. Aliquam blandit in mi quis volutpat. Vestibulum et diam sed justo malesuada viverra. Nunc non pellentesque dolor. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat ante nisl. Aenean faucibus eu enim eget mollis. Praesent ac scelerisque magna, ut volutpat ipsum. </p></td>
  133.                     </tr>
  134.                    
  135.                     <!-- SPOILER 4 -->
  136.                         <!-- TITLE -->
  137.                     <tr>
  138.                         <td>SPOILER4:</td>
  139.                         <td class="text-right" style="font-size: 15px;">STATUS:
  140.                         <!-- status buttons - chose one -->
  141.                             <a data-toggle="tooltip" title="REVEALED"><i class="fas fa-check-circle text-success"></i></a>
  142.                             <a data-toggle="tooltip" title="HIDDEN"><i class="fas fa-times-circle text-danger"></i></a>
  143.                             <a data-toggle="tooltip" title="HINTED"><i class="fas fa-minus-circle text-warning"></i></a>
  144.                         </td>
  145.                     </tr>
  146.                         <!-- BODY -->
  147.                     <tr>
  148.                         <td class="text-muted" colspan="2"><p>Vestibulum tempus neque ut mauris ornare dapibus vel nec nisl. Quisque interdum tincidunt ante et tincidunt. Etiam dignissim sem urna, ut porttitor lorem sodales eget. Nam volutpat lorem at tortor auctor elementum. Nunc ac nunc pretium, pulvinar est quis, tincidunt felis. Donec consectetur nec odio nec dapibus. Donec id mauris sit amet sem vestibulum vulputate a nec est. Maecenas at cursus ligula, dictum pellentesque turpis. Nulla justo enim, lacinia non neque et, varius tempus leo. Phasellus vel nisl luctus, tincidunt odio et, malesuada lectus. Proin accumsan dui sed nunc varius, ut consectetur sapien porttitor. Quisque sagittis turpis elit, ac fermentum nisl molestie a. Aliquam tincidunt odio magna, a laoreet enim sagittis ac.</p></td>
  149.                     </tr>
  150.                    
  151.                     <!-- put more spoilers here -->
  152.                 </tbody>
  153.             </table>
  154.         </div>
  155.         <!-- put more subheaders above here -->
  156.     </div>
  157. </div>
  158.  
  159. <!-- CREDIT, DON'T MOVE -->
  160. <div class="text-center">
  161.     <a data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  162. </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!