API tools faq
paste
Advertisement
AvalonCat

TH Constellation Bootstrap

AvalonCat
Dec 11th, 2024 (edited)
69
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.20 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. <!-- ====================START CODE==================== -->
  18.  
  19. <div class="row col-lg-8 mx-auto" style="font-weight: lighter; letter-spacing: 2px; font-family:courier new;">
  20.    
  21.     <div class="col-lg-5 order-lg-2 mb-3">
  22.        
  23.         <div class="card card-block bg-dark h-100 table-responsive text-justify card-outline-secondary text-light" style="box-shadow: 0 0 0.5rem; 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">
  24.            
  25.             <!-- IMAGE -->
  26.             <img class="mb-3" src="
  27.            
  28.             https://f2.toyhou.se/file/f2-toyhou-se/users/admin?0
  29.            
  30.             ">
  31.            
  32.             <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>
  33.                
  34.                 Common Name
  35.                
  36.                 </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>
  37.             <div class="text-center my-auto">
  38.                
  39.                 Text
  40.                
  41.                 </div>
  42.             <hr class="w-100 card-outline-secondary">
  43.             <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>
  44.                
  45.                 Celestial Name
  46.                
  47.                 </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>
  48.             <div class="text-center my-auto">
  49.                
  50.                 Text
  51.                
  52.                 </div>
  53.             <hr class="w-100 card-outline-secondary">
  54.             <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>
  55.                
  56.                 Constellation
  57.                
  58.                 </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>
  59.             <div class="text-center my-auto">
  60.                
  61.                 Text
  62.                
  63.                 </div>
  64.             <hr class="w-100 card-outline-secondary">
  65.             <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>
  66.                
  67.                 Element
  68.                
  69.                 </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>
  70.             <div class="text-center my-auto">
  71.                
  72.                 Text
  73.                
  74.                 </div>
  75.             <hr class="w-100 card-outline-secondary">
  76.             <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>
  77.                
  78.                 Weakness
  79.                
  80.                 </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>
  81.             <div class="text-center my-auto">
  82.                
  83.                 Text
  84.                
  85.                 </div>
  86.             <hr class="w-100 card-outline-secondary">
  87.             <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>
  88.                
  89.                 Power
  90.                
  91.                 </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>
  92.             <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>
  93.         </div>
  94.     </div>
  95.    
  96.     <div class="col-lg-7 order-lg-1 mb-3">
  97.         <div class="card card-block bg-dark h-100 table-responsive text-justify card-outline-secondary text-light" style="box-shadow: 0 0 0.5rem; 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">
  98.             <div class="my-auto">
  99.                 <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>
  100.                    
  101.                     Header 1
  102.                    
  103.                     </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>
  104.                 <p>
  105.                    
  106.                     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.
  107.                    
  108.                     </p>
  109.             </div>
  110.             <hr class="w-100 card-outline-secondary">
  111.             <div class="my-auto">
  112.                 <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>
  113.                    
  114.                     Header 2
  115.                    
  116.                     </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>
  117.                 <p>
  118.                    
  119.                     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.
  120.                    
  121.                     </p>
  122.             </div>
  123.             <hr class="w-100 card-outline-secondary">
  124.             <div class="my-auto">
  125.                 <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>
  126.                    
  127.                     Header 3
  128.                    
  129.                     </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>
  130.                 <p>
  131.                    
  132.                     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.
  133.                    
  134.                     </p>
  135.             </div>
  136.         </div>
  137.     </div>
  138. </div>
  139.  
  140. <!-- ==========CREDIT DO NOT REMOVE========== -->
  141.  
  142. <div class="text-right col-lg-9 mx-auto px-lg-4">
  143.     <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>
  144. </div>
  145.  
  146. <!-- ====================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!