API tools faq
paste
Advertisement
CrispinAsheYA

Construction Site - Character (Custom Colours)

CrispinAsheYA
Nov 21st, 2022 (edited)
158
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 37.02 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--------------------- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules ---------------------
  2.  
  3. Version: 2.1
  4.  
  5. Default Colours
  6. -Border / Text Colour: #E85324
  7. -Background Colour : #532202
  8. -Text White: #FFFFFF
  9. -Link Colour: #5BC0DE
  10. -Colour Palette Colours: #E85325
  11. -Font Awesome Icons: fas fa-traffic-cone
  12.  
  13. Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)
  14.  
  15. Thank you for reading!
  16. Crispin
  17.  
  18. -->
  19.  
  20. <!-------------------------------------------------- START BACKGROUND COLOUR & IMAGE -------------------------------------------------->
  21.  
  22. <div style="background-image:url(https://media.discordapp.net/attachments/917542533930823690/996466133202907206/unknown.png?width=574&height=578); background-size:cover; background-position:top-center; overflow:auto;" class="card-block">
  23.  
  24.   <div class="pb-3">
  25.     <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  26.       <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png" alt="35571013_OKTdBHRiFuWJcTS.png">
  27.     </a>
  28.   </div>
  29.  
  30. <!-------------------------------------------------- END BACKGROUND COLOUR & IMAGE -------------------------------------------------->
  31.  
  32.   <div class="tab-content;"><!-- This sets up the box you're writing in. I suggest not fiddling this. -->
  33.  
  34.     <!--------------------- START OF BUTTONS --------------------->
  35.     <!-- Now this here is an unordered list. While it may not look like a traditional bulletpointed list on the actual code, in terms of technicality it basically is.-->
  36.     <ul class="nav nav-tabs card-header-tabs row pl-4 m-0">
  37.      
  38.       <!-- Each one of these <li> tags is a list item- Or button if you prefer. nav-item sets the code to be a navigation item, and m-0 means it has no margins. (space to the left, right, top or bottom of it.) If you increase the 0 in the margins, space will appear between the buttons! nav-link btn btn is a bootstrap thing I wouldn't reccomend fiddling with, same with data-toggle=pill. href="#one" is actually important. As you can see, each button has a different number. One, two, three, etc. If you want to add more buttons, I'd reccomend going from seven up. You don't have to, but it keeps things simple. style is where all the fun, customiseable stuff is. You can edit that as freely as you want, it's all linked to the text inside the button and the colours the button uses and the border and stuff. Aside from that, that's everything you need to know about how the buttons work.-->
  39.      
  40.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#one" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">About</a></li>
  41.      
  42.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#two" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">Lore</a></li>
  43.      
  44.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#three" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">Design</a></li>
  45.      
  46.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#four" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">Relationships</a></li>
  47.      
  48.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#five" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">Trivia</a></li>
  49.      
  50.       <li class="md-2"><a class="nav-link btn btn px-5" data-toggle="pill" href="#six" style="color:#532202; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px">Button  Button  Button  Button</a></li>
  51.      
  52.     </ul><!-- Ends the button list -->
  53.     <!--------------------- END OF BUTTONS --------------------->
  54.  
  55.  
  56.     <!--------------------------------------------------------  START CONTENT -------------------------------------------------------->
  57.    
  58.     <div class="row p-3 tab-pane fade show active"> <!-- Sets up the content of the playlist, rewards section, and info section. Do not touch this ELLIOT. -->
  59.      
  60.       <!-------------------------------------------------------- START PLAYLIST & REWARDS ------------------------------------------------------>
  61.      
  62.       <div class="col-12 col-lg-4"><!-- Sets up the Playlist & Rewards Area. I wouldn't reccomend messing with this. -->
  63.        
  64.         <!------------------------------------------------------------ START PLAYLIST ---------------------------------------------------------->
  65.        
  66.         <!-- Okay! So! I'm going to explain what all the stuff in div class means now since I promised I would earlier. A card is a bootstrap thing. Basically, it's a quick and easy way of making a box. mb-3 is a shortening of "margin bottom-3." There is 3 margin points along the bottom! The margin is 3 somethings thick along the bottom of the card. mb-lg-0 stands for margin bottom-large-0. -->
  67.         <div class="card mb-3 mb-lg-0" style="height:425px; color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px; overflow:auto;"><!-- Sets up Playlist Area -->
  68.        
  69.           <!------ START HEADER ------>
  70.           <!-- Okay! So! I'm going to explain what all the stuff in div class means now since I promised I would earlier. A card is a bootstrap thing. Basically, it's a quick and easy way of making a box. mb-3 is a shortening of "margin bottom-3." There is 3 margin points along the bottom! The margin is 3 somethings thick along the bottom of the card. mb-lg-0 stands for margin bottom-large-0. -->
  71.           <div class="card-header py-1 px-2" style="color:#FFFFFF; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  72.             <span class="pull-left"><a href="https://toyhou.se/17050581.construction-site" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-traffic-cone"></i></span></a> Playlist</span> <!-- This pulls the text (and font awesome icon located in <i> to the left. -->
  73.           </div>
  74.           <!------ END HEADER ------>
  75.      
  76.           <!------------------------- START PLAYLIST --------------------------->
  77.          
  78.           <div class="col-12 col-xl-10 m-3"><!-- Start Playlist -->
  79.            
  80.             <!------ START SONG [SONGS] ----->
  81.             <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  82.               <span style="color:E85324; text-shadow:0px 0px;"><strong>[SONG TITLE 1] - [SONG ARTIST 1]</strong></span><br />
  83.               <audio controls="[SONG HERE 1]" style="opacity:.99;border-radius:10px;background:E85324; padding:2px;width:300px;height:35px;"><source src="#"></audio></td><br>
  84.             <!------ END SONG ----->
  85.            
  86.           </div> <!-- End Playlist -->
  87.          
  88.           <!------------------------- END PLAYLIST --------------------------->
  89.          
  90.         </div><!-- End Playlist Area -->
  91.        
  92.         <!------------------------------------------------------------- END PLAYLIST ----------------------------------------------------------->
  93.        
  94.         <!------------------------------------------------------------ START REWARDS ----------------------------------------------------------->
  95.        
  96.         <!-- This is all the same as playlist. Scroll back up to where Playlist Starts for an explanation! -->
  97.         <div class="card mb-3 mb-lg-0" style="color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px; overflow:auto;"><!-- Sets up Rewards Area -->
  98.        
  99.           <!------ START HEADER ------>
  100.           <div class="card-header py-1 px-2" style="color:#FFFFFF; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  101.             <span class="pull-left"><a href="https://toyhou.se/17050581.construction-site" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-traffic-cone"></i></span></a> Rewards</span> <!-- This pulls the text (and font awesome icon located in <i> to the left. -->
  102.           </div>
  103.           <!------ END HEADER ------>
  104.      
  105.           <!------------------------- START REWARDS --------------------------->
  106.          
  107.           <div class="col-12 col-xl-10" style="max-width:425px;"> <!-- Start Rewards Area -->
  108.             <div class="container p-3" style="height:250px; max-width:425px;"> <!-- Sets Up Container 1 -->
  109.               <div class="row justify-content-around p-3" style="text-align:center;"> <!-- Sets Up Container 2 -->
  110.              
  111.                 <!------ START AWARDS [AWARDS] ------>
  112.                
  113.                 <!-- Start Award -->
  114.                 <div class="tooltipster" title="【 [AWARDNAME] 】"><a href="[AWARDSOURCELINK]">
  115.                 <img src="[AWARDIMAGE]" class="tooltipster" width="50" height="50" data-placement="bottom" title="[AWARDDESCRIPTION]"></a></div>
  116.                 <!-- End Award -->
  117.                
  118.                 <!------ END AWARDS ------>
  119.                
  120.                 <hr class="mx-4 my-2" /> <!-- Makes Awards Aligned With Each Other Against The Left (If their row isn't filled!) Remove this to have them align in the center instead. -->
  121.                
  122.               </div><!-- End Sets Up Container 2 -->
  123.              
  124.             </div><!-- End Sets Up Container 1 -->
  125.            
  126.           </div><!-- End Rewards Area -->
  127.          
  128.           <!------------------------- END REWARDS --------------------------->
  129.          
  130.         </div><!-- End Rewards Set-Up -->
  131.        
  132.         <!------------------------------------------------------------- END REWARDS ------------------------------------------------------------>
  133.      
  134.       </div><!-- End Playlist & Rewards Area -->
  135.      
  136.       <!------------------------------------------------------ END TABS & PLAYLIST ----------------------------------------------------->
  137.    
  138.    
  139.    
  140.    
  141.     <!----------------------------------------------------------- START INFO ------------------------------------------------------------>
  142.    
  143.     <div class="col-12 col-lg-8"><!-- Sets up Info -->
  144.    
  145.       <div class="card text-white" style="height:735px; color:#E85324; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px"><!-- Sets up Info's Content -->
  146.      
  147.         <!------ START HEADER ------>
  148.         <div class="card-header py-1 px-2" style="color:#FFFFFF; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  149.           <span class="pull-left"><a href="https://toyhou.se/17050581.construction-site" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-traffic-cone"></i></span></a> Information</span> <!-- This pulls the text (and font awesome icon located in <i> to the left. -->
  150.         </div>
  151.         <!------ END HEADER ------>
  152.        
  153.        
  154.         <!----------------------------------------------------------- START TABS ------------------------------------------------------------>
  155.         <div class="tab-content"><!-- Sets up Tabs -->
  156.    
  157.           <!----------------------------------------------------------- START ABOUT ------------------------------------------------------------>
  158.          
  159.           <!-- If you want to add more tabs, this is important! Listen up! You know how all the buttons earlier were named after numbers? Button one corresponds to tab one, button two to tab two, etc etc. The only tab here that has "tab-pane active" is the button you want your code to start with. All the rest have "tab-pane fade", so be careful when copying and pasting! -->
  160.           <div class="tab-pane active" id="one"><!-- Start Tab 1 -->
  161.          
  162.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  163.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Basic Overview</span><!-- The header at the top -->
  164.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  165.            
  166.               <!------ START INFO BOXES ------>
  167.              
  168.               <div class="row mb-2" style="max-width:600px; margin-right:auto; margin-left:auto"> <!-- Sets up the info box area -->
  169.                
  170.                 <!-- Lil  "Question: Answer" Section. It goes in a zigzag pattern in terms of code which is kind of annoying. For example, Name is top left, Age is top right, Gender is second down on the left, etc. Remember that if you want to add, change or delete parts. Feel free to add whatever you want here! I'd reccomend having an even number of these though.
  171.                  -->
  172.                 <div class="col-12 col-sm-6 mt-1"><!-- Sets up Q&A -->
  173.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Name</span><!-- This is a badge! I like to think of this section as like a Q&A, so this could be known as the "Question Badge"! -->
  174.                   <span class="pull-right">[NAME]</span><!-- Answer section then! -->
  175.                   <hr class="my-1" style="border:1px #E85324 dashed;"><!-- Underline to end the Q&A -->
  176.                 </div> <!-- Ends Q&A Set Up -->
  177.                
  178.                 <div class="col-12 col-sm-6 mt-1">
  179.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Zodiac</span>
  180.                   <span class="pull-right">[ZODIAC]</span>
  181.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  182.                 </div>
  183.                
  184.                 <div class="col-12 col-sm-6 mt-1">
  185.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Birthday</span>
  186.                   <span class="pull-right">[BIRTHDATE]</span>
  187.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  188.                 </div>
  189.                
  190.                 <div class="col-12 col-sm-6 mt-1">
  191.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Chinese Zodiac</span>
  192.                   <span class="pull-right">[CHINESEZODIAC]</span>
  193.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  194.                 </div>
  195.                
  196.                 <div class="col-12 col-sm-6 mt-1">
  197.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Age</span>
  198.                   <span class="pull-right">[AGE]</span>
  199.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  200.                 </div>
  201.                
  202.                 <div class="col-12 col-sm-6 mt-1">
  203.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Birthstone</span>
  204.                   <span class="pull-right">[BIRTHSTONE]</span>
  205.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  206.                 </div>
  207.                
  208.                 <div class="col-12 col-sm-6 mt-1">
  209.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Species</span>
  210.                   <a href="[SPECIESLINK]" span class="pull-right" style="color:#5BC0DE;">[SPECIES]</span></a>
  211.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  212.                 </div>
  213.                
  214.                 <div class="col-12 col-sm-6 mt-1">
  215.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Birthflower</span>
  216.                   <span class="pull-right">[BIRTHFLOWER]</span>
  217.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  218.                 </div>
  219.                
  220.                 <div class="col-12 col-sm-6 mt-1">
  221.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Gender</span>
  222.                   <span class="pull-right">[GENDER]</span>
  223.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  224.                 </div>
  225.                
  226.                 <div class="col-12 col-sm-6 mt-1">
  227.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Alignment</span>
  228.                   <span class="pull-right">[ALIGNMENT]</span>
  229.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  230.                 </div>
  231.                
  232.                 <div class="col-12 col-sm-6 mt-1">
  233.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Orientation</span>
  234.                   <span class="pull-right">[ORIENTATION]</span>
  235.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  236.                 </div>
  237.                
  238.                 <div class="col-12 col-sm-6 mt-1">
  239.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">MBTI</span>
  240.                   <span class="pull-right">[MBTI]</span>
  241.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  242.                 </div>
  243.                
  244.                 <div class="col-12 col-sm-6 mt-1">
  245.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Occupation</span>
  246.                   <span class="pull-right">[OCCUPATION]</span>
  247.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  248.                 </div>
  249.                
  250.                 <div class="col-12 col-sm-6 mt-1">
  251.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Ennegram</span>
  252.                   <span class="pull-right">[ENNEGRAM]</span>
  253.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  254.                 </div>
  255.                
  256.                 <div class="col-12 col-sm-6 mt-1">
  257.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Resides</span>
  258.                   <span class="pull-right">[RESIDES]</span>
  259.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  260.                 </div>
  261.                
  262.                 <div class="col-12 col-sm-6 mt-1">
  263.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Hogwarts House</span>
  264.                   <span class="pull-right">[HOGWARTSHOUSE]</span>
  265.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  266.                 </div>
  267.                
  268.                 <div class="col-12 col-sm-6 mt-1">
  269.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px"v>Voiceclaim</span>
  270.                   <a href="[VOICECLAIMLINK]" span class="pull-right" style="color:#5BC0DE;">[VOICECLAIMNAME]</span></a>
  271.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  272.                 </div>
  273.                
  274.                 <div class="col-12 col-sm-6 mt-1">
  275.                   <span class="badge" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:1px #E85324 solid; border-radius:0px">Hand Preference</span>
  276.                   <span class="pull-right">[HANDPREFERENCE]</span>
  277.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  278.                 </div>
  279.                
  280.               </div> <!-- End basic info area -->
  281.              
  282.               <!------ END INFO BOXES ------>
  283.              
  284.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Overview</span><!-- The header at the top -->
  285.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  286.              
  287.               <p>[OVERVIEW TEXT]</p> <!-- You can write anything here! -->
  288.              
  289.             </div><!-- End content -->
  290.            
  291.           </div><!-- End Tab 1 -->
  292.           <!----------------------------------------------------------- END ABOUT ------------------------------------------------------------>
  293.          
  294.           <!---------------------------------------------------------- START BIOGRAPHY --------------------------------------------------------->
  295.          
  296.           <!-- Unlike last tab (one) which had "tab-pane active" because it's the one we see when we click on the page, this tab has "tab-pane fade"! -->
  297.           <div class="tab-pane fade" id="two"><!-- Start Tab 2 -->
  298.          
  299.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  300.            
  301.               <!----- Start Section 1 ------>
  302.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Personality</span><!-- The header at the top -->
  303.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  304.               <p>[PERSONALITY]</p>
  305.               <!----- End Section 1 ------>
  306.              
  307.               <!----- Start Section 2 ------>
  308.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Backstory</span><!-- The header at the top -->
  309.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  310.               <p>[BACKSTORY]</p>
  311.               <!----- End Section 2 ------>
  312.              
  313.               <!----- Start Section 3 ------>
  314.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Current Story</span><!-- The header at the top -->
  315.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  316.               <p>[CURRENTSTORY] </p>
  317.               <!----- End Section 3 ------>
  318.              
  319.             </div><!-- End content -->
  320.            
  321.           </div><!-- End Tab 2 -->
  322.           <!---------------------------------------------------------- END BIOGRAPHY ----------------------------------------------------------->
  323.          
  324.           <!----------------------------------------------------------- START DESIGN ----------------------------------------------------------->
  325.           <div class="tab-pane fade" id="three"><!-- Start Tab 3 -->
  326.          
  327.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  328.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Design</span><!-- The header at the top -->
  329.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  330.              
  331.               <!------ START REFERENCE ------>
  332.               <div class="card bg-transparent border-0 rounded-0" style="max-width:600px; margin-left:auto; margin-right:auto;">
  333.                 <img src="[REFERENCEIMAGE]"> <!-- Image That Appears On Reference-->
  334.                 <a href="[FULLSIZELINK]" data-toggle="tooltip" title="Full Size" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:1.4rem"> <i class="fas fa-external-link"></i> </a> <!-- Link To Fullsize Image -->
  335.               </div>
  336.               <!------ END REFERENCE ------>
  337.              
  338.               <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto"> <!-- Start Set Up Design Notes -->
  339.                
  340.                 <!------ START DESIGN NOTES ------>
  341.                 <div class="col-12 col-xl-5 mb-3 mb-xl-0"> <!-- Start Design Q&A -->
  342.                  
  343.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Hair Type</span><!-- This is a badge! I like to think of this section as like a Q&A, so this could be known as the "Question Badge"! -->
  344.                   <span class="pull-right">[HAIRTYPE]</span><!-- This is the piece of info next to the "Question Badge"! -->
  345.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- Underline to end that question & answer -->
  346.                  
  347.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Hair Colour</span>
  348.                   <span class="pull-right">[HAIRCOLOUR]</span>
  349.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  350.                  
  351.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Eye Colour</span>
  352.                   <span class="pull-right">[EYECOLOUR]</span>
  353.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  354.                  
  355.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Eye Vibe</span>
  356.                   <span class="pull-right">[EYEVIBE]</span>
  357.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  358.                  
  359.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Body Type</span>
  360.                   <span class="pull-right">[BODYTYPE]</span>
  361.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  362.                  
  363.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Skin Tone</span>
  364.                   <span class="pull-right">[SKINTONE]</span>
  365.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  366.                  
  367.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Height</span>
  368.                   <span class="pull-right">[HEIGHT]</span>
  369.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  370.                  
  371.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Weight</span>
  372.                   <span class="pull-right">[WEIGHT]</span>
  373.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  374.                  
  375.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Piercings</span>
  376.                   <span class="pull-right">[Y/N-PIERCINGS]</span>
  377.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  378.                  
  379.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Tattoos</span>
  380.                   <span class="pull-right">[Y/N-TATTOOS]</span>
  381.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  382.                  
  383.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Clothing Style</span>
  384.                   <span class="pull-right">[CLOTHINGSTYLE]</span>
  385.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  386.                  
  387.                   <span class="badge" style="font-size:1rem;; background-color:E85324; border-radius:0px;">Presentation</span>
  388.                   <span class="pull-right">[PRESENTATION]</span>
  389.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  390.                  
  391.                 </div><!-- End Design Q&A -->
  392.                
  393.                 <!------ END DESIGN NOTES ------>
  394.                
  395.                 <!------ START EXTRA NOTES ------>
  396.                
  397.                 <div class="col-12 col-xl-7"><!-- Start Set Up Extra Notes -->
  398.                  
  399.                   <span style="color:#E85324; font-size:1.4rem;"> Extra Notes</span><!-- Title -->
  400.                   <hr class="mt-0 mb-2" style="border:1px #E85324 dashed;"> <!-- Underline -->
  401.                  
  402.                   <ul><!-- Start List -->
  403.                     <li>[EXTRADESIGNNOTES]</li><!-- Add more notes here! -->
  404.                   </ul><!-- End List -->
  405.                  
  406.                 </div><!-- End Set Up Extra Notes -->
  407.                
  408.                 <!------ END EXTRA NOTES ------>
  409.                
  410.               </div><!-- End Set Up Design Notes -->
  411.              
  412.             </div><!-- End content -->
  413.            
  414.           </div><!-- End Tab 3 -->
  415.           <!----------------------------------------------------------- END DESIGN ------------------------------------------------------------>
  416.          
  417.           <!-------------------------------------------------------- START RELATIONSHIPS ------------------------------------------------------->
  418.           <div class="tab-pane fade" id="four"><!-- Start Tab 4 -->
  419.          
  420.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  421.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Relationships</span><!-- The header at the top -->
  422.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  423.              
  424.               <!-- Copy and paste between "START CHARACTER" & "END CHARACTER" to add more characters! Remember to change the image and source links! -->
  425.               <!-- START CHARACTER -->
  426.               <div class="row">
  427.                 <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  428.                   <a href="[CHARACTERLINK]" style="font-size:1.2rem; color:#E85324">[CHARACTERNAME]</a>
  429.                   <span class="pull-right" style="font-size:1.2rem; color:#E85324">[CHARACTERRELATIONSHIP]</span>
  430.                   <hr class="mt-0 mb-2" style="border:1px #E85324 dashed;">
  431.                   <p>[CHARACTERTEXT]</p>
  432.                 </div>
  433.                 <!--image-->
  434.                 <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  435.                   <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  436.                     <a data-toggle="tooltip" href="[CHARACTERLINK]"><img src="[CHARACTERIMAGELINK]"></a>
  437.                   </div>
  438.                 </div>
  439.               </div>
  440.               <hr class="my-2" style="border:1px #E85324 dashed;">
  441.               <!-- END CHARACTER -->
  442.              
  443.             </div><!-- End content -->
  444.            
  445.           </div><!-- End Tab 4 -->
  446.           <!--------------------------------------------------------- END RELATIONSHIPS -------------------------------------------------------->
  447.          
  448.           <!----------------------------------------------------------- START TRIVIA ----------------------------------------------------------->
  449.           <div class="tab-pane fade" id="five"><!-- Start Tab 5 -->
  450.          
  451.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  452.          
  453.               <!-- START DEVELOPMENT TRIVIA -->
  454.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Development Trivia</span><!-- The header at the top -->
  455.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  456.              
  457.               <ul>
  458.                 <li>[DEVELOPMENTTRIVIA]</li>
  459.               </ul>
  460.               <!-- END DEVELOPMENT TRIVIA -->
  461.              
  462.               <!-- START CHARACTER TRIVIA -->
  463.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Character Trivia</span><!-- The header at the top -->
  464.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  465.              
  466.               <ul>
  467.                 <li>[CHARACTERTRIVIA]</li>
  468.               </ul>
  469.               <!-- END CHARACTER TRIVIA -->
  470.              
  471.               <!-- START MISTAKES/RETCONS TRIVIA -->
  472.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Mistakes/Retcons Trivia</span><!-- The header at the top -->
  473.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  474.              
  475.               <ul>
  476.                 <li>[RETCONSTRIVIA]</li>
  477.               </ul>
  478.               <!-- END MISTAKES/RETCONS TRIVIA -->
  479.              
  480.             </div><!-- End content -->
  481.            
  482.           </div><!-- End Tab 5 -->
  483.           <!----------------------------------------------------------- END TRIVIA ------------------------------------------------------------>
  484.          
  485.           <!------------------------------------------------------- START SECRET SECTION ------------------------------------------------------->
  486.           <div class="tab-pane fade" id="six"><!-- Start Tab 6 -->
  487.          
  488.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- Sets Up The Tab -->
  489.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Secret Section</span><!-- The header at the top -->
  490.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  491.              
  492.               <p>[SECRETSECTIONTEXT]</p>
  493.              
  494.             </div><!-- End content -->
  495.            
  496.           </div><!-- End Tab 6 -->
  497.           <!-------------------------------------------------------- END SECRET SECTION -------------------------------------------------------->
  498.          
  499.         </div> <!-- End Tabs -->
  500.        
  501.         <!----------------------------------------------------------- END TABS ------------------------------------------------------------>
  502.      
  503.       </div><!-- End Info's Content -->
  504.      
  505.     </div><!-- End Info -->
  506.    
  507.   </div><!-- End "The Rest Of The Code" -->
  508.  
  509.   <!--------------------- START OF COLOURS --------------------->
  510.     <ul class="nav nav-justified" style="font-size:1.2rem; border:8px;"> <!-- These colours are, theoretically, also buttons! They just don't link anywhere -->
  511.      
  512.       <!-- Each one of these lines is a unique colour! Now, I know you like your colours, so in this system you can have as many or as few colours as you want. Just always make sure that the first colour listed always has a character/word with a set font size so your colours aren't super skinny. (Remember to change both of the colours in colour number 1!)-->
  513.       <li class="nav-item m-0" style="color:#E85324; font-size:1.2rem; background:#E85324;">I</li> <!-- Change this to be a secret message. -->
  514.       <li class="nav-item m-0" style="background:#E85324;"></li>
  515.       <li class="nav-item m-0" style="background:#E85324;"></li>
  516.      
  517.     </ul><!-- Ends the button list -->
  518.     <!--------------------- END OF COLOURS --------------------->
  519.  
  520. </div> <!-- End Code! -->
  521.  
  522. <!--
  523. How To Use Changeable Variables:
  524. 1. Press [CTRL]+F on your keyboard
  525. 2. Press the "+" button at the bottom left of the window
  526. 3. Highlight one of the variables written similar to: [VARIABLE]
  527. 4. Write the new variable in the section in the Find&Replace that says "replace with"
  528. 5. Press the "all" on the right of the "Replace with" input bar.
  529.  
  530. [NAME] | [ZODIAC] | [BIRTHDAY] | [CHINESEZODIAC] | [AGE] | [BIRTHSTONE] | [SPECIESLINK] | [SPECIES] | [BIRTHFLOWER] | [GENDER] | [ALIGNMENT] | [ORIENTATION] | [MBTI] | [OCCUPATION] | [ENNEGRAM] | [RESIDES] | [HOGWARTSHOUSE] | [VOICECLAIMLINK] | [VOICECLAIMNAME] [HANDPREFERENCE]
  531.  
  532. [REFERENCEIMAGE] | [FULLSIZELINK] | [HAIRTYPE] | [HAIRCOLOUR] | [EYECOLOUR] | [EYEVIBE] | [BODYTYPE] | [SKINTONE] | [HEIGHT] | [WEIGHT] | [Y/N-PIERCINGS] | [Y/N-TATTOOS] | [CLOTHINGSTYLE] | [PRESENTATION]
  533.  
  534. [CHARACTERNAME] | [CHARACTERRELATIONSHIP] | [CHARACTERLINK] | [CHARACTERIMAGELINK]
  535.  
  536. It's Best You Teleport To These Areas instead of just using the Find & replace Box:
  537. [SONGS] | [AWARDS] | [OVERVIEW TEXT] | [PERSONALITY] | [BACKSTORY] | [CURRENTSTORY] | [EXTRADESIGNNOTES] | [DEVELOPMENTTRIVIA] | [CHARACTERTRIVIA] | [RETCONSTRIVIA] | [SECRETSECTIONTEXT]
  538. -->
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!