API tools faq
paste
Advertisement
CrispinAsheYA

Stardust (Bootstrap)

CrispinAsheYA
Apr 13th, 2023 (edited)
817
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.14 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. -Text White: #FFFFFF
  7. -Border Black: #000000
  8.  
  9. 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.)
  10.  
  11. Thank you for reading!
  12. Crispin
  13.  
  14. -->
  15.  
  16. <div class="col-12 p-0 m-0 rounded-0" style="font-family:'comic sans ms'; border:#000000 4px solid;">
  17.  
  18.   <!-- START TOP IMAGE --->
  19.   <div class="col-12 p-0 m-0 rounded-0" style="height:200px; background:url([COVERIMAGE]) center; background-size:cover; background-attachment:fixed; border:#000000 4px solid;"></div>
  20.   <!-- END TOP IMAGE --->
  21.  
  22.   <!-- START INFO -->
  23.   <div class="col-12 p-0 m-0 row rounded-0">
  24.    
  25.     <!-- START LEFT SECTION -->
  26.     <div class="col-lg-2 col-12 p-0 m-0 rounded-0">
  27.      
  28.       <!-- START ICON SECTION -->
  29.       <div class="col-12 py-5 m-0 text-center rounded-0" style="height:200px; color:#FFFFFF; font-size:4rem; background:url([PROFILEIMAGE]) center; background-size:cover; border:#000000 4px solid;"><i class="fas fa-egg p-3"></i>
  30.       </div>
  31.       <!-- END ICON SECTION -->
  32.      
  33.       <!-- START PLAYLIST -->
  34.       <div class="col-12 bg-dark p-3 m-0 rounded-0" style="height:343px; overflow:auto; border:#000000 4px solid;">
  35.        
  36.         <!------ START SONG ----->
  37.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  38.           <p class="text-center text-primary" style="text-shadow:0px 0px;"><b>[SONG] - [ARTIST]</b></p>
  39.           <audio controls="" class="bg-primary" style="border-radius:0px; padding:2px; width:165px; height:35px;"><source src="[SONGLINK]"></audio></td><br><p class="text-dark">-</p>
  40.         <!------ END SONG ----->
  41.        
  42.       </div>
  43.       <!-- END PLAYLIST -->
  44.  
  45.       <!-- START SOCIALS -->
  46.       <div class="col-12 bg-primary p-3 m-0 rounded-0 text-center" style="font-size:1.5rem; border:#000000 4px solid;">
  47.         <ul class="nav nav-justified">
  48.          
  49.           <!------ START SOCIAL ----->
  50.           <li class="nav-item m-0"><div class="tooltipster" title="【 [SOCIAL] 】">
  51.             <a href="[SOCIALLINK]"><span style="color:#FFFFFF;" class="tooltipster" width="50" height="50" data-placement="left" title="[USERNAME]"><i class="fas fa-star"></i></span></a></div>
  52.           </li>
  53.           <!------ END SOCIAL ----->
  54.          
  55.         </ul>
  56.       </div>
  57.       <!-- END SOCIALS -->
  58.    
  59.     </div>
  60.     <!-- END LEFT SECTION -->
  61.    
  62.     <!-- START RIGHT SECTION -->
  63.     <div class="col-lg-10 col-12 row p-0 m-0 rounded-0">
  64.      
  65.       <!-- START BUTTONS -->
  66.       <div class="col-12 p-0 m-0 text-center" style="font-size:1.5rem;">
  67.        
  68.         <ul class="nav nav-tabs card-header-tabs bg-primary row p-0 m-0" style="text-align:center;">
  69.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#one" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">About</a></li>
  70.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#two" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Projects</a></li>
  71.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#three" style="color:#FFFFFF;border:#000000 4px solid; border-radius:0px;">News</a></li>
  72.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#four" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Fandoms</a></li>
  73.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#five" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Characters</a></li>
  74.           <li class="col-lg-2 col-6 nav-item p-0 m-0"><a class="nav-link bg-primary btn-primary px-0" data-toggle="tab" href="#six" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Buddies</i></a></li>
  75.         </ul>
  76.        
  77.       </div>
  78.       <!-- END BUTTONS -->
  79.      
  80.       <!-- START MAIN SECTION -->
  81.       <div class="col-12 bg-dark p-3 m-0 rounded-0" style="height:475px; color:#FFFFFF; overflow:auto; border:#000000 4px solid;">
  82.        
  83.         <div class="tab-content">
  84.        
  85.           <!------------------------------- START TAB 1 -------------------------------->
  86.           <div class="tab-pane active show" id="one"><!-- Start Tab-->
  87.            
  88.             <!------ START INTRODUCTION ----->
  89.             <span style="font-size:1.4rem;">Introduction</span><hr class="mt-1 mb-2">
  90.             <p class="col-12 pb-3">[INTRO]</p>
  91.             <!------ START INTRODUCTION ----->
  92.            
  93.             <!------ START FLAGS ----->
  94.             <div class="col-12 my-2 mb-3 text-center">
  95.               <div data-toggle="tooltip" title="[FLAG]" class="border-0 rounded-0 d-inline-block" style="background-image:url([FLAGIMG]); background-position:center;background-size:cover;border:none;line-height:60px;width:80px;font-size:0px;">Flag</div>
  96.             </div>
  97.             <!------ END FLAGS ----->
  98.            
  99.             <span style="font-size:1.4rem;">Basic Information</span><hr class="mt-1 mb-2">
  100.            
  101.             <div class="col-12 row mb-2 pb-3 p-0 text-center">
  102.               <div class="col-12">
  103.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  104.                   <p class="mr-2" style="flex-grow:0;">Call Me</p><hr style="flex-grow:1;"><span class="ml-2">[NAME]</span>
  105.                 </div>
  106.               </div>
  107.               <div class="col-12 col-lg-6">
  108.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  109.                   <p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">[GENDER]</span>
  110.                 </div>
  111.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  112.                   <p class="mr-2" style="flex-grow:0;">Birthday</p><hr style="flex-grow:1;"><span class="ml-2">[BIRTHDAY]</span>
  113.                 </div>
  114.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  115.                   <p class="mr-2" style="flex-grow:0;">Timezone</p><hr style="flex-grow:1;"><span class="ml-2">[TIMEZONE]</span>
  116.                 </div>
  117.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  118.                   <p class="mr-2" style="flex-grow:0;">Current Project</p><hr style="flex-grow:1;"><span class="ml-2">[PROJECTNAME]</span>
  119.                 </div>
  120.               </div>
  121.               <div class="col-12 col-lg-6">
  122.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  123.                   <p class="mr-2" style="flex-grow:0;">Private Messages</p><hr style="flex-grow:1;"><span class="ml-2">[OPEN/CLOSED]</span>
  124.                 </div>
  125.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  126.                   <p class="mr-2" style="flex-grow:0;">Art Trades</p><hr style="flex-grow:1;"><span class="ml-2">[OPEN/CLOSED]</span>
  127.                 </div>
  128.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  129.                   <p class="mr-2" style="flex-grow:0;">Art Commissions</p><hr style="flex-grow:1;"><span class="ml-2"><a href="[COMMISSIONSLINK]">[OPEN/CLOSED]</a></span>
  130.                 </div>
  131.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  132.                   <p class="mr-2" style="flex-grow:0;">Code Commissions</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#">[OPEN/CLOSED]</a></span>
  133.                 </div>
  134.               </div>
  135.             </div>
  136.            
  137.           </div><!-- End Tab -->
  138.           <!------------------------------- END TAB 1 -------------------------------->
  139.          
  140.           <!------------------------------- START TAB 2 -------------------------------->
  141.           <div class="tab-pane fade" id="two"><!-- Start Tab-->
  142.            
  143.             <!------ START COMPLETED ----->
  144.             <span style="font-size:1.4rem;">Completed Projects</span><hr class="mt-1 mb-2">
  145.            
  146.             <div class="card mb-3 bg-dark border-0 rounded-0" style="min-height:100px;">
  147.               <div class="row d-flex text-center justify-content-around">
  148.                
  149.                 <div class="tooltipster" data-placement="top" title="【 [PROJECTNAME] 】" style="border:#000000 4px solid;"><a href="[PROJECTLINK]">
  150.                 <img src="[PROJECTIMAGE]" width="190" height="250"></div>
  151.                
  152.               </div>
  153.             </div>
  154.  
  155.             <!------ END COMPLETED ----->
  156.            
  157.             <!------ START WIPs ----->
  158.             <span style="font-size:1.4rem;">Coming Soon!</span><hr class="mt-1 mb-2">
  159.            
  160.             <div class="card mb-3 bg-dark border-0 rounded-0" style="min-height:100px;">
  161.               <div class="row d-flex text-center justify-content-around">
  162.                
  163.                 <div class="tooltipster py-5" data-placement="top" title="【 [PROJECTNAME] 】" style="background:url([COVERIMAGE]) center; background-size:cover; background-attachment:fixed; width:190px; height:250px; border:#000000 4px solid;">
  164.                   <a href="[PROJECTLINK]"><i class="fas fa-star p-5" style="color:#FFFFFF; font-size:4rem;"></i></a>
  165.                 </div>
  166.                
  167.               </div>
  168.             </div>
  169.             <!------ END WIPs ----->
  170.            
  171.           </div><!-- End Tab -->
  172.           <!------------------------------- END TAB 2 -------------------------------->
  173.          
  174.           <!------------------------------- START TAB 3 -------------------------------->
  175.           <div class="tab-pane fade" id="three"><!-- Start Tab-->
  176.            
  177.             <p>[NEWS]</p>
  178.            
  179.           </div><!-- End Tab -->
  180.           <!------------------------------- END TAB 3 -------------------------------->
  181.          
  182.           <!------------------------------- START TAB 4 -------------------------------->
  183.           <div class="tab-pane fade" id="four"><!-- Start Tab-->
  184.            
  185.             <span style="font-size:1.4rem;">Current</span><hr class="mt-1 mb-2">
  186.             <div class="col-12 row mb-2 pb-3 p-0 text-center">
  187.               <div class="col-12">
  188.                
  189.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  190.                   <p class="mr-2" style="flex-grow:0;">[FANDOM]</p><hr style="flex-grow:1;"><span class="ml-2">[FANDOMDESC]</span>
  191.                 </div>
  192.                
  193.               </div>
  194.             </div>
  195.            
  196.             <span style="font-size:1.4rem;">Music Taste</span><hr class="mt-1 mb-2">
  197.             <div class="col-12 row mb-2 pb-3 p-0 text-center">
  198.               <div class="col-12 col-lg-6">
  199.                
  200.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  201.                   <p class="mr-2" style="flex-grow:0;">[MUSICFANDOM]</p><hr style="flex-grow:1;"><span class="ml-2">[MUSICFANDOMDESC]</span>
  202.                 </div>
  203.  
  204.               </div>
  205.               <div class="col-12 col-lg-6">
  206.                
  207.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  208.                   <p class="mr-2" style="flex-grow:0;">[MUSICFANDOM]</p><hr style="flex-grow:1;"><span class="ml-2">[MUSICFANDOMDESC]</span>
  209.                 </div>
  210.                
  211.               </div>
  212.             </div>
  213.            
  214.             <span style="font-size:1.4rem;">Old Fandoms</span><hr class="mt-1 mb-2">
  215.             <div class="col-12 row mb-2 pb-3 p-0 text-center">
  216.               <div class="col-12 col-lg-6">
  217.                
  218.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  219.                   <p class="mr-2" style="flex-grow:0;">[OLDFANDOM]</p><hr style="flex-grow:1;"><span class="ml-2">[OLDFANDOMDESC]</span>
  220.                 </div>
  221.  
  222.               </div>
  223.               <div class="col-12 col-lg-6">
  224.                
  225.                 <div class="d-flex" style="flex-direction:row; align-items:center;">
  226.                   <p class="mr-2" style="flex-grow:0;">[OLDFANDOM]</p><hr style="flex-grow:1;"><span class="ml-2">[OLDFANDOMDESC]</span>
  227.                 </div>
  228.                
  229.               </div>
  230.             </div>
  231.            
  232.           </div><!-- End Tab -->
  233.           <!------------------------------- END TAB 4 -------------------------------->
  234.          
  235.           <!------------------------------- START TAB 5 -------------------------------->
  236.           <div class="tab-pane fade" id="five"><!-- Start Tab-->
  237.            
  238.             <!-- START CHARACTER -->
  239.             <div class="row">
  240.               <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  241.                 <a href="[CHARACTERLINK]" style="font-size:1.2rem;"><i class="fas fa-star"></i> [CHARACTERNAME]</a>
  242.                 <span class="pull-right" style="font-size:1.2rem;">[CHARACTERTAG]</span><hr class="mt-0 mb-2">
  243.                 <p>[CHARACTERDESC]</p>
  244.                 <p class="text-dark">-</p>
  245.               </div>
  246.               <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  247.                 <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  248.                   <a data-toggle="tooltip" href="[CHARACTERLINK]"><img src="[CHARACTERAVATAR]"></a>
  249.                 </div>
  250.               </div>
  251.             </div>
  252.             <!-- END CHARACTER -->
  253.            
  254.           </div><!-- End Tab -->
  255.           <!------------------------------- END TAB 5 -------------------------------->
  256.          
  257.           <!------------------------------- START TAB 6 -------------------------------->
  258.           <div class="tab-pane fade" id="six"><!-- Start Tab-->
  259.          
  260.             <!-- START FRIEND -->
  261.             <div class="row">
  262.               <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  263.                 <a href="[FRIENDLINK]" style="font-size:1.2rem;"><i class="fas fa-star"></i> [FRIENDNAME]</a>
  264.                 <span class="pull-right" style="font-size:1.2rem;">[FRIENDTAG]</span><hr class="mt-0 mb-2">
  265.                 <p>[FRIENDDESC]</p>
  266.                 <p class="text-dark">-</p>
  267.               </div>
  268.               <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  269.                 <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  270.                   <a data-toggle="tooltip" href="[FRIENDLINK]"><img src="[FRIENDAVATAR]"></a>
  271.                 </div>
  272.               </div>
  273.             </div>
  274.             <!-- END FRIEND -->
  275.            
  276.           </div><!-- End Tab -->
  277.           <!------------------------------- END TAB 6 -------------------------------->
  278.          
  279.         </div>
  280.        
  281.       </div>
  282.       <!-- END MAIN SECTION -->
  283.      
  284.       <!-- START QUICK LINKS -->
  285.       <div class="col-12 bg-primary p-3 m-0 rounded-0 text-center" style="font-size:1.5rem; border:#000000 4px solid;">
  286.        
  287.         <ul class="nav nav-justified"> <!-- Have somewhere on site you visit frequently? A friend? A forum? Specific page? Add it here -->
  288.          
  289.           <li class="nav-item m-0"><div class="tooltipster" title="【 [QUICKLINKNAME] 】">
  290.             <a href="[QUICKLINK]"><span style="color:#FFFFFF;" width="50" height="50"><i class="fas fa-star"></i></span></a></div>
  291.           </li>
  292.           <!-- Copy paste above 3 lines here -->
  293.          
  294.         </ul>
  295.       </div>
  296.       <!-- END QUICK LINKS -->
  297.      
  298.     </div>
  299.     <!-- END RIGHT SECTION -->
  300.    
  301.   </div>
  302.   <!-- END INFO -->
  303.  
  304.   <!-- START CREDITS LIST -->
  305.   <div class="col-12 py-2 bg-primary text-center" style="font-size:1.5rem; border:#000000 4px solid;">
  306.     <a href="[BANNERCREDITLINK]" data-toggle="tooltip" title="Banner Image"><span style="color:#FFFFFF;"><i class="fas fa-star"></i></span></a>
  307.     <a href="https://toyhou.se/21063068.stardust" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-star"></i></span></a>
  308.     <a href="[PROFILEIMAGECREDITLINK]" data-toggle="tooltip" title="Profile Image"><span style="color:#FFFFFF;"><i class="fas fa-star"></i></span></a>
  309.   </div>
  310.   <!-- END CREDITS LIST -->
  311.  
  312. </div>
  313.  
  314. <!--
  315. [COVERIMAGE] | [PROFILEIMAGE]
  316. [SONG] | [ARTIST] | [SONGLINK]
  317. [SOCIAL] | [SOCIALLINK] | [USERNAME]
  318. [INTRO] | [FLAG] | [FLAGIMG] | [NAME] | [GENDER] | [BIRTHDAY] | [TIMEZONE] | [PROJECTNAME] | [OPEN/CLOSED] | [COMMISSIONSLINK]
  319. [PROJECTNAME] | [PROJECTLINK] | [PROJECTIMAGE] | [COVERIMAGE]
  320. [NEWS]
  321. [FANDOM] | [FANDOMDESC] | [MUSICFANDOM] | [MUSICFANDOMDESC] | [OLDFANDOM] | [OLDFANDOMDESC]
  322. [CHARACTERLINK] | [CHARACTERNAME] | [CHARACTERTAG] | [CHARACTERDESC] | [CHARACTERAVATAR]
  323. [FRIENDLINK] | [FRIENDNAME] | [FRIENDTAG] | [FRIENDDESC] | [FRIENDAVATAR]
  324. [CREDITLINKNAME] | [QUICKLINK]
  325. [BANNERCREDITLINK] | [PROFILEIMAGECREDITLINK]
  326. -->
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!