API tools faq
paste
Advertisement
CrispinAsheYA

Short Birthday Calender

CrispinAsheYA
May 17th, 2023 (edited)
736
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.85 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. -Light-Fill / Text Colour: #E85324
  7. -Dark-Fill : #532202
  8. -Text White: #FFFFFF
  9. -Border Black: #000000
  10. -Font Awesome Icons: fas fa-birthday-cake | fas fa-star
  11.  
  12. 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.)
  13.  
  14. Thank you for reading!
  15. Crispin
  16.  
  17. -->
  18.  
  19. <!-- No Image -->
  20. <div class="m-0 p-0">
  21.  
  22. <!-- If you want An Image, delete above div and Uncomment code on the line below. -->
  23. <!-- <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"> -->
  24.  
  25.   <!------------------------------- START ACTUAL CODE -------------------------------->
  26.   <div class="col-8 mx-auto mt-5 p-0" style="font-size:1rem; font-family:'comic sans ms'; background-color:#FFFFFF; border:none;">
  27.    
  28.     <!------------------------------- START HEADING -------------------------------->
  29.     <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:none;">
  30.       <div class="card rounded-0" style="background:url([IMAGEHEADER]); background-position:center; background-size:cover; border:none;"><p class="text-center display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">
  31.         <span><a href="https://toyhou.se/21583241.short-birthday-calender" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-birthday-cake fa-flip-horizontal"></i></span></a> BIRTHDAY CALENDER</span> <a href="https://toyhou.se/21583241.short-birthday-calender" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-birthday-cake fa-flip-horizontal"></i></span></a></p></div>
  32.     </div>
  33.     <!------------------------------- END HEADING -------------------------------->
  34.    
  35.    
  36.     <!------------------------------- START BUTTONS -------------------------------->
  37.     <div class="col-12 p-0" style="border:#000000 4px solid; border-bottom:none;">
  38.       <ul class="nav nav-tabs card-header-tabs row p-0 m-0" style="text-align:center;">
  39.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#one" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">January</a></li>
  40.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#two" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">February</a></li>
  41.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#three" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">March</a></li>
  42.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#four" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">April</a></li>
  43.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#five" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">May</a></li>
  44.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#six" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">June</a></li>
  45.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#seven" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">July</a></li>
  46.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#eight" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">August</a></li>
  47.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#nine" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">September</a></li>
  48.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#ten" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">October</a></lli>
  49.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#eleven" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">November</a></li>
  50.         <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#twelve" style="color:#FFFFFF; background:#E85324; border:#000000 4px solid; border-radius:0px">December</a></li>
  51.       </ul>
  52.     </div>
  53.     <!------------------------------- END BUTTONS -------------------------------->
  54.    
  55.     <!------------------------------- START MIDDLE SECTION -------------------------------->
  56.     <div class="col-12 mx-auto p-0 row" style="background-color:#532202; border:#000000 4px solid; border-top:none;">
  57.       <div class="col-12 tab-content" style="border:#000000 4px solid;">
  58.        
  59.         <!------------------------------- START JANUARY -------------------------------->
  60.         <div class="tab-pane active show" id="one"><!-- Start Tab-->
  61.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  62.          
  63.           <span style="color:#E85324; font-size:1.4rem;">JANUARY</span><hr class="mt-1 mb-2">
  64.           <p>[NAME] - 1st January 2000 - 23 Years Old</p>
  65.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  66.           <p>-</p>
  67.          
  68.           </div><!--End Tab Set-Up-->
  69.         </div><!--End Tab-->
  70.         <!------------------------------- END JANUARY -------------------------------->
  71.        
  72.         <!------------------------------- START FEBRUARY -------------------------------->
  73.         <div class="tab-pane fade" id="two"><!--Start Tab-->
  74.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  75.          
  76.           <span style="color:#E85324; font-size:1.4rem;">FEBRUARY</span><hr class="mt-1 mb-2">
  77.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  78.           <p>-</p>
  79.          
  80.           </div><!--End Tab Set-Up-->
  81.         </div><!--End Tab-->
  82.         <!------------------------------- END FEBRUARY -------------------------------->
  83.        
  84.         <!------------------------------- START MARCH -------------------------------->
  85.         <div class="tab-pane fade" id="three"><!--Start Tab-->
  86.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  87.          
  88.           <span style="color:#E85324; font-size:1.4rem;">MARCH</span><hr class="mt-1 mb-2">
  89.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  90.           <p>-</p>
  91.          
  92.           </div><!--End Tab Set-Up-->
  93.         </div><!--End Tab-->
  94.         <!------------------------------- END MARCH -------------------------------->
  95.        
  96.         <!------------------------------- START APRIL -------------------------------->
  97.         <div class="tab-pane fade" id="four"><!--Start Tab-->
  98.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  99.          
  100.           <span style="color:#E85324; font-size:1.4rem;">APRIL</span><hr class="mt-1 mb-2">
  101.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  102.           <p>-</p>
  103.          
  104.           </div><!--End Tab Set-Up-->
  105.         </div><!--End Tab-->
  106.         <!------------------------------- END APRIL -------------------------------->
  107.        
  108.         <!------------------------------- START MAY -------------------------------->
  109.         <div class="tab-pane fade" id="five"><!--Start Tab-->
  110.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  111.          
  112.           <span style="color:#E85324; font-size:1.4rem;">MAY</span><hr class="mt-1 mb-2">
  113.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  114.           <p>-</p>
  115.          
  116.           </div><!--End Tab Set-Up-->
  117.         </div><!--End Tab-->
  118.         <!------------------------------- END MAY -------------------------------->
  119.        
  120.         <!------------------------------- START JUNE -------------------------------->
  121.         <div class="tab-pane fade" id="six"><!--Start Tab-->
  122.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  123.          
  124.           <span style="color:#E85324; font-size:1.4rem;">JUNE</span><hr class="mt-1 mb-2">
  125.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  126.           <p>-</p>
  127.          
  128.           </div><!--End Tab Set-Up-->
  129.         </div><!--End Tab-->
  130.         <!------------------------------- END JUNE -------------------------------->
  131.        
  132.         <!------------------------------- START JULY -------------------------------->
  133.         <div class="tab-pane fade" id="seven"><!--Start Tab-->
  134.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  135.          
  136.           <span style="color:#E85324; font-size:1.4rem;">JULY</span><hr class="mt-1 mb-2">
  137.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  138.           <p>-</p>
  139.          
  140.           </div><!--End Tab Set-Up-->
  141.         </div><!--End Tab-->
  142.         <!------------------------------- END JULY -------------------------------->
  143.        
  144.         <!------------------------------- START AUGUST -------------------------------->
  145.         <div class="tab-pane fade" id="eight"><!--Start Tab-->
  146.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  147.          
  148.           <span style="color:#E85324; font-size:1.4rem;">AUGUST</span><hr class="mt-1 mb-2">
  149.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  150.           <p>-</p>
  151.          
  152.           </div><!--End Tab Set-Up-->
  153.         </div><!--End Tab-->
  154.         <!------------------------------- END AUGUST -------------------------------->
  155.        
  156.         <!------------------------------- START SEPTEMBER -------------------------------->
  157.         <div class="tab-pane fade" id="nine"><!--Start Tab-->
  158.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  159.          
  160.           <span style="color:#E85324; font-size:1.4rem;">SEPTEMBER</span><hr class="mt-1 mb-2">
  161.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  162.           <p>-</p>
  163.          
  164.           </div><!--End Tab Set-Up-->
  165.         </div><!--End Tab-->
  166.         <!------------------------------- END SEPTEMBER -------------------------------->
  167.        
  168.         <!------------------------------- START OCTOBER -------------------------------->
  169.         <div class="tab-pane fade" id="ten"><!--Start Tab-->
  170.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  171.          
  172.           <span style="color:#E85324; font-size:1.4rem;">OCTOBER</span><hr class="mt-1 mb-2">
  173.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  174.           <p>-</p>
  175.          
  176.           </div><!--End Tab Set-Up-->
  177.         </div><!--End Tab-->
  178.         <!------------------------------- END OCTOBER -------------------------------->
  179.        
  180.         <!------------------------------- START NOVEMBER -------------------------------->
  181.         <div class="tab-pane fade" id="eleven"><!--Start Tab-->
  182.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  183.          
  184.           <span style="color:#E85324; font-size:1.4rem;">NOVEMBER</span><hr class="mt-1 mb-2">
  185.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  186.           <p>-</p>
  187.          
  188.           </div><!--End Tab Set-Up-->
  189.         </div><!--End Tab-->
  190.         <!------------------------------- END NOVEMBER -------------------------------->
  191.        
  192.         <!------------------------------- START DECEMBER -------------------------------->
  193.         <div class="tab-pane fade" id="twelve"><!--Start Tab-->
  194.           <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  195.          
  196.           <span style="color:#E85324; font-size:1.4rem;">DECEMBER</span><hr class="mt-1 mb-2">
  197.           <p>[NAME] - [1ST JANUARY 2000] - [AGE] Years Old</p>
  198.           <p>-</p>
  199.          
  200.           </div><!--End Tab Set-Up-->
  201.         </div><!--End Tab-->
  202.         <!------------------------------- END DECEMBER -------------------------------->
  203.        
  204.       </div>
  205.     </div>
  206.     <!------------------------------- END MIDDLE SECTION -------------------------------->
  207.    
  208.     <!------------------------------- START CREDITS LIST -------------------------------->
  209.     <div class="col-12 py-2 text-center" style="font-size:1.2rem; background-color:#E85324; border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
  210.       <a href="[LINKHEADER]" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-birthday-cake"></i></span></a>
  211.       <a href="https://toyhou.se/21583241.short-birthday-calender" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-star"></i></span></a>
  212.       <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-birthday-cake fa-flip-horizontal"></i></span></a>
  213.     </div>
  214.     <!------------------------------- END CREDITS LIST -------------------------------->
  215.    
  216.   </div>
  217.  
  218. </div>
  219.  
  220. <!--
  221. [IMAGEHEADER] | [LINKHEADER]
  222. [NAME] | [1ST JANUARY 2000] | [AGE]
  223. -->
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!