API tools faq
paste
vermilly

piao elf au

vermilly
Aug 15th, 2025
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.20 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: #e23ba8
  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/50450651_SZXH86RTYoksvqs.png)
  33.   fixed center;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/12649463?1654924935);
  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: #e23ba8;"></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: #e23ba8;"> name</div> piao [漂]
  77.                                 </div>
  78.                             </div>
  79.                             <!--- name end -------------------->
  80.                            
  81.                        
  82.                             <!--- gender / pronouns -------------------->
  83.                             <div class="row no-gutters mb-2">
  84.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  85.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  86.                                     <div class="text-uppercase" style="color: #e23ba8;"> gender</div> male [he/him]
  87.                                 </div>
  88.                             </div>
  89.                             <!--- gender / pronouns end -------------------->
  90.                             <!--- age -------------------->
  91.                             <div class="row no-gutters mb-2">
  92.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  93.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  94.                                     <div class="text-uppercase" style="color: #e23ba8;"> age</div> 4000+
  95.                                 </div>
  96.                             </div>
  97.                             <!--- age end -------------------->
  98.                             <!--- species -------------------->
  99.                             <div class="row no-gutters mb-2">
  100.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  101.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  102.                                     <div class="text-uppercase" style="color: #e23ba8;"> species</div> elf
  103.                                 </div>
  104.                             </div>
  105.                             <!--- species end -------------------->
  106.                             <!--- height -------------------->
  107.                             <div class="row no-gutters mb-2">
  108.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  109.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  110.                                     <div class="text-uppercase" style="color: #e23ba8;"> height</div> 5'7" | 170 cm
  111.                                 </div>
  112.                             </div>
  113.                             <!--- height end -------------------->
  114.                             <!--- sexuality -------------------->
  115.                             <div class="row no-gutters mb-2">
  116.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  117.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  118.                                     <div class="text-uppercase" style="color: #e23ba8;"> sexuality</div> gay
  119.                                 </div>
  120.                             </div>
  121.                             <!--- sexuality end -------------------->
  122.                            
  123.                                 <!--- occupation -------------------->
  124.                             <div class="row no-gutters mb-2">
  125.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  126.                                 <div class="col card rounded-0 px-2 py-1" style="background: #1b1c1c; border-color: #373838;">
  127.                                     <div class="text-uppercase" style="color: #e23ba8;"> occupation</div> artist
  128.                                 </div>
  129.                             </div>
  130.                             <!--- occupation end -------------------->
  131.                    
  132.                        
  133.                    
  134.                            
  135.                             <!--- code credit ; DO NOT REMOVE -------------------->
  136.                             <div class="row no-gutters">
  137.                                 <div class="col-auto card rounded-0 border-0 p-1" style="background: #e23ba8;"></div>
  138.                                 <div class="col card rounded-0 px-2 py-1 border-0" style="background: #282929;">
  139.                                     <div class="text-uppercase" style="color: #e23ba8;"> code by</div>
  140.                                     <a href="https://toyhou.se/MyUniverseinaBox" style="text-decoration:none; color:#b0b6b6;"> <i class="fal pr-1 fa-code"></i>MyUniverseinaBox </a>
  141.                                 </div>
  142.                             </div>
  143.                             <!--- code credit end -------------------->
  144. <!--------------------------------------------
  145.        AVATAR END
  146. ----------------------------------------------->
  147.                         </div>
  148.                         <!--- [ FIRST COLUMN END ] -------------------->
  149. <!--------------------------------------------
  150.  
  151.        [ SECOND COLUMN ]
  152.        
  153. ----------------------------------------------->
  154.                         <div class="col-md-10 col-sm-12 row no-gutters">
  155.                             <div class="card bg-transparent border-0">
  156. <!--------------------------------------------
  157.        TITLE/NAME/SONG
  158. ----------------------------------------------->
  159.                                 <div class="row no-gutters justify-content-between">
  160.                                     <div class="col-sm-12 col-12">
  161.                                         <!--- NAME -------------------->
  162.                                         <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:#e23ba8;">P</span>iao </div>
  163.                                         <!--- SUBTITLE -------------------->
  164.                                         <div class="pl-sm-5 font-italic" style="opacity: .8; font-size: 12px;"> <i class="fad fa-fw fa-sm fa-quote-left"></i>There is art everywhere you go, and you'd be a fool not to see that.</div>
  165.                                     </div>
  166.  
  167.                                 </div>
  168. <!--------------------------------------------
  169.        TITLE/NAME/SONG END
  170. ----------------------------------------------->
  171. <!--------------------------------------------
  172.        MAIN INFO
  173. ----------------------------------------------->
  174.                                 <div class="card rounded-0 mr-md-2 ml-sm-2 my-2 mb-2" style="background: #1b1c1c; border-color: #373838; height: 100%;">
  175.                                     <div class="py-3 px-4 text-justify">
  176.                                         <!--- [ BLURB ] -------------------->
  177.                                 <div class ="p-2" style="overflow:auto; height: 220px;">   
  178.                                 <p><span class="text-uppercase" style="color: #e23ba8;">Piao</span> is a serene, cheerful elf that loves drawing, painting, sculpting, and whatever tickles his fancy! Compared to his meekish youth, he has a strong self-esteem and is a bit stubborn. He dabbles in all subject matters, from landscapes to blueprints to 18+ content scenes. At times, he'll even take great lengths to "perfect" or "capture" his artistic vision. This leads to goofy shenanigans.</p>
  179.                                
  180.                                 <p>However, he is quite clumsy and a chatty person. Super chatty. He's learned to hold back his excessive, talkative nature now, but will let loose if he feels comfortable enough with a person. Piao is also prone to getting angry if people don't make an effort to understand art, insult it, or simply dismiss it as strange or simply wrong. In general, when Piao gets angry quickly he'll smile through it. If truly angry, or feels like he witnessed injustice, any ounce of smiles is gone. He also feels vulnerable if he is alone & isolated for a long time. Or rather, if he's <i>aware</i> of the isolation, because he does get absorbed in artwork for weeks at a time...</p>
  181.                                
  182.                                 <p>Piao has a strong preference for populated areas. This is in contrast to being raised in a tiny village for a good portion of his life. He moved out once he had the courage to and hasn't looked back. Though, he'll still write letters to family. He also has a soft spot for younger elves and will go out of his way to support and protect them. Piao wishes someone did that for him sooner. </p>
  183.            
  184.                        
  185.                                         <!--- [ BLURB END ] -------------------->
  186.                                         </div>
  187.                                         <!--- divider -------------------->
  188.                                         <div class="card rounded-0 my-3 border-left-0 border-right-0 border-bottom-0" style="background: #1b1c1c; border-color: #373838;">
  189.                                         </div>
  190.                                         <!--- divider end -------------------->
  191.                                    
  192.                                         <!--- [ NOTES ] -------------------->
  193.                                         <ul class="m-0 pl-4">
  194.                                    
  195.                                             <li><b>Magick</b>: He has an affinity for Earth magick, particularly soil, clay, and mud. For a long time, Piao was pushed into farming and building roles, but has since used such magick for refining his art process. Pigments, inks, paper, you name it. He's also decent with flora too, adoring their decorative purposes.</li>
  196.  
  197.                                             <li><b>Humans</b>: Piao doesn't feel any particular biases towards humans, or any other species for that matter. He is only curious about the art and culture that comes from them.</li>
  198.                                             <li><b>Internet</b>: While he doesn't exist in a time of the internet, he'd be the type to get into heated arguements. He'd fall for ragebait easily too.</li>
  199.  
  200.                                         </ul>
  201.                                         <!--- [ NOTES END ] -------------------->
  202.    
  203. <!--------------------------------------------
  204.        MAIN INFO END
  205. ----------------------------------------------->
  206.     <!--- divider -------------------->
  207.                                         <div class="card rounded-0 my-3 border-left-0 border-right-0 border-bottom-0" style="background: #1b1c1c; border-color: #373838;">
  208.                                         </div>
  209.                                         <!--- divider end -------------------->
  210. <!--------------------------------------------
  211.         RELATIONSHIPS/LINKS
  212.             > to add more, copy everything from [ SECTION 1 ] to [ SECTION 1 END ] and paste underneath. You can remove the individual character boxes within them.
  213. ----------------------------------------------->
  214.                 <span class="text-uppercase pl-3 mt-3" style="color: #e23ba8;">relationships</span>
  215.                                 <!--- [ SECTION 01 ] -------------------->
  216.                                 <div class="row no-gutters mt-1">
  217.                                     <!--- CHARACTER 01 ; left -------------------->
  218.                                     <div class="col-sm-4 pr-sm-1 row no-gutters">
  219.                                         <div class="col py-1 px-3 rounded-0 card" style="background: #1b1c1c; border-color: #373838;">
  220.                                             <!--- name + fontawesome icon ------------->
  221.                                             <div class="text-uppercase"><i class="fa pr-2 pl-0 fa-heart"></i>Elduin</div>
  222.                                             <!--- desc ---> shen yuan and shang qinghua ahh <!--- link -------------------->
  223.                                             <a href="https://toyhou.se/34265069.elduin-ologeiros" 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>
  224.                                             <!--- link end -------------------->
  225.                                         </div>
  226.                                     </div>
  227.                                     <!--- CHARACTER 01 ; left END -------------------->
  228.        
  229.                                    
  230.                                
  231.                                    
  232.                                
  233.                                 </div>
  234.                                 <!--- [ SECTION 1 END ] -------------------->
  235. <!--------------------------------------------
  236.         RELATIONSHIPS/LINKS END
  237. ----------------------------------------------->
  238.  
  239.         </div>                                 
  240.                                 </div>
  241.                             </div>
  242.                         </div>
  243.                         <!--- [ SECOND COLUMN END ] -------------------->
  244.  
  245.  
  246.                     </div>
  247.                 </div>
  248.             </div>
  249.             <!--- [ MAIN CONTENT END ] -------------------->
  250.  
  251.         </div>
  252.     </div>
  253. </div>
  254. <!--------------------------------------------
  255.        CODE END
  256. ----------------------------------------------->
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!