API tools faq
paste
vermilly

azure guide au

vermilly
Oct 28th, 2025 (edited)
366
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.75 KB | None | 0 0
raw download clone embed print report
  1. <!----------
  2.  
  3.    CODE START!
  4.    
  5.    use ctrl-F to change the accents !
  6.    
  7.    accent  : #aaaaaa
  8.    
  9.    This code uses fontmeme , the font is Pixelcastle!
  10.    > https://fontmeme.com/fonts/pixelcastle-font/
  11.    
  12.    This code also uses icons from FontAwesome
  13.    > https://fontawesome.com
  14.    
  15.    It is preffered to edit the code at th.circlejourney.net to see live preview while editing
  16.    
  17. ----------->
  18.  
  19.  
  20. <div class="container mx-auto" style="max-width: 800px;">
  21.  
  22.     <div class="card bg-faded rounded-0">
  23.        
  24.         <!--- HEADER IMAGE --->
  25.        
  26.         <div class="card rounded-0 bg-faded" style="height:130px; background-image:
  27.        
  28.        url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F2024268.jpg&f=1&nofb=1&ipt=94de3b4d295dc0060104eccd51b1278ce23569502e41ddc267ca37b63f1f4e4a');
  29.        
  30.        background-size: cover; background-position: center;">
  31.             <div class="w-100 h-100" style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))"></div>
  32.         </div>
  33.        
  34.         <!--- START OF CONTENT --->
  35.        
  36.        
  37.         <div class="row no-gutters px-md-5 px-4 pb-3" style="margin-top: -90px">
  38.            
  39.            
  40.             <!--- FIRST COLUMN --->
  41.            
  42.             <div class="col-md-3 p-1">
  43.                 <div class="flex-column h-100">
  44.                     <div class="card rounded-0 p-2" style="box-shadow: 0px 0px 5px black;">
  45.                        
  46.                         <!--- CHARACTER IMAGE --->
  47.                        
  48.                        
  49.                         <div class="card bg-faded rounded-0 p-2" style="height: 140px; background-image: url(
  50.                        
  51.                        
  52.                        'https://f2.toyhou.se/file/f2-toyhou-se/characters/24693477?1754071808'
  53.                        
  54.                        
  55.                        ); background-position: center; background-size: cover">
  56.                            
  57.                         </div>
  58.                     </div>
  59.                    
  60.                     <!--- BASICS --->
  61.                    
  62.                     <div class="card rounded-0 mt-2 p-2 flex-grow-1" style="box-shadow: 0px 0px 5px black;">
  63.                         <div class="flex-row justify-content-between">
  64.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  65.                                 ⊹ name -
  66.                             </div>
  67.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  68.  
  69.  
  70.                                 azure
  71.                                
  72.                                
  73.                             </div>
  74.                         </div>
  75.                         <hr class="my-1 w-100">
  76.                         <div class="flex-row justify-content-between">
  77.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  78.                                 ⊹ age -
  79.                             </div>
  80.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  81.                                
  82.                                
  83.                                 adult
  84.                                
  85.                                
  86.                             </div>
  87.                         </div>
  88.                         <hr class="my-1 w-100">
  89.                         <div class="flex-row justify-content-between">
  90.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  91.                                 ⊹ gender -
  92.                             </div>
  93.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  94.                                
  95.                                
  96.                                 agender
  97.                                
  98.                                
  99.                             </div>
  100.                         </div>
  101.                         <hr class="my-1 w-100">
  102.                         <div class="flex-row justify-content-between">
  103.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  104.                                 ⊹ sexuality -
  105.                             </div>
  106.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  107.                                
  108.                                
  109.                                 straight
  110.                                
  111.                                
  112.                             </div>
  113.                         </div>
  114.                         <hr class="my-1 w-100">
  115.                                                 <div class="flex-row justify-content-between">
  116.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  117.                                 ⊹ pronouns -
  118.                             </div>
  119.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  120.                                
  121.                                
  122.                                 he/him
  123.                                
  124.                                
  125.                             </div>
  126.                         </div>
  127.                         <hr class="my-1 w-100">
  128.                         <div class="flex-row justify-content-between">
  129.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  130.                                 ⊹ species -
  131.                             </div>
  132.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  133.                                
  134.                                
  135.                                 human
  136.                                
  137.                                
  138.                             </div>
  139.                         </div>
  140.                         <hr class="my-1 w-100">
  141.                         <div class="flex-row justify-content-between">
  142.                             <div class=" pl-1 align-items-center" style="font-size: 13px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  143.                                 ⊹ alliance -
  144.                             </div>
  145.                             <div class="align-items-center pr-1 text-muted pt-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  146.                                
  147.                                
  148.                                 esper
  149.                                
  150.                                
  151.                             </div>
  152.                         </div>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.            
  157.             <!--- MIDDLE COLUMN --->
  158.            
  159.            
  160.             <div class="col-md-6 p-3">
  161.                 <div class="flex-column h-100">
  162.                 <div class="mt-md-5">
  163.      
  164.                 </div>
  165.                 <!--- CHARACTER TITLE --->
  166.                
  167.                 <div class="card py-1 px-2 rounded-0 text-center text-muted" style="font-size: 11px; font-family: 'times new roman'; letter-spacing: 0.5px; box-shadow: 0px 0px 5px black;">
  168.                    
  169.                    
  170.                     ⋆˚࿔     explosive baby bomb esper 𝜗𝜚˚⋆  
  171.                    
  172.                    
  173.                 </div>
  174.                
  175.                 <!---
  176.                
  177.                        CHARACTER BLURB
  178.                        > this part scrolls!
  179.                        > change the 'fas fa-sparkle' in the <li> to any icon you want (check out the fontawesome link above for more!
  180.                        
  181.                --->
  182.                
  183.                 <div class="card mt-2 rounded-0 flex-grow-1" style="box-shadow: 0px 0px 5px black;">
  184.                     <div class="flex-column h-100">
  185.                     <div class="p-2" style="overflow-y: auto; scrollbar-width: 0.1; flex: 1 1 0; min-height: 100px">
  186.                         <div class="text-justify p-1 flex-grow-1" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  187.                            
  188.                            Azure is an S-Class Esper with the potential to be an all-powerful user. Yet, he can never find a guide that can withstand his aura. He is kept under lock, key and constant surveillance to make sure he doesn't nearly kill another guide. From S-tier to D-tier, no one could match his energy. He seems resoundingly calm, collected, but deep down <i>terrified</i> of never having control. With low spirits and a defeated mindset, he never could've imagined an F-tier failure of a guide could reign him in...
  189.                         </div>
  190.                        
  191.                         <!--- SUMMARY? TRIVIA? LIST OF RANDOM? anything you want tbh --->
  192.                        
  193.                         <div class="card bg-faded p-1 mt-2 rounded-0 border-0">
  194.                             <ul class="fa-ul mb-1 mt-1 ml-4 text-muted" style="font-size: 10px; letter-spacing: 0.5px; opacity: 0.8; ">
  195.                                 <li><span class="fa-li"><i class="fas fa-sparkle" style="color: #aaaaaa"></i></span>He's a little pathetic and sad.</li>
  196.                                 <li><span class="fa-li"><i class="fas fa-sparkle" style="color: #aaaaaa"></i></span>He has a strong family backing that was never too worried about him finding a guide. Despite this, Azure himself was the one stressed for the longest time.</li>
  197.                                 <li><span class="fa-li"><i class="fas fa-sparkle" style="color: #aaaaaa"></i></span>Horrendous academic record, yet managed to squeak by because of his magic potential.</li>
  198.                             </ul>
  199.                         </div>
  200.                     </div>
  201.                     </div>
  202.                 </div>
  203.                
  204.                 <!--- CHARACTER TAGS - best if it's short --->
  205.                
  206.                 <div class="flex-row mt-2">
  207.                     <div class="card mr-1 text-center flex-grow-1 rounded-0 p-1 text-muted" style="font-size: 11px; font-family: 'times new roman'; letter-spacing: 0.5px; box-shadow: 0px 0px 5px black;">
  208.                        
  209.                         #guideverse
  210.  
  211.                     </div>
  212.                     <div class="card mr-1 ml-1 text-center flex-grow-1 rounded-0 p-1 text-muted" style="font-size: 11px; font-family: 'times new roman'; letter-spacing: 0.5px; box-shadow: 0px 0px 5px black;">
  213.                        
  214.                         #sci-fi-fantasy
  215.  
  216.                     </div>
  217.                     <div class="card ml-1 text-center flex-grow-1 rounded-0 p-1 text-muted" style="font-size: 11px; font-family: 'times new roman'; letter-spacing: 0.5px;box-shadow: 0px 0px 5px black;">
  218.                        
  219.                         #romance
  220.  
  221.                     </div>
  222.                 </div>
  223.                 </div>
  224.             </div>
  225.            
  226.             <!--- RIGHT COLUMN --->
  227.            
  228.             <div class="col-md-3 p-1">
  229.                 <div class="flex-column h-90">
  230.                    
  231.                 <!--- SONG PLAYER --->
  232.                    
  233.                 <div class="card rounded-0 p-2 mt-md-5" style="box-shadow: 0px 0px 5px black;">
  234.                     <div class="row no-gutters">
  235.                         <div class="col-3 text-right align-items-center justify-content-end">
  236.                            
  237.                             <!---
  238.                    
  239.                                    SONG EMBED
  240.                                    > replace the UTUBEID in the iframe src with your youtube video song id
  241.                                                    (you can find it after the https://www.youtube.com/watch?v= in the video url)
  242.                                    
  243.                            --->
  244.                            
  245.                             <i class="fas fa-play fa-fade"></i><iframe style="opacity: 0.001; height: 100%; width: 100%; position: absolute; bottom: -4px; left: -2px;"
  246.                            
  247.                            
  248.                                        src="https://www.youtube.com/embed/LbLOH4qfumg
  249.                                        
  250.                                        
  251.                                    "></iframe>
  252.                         </div>
  253.                         <div class="col text-left">
  254.                             <div class=" py-1 px-2" style="font-size: 12px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  255.                                
  256.  13월의 춤                            </div>
  257.                             <div class="pl-2 mt-n2 pb-1 text-muted" style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ">
  258.                                
  259.                                
  260. SEVENTEEN                                
  261.                                
  262.                             </div>
  263.                         </div>
  264.                     </div>
  265.                 </div>
  266.                
  267.                 <!--- CHARACTER RELATIONSHIPS --->
  268.                
  269.                 <div class="card rounded-0 mt-2" style="box-shadow: 0px 0px 5px black;">
  270.                    
  271.                     <!--- FIRST RELATIONSHIP --->
  272.                    
  273.                     <div class="row no-gutters">
  274.                         <div class="col-5 p-2">
  275.                            
  276.                             <!--- CHARACTER IMAGE --->
  277.                            
  278.                             <div class="card rounded-0 bg-faded" style="height: 60px; background-image: url(
  279.                            
  280.                            'https://f2.toyhou.se/file/f2-toyhou-se/characters/1540532?1755310617'
  281.                            
  282.                            ); background-size: cover; background-position: center;"></div>
  283.                         </div>
  284.                         <div class="col py-2">
  285.                             <a class="" style="font-size: 12px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;" href="
  286.                            
  287. https://toyhou.se/1540532.fox/35853304.guideverse-au                            
  288.                            ">
  289.                                
  290. Fox                                
  291.                             </a>
  292.                            
  293.                             <!---
  294.                            
  295.                                    RELATIONSHIP STATS
  296.                                    > change the fas or fal to change how solid the icon is
  297.                                    > fas for solid hearts
  298.                                    > fal for hollow heart
  299.                                    
  300.                            --->
  301.                            
  302.                             <div class="text-muted mt-n1" style="font-size: 9px;">
  303.                                
  304.                                 <i class="fas fa-heart"></i>
  305.                                 <i class="fas fa-heart"></i>
  306.                                 <i class="fas fa-heart"></i>
  307.                                 <i class="fas fa-heart"></i>
  308.                                 <i class="fas fa-heart"></i>
  309.                                
  310.                             </div>
  311.                             <div style="font-size: 10px; opacity: 0.7; letter-spacing: 0.5px; ;">
  312.                                
  313.                                
  314.                                 Guide partner (to-be Girlfriend)
  315.                                
  316.                                
  317.                             </div>
  318.                         </div>
  319.                     </div>
  320.                                 </div>    
  321.                  
  322.  
  323.                
  324.                 <!--- QUOTE --->
  325.                
  326.                 <div class="card rounded-0 mt-2 p-1 flex-grow-1" style="box-shadow: 0px 0px 5px black;">
  327.                     <div class="text-left">
  328.                         <div style="color:#aaaaaa; font-size: 14px;" class="pl-1">⋆˙⟡</div>
  329.                     </div>
  330.                     <div class="text-center" style="font-size: 12px; font-family: monspace; letter-spacing: 0.5px; color: #aaaaaa;">
  331.                        
  332.                         <br>
  333. <i>Azure’s grin faltered. His whole body went still, “...Wait,” he murmured. <a href="https://toyhou.se/~literature/280667.azuox/7.accidental-sync/">“You’re still conscious?”</a></i>                                                        <br>  <br>
  334.    
  335.                     </div>
  336.                     <div class="text-right">
  337.                         <div style="color:#aaaaaa; font-size: 14px;" class="pr-1">⋆˙⟡</div>
  338.                        
  339.                          
  340.                     </div>  
  341.  
  342.     </div>
  343.                 </div>
  344.                 </div>
  345.             </div>
  346.         </div>
  347.        
  348.         <!--- END OF CONTENT --->
  349.        
  350.        
  351.        
  352.        
  353.     </div>
  354.    
  355.     <!--- CREDITS - DO NOT REMOVE --->
  356.        
  357.     <div class="text-center">
  358.         <a href="https://toyhou.se/Wren_Song"><i class="fal text-muted fa-code" style="font-size: 11px;"></i></a>
  359.     </div>
  360.        
  361. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!