Advertisement
vermilly

shai WIP

Apr 20th, 2024
432
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.89 KB | None | 0 0
  1. <!--
  2.          
  3.    【F2U】 44.Estinto [ user - calling card ]
  4.    
  5.      // Code by Leporidebug
  6.        
  7.        background : 000000
  8.        body : fffffff
  9.        
  10.        all other colors are bootstrap
  11.      
  12. -->
  13.  
  14. <div class="card mx-auto border-0 p-3 mt-lg-5 mt-3 modal-open" style="background-color:#000000;color:#ffffff;max-width:600px;box-shadow:0 0 10px rgba(0,0,0,0.5);">
  15.  
  16.   <!----- DECOR DIVIDER . TOP ----->
  17.   <div class="row no-gutters">
  18.     <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  19.     <div class="col-auto my-auto px-3">
  20.       <img src="https://fontmeme.com/permalink/221017/247115f76e8c417383c72978d02844d5.png" alt="damask-dings-font" style="max-height:1rem;" border="0">
  21.     </div>
  22.     <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  23.   </div>
  24.  
  25.   <!---------------------
  26.    
  27.    BANNER IMAGE
  28.    
  29.  ---------------------->
  30.   <div class="card rounded-0 border-0 mt-3" style="height:75px;background-color:transparent;background-size:cover;background-position:center;
  31.    
  32.    /*----- banner image ; auto scales center ; replace IMG_URL with image address -----*/;
  33.    background-image:url(https://as1.ftcdn.net/v2/jpg/03/52/12/32/1000_F_352123236_tZYcpYCTuwDUEF9GMDUfQvnF3zLPK394.jpg);
  34.    
  35.  ">
  36.  
  37.    <!----- fading to background card -----><div class="card rounded-0 border-0 h-100" style="background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.65))"></div>
  38.   </div>
  39.   <!---------------------  
  40.    
  41.    BASIC INFO
  42.    
  43.  ---------------------->
  44.   <h1 class="mt-3 mb-0 display-4" style="font-family:'georgia';font-weight:lighter;">
  45.     | Shai
  46.   </h1>
  47.   <p class="text-uppercase small px-4 mb-0" style="letter-spacing:2px;opacity:0.8;font-family:'optima'">
  48.    
  49.      "I invoked god's wrath. I was a child with a crayon."
  50.    
  51.   </p>
  52.  
  53.   <!----- COLLAPSE TOGGLE BUTTON ----->
  54.   <a href="#intro" data-toggle="collapse" class="text-white mx-auto" style="text-decoration:none;font-size:1.5rem;"><i class="fat fa-angle-down fa-fw fa-sm"></i></a>
  55.  
  56.   <!----- COLLAPSE CONTENT ----->
  57.   <div class="collapse" id="intro">
  58.    
  59.    
  60.  <p class="text-left text-red px-3 py-2 small" style="font-family:'georgia';">
  61.  
  62. <i>"Afraid of losing loved ones? You miss them, don't you?"</i>
  63.  
  64. </p>
  65.  
  66. <p class="text-left px-3 small" style="font-family:'georgia';color:#ff3d24;">
  67. <i>"Shai, a fallen jinn, was condemned to be a human."</i>
  68. </p>
  69.  
  70.  <p class="text-left px-3 py-2 small" style="font-family:'georgia';">
  71. Shai was condemned by god for the sin of attempting creation, which quite frankly, was nothing more than arts and crafts of his world. As a result, he is forced to live as a human for an undetermined length of time on earth. Yet it seems like… forever. He speculates he is indefinitely immortal, living countless lifetimes. He never understood why it happened. When god expressed his displeasure, Shai insisted he did nothing wrong. That was the last he ever from god as he tumbled to Earth. For what sin? For what harm? For what wrongdoing? </p>
  72.  
  73.  <p class="text-left px-3 py-2 small" style="font-family:'georgia';">
  74. Despite his immortal human status, much of his jinn powers remained. This includes shapeshifting - though to a lesser extent compared to before, such as shifting through matter - and the ability to control matter / converting it into anything, much 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.</p>
  75.    
  76.  <p class="text-left px-3 py-2 small" style="font-family:'georgia';">
  77.   Shai landed on Earth next to a place of worship... the irony. In the body of a human woman, he joined the temple. He didn't try to repent, out of both stubborness and sorrow. He soon changed his body to that of a man, yet he couldn't tell you why. Admittedly, it was easier to navigate the societies at the time as such. Back when he was a jinn, he hadn't settled on a gender yet, so he "picked" one as a human. (He wouldn't understand until much later that he is neither man nor woman).
  78. </p>
  79.  
  80. <hr style="border-color:rgba(250,250,250,0.5);">
  81.   <p class="text-left px-3 py-2 small" style="font-family:'georgia';">
  82.    
  83.      Shai | He/they | Jinn
  84. <br>more words woah
  85.      
  86.     </p>  
  87.    
  88.      <p class="text-left  px-3 small" style="font-family:'georgia';">
  89.       <u>Notes</u>: I prefer calling him a jinn rather than "demon" or "genie." His original form is that of fire - like the wispy tip of the flame, but still has a distinguishable form. Much like humans, jinns have their own societies and systems, though humans are seen in higher regards in god's eyes.
  90.     </p>  
  91.    
  92.          <p class="text-left  px-3 small" style="font-family:'georgia';">Much of jinn/angel systems is taken from Islamic lore (hashtag religious trauma baby!!!)
  93. </p>
  94.   </div>
  95.  
  96.  
  97.  
  98.   <!----- DECOR DIVIDER . BOTTOM ----->
  99.   <div class="row no-gutters">
  100.     <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  101.     <div class="col-auto my-auto px-3">
  102.       <img src="https://fontmeme.com/permalink/221017/a598d266c25ae6ff30da91edc190b37b.png" alt="damask-dings-font" border="0" style="max-height:1rem;">
  103.     </div>
  104.     <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  105.   </div>
  106. </div>
  107. <!----- CARD END ----->
  108. <!----- CREDIT ! DO NOT REMOVE ----->
  109. <p class="text-center small text-uppercase mt-2">
  110.   <a href="https://toyhou.se/18523240" class="text-muted" style="text-decoration:none;">code by Leporidebug</a>
  111.   |
  112.   <a href="https://fontmeme.com/" class="text-muted" style="text-decoration:none;">decor via fontmeme</a>
  113. </p>
  114. <!----- CODE END ----->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement