API tools faq
paste
Advertisement
AvalonCat

TH Constellation Custom Color

AvalonCat
Dec 11th, 2024 (edited)
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ====================
  4. IMPORTANT PLEASE READ
  5. ====================
  6.  
  7. By using this code template you are agree to the following rules:
  8. 1). You may not redistribute this code.
  9. 2). You must keep credits visible and present. Do not remove them.
  10. 3). You may alter the code to fit your needs.
  11. 4). You may not use my code for content that goes against TH TOS.
  12.  
  13. DO NOT REMOVE CREDIT! CREDIT MUST REMAIN VISIBLE AND LINK BACK TO THE TEMPLATE PAGE SO OTHER USERS CAN EASILY FIND IT!
  14.  
  15. ~~~~~~~~~~~~~~~~~~~~
  16.  
  17. CUSTOM COLORS
  18.  
  19. Use CRTL+F on the color codes and the "replace all" option to replace the color codes with your own.
  20.  
  21. BACKGROUND COLOR >#0b132b<
  22. (I recommend a dark shade of color for your background)
  23.  
  24. BORDER COLOR >#3a506b<
  25.  
  26. TEXT COLOR >#fafaff<
  27. (I recommend an off-white color for text.)
  28.  
  29. GLOW >#6fffe9<
  30. -->
  31.  
  32. <!-- ====================START CODE==================== -->
  33.  
  34. <div class="row col-lg-8 mx-auto" style="font-weight: lighter; letter-spacing: 2px; font-family:courier new;">
  35.    
  36.     <div class="col-lg-5 order-lg-2 mb-3">
  37.        
  38.         <div class="card card-block h-100 table-responsive text-justify" style="box-shadow: 0 0 0.5rem #6fffe9; background-color: #0b132b; background-image: url(https://i.ibb.co/mzVjFgv/20240628-backgroundimage.jpg); background-position: center; background-attachment: fixed; background-size: contain; background-blend-mode: soft-light; text-shadow: 0px 0px 3px #6fffe9; color: #fafaff; border-color: #3a506b">
  39.            
  40.             <!--
  41.            
  42.             ===== IMAGE =====
  43.            
  44.             I recommend using a transparent background png for the image here.
  45.            
  46.             If you choose a solid background image you can paste this style attribute after the >class="mb-3" < to make the image have a glow around it. (Only works for rectangluar/square images.)
  47.            
  48.             style="box-shadow: 0 0 0.5rem #6fffe9;"
  49.            
  50.             -->
  51.             <img class="mb-3" src="
  52.            
  53.             https://f2.toyhou.se/file/f2-toyhou-se/users/admin?0
  54.            
  55.             ">
  56.            
  57.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-sparkles fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.03s; --fa-fade-opacity: 0.25; animation-delay: 957ms"></i> <b>
  58.                
  59.                 Common Name
  60.                
  61.                 </b> <i class="fa-sharp fa-light fa-sparkles fa-fw fa-fade" style="--fa-animation-duration: 1.79s; --fa-fade-opacity: 0.25; animation-delay: 321ms"></i></div>
  62.             <div class="text-center my-auto">
  63.                
  64.                 Text
  65.                
  66.                 </div>
  67.             <hr class="w-100" style="border-color: #3a506b">
  68.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-star-shooting fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.15s; --fa-fade-opacity: 0.25; animation-delay: 79ms"></i> <b>
  69.                
  70.                 Celestial Name
  71.                
  72.                 </b> <i class="fa-sharp fa-light fa-star-shooting fa-fw fa-fade" style="--fa-animation-duration: 1.67s; --fa-fade-opacity: 0.25; animation-delay: 712ms"></i></div>
  73.             <div class="text-center my-auto">
  74.                
  75.                 Text
  76.                
  77.                 </div>
  78.             <hr class="w-100" style="border-color: #3a506b">
  79.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-stars fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.77s; --fa-fade-opacity: 0.25; animation-delay: 448ms"></i> <b>
  80.                
  81.                 Constellation
  82.                
  83.                 </b> <i class="fa-sharp fa-light fa-stars fa-fw fa-fade" style="--fa-animation-duration: 1.96s; --fa-fade-opacity: 0.25; animation-delay: 352ms"></i></div>
  84.             <div class="text-center my-auto">
  85.                
  86.                 Text
  87.                
  88.                 </div>
  89.             <hr class="w-100" style="border-color: #3a506b">
  90.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-star-christmas fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.24s; --fa-fade-opacity: 0.25; animation-delay: 943ms"></i> <b>
  91.                
  92.                 Element
  93.                
  94.                 </b> <i class="fa-sharp fa-light fa-star-christmas fa-fw fa-fade" style="--fa-animation-duration: 1.31s; --fa-fade-opacity: 0.25; animation-delay: 514ms"></i></div>
  95.             <div class="text-center my-auto">
  96.                
  97.                 Text
  98.                
  99.                 </div>
  100.             <hr class="w-100" style="border-color: #3a506b">
  101.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-sparkle fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.82s; --fa-fade-opacity: 0.25; animation-delay: 203ms"></i> <b>
  102.                
  103.                 Weakness
  104.                
  105.                 </b> <i class="fa-sharp fa-light fa-sparkle fa-fw fa-fade" style="--fa-animation-duration: 1.24s; --fa-fade-opacity: 0.25; animation-delay: 820ms"></i></div>
  106.             <div class="text-center my-auto">
  107.                
  108.                 Text
  109.                
  110.                 </div>
  111.             <hr class="w-100" style="border-color: #3a506b">
  112.             <div class="text-center my-auto text-uppercase" style="font-size: 1rem;"><i class="fa-sharp fa-light fa-comet fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.86s; --fa-fade-opacity: 0.25; animation-delay: 648ms"></i> <b>
  113.                
  114.                 Power
  115.                
  116.                 </b> <i class="fa-sharp fa-light fa-comet fa-fw fa-fade" style="--fa-animation-duration: 1.14s; --fa-fade-opacity: 0.25; animation-delay: 361ms"></i></div>
  117.             <div class="text-center my-auto"><i class="fa-sharp fa-solid fa-star fa-fw"></i><i class="fa-sharp fa-solid fa-star fa-fw"></i><i class="fa-sharp fa-solid fa-star fa-fw"></i><i class="fa-sharp fa-light fa-star fa-fw"></i><i class="fa-sharp fa-light fa-star fa-fw"></i></div>
  118.         </div>
  119.     </div>
  120.    
  121.     <div class="col-lg-7 order-lg-1 mb-3">
  122.         <div class="card card-block h-100 table-responsive text-justify" style="box-shadow: 0 0 0.5rem #6fffe9; background-color: #0b132b; background-image: url(https://i.ibb.co/mzVjFgv/20240628-backgroundimage.jpg); background-position: center; background-attachment: fixed; background-size: contain; background-blend-mode: soft-light; text-shadow: 0px 0px 3px #6fffe9; color: #fafaff; border-color: #3a506b">
  123.             <div class="my-auto">
  124.                 <div class="text-center text-uppercase mb-3" style="font-size: 1.2rem;"><i class="fa-sharp fa-light fa-star-sharp fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.58s; --fa-fade-opacity: 0.25; animation-delay: 781ms"></i> <b>
  125.                    
  126.                     Header 1
  127.                    
  128.                     </b> <i class="fa-sharp fa-light fa-star-sharp fa-fw fa-fade" style="--fa-animation-duration: 1.68s; --fa-fade-opacity: 0.25; animation-delay: 626ms"></i></div>
  129.                 <p>
  130.                    
  131.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  132.                    
  133.                     </p>
  134.             </div>
  135.             <hr class="w-100" style="border-color: #3a506b">
  136.             <div class="my-auto">
  137.                 <div class="text-center text-uppercase mb-3" style="font-size: 1.2rem;"><i class="fa-sharp fa-light fa-star-sharp fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.84s; --fa-fade-opacity: 0.25; animation-delay: 326ms"></i> <b>
  138.                    
  139.                     Header 2
  140.                    
  141.                     </b> <i class="fa-sharp fa-light fa-star-sharp fa-fw fa-fade" style="--fa-animation-duration: 1.82s; --fa-fade-opacity: 0.25; animation-delay: 587ms"></i></div>
  142.                 <p>
  143.                    
  144.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  145.                    
  146.                     </p>
  147.             </div>
  148.             <hr class="w-100" style="border-color: #3a506b">
  149.             <div class="my-auto">
  150.                 <div class="text-center text-uppercase mb-3" style="font-size: 1.2rem;"><i class="fa-sharp fa-light fa-star-sharp fa-fw fa-flip-horizontal fa-fade" style="--fa-animation-duration: 1.33s; --fa-fade-opacity: 0.25; animation-delay: 400ms"></i> <b>
  151.                    
  152.                     Header 3
  153.                    
  154.                     </b> <i class="fa-sharp fa-light fa-star-sharp fa-fw fa-fade" style="--fa-animation-duration: 1.04s; --fa-fade-opacity: 0.25; animation-delay: 881ms"></i></div>
  155.                 <p>
  156.                    
  157.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  158.                    
  159.                     </p>
  160.             </div>
  161.         </div>
  162.     </div>
  163. </div>
  164.  
  165. <!-- ==========CREDIT DO NOT REMOVE========== -->
  166.  
  167. <div class="text-right col-lg-9 mx-auto px-lg-4">
  168.     <a href="https://toyhou.se/30617023.f2u-sparkling-constellation"><span data-toggle="tooltip" title="Coding done by WingsOfAvalon."><i class="fa-solid fa-code fa-fw text-muted"></i></span></a>
  169. </div>
  170.  
  171. <!-- ====================END CODE==================== -->
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!