API tools faq
paste
Advertisement
CrispinAsheYA

Sunset Folders

CrispinAsheYA
Dec 13th, 2022 (edited)
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.35 KB | Source Code | 0 0
raw download clone embed print report
  1. <div class="card rounded-0 bg-faded mb-5" style="border:0px;">
  2.   <h1 class="card-header" style="text-align:center; font-size:2rem; border:0px;"><i class="fad fa-moon"></i> Sunset Folders <i class="fad fa-moon"></i></h1>
  3.   <div class="row p-3" style="text-align:center; font-size:1.2rem;">
  4.     <div class="col-md-12 col-lg-7">
  5.       <div class="card-body p-3">
  6.         <p>Code Started: (11:25) 13.12.22</p>
  7.         <p>Code Finished: (12:23) 13.12.22</p>
  8.         <p>Hi! I was remaking my folders and I realised this code specifically was relaly ugly formatted- So I fixed it! Hooray!<br>The Guest-OC of this Folder is <a href="https://toyhou.se/CrispinAsheYA/characters/folder:2799427">The Biscuit Club</a> by @CrispinAsheYA! (Me!) Go and.. Buy my book!</p>
  9.       </div>
  10.       <hr>
  11.       <ul>
  12.         <li><i class="fad fa-star"></i>HTML</p></li>
  13.         <li><i class="fad fa-star"></i>Folder / Directory</p></li>
  14.         <li><i class="fad fa-star"></i>Custom Colours</p></li>
  15.         <li><i class="fad fa-star"></i>Latest Version</p></li>
  16.       </ul>
  17.     </div>
  18.     <div class="col-md-12 col-lg-5">
  19.       <div class="card-body p-3">
  20.         <a class="btn btn-primary btn-block rounded-0 border-0 mb-2" href="https://toyhou.se/CripsyCodes/characters" style="font-size:1.4rem;">Code Directory</a>
  21.         <a class="btn btn-primary btn-block rounded-0 border-0 mb-2" href="https://pastebin.com/ZSEPAj5W" style="font-size:1.4rem;">Code - Custom Colours</a>
  22.         <a class="btn btn-secondary btn-block rounded-0 border-0 mb-2" href="#" style="font-size:1.4rem;">Code - Bootstrap</a>
  23.       </div>
  24.     </div>
  25.   </div>
  26. </div>
  27.  
  28. <!--------------------- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules ---------------------
  29.  
  30. Version 2.1
  31.  
  32. Default Colours
  33. -Credit-Colour White: #FFFFFF
  34. -Text-Colour Black: #000000
  35. -Card-Background Cream: #FD9855
  36. -Outer-Border Orange: #E85324
  37. -Gradient-Colour Top: rgba(232,83,36,1)
  38. -Gradient-Colour Bottom: rgba(163,193,253,1)
  39.  
  40. 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.)
  41.  
  42. Thank you for reading!
  43. Crispin
  44.  
  45. -->
  46.  
  47. <!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->
  48.  
  49. <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; height:750px;" class="card-block"> <!-- Start Background Image -->
  50.  
  51.   <!-- top divider credit -->
  52.   <a href="https://toyhou.se/2108365.-resources/10613944.-dividers#35571013">
  53.     <!-- top divider image address-->
  54.     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35571013_OKTdBHRiFuWJcTS.png">
  55.   </a>
  56.  
  57.   <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->
  58.  
  59.  
  60.  
  61.  
  62.   <!--------------------------------------------------------- START OF DO NOT REMOVE -------------------------------------------------------->
  63.    
  64.   <!-- Start Code -->
  65.   <div class="mx-auto mt-5" style="max-width:700px; background:#E85324; color:#000000; font-family:'comic sans ms'; border:1px solid #E85324;"> <!-- Wouldn't reccomend editing this. But if you do... -->
  66.   <!-- mx-auto means the margin along the horizontal axis is always gucci -->
  67.   <!-- mt-5 means there's a margin of 5 points along the top -->
  68.   <!-- 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. -->
  69.   <!-- 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. -->
  70.   <!-- 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... -->
  71.   <!-- font-family:MS Sans Serif; means the default font is my beloved Comic Sans. -->
  72.   <!-- Everything else is border stuff. I'd only really reccomend editing the colours unless you know what you're doing. -->
  73.  
  74.     <!--------------------------------------------------------- START HEADER --------------------------------------------------------->
  75.  
  76.     <div style="border:1px solid #E85324;"><!-- Start Header -->
  77.      
  78.       <div class="col-lg-12 p-2" style="position:relative; border:2px solid #E85324; border-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. -->
  79.      
  80.         <a href="https://toyhou.se/12238413.sunset-folders-folder-f2u-" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="font-size:18px; color:#FFFFFF"><i class="fad fa-moon-stars"></i></span></a><!-- Coding credit! You may Move, but do not REmove. Haha, pun. See what I did there? -->
  81.        
  82.         <!-- Start Minimise/Minus Square -->
  83.         <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 -->
  84.           <a href="[UNSORTEDPAGELINK]" data-toggle="tooltip" title="Unsorted"><i class="fas fa-minus p-1 justify-content-center" style="width:25px; height:25px; color:#FFFFFF; border:1px solid #FFFFFF; border-radius:5px; background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%);"></i></a>
  85.         </span>
  86.         <!-- End Minimise/Minus Square -->
  87.        
  88.         <!-- Start Maximise/Squares Square -->
  89.         <span class="pull-right" style="position:absolute; top:7px; right:35px;">
  90.           <a href="[ALLCHARACTERSPAGELINK]" data-toggle="tooltip" title="All Characters"><i class="far fa-window-maximize p-1 justify-content-center" style="width:25px; height:25px; color:#FFFFFF; border:1px solid #FFFFFF; border-radius:5px; background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%);"></i></a> <!-- Makes the button have that icon and be that colour -->
  91.         </span>
  92.         <!-- End Maximise/Squares Square -->
  93.        
  94.         <!-- Start Close/X Square -->
  95.         <span class="pull-right" style="position:absolute; top:7px; right:5px;">
  96.           <a href="#CloseThis" data-toggle="collapse">
  97.           <i class="fas fa-times p-1 justify-content-center" style="width:25px; height:25px; color:#FFFFFF; border:1px solid #FFFFFF; border-radius:5px; background:linear-gradient(135deg,rgba(163,193,253,1)50%, rgba(232,83,36,1)50%);"></i>
  98.         </span> <!-- Button ends on this row -->
  99.         <!-- Start Close/X Square -->
  100.        
  101.       </div> <!--- END HEADER --->
  102.      
  103.       <!--------------------------------------------------------- END HEADER --------------------------------------------------------->
  104.          
  105.           <!--- Start Collapse - Wraps around all the code here so the close button actually closes your code. Just a fun little easter egg! -->
  106.       <div id="CloseThis" class="collapse show">
  107.      
  108.       <!--------------------------------------------------------- START LEFT TAGS -------------------------------------------------------->
  109.        
  110.         <div class="row no-gutters p-1"> <!--- Makes the whole main body of the code. Call this 'Main' -->
  111.          
  112.           <div class="col-sm-6 p-1"> <!-- Start Left Text Box -->
  113.            
  114.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Formatting -->
  115.              
  116.               <!--- Start Button --->
  117.               <div class="btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg, rgba(255,50,118,1) 5%, rgba(203,0,0,1), rgba(64,0,0,1));">
  118.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="[BUTTONLINK]">[BUTTONNAME]</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; color:#FFFFFF;" href="[BUTTONLINK]">[BUTTONNAME]</a>
  125.               </div>
  126.               <!--- End Button --->
  127.              
  128.               <!--- Start Button --->
  129.               <div class="collapsed btn p-0 m-1 border-0 rounded-0" style="background:linear-gradient(0deg, rgba(180,51,108,1) 5%, rgba(95,21,96,1), rgba(21,11,73,1));">
  130.                 <a class="collapsed btn btn-outline btn-block border-0 rounded-0" data-toggle="collapse" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1)); color:#FFFFFF;" href="#warnings">Content Warnings</a> <!-- Heading -->
  131.               </div>
  132.               <!--- End Button --->
  133.              
  134.               <!-- Paste here -->
  135.              
  136.             </div> <!-- End Formatting -->
  137.              
  138.           </div> <!-- End Left Text Box -->
  139.          
  140.           <!--------------------------------------------------------- END LEFT TAGS ------------------------------------------------------->
  141.          
  142.           <!------------------------------------------------------ START RIGHT BUTTONS ---------------------------------------------------->
  143.          
  144.           <div class="col-sm-6 p-1"> <!-- Defines Area -->
  145.            
  146.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Formatting -->
  147.              
  148.               <!--- Start Button --->
  149.               <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));">
  150.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="[BUTTONLINK]">[BUTTONNAME]</a>
  151.               </div>
  152.               <!--- End Button --->
  153.              
  154.               <!--- Start Button --->
  155.               <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));">
  156.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="[BUTTONLINK]">[BUTTONNAME]</a>
  157.               </div>
  158.               <!--- End Button --->
  159.              
  160.               <!--- Start Button --->
  161.               <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));">
  162.                 <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; color:#FFFFFF;" href="[BUTTONLINK]">[BUTTONNAME]</a>
  163.               </div>
  164.               <!--- End Button --->
  165.              
  166.             </div> <!-- End Formatting -->
  167.            
  168.           </div> <!-- End Buttons On The Right -->
  169.          
  170.           <!----------------------------------------------------- END RIGHT BUTTONS ------------------------------------------------------->
  171.          
  172.           <!----------------------------------------------------- START TAG DROPDOWN ---------------------------------------------------->
  173.          
  174.           <div class="collapse" id="warnings"> <!-- Starts Collapse -->
  175.             <div class="p-3" style="color:#000000; font-family:'comic sans ms'; background-color:#FD9855; border:5px solid #E85324;"> <!-- Start Card Interior -->
  176.              
  177.               <p class="mb-2">[TEXT] This text here is optional, but I like to have it!</p>
  178.                  
  179.               <!-- START TAG -->
  180.               <span class="btn p-0 border-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1)); border-radius:0px;">
  181.                 <a class="btn btn-block btn-outline-warning border-0 py-1 px-2" style="mix-blend-mode:luminosity; color:#FFFFFF; border-radius:0px;">[TAGNAME]</a>
  182.               </span>
  183.               <!-- END TAG -->
  184.              
  185.               <!-- START TAG (with a link!) -->
  186.               <span class="btn p-0 border-0" style="background:linear-gradient(0deg, rgba(201,58,92,1) 5%, rgba(232,83,36,1)); border-radius:0px;">
  187.                 <a class="btn btn-block btn-outline-warning border-0 py-1 px-2" href="[TAGLINK]" style="mix-blend-mode:luminosity; color:#FFFFFF; border-radius:0px;">[TAGNAME]</a>
  188.               </span>
  189.               <!-- END TAG (either use the linked versions or non linked versions, don't mix & match. Unless you want to.) -->
  190.              
  191.               <!-- ADD MORE TAGS HERE! -->
  192.                
  193.             </div> <!-- End Card Interior -->
  194.           </div> <!-- End Collapse -->
  195.           <!----------------------------------------------------- END TAG DROPDOWN ---------------------------------------------------->
  196.          
  197.           <!----------------------------------------------------- START DESCRIPTION ---------------------------------------------------->
  198.          
  199.           <div class="col-sm-12 p-1"> <!-- Start Text 1 (Defines Area) -->
  200.            
  201.             <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#FD9855;"> <!-- Start Text 2 (Formatting) -->
  202.              
  203.               <div class="no-gutters text-center p-4" style="height:300px; overflow:auto;"> <!-- Contains Text (Text 3) -->
  204.                
  205.                 <!-- Start Description -->
  206.                   <p>[TEXT]</p>
  207.                 <!-- End Description -->
  208.  
  209.                
  210.               </div> <!-- End Text 3 -->
  211.              
  212.             </div> <!-- End Text 2 -->
  213.            
  214.           </div> <!-- End Text 1 -->
  215.          
  216.           <!----------------------------------------------------- END DESCRIPTION ----------------------------------------------------->
  217.          
  218.         </div> <!--- End Main -->
  219.        
  220.       </div> <!--- End Collapse -->
  221.    
  222.     </div> <!--- End Header -->
  223.    
  224.   </div> <!-- End Code -->
  225.  
  226. </div> <!-- End Background Image -->
  227.  
  228. <!--
  229. Quick Changes:
  230. (Highlight These and press ctrl+F to change commonly-changed information quickly!)
  231.  
  232. [UNSORTEDPAGELINK]
  233. [ALLCHARACTERSPAGELINK]
  234. [TAGLINK]
  235. [TAGNAME]
  236. [BUTTONLINK]
  237. [BUTTONNAME]
  238. [TEXT]
  239. -->
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!