API tools faq
paste
Advertisement
CrispinAsheYA

World Front Page (Custom Colours)

CrispinAsheYA
Feb 9th, 2023 (edited)
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.95 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: 1.0
  4.  
  5. Default Colours
  6. -Exterior-Fill / Text Colour: #573100
  7. -Interior-Fill : #E7BC91
  8. -Card-Fill: #FFEDD7
  9. -Text White: #FFFFFF
  10. -Border Black: #000000
  11.  
  12. 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.)
  13.  
  14. Thank you for reading!
  15. Crispin
  16.  
  17. -->
  18.  
  19. <!------------------------------- START ACTUAL CODE -------------------------------->
  20. <div class="col-12 mx-auto" style="color:#573100; font-size:1.2rem; font-family:'comic sans ms'; border:none;"> <!-- Start Code -->
  21.  
  22.   <!------------------------------- START HEADING -------------------------------->
  23.   <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:#000000 4px solid;">
  24.     <div class="card rounded-0" style="background:url([HEADERIMAGE]); background-position:center; background-size:cover; border:none;"><p class="justify-content-between display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);"><span>[NAME]</span></p></div>
  25.   </div>
  26.   <!------------------------------- END HEADING -------------------------------->
  27.  
  28.   <!------------------------------- START MAIN INFO -------------------------------->
  29.   <div class="mx-auto p-0 row" style="background-color:#E7BC91; border:#000000 4px solid; border-top:none;"> <!-- Start Main Info -->
  30.  
  31.     <!------------------------------- START INFO -------------------------------->
  32.     <div class="col-12 p-0" style="background-color:#E7BC91; border:none;">
  33.       <div class="col-12 p-3 text-center" style="color:FFFFFF; font-family:'comic sans ms'; font-size:1.2rem; background:#573100; border:#000000 4px solid;"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span> Species By [USERNAME] <i class="fas fa-feather-pointed"></div>
  34.      
  35.       <div style="border:#000000 4px solid;"><!-- Sets up Rest of the code -->
  36.  
  37.         <!------------------------------- START SECTION -------------------------------->
  38.        
  39.         <div class="card-body p-3"><!-- Sets Up Section -->
  40.        
  41.           <div class="row no-gutters p-3"><!-- Also sets up section -->
  42.            
  43.             <!--------- START SECTION 1: ENTRY --------->
  44.             <div class="col-lg col-12 card mr-5 p-3 border-0 rounded-0" style="background-color:#FFEDD7;">
  45.               <p>[ENTRYTEXT]</p>
  46.             </div>
  47.             <!--------- END SECTION 1: ENTRY --------->
  48.            
  49.             <!--------- START SECTION 2: IMAGE --------->
  50.             <div class="col-lg-4 col-12 card border-0 rounded-0" style="background:transparent;">
  51.               <div class="mx-auto">
  52.                 <img src="[IMAGE]" alt="[ALTIMAGETEXT]" width="400" height="400">
  53.               </div>
  54.             </div>
  55.             <!--------- END SECTION 2: IMAGE --------->
  56.            
  57.           </div><!--End Section Set-Up-->
  58.         </div><!-- End Section -->
  59.        
  60.         <!------------------------------- END SECTION -------------------------------->
  61.          
  62.         <div class="col-12 p-3 text-center" style="color:FFFFFF; font-family:'comic sans ms'; font-size:1.2rem; background:#573100; border-bottom:#000000 8px solid; border-top:#000000 8px solid;"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span> LORE <i class="fas fa-feather-pointed"><p>[SLOGAN/SUBCULTURES]</p></div>
  63.          
  64.         <!------------------------------- START SECTION -------------------------------->
  65.        
  66.         <div class="card-body p-3"><!-- Sets Up Section -->
  67.        
  68.           <div class="row no-gutters p-3"><!-- Also sets up section -->
  69.            
  70.             <!--------- START SECTION 3: GLOSSARY --------->
  71.             <div class="col-12 card p-3 border-0 rounded-0 mb-3" style="background-color:#FFEDD7;">
  72.               <p style="font-size:1.8rem;">GLOSSARY</p>
  73.               <p>[WORD] - [DEFINITION]</p>
  74.             </div>
  75.             <!--------- END SECTION 1: GLOSSARY --------->
  76.              
  77.             <!--------- START SECTION 4: SUBCULTURE OVERVIEW --------->
  78.             <div class="col-lg-6 col-12 p-3 m-0 border-0 rounded-0" style="background-color:#FFEDD7;">
  79.               <p style="font-size:1.8rem;">[SUBCULTURE]</p>
  80.                 <ul>
  81.                   <li>[SUBCULTURETEXT]</li>
  82.                 </ul>
  83.             </div>
  84.             <!--------- END SECTION 4: SUBCULTURE OVERVIEW --------->
  85.              
  86.             <!--------- START SECTION 4: SUBCULTURE OVERVIEW --------->
  87.             <div class="col-lg-6 col-12 p-3 m-0 border-0 rounded-0" style="background-color:#FFEDD7;">
  88.               <p style="font-size:1.8rem;">[SUBCULTURE]</p>
  89.                 <ul>
  90.                   <li>[SUBCULTURETEXT]</li>
  91.                 </ul>
  92.             </div>
  93.             <!--------- END SECTION 4: SUBCULTURE OVERVIEW --------->
  94.              
  95.           </div><!--End Section Set-Up-->
  96.         </div><!-- End Section -->
  97.         <!------------------------------- END SECTION -------------------------------->
  98.        
  99.         <div class="col-12 p-3 text-center" style="color:FFFFFF; font-family:'comic sans ms'; font-size:1.2rem; background:#573100; border-bottom:#000000 8px solid; border-top:#000000 8px solid;"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span> MAKE YOUR OWN! <i class="fas fa-feather-pointed"></div>
  100.        
  101.         <!------------------------------- START SECTION -------------------------------->
  102.        
  103.         <div class="card-body p-3"><!-- Sets Up Section -->
  104.        
  105.           <div class="row no-gutters p-3"><!-- Also sets up section -->
  106.            
  107.             <!--------- START SECTION 4: MYO --------->
  108.             <div class="col-12 card p-3 border-0 rounded-0 mb-3" style="background-color:#FFEDD7;">
  109.               <p>[MYOTEXT]</p>
  110.             </div>
  111.             <!--------- END SECTION 4: MYO --------->
  112.            
  113.             <!--------- START SECTION 5: IMAGE --------->
  114.             <div class="col-lg-3 col-12 card mr-5 border-0 rounded-0" style="background:transparent;">
  115.               <div class="mx-auto my-3">
  116.                 <img src="[IMAGE]" alt="[ALTIMAGETEXT]" width="400" height="400">
  117.               </div>
  118.             </div>
  119.             <!--------- END SECTION 5: IMAGE --------->
  120.            
  121.             <!--------- START SECTION 6: DOS & DON'TS --------->
  122.             <div class="col-lg col-12 card mx-auto my-3 p-3 border-0 rounded-0" style="background-color:#FFEDD7;"> <!-- Start Set-Up -->
  123.              
  124.               <div class="row no-gutters p-3"> <!-- Start Row -->
  125.              
  126.                 <div class="col-lg-6 col-12 p-0 m-0 border-0 rounded-0">
  127.                   <div class="text-center" style="font-size:1.5rem;"><b>[MYOTYPE1]</b></div>
  128.                   <ul>
  129.                     <li>[MYOTYPE1TEXT]</li>
  130.                   </ul>
  131.                 </div>
  132.                
  133.                 <div class="col-lg-6 col-12 p-0 m-0 border-0 rounded-0">
  134.                   <div class="text-center" style="font-size:1.5rem;"><b>[MYOTYPE2]</b></div>
  135.                   <ul>
  136.                     <li>[MYOTYPE2TEXT]</li>
  137.                   </ul>
  138.                 </div>
  139.                
  140.               </div> <!-- End Row -->
  141.              
  142.             </div> <!-- End Set-Up -->
  143.             <!--------- END SECTION 6: DOS & DON'TS --------->
  144.            
  145.           </div><!--End Section Set-Up-->
  146.         </div><!-- End Section -->
  147.         <!------------------------------- END SECTION -------------------------------->
  148.        
  149.       </div> <!-- End Rest Of The Code -->
  150.       <!------------------------------- END REST OF THE CODE -------------------------------->
  151.      
  152.     </div> <!-- End Info -->
  153.     <!------------------------------- END INFO -------------------------------->
  154.  
  155.     <!------------------------------- START CREDITS -------------------------------->
  156.     <div class="col-12 py-3 text-center" style="background-color:#573100; border:#000000 4px solid;">
  157.       <a href="[IMAGESOURCE]" data-toggle="tooltip" title="Image Source" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></a>
  158.       <a href="[HEADERBACKGROUNDIMAGESOURCE]" data-toggle="tooltip" title="Header Background Image" data-original-title="Header Background Image" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></a>
  159.       <a href="https://toyhou.se/19283348.interstellar" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-egg"></i></a>
  160.       <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed"></i></a>
  161.       <a href="[BONUSSOURCE]" data-toggle="tooltip" title="Bonus Source" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-feather-pointed"></i></a>
  162.     </div>
  163.     <!------------------------------- END CREDITS -------------------------------->
  164.  
  165.   </div> <!-- End Main Info -->
  166.  
  167. </div> <!-- End Code -->
  168. <!------------------------------- END ACTUAL CODE -------------------------------->
  169.  
  170. <!--
  171. How To Use Changeable Variables:
  172. 1. Press [CTRL]+F on your keyboard
  173. 2. Press the "+" button at the bottom left of the window
  174. 3. Highlight one of the variables written similar to: [VARIABLE]
  175. 4. Write the new variable in the section in the Find&Replace that says "replace with"
  176. 5. Press the "all" on the right of the "Replace with" input bar.
  177.  
  178. [HEADERIMAGE] | [NAME] | [USERNAME] | [ENTRYTEXT] | [IMAGE] | [IMAGEALTTEXT] | [SLOGAN/SUBCULTURES] | [WORD] | [DEFINITION] | [SUBCULTURE] | [SUBCULTURETEXT] | [MYOTEXT] | [MYOTYPE1] | [MYOTYPE1TEXT] | [MYOTYPE2] | [MYOTYPE2TEXT] | [IMAGESOURCE] | [HEADERBACKGROUNDIMAGESOURCE] | [BONUSSOURCE]
  179.  
  180. -->
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!