API tools faq
paste
Advertisement
CrispinAsheYA

Sunset Folders - (FOLDER, F2U)

CrispinAsheYA
Jul 14th, 2022 (edited)
228
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.68 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 : #FD9855
  6. -Text White: #E2EDFF
  7. -Background Color: #3D122E
  8.  
  9. -Header Gradient: (201,58,92,1)
  10. -Header Gradient: (232,83,36,1)
  11.  
  12. Thank you for reading!
  13. Crispin
  14.  
  15. -->
  16.  
  17. <!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->
  18.  
  19. <div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="overflow:hidden; position:fixed; bottom:0; top:0; left:0; z-index:-1; background-color:#3D122E;">
  20. </div>
  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.   <!-- top divider credit -->
  25.   <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  26.     <!-- top divider image address-->
  27.     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  28.   </a>
  29.  
  30.   <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->
  31.  
  32.  
  33.  
  34.  
  35.   <!--------------------------------------------------------- START OF DO NOT REMOVE -------------------------------------------------------->
  36.    
  37.  
  38.   <div class="mx-auto mt-5" style="max-width:700px; background:#E85324; color:#000000; font-family:MS Sans Serif; border-left: 1px solid #E85324;border-top: 1px solid #E85324;border-right: 1px solid #E85324;border-bottom: 1px solid #E85324;"> <!-- Wouldn't reccomend editing this. But if you do... -->
  39.   <!-- max-width:700px defines that this code is 700 pixels across. Change this to be bigger or small to your liking, but you may break it. -->
  40.   <!-- background:#E85324; defines that the background colour (appears more like a border) is a color. Y'know, you could probably remove this if you really wanted to and be fine. -->
  41.   <!-- color:#000000; makes the text black by default unless it's stated overwise later. Y'know... Now that I think about it, I don't think any of the text is actually black. Yo... -->
  42.   <!-- font-family:MS Sans Serif; means the default font is my beloved Comic Sans. -->
  43.   <!-- Everything else is border stuff. I'd only really reccomend editing the colours unless you know what you're doing. -->
  44.  
  45.     <!--------------------------------------------------------- START HEADER --------------------------------------------------------->
  46.  
  47.     <div style="border:1px solid #E85324;">
  48.       <!-- Makes the header. Doesn't end until after the main-body div also ends, consider this DIV Bobby. -->
  49.      
  50.       <div class="col-lg-12 p-2" style="position:relative; border: 2px solid #E85324; border-radius:5px;border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;background: linear-gradient(0deg,rgba(201,58,92,1) 0%,rgba(232,83,36,1) 93%,rgba(232,83,36,1) 100%);"> <!-- This  makes up the main colour of the header. Sorry, I know, I try to stay clear of rgb but I HAD to use RGBA to do this. -->
  51.      
  52.         <a href="#" data-toggle="tooltip" title="Go Home?"><span style="font-size:18px; color:#FFFFFF"><i class="fad fa-moon-stars"></i></span></a>
  53.        
  54.         <!-- Start Minimise/Minus Square -->
  55.         <span class="pull-right" style="position:absolute; top:7px; right:65px;"> <!-- Makes it so this button is on the right of the header and is that size -->
  56.           <i class="fas fa-minus p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border: 1px solid #fff;color: #ffffff;border-radius: 5px;width: 25px;height: 25px;"></i>
  57.         </span>
  58.         <!-- End Minimise/Minus Square -->
  59.        
  60.         <!-- Start Maximise/Squares Square -->
  61.         <span class="pull-right" style="position:absolute; top:7px; right:35px;">
  62.           <i class="far fa-window-maximize p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border: 1px solid #fff;color: #ffffff;border-radius: 5px;width: 25px;height: 25px;"></i> <! --Makes the button have that icon and be that colour -->
  63.         </span>
  64.         <!-- End Maximise/Squares Square -->
  65.        
  66.         <!-- Start Close/X Square -->
  67.         <span class="pull-right" style="position:absolute; top:7px; right:5px;">
  68.           <a href="#CloseThis" data-toggle="collapse">
  69.           <i class="fas fa-times p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%); border: 1px solid #fff;color: #ffffff;border-radius: 5px;width: 25px;height: 25px;"></i>
  70.         </span> <!-- Button ends on this row -->
  71.         <!-- Start Close/X Square -->
  72.        
  73.       </div> <!--- END HEADER --->
  74.      
  75.       <!--------------------------------------------------------- END HEADER --------------------------------------------------------->
  76.      
  77.       <!--- Wraps around all the code here so the close button actually closes your code. Just a fun little easter egg! -->
  78.       <div id="CloseThis" class="collapse show"> <!--- /\/\ Let's call this <<< Div X. -->
  79.      
  80.       <!--------------------------------------------------------- START LEFT BUTTONS -------------------------------------------------------->
  81.        
  82.         <div class="row no-gutters p-1"> <!--- Makes the whole main body of the code. Call this DIV Timmy. -->
  83.          
  84.           <div class="col-sm-6 p-1"> <!-- Start Left Text Box -->
  85.            
  86.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Formatting -->
  87.              
  88.               <!------ START TAGS ------>
  89.               <p class="m-1">
  90.                
  91.                 <span class="badge p-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1));">
  92.                   <a class="btn btn-block btn-outline-warning border-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="#">tag</a>
  93.                 </span>
  94.                
  95.               </p>
  96.               <!------ END TAGS ------>
  97.              
  98.             </div> <!-- End Formatting -->
  99.              
  100.           </div> <!-- End Left Text Box -->
  101.          
  102.           <!--------------------------------------------------------- END LEFT BUTTONS -------------------------------------------------------->
  103.          
  104.           <!--------------------------------------------------------- START RIGHT BUTTONS -------------------------------------------------------->
  105.          
  106.           <div class="col-sm-6 p-1"> <!-- Defines Area -->
  107.            
  108.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Formatting -->
  109.              
  110.               <!--- Start Button --->
  111.               <div class="btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 50%, rgba(232,83,36,1));">
  112.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF; font-family:'comic sans ms';" href="#">Button</a>
  113.               </div>
  114.               <!--- End Button --->
  115.              
  116.               <!--- Start Button --->
  117.               <div class="btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 50%, rgba(232,83,36,1));">
  118.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF; font-family:'comic sans ms';" href="#">Button</a>
  119.               </div>
  120.               <!--- End Button --->
  121.              
  122.               <!--- Start Button --->
  123.               <div class="btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 50%, rgba(232,83,36,1));">
  124.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF; font-family:'comic sans ms';" href="#">Button</a>
  125.               </div>
  126.               <!--- End Button --->
  127.              
  128.             </div> <!-- End Formatting -->
  129.            
  130.           </div> <!-- End Buttons On The Right -->
  131.          
  132.           <!--------------------------------------------------------- END RIGHT BUTTONS --------------------------------------------------------->
  133.          
  134.           <!--------------------------------------------------------- START FOLDERS --------------------------------------------------------->
  135.          
  136.           <div class="col-sm-12 p-1"> <!-- Start Folders 1 (Defines Area) -->
  137.            
  138.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Start Folders 2 (Formatting) -->
  139.              
  140.               <div class="row no-gutters"> <!-- Contains links to your different folders -->
  141.                
  142.                 <!-- Start Thing 1 -->
  143.                 <div class="text-center p-1; position:center;">
  144.                   <a href="#"><span style="font-family:'comic sans ms'; color:#E85324;">Coloured Hyperlink.</span></a>
  145.                   <a class="gradient" style="font-family:'comic sans ms'; color:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%);">
  146.                     <br>Text.
  147.                   <br>Micah Jones is a dumb, barely functioning protagonist. He's also a robot, but shh- Don't tell anyone. It can just be a little secret between us, hey? Occasionally he'll attempt to solve an issue in his life, but usually he goes back to moping around a week or so after. He has a few good friends, but it's a miracle he does honestly. He's a disaster.</a>
  148.                 </div>
  149.                 <!-- End Thing 1 -->
  150.  
  151.                
  152.               </div> <!-- End Folders -->
  153.              
  154.             </div> <!-- End Folders 2 -->
  155.            
  156.           </div> <!-- End Folders 1 -->
  157.          
  158.           <!--------------------------------------------------------- END FOLDERS --------------------------------------------------------->
  159.          
  160.         </div> <!--- End DIV Timmy -->
  161.        
  162.       </div> <!--- End DIV X -->
  163.    
  164.     </div> <!--- End DIV Bobby -->
  165.    
  166.   </div> <!-- End Of Code -->
  167.  
  168. </div> <!-- End Of Colour -->
  169.  
  170. <!--------------------------------------------------------- START FOLDERS --------------------------------------------------------->
  171.  
  172. <h2><a href="#"><i class="mr-1 fa fa-folder" style="color:#E85324; font-size:18px;"></i><span style="color:#E85324; font-size:18px;">Area 1</span></a></h2>
  173.  
  174. <hr class="mt-0 mb-2">
  175.  
  176. <!-- top divider credit -->
  177. <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  178.   <!-- top divider image address-->
  179.   <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  180. </a>
  181.  
  182.  
  183. <div class="user-characters-gallery characters-gallery"> <!-- Starts setting up the gallery -->
  184.   <div class="gallery-row"> <!-- Starts setting up the gallery -->
  185.    
  186.     <!-- Start Character -->
  187.     <div class="text-center gallery-thumb character-thumb gallery-item">
  188.       <div class="thumb-image">
  189.         <a href="#">
  190.           <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/50823543_B0wGFWjdjYnS6ek.jpg" style="border:5px groove #E85324;" />
  191.         </a>
  192.       </div>
  193.       <div class="thumb-caption">
  194.         <span class="badge p-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1));">
  195.           <a class="btn btn-block btn-outline-warning border-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="#">Character Name</a>
  196.         </span>
  197.       </div>
  198.     </div>
  199.     <!-- End Character -->
  200.    
  201.   </div> <!--End Gallery-->
  202. </div> <!--End Gallery-->
  203.  
  204. <!--------STUFF ---->
  205.  
  206. <h2><a href="#"><i class="mr-1 fa fa-folder" style="color:#E85324; font-size:18px;"></i><span style="color:#E85324; font-size:18px;">Area 2</span></a></h2>
  207.  
  208. <hr class="mt-0 mb-2">
  209.  
  210. <!-- top divider credit -->
  211. <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  212.   <!-- top divider image address-->
  213.   <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  214. </a>
  215.  
  216. <div class="user-characters-gallery characters-gallery"> <!-- Starts setting up the gallery -->
  217.   <div class="gallery-row"> <!-- Starts setting up the gallery -->
  218.    
  219.     <!-- Start Character -->
  220.     <div class="text-center gallery-thumb character-thumb gallery-item">
  221.       <div class="thumb-image">
  222.         <a href="#">
  223.           <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/50823543_B0wGFWjdjYnS6ek.jpg" style="border:5px groove #E85324;" />
  224.         </a>
  225.       </div>
  226.       <div class="thumb-caption">
  227.         <span class="badge p-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1));">
  228.           <a class="btn btn-block btn-outline-warning border-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="#">Character Name</a>
  229.         </span>
  230.       </div>
  231.     </div>
  232.     <!-- End Character -->
  233.    
  234.   </div> <!--End Gallery-->
  235. </div> <!--End Gallery-->
  236.  
  237. <!--------------------------------------------------------- END FOLDERS --------------------------------------------------------->
  238.  
  239. <!----------------------------------------------------------- CREDIT DO NOT REMOVE ----------------------------------------------------------->
  240. <div class="text-right w-100">
  241.   <a href="https://toyhou.se/12238413.sunset-folders-folder-f2u-" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
  242. </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!