API tools faq
paste
Advertisement
CrispinAsheYA

Papers Please (CHARACTER, F2U)

CrispinAsheYA
Jul 8th, 2022 (edited)
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.20 KB | Source Code | 0 0
raw download clone embed print report
  1. <p>(Time) 01.10.21</p>
  2.  
  3. <div class="p-2 bg-outline" style="border-radius:3em; background-color:#0B9758;">
  4.   <a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#FFFFFF; font-size:22px;" href="https://pastebin.com/fHpfkZpP">Papers Please! - HTML - Character - Click Here For Code!</a>
  5. </div>
  6.  
  7. <div class="p-2 mt-2 text-center">
  8.   <p class="text-success"><i class="fad fa-coins"></i> Free To Use</p>
  9.   <p class="text-success"><i class="fad fa-mobile"></i> Mobile-Friendly</p>
  10.   <p class="text-success"><i class="fad fa-image"></i> Some Custom Colours</p>
  11.   <p class="text-success"><i class="fad fa-cat"></i> Character</p>
  12. </div>
  13.  
  14. <div class="col-12 col-lg text-justify p-2 align-items-center" style="font-size:16px;font-weight:300;">
  15.   <div class="col p-1 p-lg-0">
  16.     <p class="text-center text-success">_________<br>I originally planned for this code to have a button at the top that allows you to toggle spoilers or spoilerless modes BUT I couldn't get it to work. The original code will be in a tab to the side. If anyone has any ideas on how to get it to work, please be my guest and help!<br>Aside from that, boom! Code!<br>_________<br>Character First Made: (TI:ME) 01.10.21<br>Code Started: (16:22) 08.07.22<br>Code Finished: (11:52) 08.07.22</p>
  17.   </div>
  18. </div>
  19.  
  20. <!DOCTYPE HTML>
  21.  
  22. <!--RULES
  23.  
  24. YOU MAY
  25. -Frankenstein this with other codes and add/change/delete sections to your liking
  26. -Change colours, images, fonts, ect.
  27.  
  28. YOU MAYN'T
  29. -Resell or copy and paste this template pretty much exactly and pass it off as your own
  30. -Change every single image to be Minecraft Raw Porkchop
  31.  
  32. HOW TO USE
  33. -When editing, remember to turn WYSIWYG off! (AKA, the button should say "Enable WYSIWYG"! What does that stand for anyway?)
  34. -I tend to litter comments everywhere. I like to assume that somewhere out there, one of my templates its someone's first ever experience with HTML so I tend to explain accordingly. Feel free to delete the comments to your liking.
  35. -To change the colours, I reccomend copy and pasting all of your code into a Google Doc, going onto "find and replace" and using the colours below to quickly change the colours globally.
  36.  
  37. Default Colours
  38. -Background Colour: #EEE1D8
  39. -Border Colour: #3E44EA
  40. -Button Colour: #A39690
  41. -Text Colour: #5C4F47
  42. -Divider Colour:594C46
  43.  
  44. For this template specically, your character's design may be consistent no matter what they endure by the end of the story. Therefore, it may be easier to, instead of copying and pasting one Design area to the second design area, you may wanna get rid of the second Design Area and set the button in the spoilers area from 7 to 5 instead. Just remember to add the section back in and change accordingly if you change your mind!
  45.  
  46. Thank you for reading!
  47. Crispin
  48.  
  49. -->
  50.  
  51. <!--------------------------------------------------------- START BACKGROUND --------------------------------------------------------->
  52.  
  53. <div class="col-lg-2 col-md-3 hidden-sm-down sidebar"></div>
  54. <div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="overflow:hidden; position:fixed; bottom:0; top:0; left:0; z-index:-1; background-color:#163829;">
  55. </div>
  56.  
  57. <!--------------------------------------------------------- END BACKGROUND --------------------------------------------------------->
  58.  
  59.  
  60. <!--------------------------------------------------------- START CODE --------------------------------------------------------->
  61.  
  62. <div class="card mb-3" style="height:750px; width:500px; background-color:#594C46; border:10px #3E443A solid;">
  63.  
  64.   <!--------------------------------------------------------- START TOP SECTION --------------------------------------------------------->
  65.  
  66.   <div class="card mb-3" style="height:375px; width:480px; background-color:#EEE1D8; border:10px #9D948D solid;">
  67.    
  68.     <img src="https://media.discordapp.net/attachments/909750674223419413/994625897078464602/unknown.png">
  69.    
  70.   </div>
  71.  
  72.   <!--------------------------------------------------------- END TOP SECTION --------------------------------------------------------->
  73.  
  74.  
  75.  
  76.   <!--------------------------------------------------------- START BOTTOM SECTION --------------------------------------------------------->
  77.  
  78.   <div class="card mb-3" style="height:375px; width:480px; background-color:#EEE1D8; border:10px #9D948D solid; color:#5C4F47;">
  79.    
  80.     <div class="row no-gutters p-1"> <!--- Makes the whole main body of the code. Call this DIV Timmy. -->
  81.      
  82.       <div class="col-sm-6 p-1"> <!-- Start Left Text Box -->
  83.        
  84.         <!---- START INFO ---->
  85.        
  86.         <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#EEE1D8;"> <!-- Formatting -->
  87.          
  88.           <h1 style="font-family:Times New Roman;"><b>NAME NAME</b></h1> <!-- Put your name here! -->
  89.          
  90.           <!-- Custom Passport Photo -->
  91.           <img src="https://media.discordapp.net/attachments/917542533930823690/994626390773207131/unknown.png">
  92.          
  93.           <!-- Put link to full-sized image below here -->
  94.           <a href="#" data-toggle="tooltip" title="Full Size" style="color:#ffffff; position:absolute; top:2px; right:6px; font-size:17px;"> <i class="fas fa-external-link"></i> </a>
  95.          
  96.         </div> <!-- End Formatting -->
  97.        
  98.         <!---- END INFO ---->
  99.        
  100.       </div> <!-- End Left Text Box -->
  101.      
  102.      
  103.       <div class="col-sm-6 p-1"> <!-- Defines Area -->
  104.        
  105.         <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#EEE1D8;"> <!-- Formatting -->
  106.          
  107.           <!---- START INFO ---->
  108.          
  109.           <div style="color:#5C4F47; font-family:Times New Roman; font-size:18px;">
  110.             <span class="badge" style="background-color:#A39690; font-family:Times New Roman; font-size:14px; border-radius:0px;">DOB.</span>
  111.             <span class="pull-right;"><b>1945.06.29</b></span>
  112.             <br>
  113.             <span class="badge" style="background-color:#A39690; font-family:Times New Roman; font-size:14px; border-radius:0px;">SEX</span>
  114.             <span class="pull-right;"><b>F</b></span>
  115.             <br>
  116.             <span class="badge" style="background-color:#A39690; font-family:Times New Roman; font-size:14px; border-radius:0px;">ISS</span>
  117.             <span class="pull-right;"><b>Orvech Vonor</b></span>
  118.             <br>
  119.             <span class="badge" style="background-color:#A39690; font-family:Times New Roman; font-size:14px; border-radius:0px;">EXP</span>
  120.             <span class="pull-right;"><b>1987.02.02</b></span>
  121.           </div>
  122.          
  123.           <p style="color:#E2ECFF;">-<br>-<br>-</p>
  124.           <h1 style="color:#A39690; font-family:Times New Roman; border-bottom-style:solid;"><b>ARSTOTZKA</b></h1>
  125.          
  126.           <!---- END INFO ---->
  127.          
  128.         </div> <!-- End Formatting -->
  129.        
  130.       </div> <!-- End Buttons On The Right -->
  131.      
  132.     </div>
  133.    
  134.   </div>
  135.  
  136.   <!--------------------------------------------------------- END BOTTOM SECTION --------------------------------------------------------->
  137.  
  138. </div>
  139.  
  140. <!--------------------------------------------------------- END CODE --------------------------------------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!