API tools faq
paste
Advertisement
CrispinAsheYA

Pizzaria (Custom Colours)

CrispinAsheYA
Aug 10th, 2023 (edited)
779
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.97 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/17098747.03-terms-of-service --
  2.  
  3. Version: 1.0
  4.  
  5. Default Colours
  6. -Box-Background: #FFF7E4
  7. -Darker-Highlight: #CEB896
  8. -Even-Darker: #C0AC7C
  9. -Cheese-Yellow: #FAE56F
  10. -Important White: #FFFFFF
  11. -Important Black: #000000
  12. -Font Awesomes: fa-cheese-swiss | fa-pizza-slice
  13.  
  14. 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.)
  15.  
  16. Thank you for reading!
  17. Crispin
  18.  
  19. -->
  20.  
  21. <!------------------------------- START ACTUAL CODE -------------------------------->
  22. <div class="col-12 p-3 mx-auto border-0 rounded-0" style="color:#000000; font-size:1rem; background:url(https://img.freepik.com/premium-vector/chess-seamless-background-vector-illustration_118339-2397.jpg?size=626&ext=jpg); background-size:auto;">
  23.  
  24.   <div class="col-12 col-lg-10 p-3 pt-5 mx-auto" style="background-color:#FFF7E4;">
  25.    
  26.     <!------------------------------- START HEADING -------------------------------->
  27.     <div class="p-2">
  28.       <div class="card rounded-0" style="background:linear-gradient(90deg, rgba(206,184,150,1) 20%, rgba(21,127,0,1) 60%, rgba(255,255,255,1), rgba(203,0,0,1)); border:#000000 4px solid;"><p class="display-4 m-1 p-3">[NAME]</p></div>
  29.     </div>
  30.     <!------------------------------- END HEADING -------------------------------->
  31.    
  32.     <!------------------------------- START CONTENT -------------------------------->
  33.     <div class="row mx-auto p-0 pt-3">
  34.      
  35.       <!------------------------------- START BASIC INFO -------------------------------->
  36.       <div class="col-lg-7 col-12 p-2">
  37.         <div style="border:#000000 4px solid; height:300px; overflow:auto;">
  38.          
  39.           <!--- BASIC START INFO -->
  40.           <div class="col-12 mt-2 my-1 row">
  41.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  42.             <div class="col-10 p-3" style="background-color:#CEB896;">Name: [NAME]</div>
  43.           </div>
  44.           <div class="col-12 mt-2 my-1 row">
  45.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  46.             <div class="col-10 p-3" style="background-color:#CEB896;">Nicknames: [NICKNAME]</div>
  47.           </div>
  48.           <div class="col-12 my-1 row">
  49.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  50.             <div class="col-10 p-3" style="background-color:#CEB896;">Gender: [GENDER]</div>
  51.           </div>
  52.           <div class="col-12 my-1 row">
  53.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  54.             <div class="col-10 p-3" style="background-color:#CEB896;">Orientation: [ORIENTATION]</div>
  55.           </div>
  56.           <div class="col-12 my-1 row">
  57.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  58.             <div class="col-10 p-3" style="background-color:#CEB896;">Age: [AGE]</div>
  59.           </div>
  60.           <div class="col-12 my-1 row">
  61.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  62.             <div class="col-10 p-3" style="background-color:#CEB896;">Birthday: [BIRTHDAY]</div>
  63.           </div>
  64.           <div class="col-12 my-1 row">
  65.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  66.             <div class="col-10 p-3" style="background-color:#CEB896;"><a href="[LINKSPECIES]" style="color:#33449B;">Species: [SPECIES]</a></div>
  67.           </div>
  68.           <div class="col-12 my-1 row">
  69.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  70.             <div class="col-10 p-3" style="background-color:#CEB896;">Occupation: [OCCUPATION]</div>
  71.           </div>
  72.           <div class="col-12 mb-2 my-1 row">
  73.             <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  74.             <div class="col-10 p-3" style="background-color:#CEB896;"><a href="[LINKTHEME]" style="color:#33449B;">Theme: [THEME]</a></div>
  75.           </div>
  76.           <!--- END START INFO -->
  77.          
  78.         </div>
  79.       </div>
  80.       <!------------------------------- END BASIC INFO -------------------------------->
  81.      
  82.       <!------------------------------- START IMAGE -------------------------------->
  83.       <div class="col-lg-5 col-12 p-2">
  84.         <div class="pb-5" style="background-color:#CEB896; border:#000000 4px solid;">
  85.           <div class="col-12 col-sm-3 col-md-4 col-xl-12 mb-2 mb-sm-0 order-1 order-sm-2">
  86.             <div class="card bg-transparent mb-5 my-3 border-0" style="max-width:300px; margin-left:auto; margin-right:auto;">
  87.               <img src="[IMAGE]" class="fr-fil fr-dib" max-width="1000" max-height="1000">
  88.             </div>
  89.           </div>
  90.         </div>
  91.       </div>
  92.       <!------------------------------- END IMAGE -------------------------------->
  93.      
  94.       <!------------------------------- START TABS -------------------------------->
  95.       <div class="col-lg-7 col-12 p-2">
  96.        
  97.         <!---------- START BUTTONS ---------->
  98.         <div style="font-size:1.2rem; background-color:#C0AC7C; border:#000000 2px solid;">
  99.           <ul class="nav nav-tabs card-header-tabs row p-0 m-0">
  100.             <li class="col-12 col-lg-10 nav-item py-2 m-0" style="color:#000000; border:#000000 2px solid; border-radius:0px"><b>LORE</b></li>
  101.             <li class="col-12 col-lg-1 nav-item p-0 m-0 text-center"><a class="nav-link px-0" data-toggle="tab" href="#one" style="color:#000000;  background-color:#C0AC7C; border:#000000 2px solid; border-radius:0px"><i class="fas fa-pizza-slice"></i></a></li>
  102.             <li class="col-12 col-lg-1 nav-item p-0 m-0 text-center"><a class="nav-link px-0" data-toggle="tab" href="#two" style="color:#000000;  background-color:#C0AC7C; border:#000000 2px solid; border-radius:0px"><i class="fas fa-cheese-swiss"></i></a></li>
  103.           </ul>
  104.         </div>
  105.         <!---------- END BUTTONS ---------->
  106.        
  107.         <!---------- START CONTENT ---------->
  108.         <div class="tab-content" style="height:500px; background-color:#FAE56F; border:#000000 4px solid; border-top:none;">
  109.          
  110.           <!------ START INFO TAB ------>
  111.           <div class="tab-pane active show" id="one"><!-- Start Tab-->
  112.             <div class="card-body p-3 table-responsive" style="height:496px;"><!--Start Tab Set-Up-->
  113.              
  114.               <!------ START TEXT ----->
  115.               <span style="font-size:1.4rem;">Info</span><hr class="mt-1 mb-2">
  116.               <p>[INFO]</p>
  117.               <p style="color:#FAE56F;">-</p>
  118.              
  119.               <span style="font-size:1.4rem;">Personality</span><hr class="mt-1 mb-2">
  120.               <p>[PERSONALITY]</p>
  121.               <p style="color:#FAE56F;">-</p>
  122.              
  123.               <span style="font-size:1.4rem;">Story</span><hr class="mt-1 mb-2">
  124.               <p>[STORY]</p>
  125.               <p style="color:#FAE56F;">-</p>
  126.              
  127.               <span style="font-size:1.4rem;">Backstory</span><hr class="mt-1 mb-2">
  128.               <p>[BACKSTORY]</p>
  129.               <p style="color:#FAE56F;">-</p>
  130.              
  131.               <span style="font-size:1.4rem;">Trivia</span><hr class="mt-1 mb-2">
  132.               <p>[TRIVIA]</p>
  133.               <p style="color:#FAE56F;">-</p>
  134.               <!------ END TEXT ----->
  135.              
  136.             </div><!--End Tab Set-Up-->
  137.           </div><!-- End Tab -->
  138.           <!------ END INFO TAB ------>
  139.          
  140.           <!------ START DESIGN TAB ------>
  141.           <div class="tab-pane fade" id="two"><!-- Start Tab-->
  142.             <div class="card-body p-3 table-responsive" style="height:496px;"><!--Start Tab Set-Up-->
  143.              
  144.               <!------ START IMAGE ------>
  145.               <div class="card bg-transparent border-0 rounded-0 pb-3" style="max-width:600px; margin-left:auto; margin-right:auto;">
  146.                 <img src="[IMGREFSHEET]">
  147.                 <a href="[LINKREFSHEET]" data-toggle="tooltip" title="Full Size" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:1.4rem"> <i class="fas fa-pizza-slice"></i></a>
  148.               </div>
  149.               <!------ END IMAGE ------>
  150.                
  151.               <!------ START TEXT ----->
  152.               <span style="font-size:1.4rem;">Design Notes</span><hr class="mt-1 mb-2">
  153.              
  154.               <div class="col-12 mt-2 my-1 row">
  155.                 <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  156.                 <div class="col-10 p-3">[NOTE]</div>
  157.               </div>
  158.              
  159.               <div class="col-12 mt-2 my-1 row">
  160.                 <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  161.                 <div class="col-10 p-3">[NOTE]</div>
  162.               </div>
  163.              
  164.               <div class="col-12 mt-2 my-1 row">
  165.                 <div class="col-2"><img src="http://www.emoji.co.uk/files/emoji-one/food-drink-emoji-one/1627-slice-of-pizza.png" style="height:40px; transform:rotate(225deg);"></div>
  166.                 <div class="col-10 p-3">[NOTE]</div>
  167.               </div>
  168.               <!------ END TEXT ----->
  169.              
  170.             </div><!--End Tab Set-Up-->
  171.           </div><!-- End Tab -->
  172.           <!------ END DESIGN TAB ------>
  173.          
  174.         </div>
  175.         <!---------- END CONTENT ----------->
  176.        
  177.       </div>
  178.       <!------------------------------- END TABS -------------------------------->
  179.      
  180.       <!------------------------------- START BUDDIES -------------------------------->
  181.       <div class="col-lg-5 col-12 m-0 p-2">
  182.         <div style="height:550px; overflow:auto;">
  183.          
  184.           <!-- START FRIEND -->
  185.           <div class="col-12 mb-3 p-2" style="background-color:#CEB896; border:#000000 4px solid;">
  186.             <div class="col-12 row p-0 m-0" style="background-color:#FAE56F; border:#000000 4px solid;">
  187.               <div class="col-3 m-0"  style="background:url([FRIENDIMAGE]); background-repeat:no-repeat; background-size:contain;"></div>
  188.               <div class="col-9 p-0">
  189.                 <div class="col-12 py-2" style="background-color:#C0AC7C; font-size:1.4rem; border-bottom:#000000 4px solid;"><a href="[FRIENDLINK]" style="color:#FAE56F;">[FRIENDNAME]</a></div>
  190.                 <p class="p-2">[FRIENDTEXT]</p>
  191.                 <p style="color:#CEB896;">-</p>
  192.               </div>
  193.             </div>
  194.           </div>
  195.           <!-- END FRIEND -->
  196.          
  197.           <!-- START FRIEND -->
  198.           <div class="col-12 mb-3 p-2" style="background-color:#CEB896; border:#000000 4px solid;">
  199.             <div class="col-12 row p-0 m-0" style="background-color:#FAE56F; border:#000000 4px solid;">
  200.               <div class="col-3 m-0"  style="background:url([FRIENDIMAGE]); background-repeat:no-repeat; background-size:contain;"></div>
  201.               <div class="col-9 p-0">
  202.                 <div class="col-12 py-2" style="background-color:#C0AC7C; font-size:1.4rem; border-bottom:#000000 4px solid;"><a href="[FRIENDLINK]" style="color:#FAE56F;">[FRIENDNAME]</a></div>
  203.                 <p class="p-2">[FRIENDTEXT]</p>
  204.                 <p style="color:#CEB896;">-</p>
  205.               </div>
  206.             </div>
  207.           </div>
  208.           <!-- END FRIEND -->
  209.          
  210.         </div>
  211.       </div>
  212.       <!------------------------------- END BUDDIES -------------------------------->
  213.      
  214.     </div>
  215.     <!------------------------------- END CONTENT -------------------------------->
  216.    
  217.   </div>
  218. </div>
  219. <div class="text-center">
  220. <a href="https://toyhou.se/22903167.pizzaria" style="color:#FFFFFF;"><i class="fas fa-pizza-slice"></i> Code By TomcatCodes / CrispinAsheYA</a>
  221. </div>
  222.  
  223. <!--
  224. [NAME] | [NICKNAME] | [GENDER] | [ORIENTATION] | [AGE] | [BIRTHDAY] | [LINKSPECIES] | [SPECIES] | [OCCUPATION] | [LINKTHEME] | [THEME] | [IMAGE]
  225. [INFO] | [PERSONALITY] | [STORY] | [BACKSTORY] | [TRIVIA] | [IMGREFSHEET] | [LINKREFSHEET] | [NOTE]
  226. [FRIENDIMAGE] | [FRIENDLINK] | [FRIENDNAME] | [FRIENDTEXT]
  227. -->
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!