API tools faq
paste
vermilly

shai

vermilly
Apr 20th, 2024 (edited)
696
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.27 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.  
  3.    [F2U] 6.Utilitarian
  4.    CODE BY MyUniverseinaBox @ TOYHOU.SE
  5.    
  6.    accent colour: #e53434
  7.    
  8.    //////// RULES ////////
  9.    
  10.    -> Do not redistribute this template, it's for personal use only
  11.    -> Please keep credit somewhere visible
  12.    -> Feel free to change everything else to your liking
  13.    
  14.    Thankyou for using this template!
  15.            
  16. ---------------------------------------------->
  17. <!--------------------------------------------
  18.  
  19.        [ CONTAINER + FONT SETUP ]
  20.        
  21. ----------------------------------------------->
  22. <div class="m-0 p-3 mx-auto" style="background: #1b1c1c url(https://file.garden/ZdljYOgxzVCR-7lA/for%20codes/gridmeDARK.png); max-width: 1360px;">
  23.     <div class="mx-auto mx-2" style="
  24.                 font-size:.65rem;
  25.                 color:#b0b6b6;
  26.                 letter-spacing: .4px;">
  27. <!--------------------------------------------
  28.         IMAGE HEADER
  29. ----------------------------------------------->
  30.         <div class="row no-gutters card p-2 rounded-0" style="min-height:160px; background: #1b1c1c; border-color: #373838;">
  31.             <div class="card-block rounded-0" style="
  32.  background: #000 url(https://f2.toyhou.se/file/f2-toyhou-se/images/103269592_MKId0dXh632nrkt.jpg)
  33.   fixed top;background-size:cover;"></div>
  34.         </div>
  35. <!--------------------------------------------
  36.         IMAGE HEADER END
  37. ----------------------------------------------->
  38. <!--------------------------------------------
  39.  
  40.        [ MAIN CONTENT ]
  41.        
  42. ----------------------------------------------->
  43.         <div class="row no-gutters">
  44.             <div class="col-md-12 col-sm-12 row no-gutters">
  45.                 <div class="card rounded-0 p-2 mt-2" style="background: #1b1c1c; border-color: #373838;">
  46.                     <div class="row no-gutters">
  47. <!--------------------------------------------
  48.  
  49.        [ FIRST COLUMN  ]
  50.        
  51. ----------------------------------------------->
  52.                         <div class="mt-n5 col-md-2 col-sm-4 row no-gutters card bg-transparent border-0">
  53. <!--------------------------------------------
  54.        AVATAR
  55. ----------------------------------------------->
  56.                             <div class="card p-2 rounded-0 mb-2" style="height: 190px; background: #1b1c1c; border-color: #373838;">
  57.                                 <!--- icon -------------------->
  58.                                 <div class="card rounded-0 border-0 flex-fill" style="
  59.                    
  60.                            background: #000 url(https://f2.toyhou.se/file/f2-toyhou-se/characters/24691314?1752518359);
  61.                            
  62.                            background-size:cover; background-position:center;">
  63.                                 </div>
  64.                                 <!--- icon end -------------------->
  65.                             </div>
  66. <!--------------------------------------------
  67.        AVATAR END
  68. ----------------------------------------------->
  69. <!--------------------------------------------
  70.        BASIC INFO
  71. ----------------------------------------------->
  72.                             <!--- name -------------------->
  73.                             <div class="row no-gutters mb-2">
  74.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  75.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  76.                                     <div class="text-uppercase" style="color: #e53434;"> name</div> shai [شی]
  77.                                 </div>
  78.                             </div>
  79.                             <!--- name end -------------------->
  80.                            
  81.                             <!--- alias -------------------->
  82.                             <div class="row no-gutters mb-2">
  83.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  84.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  85.                                     <div class="text-uppercase" style="color: #e53434;"> alias(es)</div> red hair man, demon king
  86.                                 </div>
  87.                             </div>
  88.                             <!--- alias end -------------------->
  89.                             <!--- gender / pronouns -------------------->
  90.                             <div class="row no-gutters mb-2">
  91.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  92.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  93.                                     <div class="text-uppercase" style="color: #e53434;"> gender</div> androgyne [he/they]
  94.                                 </div>
  95.                             </div>
  96.                             <!--- gender / pronouns end -------------------->
  97.                             <!--- age -------------------->
  98.                             <div class="row no-gutters mb-2">
  99.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  100.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  101.                                     <div class="text-uppercase" style="color: #e53434;"> age</div> 1000+
  102.                                 </div>
  103.                             </div>
  104.                             <!--- age end -------------------->
  105.                             <!--- species -------------------->
  106.                             <div class="row no-gutters mb-2">
  107.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  108.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  109.                                     <div class="text-uppercase" style="color: #e53434;"> species</div> jinn
  110.                                 </div>
  111.                             </div>
  112.                             <!--- species end -------------------->
  113.                             <!--- height -------------------->
  114.                             <div class="row no-gutters mb-2">
  115.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  116.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  117.                                     <div class="text-uppercase" style="color: #e53434;"> height</div> tall
  118.                                 </div>
  119.                             </div>
  120.                             <!--- height end -------------------->
  121.                             <!--- sexuality -------------------->
  122.                             <div class="row no-gutters mb-2">
  123.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  124.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  125.                                     <div class="text-uppercase" style="color: #e53434;"> sexuality</div> <a href="https://lgbtqia.wiki/wiki/Uranic">uranic</a>
  126.                                 </div>
  127.                             </div>
  128.                             <!--- sexuality end -------------------->
  129.                             <!--- occupation -------------------->
  130.                             <div class="row no-gutters mb-2">
  131.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  132.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  133.                                     <div class="text-uppercase" style="color: #e53434;"> occupation(s)</div> king, doctor, etc.
  134.                                 </div>
  135.                             </div>
  136.                             <!--- occupation end -------------------->
  137.                         <!--- quote -------------------->
  138.                             <div class="row no-gutters mb-2">
  139.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  140.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  141.                                     <div class="text-uppercase" style="color: #e53434;">song playlist</div>
  142.                                     <a href="https://youtube.com/playlist?list=PLNyhGLB0Ts_zxAFnL942pt_yHbj4HrD_i&feature=shared">youtube</a>
  143.                                 </div>
  144.                             </div>
  145.                             <!--- quote end -------------------->  
  146.                             <!--- quote 2 -------------------->
  147.                             <div class="row no-gutters mb-2">
  148.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  149.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  150.                                     <div class="text-uppercase" style="color: #e53434;">Shai-core quotes </div><a href="https://halo.fandom.com/wiki/Reversed_Messages">halo reversed messages</a>
  151.                                 </div>
  152.                             </div>
  153.                             <!--- quote 2 end -------------------->
  154.                            
  155.                             <!--- code credit ; DO NOT REMOVE -------------------->
  156.                             <div class="row no-gutters">
  157.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e53434;"></div>
  158.                                 <div class="col card rounded-0 px-2 py-1 border-0" style="background: #282929;">
  159.                                     <div class="text-uppercase" style="color: #e53434;"> code by</div>
  160.                                     <a href="https://toyhou.se/MyUniverseinaBox" style="text-decoration:none; color:#b0b6b6;"> <i class="fal pr-1 fa-code"></i>MyUniverseinaBox </a>
  161.                                 </div>
  162.                             </div>
  163.                             <!--- code credit end -------------------->
  164. <!--------------------------------------------
  165.        AVATAR END
  166. ----------------------------------------------->
  167.                         </div>
  168.                         <!--- [ FIRST COLUMN END ] -------------------->
  169. <!--------------------------------------------
  170.  
  171.        [ SECOND COLUMN ]
  172.        
  173. ----------------------------------------------->
  174.                         <div class="col-md-10 col-sm-12 row no-gutters">
  175.                             <div class="card bg-transparent border-0">
  176. <!--------------------------------------------
  177.        TITLE/NAME/SONG
  178. ----------------------------------------------->
  179.                                 <div class="row no-gutters justify-content-between">
  180.                                     <div class="col-sm-12 col-12">
  181.                                         <!--- NAME -------------------->
  182.                                         <div class="text-white display-4 text-uppercase pl-4 mt-2 mt-sm-0 font-weight-bold" style="font-family:georgia; letter-spacing:3.4px;"><span style="color:#e53434;">S</span>hai </div>
  183.                                         <!--- SUBTITLE -------------------->
  184.                                         <div class="pl-sm-5 font-italic" style="opacity: .8; font-size: 12px;"> <i class="fad fa-fw fa-sm fa-quote-left"></i>I invoked god's wrath. I was a child with a crayon.</div>
  185.                                     </div>
  186.  
  187.                                 </div>
  188. <!--------------------------------------------
  189.        TITLE/NAME/SONG END
  190. ----------------------------------------------->
  191. <!--------------------------------------------
  192.        MAIN INFO
  193. ----------------------------------------------->
  194.                                 <div class="card rounded-0 mr-md-2 ml-sm-2 my-2 mb-2" style="background: #1b1c1c; border-color: #373838; height: 100%;">
  195.                                     <div class="py-3 px-4 text-justify">
  196.                                         <!--- [ BLURB ] -------------------->
  197.                                 <div class ="p-2" style="overflow:auto; height: 310px;">   
  198.                                 <p><span class="text-uppercase" style="color: #e53434;">Shai is a fallen jinn condemned by god</span>  for the sin of attempting creation, though it was more like the equivalent of drawing or painting. He was demanded to repent by god. He did not repent, out of confusion and a sureness that art is <i>not</i> a sin. Thus, he was banished and forced to live as a human for an undetermined amount of time on earth. They roam for centuries, millennia at this point, indefinitely immortal. God has never spoken to him again (right?) and he doesn't know if he's being punished or not. Is he simply forgotten, or must he repent to be tolerated by god again? Yet, an insincere repentance doesn't work, even if they try.</p>
  199.                                    
  200.                                 <p><span class="text-uppercase" style="color: #e53434;">History</span>: When he first came to earth, he spawned next to a place of worship (the irony). He roamed between religious institutions, then around towns in general. With decades of staying socially isolated and exploring the extent of his powers on earth, he found a new goal: to conquer. Shai ends up ruling an entire kingdom, rising to power through sheer battlefield strength. After long periods of instability (and no one daring to challenge his reign), he finally grasped politics and diplomacy. Once the kingdom became stable and prosperous, everyone hailed him as a fearsome but powerful "demon king."</p>
  201.                                        
  202.                                 <p>Though Shai was surrounded by advisors and an entire workforce to manage a vast domain, he was still lonely. One day, he became interested in one of the countless tea-servants at the castle, <a href="https://toyhou.se/24691499.vedat">Vedat</a>. He's unremarkable, quiet, but Shai beckons him for more leisurely conversations and strolls. Despite Vedat's confusion, he did not shy away, even in the face of a far more powerful and "dangerous" person. Vedat was moved by his sincerity and attention, and Shai was moved by how straightforward and kind he was. They fell in love, despite how bizarre it was to most outsiders. Even so, both in their own ways felt undeserving of love, and the huge class gap was hard to ignore. Public opinion surprisingly swayed in their favor. Some were eager for the terrifying demon to have a lover to "tame" him, while others craved a more balanced (or perhaps easily manipulated) political power. </p>
  203.                                            
  204.                                 <p>Nonetheless, it only took a few years for them to fully embrace their love. Thus, they were married and sealed in history books. And who could ask for more? Power, love, and wealth?</p>
  205.                                        
  206.                             <p>Peace does not last forever. War was waged against their kingdom. Shai was slowly slipping, he could not protect everyone even with tremendous strength alone. Fires are set ablaze across towns, a weak spot of his powers. Soldiers fight in areas he cannot reach in time. Humans are fragile, and they die from famines, wounds, and more - another weakness, for he cannot heal. (It is doubtful he could've healed everyone in time anyways). There was once a time where Shai was apathetic and merciless, but that was far behind him. He now terribly cares for his people, and by god, it hurt failing again and again. Then, Shai loses their husband. </p>
  207.                            
  208.                             <p>His husband? His <i>love?</i> In his own castle? From a <i>single</i> fire arrow? A jinn who wields so much power, but can't save the one life he cherishes most, was laughable. He truly thought he was strong enough to protect everyone with strength alone. Yet, all it took was being occupied a few minutes too long. His kingdom crumbles not long after, overtaken by a neighboring nation. Shai goes back to roaming, more broken than when he first descended to earth. </p>
  209.                            
  210.                         <p><span class="text-uppercase" style="color: #e53434;">Future</span>: Shai does find other companions in life, though none will be Vedat. Since he lives so long, you could say they have countless stories of "lifetimes." Some include: being a bard and exploring with a team, funnily seeing himself in history books, but no one notices. Another includes being a doctor and herbalist, likely out of frustration of being unable to heal, specializing in burn victims. Perhaps out of curiosity, or sorrow, they explore desolated areas and intense environments that humans could not typically survive in. Some notable otherworldly beings he encounters are angels with temporary free will (angels do not have free will, they follow god's commands only... even if they do not want to), other jinn who already lived on earth (though in their "flame" form, hidden to the human eye), and... god? God, is that you? Why are you—</p>      
  211.                        
  212.                                         <!--- [ BLURB END ] -------------------->
  213.                                         </div>
  214.                                         <!--- divider -------------------->
  215.                                         <div class="card rounded-0 my-3 border-left-0 border-right-0 border-bottom-0" style="background: #1b1c1c; border-color: #373838;">
  216.                                         </div>
  217.                                         <!--- divider end -------------------->
  218.                                    
  219.                                         <!--- [ NOTES ] -------------------->
  220.                                         <ul class="m-0 pl-4">
  221.                                             <li><b>Jinnhood</b>: Jinn typically means genie. However, please think of jinn as a separate kind of entity altogether here! They aren't quite demons either (though Shai has often been called that). Shai's original jinn form is like fire - akin to the wispy tip of a flame - and shaped vaguely like a human.</li>
  222.                                             <li><b>Name</b>: In Pashto, Shai [شی] literally means "thing." His name is also a wordplay on "Satan" in Arabic, <i>Shaitan</i>. </li>
  223.                                             <li><b>Gender</b>: He came onto earth in a female form (implying his jinn form was feminine), but soon changed his body to that of a man. They wouldn't understand until much later that they are neither man nor woman. Also, he's a jinn... he's trans... call. call. call that. transjinnder.</li>
  224.                                             <li><b>Powers</b>: Despite his pseudo-human status, much of his jinn powers remained. This includes shapeshifting, though to a lesser extent compared to before (e.g. as a jinn he could literally become air), and the ability to control matter & convert it into anything, like alchemy. The only downside to his powers is that he can’t quite “heal” people or manipulate the flesh/bodily matter attached to living animals and humans. He can manipulate his own body, but not others. He also cannot manipulate plants or their growth. With that being said, he can still manipulate the wind, air, water, earth, to an extent of even manipulating gravity. Fire is... a more complicated relationship.</li>
  225.                                            
  226.                                             <li><div style="color: #e53434;">Afraid of losing loved ones, aren't you? You miss them, don't you? </div> </li>
  227.                                         </ul>
  228.                                         <!--- [ NOTES END ] -------------------->
  229.    
  230. <!--------------------------------------------
  231.        MAIN INFO END
  232. ----------------------------------------------->
  233.     <!--- divider -------------------->
  234.                                         <div class="card rounded-0 my-3 border-left-0 border-right-0 border-bottom-0" style="background: #1b1c1c; border-color: #373838;">
  235.                                         </div>
  236.                                         <!--- divider end -------------------->
  237. <!--------------------------------------------
  238.         RELATIONSHIPS/LINKS
  239.             > to add more, copy everything from [ SECTION 1 ] to [ SECTION 1 END ] and paste underneath. You can remove the individual character boxes within them.
  240. ----------------------------------------------->
  241.                 <span class="text-uppercase pl-3 mt-3" style="color: #e53434;">relationships</span>
  242.                                 <!--- [ SECTION 01 ] -------------------->
  243.                                 <div class="row no-gutters mt-1">
  244.                                     <!--- CHARACTER 01 ; left -------------------->
  245.                                     <div class="col-sm-4 pr-sm-1 row no-gutters">
  246.                                         <div class="col py-1 px-3 rounded-0 card" style="background: #1b1c1c; border-color: #373838;">
  247.                                             <!--- name + fontawesome icon ------------->
  248.                                             <div class="text-uppercase"><i class="fa pr-2 pl-0 fa-heart"></i>vedat</div>
  249.                                             <!--- desc ---> his first lover and fellow ruler <!--- link -------------------->
  250.                                             <a href="https://toyhou.se/24691499.vedat" class="btn btn-outline-secondary border-0 rounded-0" style="opacity: 0.2; filter: brightness(50%); position:absolute; top:0; left:0; bottom:0; right:0;"></a>
  251.                                             <!--- link end -------------------->
  252.                                         </div>
  253.                                     </div>
  254.                                     <!--- CHARACTER 01 ; left END -------------------->
  255.                                     <!--- CHARACTER 02 ; right -------------------->
  256.                                     <div class="col-sm-4 pl-sm-0 row no-gutters mt-2 mt-sm-0">
  257.                                         <div class="col py-1 px-3 rounded-0 card" style="background: #1b1c1c; border-color: #373838;">
  258.                                             <!--- name + fontawesome icon ------------->
  259.                                             <div class="text-uppercase"><i class="far pr-2 pl-0 fa-heart-half-stroke"></i>sasa</div>
  260.                                             <!--- desc --->a strange angel with free will<!--- link -------------------->
  261.                                             <a href="https://toyhou.se/4669797.sasa" class="btn btn-outline-secondary border-0 rounded-0" style="opacity: 0.2; filter: brightness(50%); position:absolute; top:0; left:0; bottom:0; right:0;"></a>
  262.                                             <!--- link end -------------------->
  263.                                         </div>
  264.                                     </div>
  265.                                     <!--- CHARACTER 02 ; right END -------------------->
  266.                                    
  267.                                     <!--- CHARACTER 03; right -------------------->
  268.                                     <div class="col-sm-4 pl-sm-1 row no-gutters mt-2 mt-sm-0">
  269.                                         <div class="col py-1 px-3 rounded-0 card" style="background: #1b1c1c; border-color: #373838;">
  270.                                             <!--- name + fontawesome icon ------------->
  271.                                             <div class="text-uppercase"><i class="pr-2 pl-0 fa-regular fa-heart"></i>god</div>
  272.                                             <!--- desc ---> the judge and punisher <!--- link -------------------->
  273.                                             <a href="https://en.wikipedia.org/wiki/God" class="btn btn-outline-secondary border-0 rounded-0" style="opacity: 0.2; filter: brightness(50%); position:absolute; top:0; left:0; bottom:0; right:0;"></a>
  274.                                             <!--- link end -------------------->
  275.                                         </div>
  276.                                     </div>
  277.                                     <!--- CHARACTER 03 ; right END -------------------->
  278.                                    
  279.                                
  280.                                 </div>
  281.                                 <!--- [ SECTION 1 END ] -------------------->
  282. <!--------------------------------------------
  283.         RELATIONSHIPS/LINKS END
  284. ----------------------------------------------->
  285.  
  286.         </div>                                 
  287.                                 </div>
  288.                             </div>
  289.                         </div>
  290.                         <!--- [ SECOND COLUMN END ] -------------------->
  291.  
  292.  
  293.                     </div>
  294.                 </div>
  295.             </div>
  296.             <!--- [ MAIN CONTENT END ] -------------------->
  297.  
  298.         </div>
  299.     </div>
  300. </div>
  301. <!--------------------------------------------
  302.        CODE END
  303. ----------------------------------------------->
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!