API tools faq
paste
Keileon

Dossier

Keileon
Oct 23rd, 2023
1,052
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 22.62 KB | None | 0 0
raw download clone embed print report
  1. <div class="mx-auto rounded p-1" style="width:70%; font-family: 'Trebuchet MS'; color:#ffffff;
  2.            background-color:#212121; background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment:absolute;
  3.            background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/72489412_rh9SAC3RSBqs8df.jpg);
  4.            border-radius: 10px; border:5px solid #000000; position: relative;">
  5.  
  6.  
  7.     <!-- HEADER -->
  8.     <div class="text-center position-relative" style="font-size: 3em">
  9.         <p class="mt-2 font-weight-bold" style="font-variant: small-caps;">
  10.             Character Name
  11.         </p>
  12.         <hr style="border:1px dashed #000000; width:90%">
  13.         <span class="fa-stack fa-2x icon-stack" style="position: absolute; top: 1px; right: -15px; z-index: 1; opacity: 0.5; color:#670000; transform: rotate(25deg);">
  14.             <i class="far fa-hexagon fa-stack-2x"></i>
  15.             <i class="far fa-tower-observation fa-stack-1x pl-1"></i>
  16.         </span>
  17.     </div>
  18.  
  19.     <!-- BASICS -->
  20.     <div class="row">
  21.         <!-- IMAGE -->
  22.         <div class="col-5">
  23.             <div class="pt-3 pl-5 pb-3">
  24.                 <img src="https://via.placeholder.com/300" style="max-height:300px; max-width:300px; border-radius: 10px; border:5px solid #000000;">
  25.             </div>
  26.         </div>
  27.        
  28.         <!-- INFO -->
  29.         <div class="col-7">
  30.             <div class="pt-3 pr-4 pl-3 pb-3 rounded" style="background-color:rgba(0,0,0,0.3);">
  31.                 <h1 class="text-center" style="font-variant: small-caps;">Information</h1>
  32.                 <hr style="border:1px dashed #000000; width:90%">
  33.                 <div class="col-12 mb-2">
  34.                     <span class="text-uppercase" style="letter-spacing:1px;">
  35.                         CATEGORY
  36.                     </span>
  37.                     <span class="pull-right">
  38.                         Content
  39.                     </span>
  40.                 </div>
  41.                 <div class="col-12 mb-2">
  42.                     <span class="text-uppercase" style="letter-spacing:1px;">
  43.                         CATEGORY
  44.                     </span>
  45.                     <span class="pull-right">
  46.                         Content
  47.                     </span>
  48.                 </div>
  49.                 <div class="col-12 mb-2">
  50.                     <span class="text-uppercase" style="letter-spacing:1px;">
  51.                         CATEGORY
  52.                     </span>
  53.                     <span class="pull-right">
  54.                         Content
  55.                     </span>
  56.                 </div>
  57.                 <div class="col-12 mb-2">
  58.                     <span class="text-uppercase" style="letter-spacing:1px;">
  59.                         CATEGORY
  60.                     </span>
  61.                     <span class="pull-right">
  62.                         Content
  63.                     </span>
  64.                 </div>
  65.                 <div class="col-12 mb-2">
  66.                     <span class="text-uppercase" style="letter-spacing:1px;">
  67.                         CATEGORY
  68.                     </span>
  69.                     <span class="pull-right">
  70.                         Content
  71.                     </span>
  72.                 </div>
  73.                 <div class="col-12 mb-2">
  74.                     <span class="text-uppercase" style="letter-spacing:1px;">
  75.                         CATEGORY
  76.                     </span>
  77.                     <span class="pull-right">
  78.                         Content
  79.                     </span>
  80.                 </div>
  81.                 <div class="col-12 mb-2">
  82.                     <span class="text-uppercase" style="letter-spacing:1px;">
  83.                         CATEGORY
  84.                     </span>
  85.                     <span class="pull-right">
  86.                         Content
  87.                     </span>
  88.                 </div>
  89.                 <div class="col-12">
  90.                     <span class="text-uppercase" style="letter-spacing:1px;">
  91.                         CATEGORY
  92.                     </span>
  93.                     <span class="pull-right">
  94.                         Content
  95.                     </span>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </div>
  100.    
  101.     <!-- POWERS -->
  102.     <div class="row">
  103.         <!-- INFO -->
  104.         <div class="col-6">
  105.             <div class="pt-3 pl-5 pr-3 pb-3 rounded" style="background-color:rgba(0,0,0,0.3);">
  106.                 <h1 class="text-center" style="font-variant: small-caps;">Power Information</h1>
  107.                 <hr style="border:1px dashed #000000; width:90%">
  108.                 <div class="col-12 mb-2">
  109.                     <span class="text-uppercase" style="letter-spacing:1px;">
  110.                         CATEGORY
  111.                     </span>
  112.                     <span class="pull-right">
  113.                         Content
  114.                     </span>
  115.                 </div>
  116.                 <div class="col-12 mb-2">
  117.                     <span class="text-uppercase" style="letter-spacing:1px;">
  118.                         CATEGORY
  119.                     </span>
  120.                     <span class="pull-right">
  121.                         Content
  122.                     </span>
  123.                 </div>
  124.                 <div class="col-12 mb-2">
  125.                     <span class="text-uppercase" style="letter-spacing:1px;">
  126.                         CATEGORY
  127.                     </span>
  128.                     <span class="pull-right">
  129.                         Content
  130.                     </span>
  131.                 </div>
  132.                 <div class="col-12">
  133.                     <span class="text-uppercase" style="letter-spacing:1px;">
  134.                         CATEGORY
  135.                     </span>
  136.                     <span class="pull-right">
  137.                         Content
  138.                     </span>
  139.                 </div>
  140.             </div>
  141.            
  142.             <!-- SKILLS -->
  143.             <div class="pt-3 pr-3 pl-5 pb-3 rounded" style="background-color:rgba(0,0,0,0.3);">
  144.                 <h1 class="text-center" style="font-variant: small-caps;">Skills</h1>
  145.                 <hr style="border:1px dashed #000000; width:90%">
  146.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  147.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  148.             </div>
  149.            
  150.             <!-- EQUIPMENT -->
  151.             <div class="pt-3 pr-3 pl-5 pb-3 rounded" style="background-color:rgba(0,0,0,0.3);">
  152.                 <h1 class="text-center" style="font-variant: small-caps;">Equipment</h1>
  153.                 <hr style="border:1px dashed #000000; width:90%">
  154.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  155.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  156.             </div>
  157.         </div>
  158.        
  159.         <!-- DESCRIPTION -->
  160.         <div class="col-6">
  161.             <div class="pt-3 pr-5 pl-3 pb-3 rounded" style="background-color:rgba(0,0,0,0.3); height:100%">
  162.                 <h1 class="text-center" style="font-variant: small-caps;">Power Description</h1>
  163.                 <hr style="border:1px dashed #000000; width:90%">
  164.                 <p class="ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  165.                 <p class="ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  166.                 <p class="ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  167.                 <p class="ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  168.                 <p class="ml-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  169.             </div>
  170.         </div>
  171.     </div>
  172.    
  173.     <!-- TABS -->
  174.     <!-- NAV BUTTONS -->
  175.     <ul class="mx-n1 mt-1 nav nav-pills row no-gutters text-center">
  176.         <li class="m-1 col nav-item rounded" style="border-radius: 10px; border:3px solid #000000;">
  177.             <a style="color: #ffffff; mix-blend-mode: overlay;" data-toggle="tab" class="p-1 px-2 w-100 btn btn-outline-secondary border-0 active" href="#personality">
  178.                 Psychological Profile
  179.             </a>
  180.         </li>
  181.         <li class="m-1 col nav-item rounded" style="border-radius: 10px; border:3px solid #000000;">
  182.             <a style="color: #ffffff; mix-blend-mode: overlay;" data-toggle="tab" class="p-1 px-2 w-100 btn btn-outline-secondary border-0" href="#appearance">
  183.                 Physical Description
  184.             </a>
  185.         </li>
  186.         <li class="m-1 col nav-item rounded" style="border-radius: 10px; border:3px solid #000000;">
  187.             <a style="color: #ffffff; mix-blend-mode: overlay;" data-toggle="tab" class="p-1 px-2 w-100 btn btn-outline-secondary border-0" href="#story">
  188.                 History
  189.             </a>
  190.         </li>
  191.         <li class="m-1 col nav-item rounded" style="border-radius: 10px; border:3px solid #000000;">
  192.             <a style="color: #ffffff; mix-blend-mode: overlay;" data-toggle="tab" class="p-1 px-2 w-100 btn btn-outline-secondary border-0" href="#relationships">
  193.                 Known Associates
  194.             </a>
  195.         </li>
  196.     </ul>
  197.    
  198.     <!-- NAV CONTENT -->
  199.     <div class="tab-content rounded mt-1" style="background:rgba(0,0,0,0.3)">
  200.         <!-- PERSONALITY -->
  201.         <div class="tab-pane fade pb-2 show active" id="personality">
  202.             <div class="col-12 rounded">
  203.                 <h1 class="text-center pt-2" style="font-variant: small-caps;">Psychological Profile</h1>
  204.                 <hr style="border:1px dashed #000000; width:90%">
  205.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  206.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  207.             </div>
  208.         </div>
  209.        
  210.         <!-- APPEARANCE -->
  211.         <div class="tab-pane fade pb-2" id="appearance">
  212.             <div class="col-12 rounded">
  213.                 <h1 class="text-center pt-2" style="font-variant: small-caps;">Physical Description</h1>
  214.                 <hr style="border:1px dashed #000000; width:90%">
  215.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  216.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  217.             </div>
  218.         </div>
  219.        
  220.         <!-- STORY -->
  221.         <div class="tab-pane fade pb-2" id="story">
  222.             <div class="col-12 rounded">
  223.                 <h1 class="text-center pt-2" style="font-variant: small-caps;">History</h1>
  224.                 <hr style="border:1px dashed #000000; width:90%">
  225.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  226.                 <p class="pl-2 pr-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  227.             </div>
  228.         </div>
  229.        
  230.         <!-- RELATIONSHIPS -->
  231.         <div class="tab-pane fade pb-2" id="relationships">
  232.             <div class="col-12 rounded" style="height:500px; overflow-y:auto">
  233.                 <h1 class="text-center pt-2" style="font-variant: small-caps;">Known Associates</h1>
  234.                 <hr style="border:1px dashed #000000; width:90%">
  235.                
  236.                 <!-- PERSON -->
  237.                 <div class="row justify-content-center py-1">
  238.                     <div class="col-2">
  239.                         <div class=" pl-4 pb-3">
  240.                             <img src="https://via.placeholder.com/150" style="max-height:150px; max-width:150px; border-radius: 10px; border:5px solid #000000;">
  241.                         </div>
  242.                     </div>
  243.                     <div class="col-9">
  244.                         <h2 class="text-left pl-4 ml-2 pt-2 font-weight-bold" style="font-variant: small-caps;"><a href="CHARACTERLINK">Name</a></h2>
  245.                         <p class="pl-4 ml-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  246.                     </div>
  247.                 </div>
  248.                
  249.                 <!-- PERSON -->
  250.                 <div class="row justify-content-center py-1">
  251.                     <div class="col-9">
  252.                         <h2 class="text-right pr-4 mr-1 pt-2 font-weight-bold" style="font-variant: small-caps;"><a href="CHARACTERLINK">Name</a></h2>
  253.                         <p class="pl-4 ml-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  254.                     </div>
  255.                     <div class="col-2">
  256.                         <div class="pb-3">
  257.                             <img src="https://via.placeholder.com/150" style="max-height:150px; max-width:150px; border-radius: 10px; border:5px solid #000000;">
  258.                         </div>
  259.                     </div>
  260.                 </div>
  261.                
  262.                 <!-- PERSON -->
  263.                 <div class="row justify-content-center py-1">
  264.                     <div class="col-2">
  265.                         <div class=" pl-4 pb-3">
  266.                             <img src="https://via.placeholder.com/150" style="max-height:150px; max-width:150px; border-radius: 10px; border:5px solid #000000;">
  267.                         </div>
  268.                     </div>
  269.                     <div class="col-9">
  270.                         <h2 class="text-left pl-4 ml-2 pt-2 font-weight-bold" style="font-variant: small-caps;"><a href="CHARACTERLINK">Name</a></h2>
  271.                         <p class="pl-4 ml-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  272.                     </div>
  273.                 </div>
  274.                
  275.                 <!-- PERSON -->
  276.                 <div class="row justify-content-center py-1">
  277.                     <div class="col-9">
  278.                         <h2 class="text-right pr-4 mr-1 pt-2 font-weight-bold" style="font-variant: small-caps;"><a href="CHARACTERLINK">Name</a></h2>
  279.                         <p class="pl-4 ml-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  280.                     </div>
  281.                     <div class="col-2">
  282.                         <div class="pb-3">
  283.                             <img src="https://via.placeholder.com/150" style="max-height:150px; max-width:150px; border-radius: 10px; border:5px solid #000000;">
  284.                         </div>
  285.                     </div>
  286.                 </div>
  287.                
  288.             </div>
  289.         </div>
  290.     </div>
  291.  
  292.     <!-- WARNING -->
  293.     <div class="w-100 pt-2">
  294.         <div class="flex-row align-items-center rounded" style="color: #F8F8FF; border-radius: 10px; border:4px solid #000000;">
  295.             <i class="far fa-triangle-exclamation fa-4x p-1" style="opacity: 0.5; color:#670000;"></i>
  296.             <span class="pl-2">
  297.                 <b>THREAT LEVEL:</b> <br>
  298.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
  299.             </span>
  300.         </div>
  301.     </div>
  302.  
  303.     <!-- CREDITS -->
  304.     <div class="justify-content-center align-items-center mt-1">
  305.         <div class="p-1 col-1 rounded" style="background-color:rgba(0, 0, 0, 0.3);;">
  306.             <div class="text-center">
  307.                 <a class="tooltipster" title="Coding by FlyingFoxCode" href="https://toyhou.se/flyingfoxcode"><i class="far fa-bat" style="color:#ffffff"></i></a>
  308.                 <a class="tooltipster" title="Background by Soundimage" href="https://soundimage.org/"><i class="far fa-image" style="color:#ffffff"></i></a>
  309.             </div>
  310.         </div>
  311.     </div>
  312. </div>
Advertisement
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!