API tools faq
paste
Advertisement
CrispinAsheYA

Neon (PROFILE, F2U)

CrispinAsheYA
Mar 13th, 2022 (edited)
218
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--RULES
  4.  
  5. YOU MAY
  6. -Frankenstein this with other codes and add/change/delete sections to your liking
  7. -Change colours, images, fonts, ect.
  8.  
  9. YOU MAYN'T
  10. -Resell or copy and paste this template pretty much exactly and pass it off as your own
  11. -Change every single image to be Minecraft Raw Porkchop
  12.  
  13. HOW TO USE
  14. -When editing, remember to turn WYSIWYG off! (AKA, the button should say "Enable WYSIWYG"! What does that stand for anyway?
  15. -I tend to litter comments everywhere. I like to assume that somewhere out there, one of my templates it's someone's first ever experience with HTML so I tend to explain accordingly. Feel free to delete the comments to your liking.
  16. -To change the colours, I reccomend copy and pasting all of your code into a Google Doc, going onto "find and replace" and using the colours below to quickly change the colours globally.
  17.  
  18. Default Colours
  19. -Bright Colour: #7544C7
  20. -Darker Colour: #24143E
  21. -Background Colour: #251537
  22.  
  23. Thank you for reading!
  24. Crispin
  25.  
  26. -->
  27.  
  28. <!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->
  29.  
  30. <div class="col-lg-2 col-md-3 hidden-sm-down sidebar"></div>
  31. <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:#251537;">
  32. </div>
  33.  
  34. <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->
  35.  
  36.  
  37.  
  38.  
  39. <!----------------------------------------------------------- START OF DO NOT REMOVE ----------------------------------------------------------->
  40.  
  41.  
  42. <div class="card d-block border-0 align-content-center;" style="background-color:251537; border-radius: 0 0 .25rem .25rem; margin: -8px -0px -0px -0px; padding:0px;">
  43.   <!-- This sets up the box you're writing in. I suggest not fiddling this. -->
  44.  
  45.   <div class="container p-0 m-0 mx-auto;" style="max-width: 1250px; font-size: 12px; letter-spacing: .5px;"> <!-- Div Timmy-->
  46.    
  47.  
  48. <!----------------------------------------------------------- END OF DO NOT REMOVE ----------------------------------------------------------->
  49.     <!--------------------------------------------------------- START OF BUTTONS --------------------------------------------------------->
  50.    
  51.    
  52.     <ul class="nav nav-justified" style="border:8px; letter-spacing:1px; font-size:16px; background-color:251537;"> <!-- Defines this as the list for the buttons -->
  53.      
  54.      
  55.       <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#7544C7; background: #24143E; border: 6px #7544C7 solid; border-radius: 4px 4px 0 0;" data-toggle="pill" href="#one">ONE</a></li>
  56.       <!-- <li> and </li> defines each point of the list (like a bullet point!) making each button distinct -->
  57.      
  58.       <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#7544C7; background: #24143E; border: 6px #7544C7 solid; border-radius: 4px 4px 0 0;" data-toggle="pill" href="#two">TWO</a></li>
  59.       <!-- nav-link btn btn is essentially the building block of the button -->
  60.      
  61.       <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#7544C7; background: #24143E; border: 6px #7544C7 solid; border-radius: 4px 4px 0 0;" data-toggle="pill" href="#three">THREE</a></li>
  62.       <!-- anything within the style="##" is fun stuff like font of the writing inside the button, the background colour, border colour & thickness, ect. -->
  63.      
  64.       <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#7544C7; background: #24143E; border: 6px #7544C7 solid; border-radius: 4px 4px 0 0;" data-toggle="pill" href="#four">FOUR</a></li>
  65.       <!-- data-toggle="pill" means this is a button   and    href="#four" sets up which tab the button leads too. -->
  66.      
  67.       <!--
  68.      <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#7544C7; background: #24143E; border: 6px #7544C7 solid; border-radius: 4px 4px 0 0;" data-toggle="pill" href="#five">FIVE</a></li>
  69.      -->
  70.       <!-- You can add more buttons at your lesiure by copy-pasting this greyed out block here! Just remember to change the "href="five" to whatever you may rename the new location. The word here has to match the word later down into the code where you add the new section.-->
  71.      
  72.      
  73.     </ul> <!-- Ends the button list -->
  74.    
  75.    
  76.     <!--------------------------------------------------------- END OF BUTTONS --------------------------------------------------------->
  77.    
  78.    
  79.    
  80.     <!--------------------------------------------------------- START OF TABS --------------------------------------------------------->
  81.    
  82.     <div class="card card-outline-secondary bg-faded tab-content mt-2 p-3" style="border: 6px #7544C7 solid; border-radius: 4px 4px 0 0; border-color:#7544C7; background-color:#24143E;">
  83.       <!--- This basically sets up that we're doing tabs now. Best not to edit this area. Consider this DIV Timmy--->
  84.      
  85.      
  86.      
  87.       <!-------------------------------------------------------- START TAB ONE ------------------------------------------------------->
  88.      
  89.       <div class="tab-pane fade show active" id="one" style="max-height:500px; overflow:auto;">
  90.         <!--- Sets up that we're doing THIS specific tab and that it should reach a maximum of 500 pixels in height before it starts to scroll. --->
  91.        
  92.         <h1 class="display-4 text-uppercase mb-2 ml-1" style="font-family:'comic sans ms'; color:#7544C7;">INFO</h1><div class="card mb-2"></div>
  93.         <!--- Text at the top. --->
  94.        
  95.         <p><!-- Starting a paragraph -->
  96.          
  97.           <!------------------- START BUTTONS (LEFT) ------------------->
  98.          
  99.           <div class="row my-3" style="max-width:1250px; margin-left:auto; margin-right:auto;"> <!-- Sets up that this is gonna be how the things in Tab 1 will be formatted. Consider this DIV Sally -->
  100.            
  101.             <div class="col-12 col-xl-5 mb-3 mb-xl-0"> <!--Starts Buttons -->
  102.            
  103.             <span style="font-size:20px; color:#7544C7;"> MEDIA</span><br> <!-- Text saying "MEDIA" -->
  104.            
  105.             <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#7544C7"> <!-- The dotted lines under "BASIC INFO -->
  106.              
  107.               <span class="badge" style="font-size:14px; border-radius:0px; background-color:#7544C7">Website</span>
  108.               <span class="pull-right"><a href="#">USERNAME</a></span>
  109.               <hr class="mt-1 mb-2" style="border-style:dashed; border-color:#7544C7">
  110.               <!-- Top line sets up the coloured box with the social media type in it. -->
  111.              
  112.               <span class="badge" style="font-size:14px; border-radius:0px; background-color:#7544C7">Website</span>
  113.               <span class="pull-right"><a href="#">USERNAME</a></span>
  114.               <hr class="mt-1 mb-2" style="border-style:dashed; border-color:#7544C7">
  115.               <!-- Middle line is where your link goes + your username for that website -->
  116.              
  117.               <span class="badge" style="font-size:14px; border-radius:0px; background-color:#7544C7">Website</span>
  118.               <span class="pull-right"><a href="#">USERNAME</a></span>
  119.               <hr class="mt-1 mb-2" style="border-style:dashed; border-color:#7544C7">
  120.              
  121.               <!-- Feel free to add more buttons to your liking! This page scrolls -->
  122.              
  123.             </div> <!-- End Buttons -->
  124.            
  125.             <!------------------- END BUTTONS (LEFT) ------------------->
  126.            
  127.             <!---------------- START INFO (RIGHT) ---------------->
  128.            
  129.             <div class="col-12 col-xl-7">
  130.              
  131.               <span style="font-size:20px; color:#7544C7"> INFO</span>
  132.              
  133.               <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#7544C7;">
  134.                
  135.                 <strong><span style="color:#7544C7; font-size:20px; font-family:'comic sans ms',sans-serif;">Bigger Text</span></strong><br>
  136.                 <!--Edit the text font, colour, & size to your heart's content! -->
  137.                
  138.                 <!-- <div style="text-align:center;"> <!--Sets the text here as centered. If you move this to down with the other span styles it stops working -->
  139.                  
  140.                   <span style="text-align:center; color:#7544C7; font-size:14px; font-family:'comic sans ms',sans-serif;">
  141.                     <!--Edit the text font, colour, & size to your heart's content! -->
  142.                    
  143.                     Write what you want here<br> <!--Remember to use <br> to go onto a new paragraph here. -->
  144.                     You can write anything. Stuff about yourself? How your day was? Song lyrics? IDK</span>
  145.                  
  146.                 <!-- </div> <!-- Ends text center if you choose to have it. If not, you can just delete this line and lines 128-129.-->
  147.                
  148.               </span> <!-- Ends Info Area-->
  149.                
  150.             </div> <!-- End Essay Area -->
  151.              
  152.             <!---------------- END INFO (RIGHT) ---------------->
  153.            
  154.           </div> <!-- End DIV Sally -->
  155.          
  156.         </p> <!-- Ends Paragraph -->
  157.        
  158.       </div> <!-- End Tab One -->
  159.      
  160.      
  161.      
  162.       <!-------------------------------------------------------- END TAB ONE ------------------------------------------------------->
  163.      
  164.      
  165.      
  166.       <!-------------------------------------------------------- START TAB TWO ------------------------------------------------------->
  167.      
  168.       <div class="tab-pane fade" id="two" style="max-height:500px; overflow:auto;">
  169.         <!--- Sets up that we're doing THIS specific tab (2) and that it should reach a maximum of 500 pixels in height before it starts to scroll. --->
  170.        
  171.         <h1 class="display-4 text-uppercase mb-2 ml-1" style="font-family:'comic sans ms'; color:#7544C7;">PROJECTS/BULLETIN</h1><div class="card mb-2"></div>
  172.         <!--- Text at the top. --->
  173.        
  174.         <p> <!-- Start Paragraph/Text Area -->
  175.          
  176.           <!---------------- START ESSAY AREA ---------------->
  177.          
  178.           <div class="col-16 col-xl-7"> <!-- Starts the Essay Area as I like to call it. You can use this as a bulletin, trivia, project list -->
  179.            
  180.             <span style="font-size:20px; color:#7544C7">BULLETIN</span> <!-- Project/Bulletin Title -->
  181.            
  182.             <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#7544C7;"> <!-- Underline for Title -->
  183.            
  184.             <span style="font-family:'comic sans ms',sans-serif; font-size:14px;"> <!-- Styling the text below -->
  185.              
  186.               <strong><span style="color:#7544C7; font-size:14px; font-family:'comic sans ms',sans-serif;">Hey guys! Just posting a bulletin to thank CrispinAsheYA for making this code! I'm going to leave a favourite to show my appreciation. :)<br>-</span></strong><br>
  187.               <!--^^ Write what you want there. -->
  188.              
  189.             </span> <!-- End of this section -->
  190.            
  191.            
  192.            
  193.             <!--
  194.            <div class="col-16 col-xl-7">
  195.            
  196.            <span style="font-size:20px; color:#7544C7"> The Testimony Of Micah Jones - Pre-Order</span>
  197.            
  198.            <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#7544C7;">
  199.            
  200.            <span style="font-family:'comic sans ms',sans-serif; font-size:14px;">
  201.              
  202.              <strong><span style="color:#7544C7; font-size:14px; font-family:'comic sans ms',sans-serif;">Guys for the love of God I don't have a crush on Biggie Cheese, he's just fantastic okay.<br>-</span></strong><br>
  203.              
  204.              
  205.            </span>
  206.            --> <!-- Feel free to add as many bulletins/upcoming projects/trivia about yourself/what ever you're using this section for as you want! -->
  207.            
  208.            
  209.            
  210.            
  211.           </div> <!-- End Essay Area -->
  212.            
  213.           <!---------------- END ESSAY AREA ---------------->
  214.          
  215.         </p> <!-- End Paragraph -->
  216.        
  217.       </div> <!-- End Tab Two -->
  218.      
  219.       <!-------------------------------------------------------- END TAB TWO ------------------------------------------------------->
  220.      
  221.      
  222.      
  223.       <!-------------------------------------------------------- START TAB THREE ------------------------------------------------------->
  224.      
  225.       <div class="tab-pane fade" id="three" style="max-height:500px; overflow:auto;"><!-- You know the drill now, this sets up the tab. Very important. -->
  226.        
  227.         <h1 class="display-4 text-uppercase mb-2 ml-1" style="font-family:'comic sans ms'; color:#7544C7;">Children</h1></h1><div class="card mb-2"></div> <!-- Title -->
  228.        
  229.         <p> <!-- Start of writing -->
  230.          
  231.           <!------------------- START FEATURED CHARACTERS ------------------->
  232.          
  233.           <div class="row no-gutters"> <!-- Featured Characters Area -->
  234.            
  235.             <!--- Start Character --->
  236.             <div class="col-md-3 col-6 text-center p-1">
  237.               <div class="card rounded mx-auto" style="height: 125px; width: 125px; background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fih1.redbubble.net%2Fimage.346538958.7749%2Fbg%2Cf8f8f8-flat%2C750x%2C075%2Cf-pad%2C750x1000%2Cf8f8f8.jpg&f=1&nofb=1) center no-repeat; background-size:cover;"></div>
  238.               <a class="text-uppercase text-center" styles="letter spacing: 1px; color: #7544C7;" href="https://toyhou.se/12931930.neon-html-f2u-">Biggie Cheese</a><hr class="my-0">
  239.               Barnyard (2006)
  240.             </div>
  241.             <!--- End Character --->
  242.            
  243.             <!---
  244.            <div class="col-md-3 col-6 text-center p-1">
  245.              <div class="card rounded mx-auto" style="height: 125px; width: 125px; background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fih1.redbubble.net%2Fimage.346538958.7749%2Fbg%2Cf8f8f8-flat%2C750x%2C075%2Cf-pad%2C750x1000%2Cf8f8f8.jpg&f=1&nofb=1) center no-repeat; background-size:cover;"></div>
  246.              <a class="text-uppercase text-center" styles="letter spacing: 1px; color: #7544C7;" href="https://toyhou.se/12931930.neon-html-f2u-">Biggie Cheese</a><hr class="my-0">
  247.              Barnyard (2006)
  248.            </div>
  249.            --->
  250.             <!-- Add more characters! I KNOW you have more, you character hoarder! -->
  251.          
  252.           </div>
  253.          
  254.           <!------------------- END FEATURED CHARACTERS ------------------->
  255.          
  256.         </p> <!-- End Paragraph -->
  257.        
  258.       </div> <!-- End Tab 3 -->
  259.      
  260.       <!-------------------------------------------------------- END TAB THREE ------------------------------------------------------->
  261.      
  262.      
  263.      
  264.       <!-------------------------------------------------------- START TAB FOUR ------------------------------------------------------->
  265.      
  266.       <div class="tab-pane fade" id="four" style="max-height:500px; overflow:auto;"> <!-- Start Tab 4 -->
  267.        
  268.         <h1 class="display-4 text-uppercase mb-2 ml-1" style="font-family:'comic sans ms'; color:#7544C7;">Buddy List</h1></h1><div class="card mb-2"></div> <!-- Title Formatting -->
  269.        
  270.         <p> <!-- Start Paragrph -->
  271.          
  272.           <!------------------- START FRIENDS LIST ------------------->
  273.          
  274.           <div class="row no-gutters">
  275.            
  276.             <!--- Start Thing 1 --->
  277.             <div class="col-md-3 col-6 text-center p-1">
  278.               <div class="card rounded mx-auto" style="height: 125px; width: 125px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/CrispinAsheYA?3) center no-repeat; background-size:cover;"></div>
  279.               <a class="text-uppercase text-center" styles="letter spacing: 1px; color: #7544C7;" href="https://toyhou.se/CrispinAsheYA">CrispinAsheYA</a><hr class="my-0">
  280.               Offline Friend
  281.             </div>
  282.             <!--- End Thing 1 --->
  283.            
  284.             <!---
  285.            <div class="col-md-3 col-6 text-center p-1">
  286.              <div class="card rounded mx-auto" style="height: 125px; width: 125px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/CrispinAsheYA?3) center no-repeat; background-size:cover;"></div>
  287.              <a class="text-uppercase text-center" styles="letter spacing: 1px; color: #7544C7;" href="https://toyhou.se/CrispinAsheYA">CrispinAsheYA</a><hr class="my-0">
  288.              Offline Friend
  289.            </div>
  290.            --->
  291.             <!-- Please don't tell me I'm your only friend. (You don't have to keep me here, btw. No offense taken!) -->
  292.          
  293.           </div>
  294.          
  295.           <!------------------- END FRIENDS LIST ------------------->
  296.          
  297.         </p> <!-- End Paragraph -->
  298.        
  299.       </div><!-- End Tab 4 -->
  300.      
  301.       <!-------------------------------------------------------- END TAB FOUR ------------------------------------------------------->
  302.      
  303.      
  304.      
  305.   </div> <!-- END OF TIMMY DIV -->
  306.  
  307. </div> <!-- END OF CODE -->
  308.  
  309.  
  310. <!----------------------------------------------------------- CREDIT DO NOT REMOVE ----------------------------------------------------------->
  311. <div class="text-right w-100">
  312.   <a href="https://toyhou.se/12931930.neon-html-f2u-" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
  313. </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!