API tools faq
paste
Advertisement
CrispinAsheYA

Construction Site (CHARACTER, F2U)

CrispinAsheYA
Jul 18th, 2022 (edited)
231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.17 KB | None | 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. Default Colours
  4. -Orange: #E85324
  5. -Light Orange : #532202
  6. -Text White: #FFFFFF
  7. -Background Color: #3D122E
  8. -Link Colour: #5BC0DE
  9.  
  10. Thank you for reading!
  11. Crispin
  12.  
  13. -->
  14.  
  15. <!-------------------------------------------------- START BACKGROUND COLOUR & IMAGE -------------------------------------------------->
  16.  
  17. <div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="position:fixed; bottom:0; top:0; left:0; z-index:-1;  background-color:#3D122E;">
  18. </div>
  19.  
  20. <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">
  21.  
  22.   <div class="pb-3">
  23.     <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  24.       <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  25.     </a>
  26.   </div>
  27.  
  28. <!-------------------------------------------------- END BACKGROUND COLOUR & IMAGE -------------------------------------------------->
  29.  
  30.   <div class="tab-content;"><!-- This sets up the box you're writing in. I suggest not fiddling this. -->
  31.  
  32.     <!--------------------- START OF BUTTONS --------------------->
  33.     <!-- 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.-->
  34.     <ul class="nav nav-tabs card-header-tabs row pl-4 m-0" style="font-size:16px; border:8px;">
  35.      
  36.       <!-- 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.-->
  37.      
  38.       <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>
  39.      
  40.       <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>
  41.      
  42.       <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>
  43.      
  44.       <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>
  45.      
  46.       <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>
  47.      
  48.       <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>
  49.      
  50.     </ul><!-- Ends the button list -->
  51.     <!--------------------- END OF BUTTONS --------------------->
  52.  
  53.  
  54.     <!--------------------------------------------------------  START CONTENT -------------------------------------------------------->
  55.    
  56.     <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. -->
  57.      
  58.       <!-------------------------------------------------------- START PLAYLIST & REWARDS ------------------------------------------------------>
  59.      
  60.       <div class="col-12 col-lg-4"><!-- Sets up the Playlist & Rewards Area. I wouldn't reccomend messing with this. -->
  61.        
  62.         <!------------------------------------------------------------ START PLAYLIST ---------------------------------------------------------->
  63.        
  64.         <!-- 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. -->
  65.         <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"><!-- Sets up Playlist Area -->
  66.        
  67.           <!------ START HEADER ------>
  68.           <!-- 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. -->
  69.           <div class="card-header py-1 px-2" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  70.             <span class="pull-left"><i class="fas fa-leaf-oak"></i> Playlist</span> <!-- This pulls the text (and font awesome icon located in <i> to the left. -->
  71.           </div>
  72.           <!------ END HEADER ------>
  73.      
  74.           <!------------------------- START PLAYLIST --------------------------->
  75.          
  76.           <div class="col-12 col-xl-10 m-3"> <!-- Ah! Columns! Most bootstrap made code operates on a column based system. To get a good image, paste the following link into your search engine: https://toyhou.se/4547628.coding-resources-3 As you can see, columns can be as big as 12 and work in factors of 12 under that. col-12 is the largest we can get. We also have a margin of 3 here too! -->
  77.            
  78.             <!-- Between START SONG & END SONG is one whole music player. It's all a bit complicated and it's explained much better here: https://toyhou.se/6560537.-music-player-tutorial-f2u- So if you wannt learn how these work I'd reccomend looking there. -->
  79.             <!------ START SONG ----->
  80.             <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  81.               <span style="color:E85324; text-shadow:0px 0px;"><strong>Song Name - Artist Name</strong></span><br />
  82.               <audio controls="" style="opacity:.99;border-radius:10px;background:E85324; padding:2px;width:300px;height:35px;"><source src="#"></audio>
  83.             </td>
  84.             <br>
  85.             <!------ END SONG ----->
  86.            
  87.           </div> <!-- End Playlist -->
  88.          
  89.           <!------------------------- END PLAYLIST --------------------------->
  90.          
  91.          
  92.         </div><!-- End Playlist Area -->
  93.        
  94.         <!------------------------------------------------------------- END PLAYLIST ----------------------------------------------------------->
  95.        
  96.         <!------------------------------------------------------------ START REWARDS ----------------------------------------------------------->
  97.        
  98.         <!-- This is all the same as playlist. Scroll back up to lines 80 & 84 for an explanation! -->
  99.         <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 -->
  100.        
  101.           <!------ START HEADER ------>
  102.           <div class="card-header py-1 px-2" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  103.             <span class="pull-left"><i class="fas fa-leaf-oak"></i> Rewards</span>
  104.           </div>
  105.           <!------ END HEADER ------>
  106.      
  107.           <!------------------------- START REWARDS --------------------------->
  108.          
  109.           <div class="col-12 col-xl-10">
  110.              
  111.               <!------ START AWARDS ------>
  112.              
  113.               <div class="card-block" style="height:250px; width:325px;">
  114.                
  115.                 <!-- 5 Award -->
  116.                 <a data-toggle="tooltip" href="https://toyhou.se/17374222.character-ribbons-"
  117.                title="------- Bean Water ------- This Character Particpated In Artfight 2018!">
  118.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53113264_Bd2k12sBpXJQ56c.png" width="50" height="50" /></a>
  119.                 <!-- 5 Award -->
  120.                
  121.                 <!-- 5 Award -->
  122.                 <a data-toggle="tooltip" href="https://toyhou.se/17374222.character-ribbons-"
  123.                title="-- Pumpkin Spice Latte -- This Character Particpated In Artfight 2020!">
  124.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53113461_h53VbyNGFC8U5et.png" width="50" height="50" /></a>
  125.                 <!-- 5 Award -->
  126.                
  127.                 <!-- 5 Award -->
  128.                 <a data-toggle="tooltip" href="https://toyhou.se/17374222.character-ribbons-"
  129.                title="-- Victorian Ingenuity! -- This Character Particpated In Artfight 2021!">
  130.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53113490_zRLRcE8k66GBisw.png" width="50" height="50" /></a>
  131.                 <!-- 5 Award -->
  132.                
  133.                 <!-- 5 Award -->
  134.                 <a data-toggle="tooltip" href="https://toyhou.se/17374222.character-ribbons-"
  135.                title="------ Rotting Away ------ This Character Particpated In Artfight 2022!">
  136.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53113611_pmOQOurYDfPPweb.png" width="50" height="50" /></a>
  137.                 <!-- 5 Award -->
  138.                
  139.                 <br>
  140.                 <hr class="mx-4 my-2" />
  141.               </div>
  142.              
  143.               <!------ END AWARDS ------>
  144.            
  145.           </div> <!-- End Awards Area -->
  146.          
  147.           <!------------------------- END REWARDS --------------------------->
  148.          
  149.          
  150.         </div><!-- End Playlist Area -->
  151.        
  152.         <!------------------------------------------------------------- END REWARDS ------------------------------------------------------------>
  153.      
  154.       </div><!-- End Playlist & Rewards Area -->
  155.      
  156.       <!------------------------------------------------------ END TABS & PLAYLIST ----------------------------------------------------->
  157.    
  158.    
  159.    
  160.    
  161.     <!----------------------------------------------------------- START INFO ------------------------------------------------------------>
  162.    
  163.     <div class="col-12 col-lg-8"><!-- Sets up Info -->
  164.    
  165.       <div class="card" style="height:735px; color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#532202; border:6px #E85324 solid; border-radius:0px"><!-- Sets up Info's Content -->
  166.      
  167.         <!------ START HEADER ------>
  168.         <div class="card-header py-1 px-2" style="color:#FFFFFF; font-family:'comic sans ms'; font-size:1rem; background:#E85324; border:6px #E85324 solid; border-radius:0px">
  169.           <span class="pull-left"><i class="fas fa-leaf-oak"></i> Info</span>
  170.         </div>
  171.         <!------ END HEADER ------>
  172.        
  173.        
  174.         <!----------------------------------------------------------- START TABS ------------------------------------------------------------>
  175.         <div class="tab-content"><!-- Sets up Tabs -->
  176.    
  177.           <!----------------------------------------------------------- START ABOUT ------------------------------------------------------------>
  178.          
  179.           <!-- 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! -->
  180.           <div class="tab-pane active" id="one"><!-- Start Tab 1 -->
  181.          
  182.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  183.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Basic Overview</span><!-- The header at the top -->
  184.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  185.            
  186.               <!------ START INFO BOXES ------>
  187.              
  188.               <div class="row mb-2" style="max-width:600px; margin-right:auto; margin-left:auto"> <!-- Sets up the info box area -->
  189.                
  190.                 <!-- 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.
  191.                  -->
  192.                 <div class="col-12 col-sm-6 mt-1">
  193.                   <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>
  194.                   <span class="pull-right">Text</span>
  195.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  196.                 </div>
  197.                
  198.                 <div class="col-12 col-sm-6 mt-1">
  199.                   <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>
  200.                   <span class="pull-right">N</span>
  201.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  202.                 </div>
  203.                
  204.                 <div class="col-12 col-sm-6 mt-1">
  205.                   <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>
  206.                   <span class="pull-right">Text</span>
  207.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  208.                 </div>
  209.                
  210.                 <div class="col-12 col-sm-6 mt-1">
  211.                   <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>
  212.                   <span class="pull-right">Text</span>
  213.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  214.                 </div>
  215.                
  216.                 <div class="col-12 col-sm-6 mt-1">
  217.                   <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>
  218.                   <span class="pull-right">Text</span>
  219.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  220.                 </div>
  221.                
  222.                 <div class="col-12 col-sm-6 mt-1">
  223.                   <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>
  224.                   <span class="pull-right">Text</span>
  225.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  226.                 </div>
  227.                
  228.                 <div class="col-12 col-sm-6 mt-1">
  229.                   <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>
  230.                   <span class="pull-right">Text</span>
  231.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  232.                 </div>
  233.                
  234.                 <div class="col-12 col-sm-6 mt-1">
  235.                   <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>
  236.                   <a href="#" span class="pull-right" style="color:#5BC0DE;">Text</span></a>
  237.                   <hr class="my-1" style="border:1px #E85324 dashed;">
  238.                 </div>
  239.                
  240.               </div> <!-- End basic info area -->
  241.              
  242.               <!------ END INFO BOXES ------>
  243.              
  244.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Overview</span><!-- The header at the top -->
  245.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  246.              
  247.               <p>Can you sum up your character in a few sentences? (There's a more indepth personality section in a different tab.)<br>Character McShitsmeares is a minor character who shows up for, at most, 2 pages. In that time, he is shown booing my main protagonist off stage because he's a jerk.</p> <!-- You can write anything here! -->
  248.              
  249.             </div><!-- End content -->
  250.            
  251.           </div><!-- End Tab 1 -->
  252.           <!----------------------------------------------------------- END ABOUT ------------------------------------------------------------>
  253.          
  254.           <!---------------------------------------------------------- START BIOGRAPHY --------------------------------------------------------->
  255.          
  256.           <!-- 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"! -->
  257.           <div class="tab-pane fade" id="two"><!-- Start Tab 2 -->
  258.          
  259.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  260.            
  261.               <!----- Start Section 1 ------>
  262.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Personality</span><!-- The header at the top -->
  263.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  264.              
  265.               <p>Write about their personality here.</p>
  266.               <!----- End Section 1 ------>
  267.              
  268.               <!----- Start Section 2 ------>
  269.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Backstory</span><!-- The header at the top -->
  270.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  271.              
  272.               <p>Write about their backstory here.</p>
  273.               <!----- End Section 2 ------>
  274.              
  275.               <!----- Start Section 3 ------>
  276.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Current Story</span><!-- The header at the top -->
  277.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"> <!-- The lil underline beneath Basic Info -->
  278.              
  279.               <p>Write about their current story here.</p>
  280.               <!----- End Section 3 ------>
  281.              
  282.             </div><!-- End content -->
  283.            
  284.           </div><!-- End Tab 2 -->
  285.           <!---------------------------------------------------------- END BIOGRAPHY ----------------------------------------------------------->
  286.          
  287.           <!----------------------------------------------------------- START DESIGN ----------------------------------------------------------->
  288.           <div class="tab-pane fade" id="three"><!-- Start Tab 3 -->
  289.          
  290.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  291.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Design</span><!-- The header at the top -->
  292.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  293.              
  294.               <!------ START REFERENCE ------>
  295.               <div class="card bg-transparent border-0 rounded-0" style="max-width:600px; margin-left:auto; margin-right:auto;">
  296.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/44802365_IHyKSrMA6aaMIOu.jpg"> <!-- Image That Appears On Reference-->
  297.                 <a href="#" 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 -->
  298.               </div>
  299.               <!------ END REFERENCE ------>
  300.              
  301.               <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto"> <!-- Div Timmy -->
  302.                
  303.                 <!------ START DESIGN NOTES ------>
  304.                 <div class="col-12 col-xl-5 mb-3 mb-xl-0">
  305.                  
  306.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Hair Type</span>
  307.                   <span class="pull-right">Text</span>
  308.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  309.                  
  310.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Hair Colour</span>
  311.                   <span class="pull-right">Text</span>
  312.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  313.                  
  314.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Eye Colour</span>
  315.                   <span class="pull-right">Text</span>
  316.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  317.                  
  318.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Eye Vibe</span>
  319.                   <span class="pull-right">Text</span>
  320.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  321.                  
  322.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Body Type</span>
  323.                   <span class="pull-right">Text</span>
  324.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  325.                  
  326.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Skin Tone</span>
  327.                   <span class="pull-right">Text</span>
  328.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  329.                  
  330.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Height</span>
  331.                   <span class="pull-right">Text</span>
  332.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  333.                  
  334.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Weight</span>
  335.                   <span class="pull-right">Text</span>
  336.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  337.                  
  338.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Piercings</span>
  339.                   <span class="pull-right">Yes/No</span>
  340.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  341.                  
  342.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Tattoos</span>
  343.                   <span class="pull-right">Yes/No</span>
  344.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  345.                  
  346.                   <span class="badge" style="font-size:1rem; background-color:E85324; border-radius:0px;">Clothing Style</span>
  347.                   <span class="pull-right">Text</span>
  348.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  349.                  
  350.                   <span class="badge" style="font-size:1rem;; background-color:E85324; border-radius:0px;">Presentation</span>
  351.                   <span class="pull-right">Text</span>
  352.                   <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;">
  353.                  
  354.                 </div>
  355.                
  356.                 <!------ END DESIGN NOTES ------>
  357.                
  358.                 <!------ START EXTRA NOTES ------>
  359.                
  360.                 <div class="col-12 col-xl-7">
  361.                  
  362.                   <span style="color:#E85324; font-size:1.4rem;"> Extra Notes</span>
  363.                   <hr class="mt-0 mb-2" style="border:1px #E85324 dashed;">
  364.                  
  365.                   <ul>
  366.                     <li>If they have piercings/tattoos, elaborate on that here</li>
  367.                     <li>If they present masculine, are they opposed to feminine clothing and vice versa?</li>
  368.                     <li>Any type of clothing they absolutely won't wear? (IE, Animal fur, denim, etc.)</li>
  369.                     <li>Extra notes.</li>
  370.                   </ul>
  371.                  
  372.                 </div>
  373.                
  374.                 <!------ END EXTRA NOTES ------>
  375.                
  376.               </div>
  377.              
  378.             </div><!-- End content -->
  379.            
  380.           </div><!-- End Tab 3 -->
  381.           <!----------------------------------------------------------- END DESIGN ------------------------------------------------------------>
  382.          
  383.           <!-------------------------------------------------------- START RELATIONSHIPS ------------------------------------------------------->
  384.           <div class="tab-pane fade" id="four"><!-- Start Tab 4 -->
  385.          
  386.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  387.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Relationships</span><!-- The header at the top -->
  388.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  389.              
  390.               <!-- Copy and paste between "START CHARACTER" & "END CHARACTER" to add more characters! Remeber to change the image and source links! -->
  391.               <!-- START CHARACTER -->
  392.               <div class="row">
  393.                 <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  394.                   <a href="https://toyhou.se/dad_cetemol" style="font-size:1.4rem; color:#E85324">  Dad_Cetemol</a>
  395.                   <span class="pull-right" style="font-size:1.4rem; color:#E85324">World's Nicest Git</span>
  396.                   <hr class="mt-0 mb-2" style="border:1px #E85324 dashed;">
  397.                   <p>This guy isn't one of my characters, but he did request I make this code. Hi! I know you're reading this! (If you aren't Toyhouse User Dad_Cetemol, please follow him. He needs friends.)</p>
  398.                 </div>
  399.                 <!--image-->
  400.                 <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  401.                   <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  402.                     <a data-toggle="tooltip" href="https://toyhou.se/dad_cetemol"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/dad_cetemol?2"></a>
  403.                   </div>
  404.                 </div>
  405.               </div>
  406.               <hr class="my-2" style="border:1px #E85324 dashed;">
  407.               <!-- END CHARACTER -->
  408.              
  409.             </div><!-- End content -->
  410.            
  411.           </div><!-- End Tab 4 -->
  412.           <!--------------------------------------------------------- END RELATIONSHIPS -------------------------------------------------------->
  413.          
  414.           <!----------------------------------------------------------- START TRIVIA ----------------------------------------------------------->
  415.           <div class="tab-pane fade" id="five"><!-- Start Tab 5 -->
  416.          
  417.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  418.          
  419.               <!-- START DEVELOPMENT TRIVIA -->
  420.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Development Trivia</span><!-- The header at the top -->
  421.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  422.              
  423.               <ul>
  424.                 <li>Text!</li>
  425.                 <li>More Text!</li>
  426.               </ul>
  427.               <!-- END DEVELOPMENT TRIVIA -->
  428.              
  429.               <!-- START CHARACTER TRIVIA -->
  430.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Character Trivia</span><!-- The header at the top -->
  431.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  432.              
  433.               <ul>
  434.                 <li>Text!</li>
  435.                 <li>More Text!</li>
  436.               </ul>
  437.               <!-- END CHARACTER TRIVIA -->
  438.              
  439.               <!-- START MISTAKES/RETCONS TRIVIA -->
  440.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Mistakes/Retcons Trivia</span><!-- The header at the top -->
  441.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath the header -->
  442.              
  443.               <ul>
  444.                 <li>Text!</li>
  445.                 <li>More Text!</li>
  446.               </ul>
  447.               <!-- END MISTAKES/RETCONS TRIVIA -->
  448.              
  449.             </div><!-- End content -->
  450.            
  451.           </div><!-- End Tab 5 -->
  452.           <!----------------------------------------------------------- END TRIVIA ------------------------------------------------------------>
  453.          
  454.           <!------------------------------------------------------- START SECRET SECTION ------------------------------------------------------->
  455.           <div class="tab-pane fade" id="six"><!-- Start Tab 6 -->
  456.          
  457.             <div class="card-body p-3 table-responsive" style="max-height:675px;"><!-- This area is 675 pixels high -->
  458.               <span style="color:#E85324; font-family:'comic sans ms'; font-size:1.4rem;">Secret Section</span><!-- The header at the top -->
  459.               <hr class="mt-1 mb-2" style="border:1px #E85324 dashed;"><!-- The lil underline beneath Basic Info -->
  460.              
  461.               <p>Put whatever you want here! It's like a secret notebook, most people won't find this.</p>
  462.              
  463.             </div><!-- End content -->
  464.            
  465.           </div><!-- End Tab 6 -->
  466.           <!-------------------------------------------------------- END SECRET SECTION -------------------------------------------------------->
  467.          
  468.         </div> <!-- End Tabs -->
  469.        
  470.         <!----------------------------------------------------------- END TABS ------------------------------------------------------------>
  471.      
  472.       </div><!-- End Info's Content -->
  473.      
  474.     </div><!-- End Info -->
  475.    
  476.   </div><!-- End "The Rest Of The Code" -->
  477.  
  478.   <!--------------------- START OF COLOURS --------------------->
  479.     <ul class="nav nav-justified" style="font-size:16px; border:8px;">
  480.      
  481.       <!-- 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!)-->
  482.       <li class="nav-item m-0" style="color:#FFEFE7; font-size:1rem; background:#FFEFE7;">I</li> <!-- Change this to be a secret message. -->
  483.       <li class="nav-item m-0" style="background:#FFE0D1;"></li>
  484.       <li class="nav-item m-0" style="background:#FFBD9B;"></li>
  485.       <li class="nav-item m-0" style="background:#BB8514;"></li>
  486.       <li class="nav-item m-0" style="background:#392E6D;"></li>
  487.       <li class="nav-item m-0" style="background:#1E0F00;"></li>
  488.      
  489.     </ul><!-- Ends the button list -->
  490.     <!--------------------- END OF COLOURS --------------------->
  491.  
  492. </div> <!-- End Code! -->
  493.  
  494.  
  495. <!--Credit. You may move it, but please do not delete/remove-->
  496. <div class="text-right w-100">
  497. <a href="https://toyhou.se/17050581.construction-site" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
  498. </div>
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!