API tools faq
paste
Advertisement
vermilly

deva

vermilly
May 3rd, 2025 (edited)
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.          
  3.    【F2U】 44.Estinto [ character ]
  4.    
  5.      // Code by Leporidebug
  6.  
  7.      ////////////////// Rules ///////////////////
  8.      
  9.      Do not redistribute this template
  10.      Please keep the credit somewhere visible
  11.      Feel free to change everything else to your liking
  12.      // Thank you for using this template. //
  13.      
  14.      ////////////////////////////////////////
  15.        
  16.        background : 000000
  17.        body : fffffff
  18.        
  19.        all other colors are bootstrap
  20.      
  21. -->
  22.  
  23. <div class="card modal-open" style="background-color:#000000;color:#ffffff;box-shadow:0 0 10px rgba(0,0,0,0.4)">
  24.   <div class="row no-gutters">
  25.     <!-----
  26.      
  27.      
  28.      LEFT - BASIC INFO
  29.      
  30.      
  31.    ----->
  32.     <div class="col-lg-4 pr-lg-2 pl-lg-0 px-1 flex-column">
  33.      
  34.       <!---------------
  35.          
  36.          MAIN IMAGE
  37.          
  38.      ----------------->
  39.       <div class="card p-2 border-0 rounded-0 bg-faded" style="min-height:300px;background-size:cover;background-position:top center;
  40.        
  41.        /*----- main image; auto-scale center, replace IMG_URL with image address -----*/;
  42.        background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/99755435_DFo87BY7UUlGyg5.jpg);
  43.        
  44.      "></div>
  45.      
  46.       <div class="card rounded-0 border-0 p-2 d-flex flex-fill" style="background-color:transparent;">
  47.        
  48.         <!---------------
  49.          
  50.          NAME CARD
  51.          
  52.        ----------------->
  53.         <div class="container p-0 my-3">
  54.           <hr class="mt-0 faded mx-3" style="border-color:#ffffff;">
  55.          
  56.           <!----- BORDER DECOR ----->
  57.           <!----- top left -----><img src="https://fontmeme.com/permalink/221022/dd0084029e465aa4dc0cb530de4edd2f.png" alt="damask-dings-font" border="0" style="max-height:1.5rem;position:absolute;left:0;top:0;" class="faded">
  58.          
  59.           <!----- top right -----><img src="https://fontmeme.com/permalink/221022/a6914575e5c99395a51cd58dadbac75c.png" alt="damask-dings-font" border="0" style="max-height:1.5rem;position:absolute;right:0;top:0;" class="faded">
  60.          
  61.           <!----- bottom left -----><img src="https://fontmeme.com/permalink/221022/c499bcfcc687c6115ef2e91d49b09381.png" alt="damask-dings-font" border="0" style="max-height:1.5rem;position:absolute;left:0;bottom:0;" class="faded">
  62.          
  63.           <!----- bottom right -----><img src="https://fontmeme.com/permalink/221022/6ad66bd1a65e3a58e270722c803301eb.png" alt="damask-dings-font" border="0" style="max-height:1.5rem;position:absolute;right:0;bottom:0;" class="faded">
  64.          
  65.          
  66.           <!----- NAME ----->
  67.           <h1 class="text-center p-2 mt-3 mb-0 text-uppercase font-weight-bold" style="font-family:'georgia';">
  68.          
  69.             Deva [देव]
  70.          
  71.           </h1>
  72.          
  73.           <!----- TITLE ----->
  74.           <p class="faded text-center px-3" style="font-family:'optima';letter-spacing:2px;">
  75.            
  76.             Human Model in a Fantasy Realm
  77.            
  78.           </p>
  79.          
  80.           <hr class="mb-0 faded mx-3" style="border-color:#ffffff;">
  81.         </div>
  82.        
  83.        
  84.         <!---------------
  85.          
  86.          BASICS
  87.          
  88.        ----------------->
  89.         <div class="row no-gutters px-2 mb-3">
  90.      
  91.          
  92.           <!----- AGE ----->
  93.           <div class="col-6">
  94.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Age</p>
  95.           </div>
  96.           <div class="col-6">
  97.             <p class="text-right font-italic">
  98.              
  99.               20s
  100.              
  101.             </p>
  102.           </div>
  103.          
  104.           <!----- GENDER ----->
  105.           <div class="col-6">
  106.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Gender</p>
  107.           </div>
  108.           <div class="col-6">
  109.             <p class="text-right font-italic">
  110.              
  111.               ??? [He/any]
  112.              
  113.             </p>
  114.           </div>
  115.          
  116.      
  117.           <!----- SPECIES ----->
  118.           <div class="col-6">
  119.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Species</p>
  120.           </div>
  121.           <div class="col-6">
  122.             <p class="text-right font-italic">
  123.              
  124.               Human
  125.              
  126.             </p>
  127.           </div>
  128.          
  129.           <!----- Height ----->
  130.           <div class="col-6">
  131.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Height</p>
  132.           </div>
  133.           <div class="col-6">
  134.             <p class="text-right font-italic">
  135.              
  136.               6'1" [185 cm]
  137.              
  138.             </p>
  139.           </div>
  140.          
  141.           <!----- ROLE ----->
  142.           <div class="col-6">
  143.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Role</p>
  144.           </div>
  145.           <div class="col-6">
  146.             <p class="text-right font-italic">
  147.              
  148.               Model
  149.              
  150.             </p>
  151.           </div>
  152.          
  153.           <!----- BADGE ----->
  154.           <div class="col-6">
  155.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Badge</p>
  156.           </div>
  157.           <div class="col-6">
  158.             <p class="text-right font-italic">
  159.              
  160.               Arcane Agent
  161.              
  162.             </p>
  163.           </div>
  164.          
  165.           <!----- THEME ----->
  166.           <div class="col-6">
  167.             <p class="text-muted font-weight-bold text-uppercase" style="font-family:'georgia';">Theme</p>
  168.           </div>
  169.           <div class="col-6">
  170.             <p class="text-right font-italic">
  171.              
  172.               <!----- ARTIST INFO ----->
  173.               Fashion Show Theme
  174.              
  175.               <!----- MUSIC PLAYER ----->
  176.               <a href="" class="text-danger">
  177.                
  178.                 <!----- replace [6oVaIuMI0II] with the part of URL found after [https://www.youtube.com/watch?v=] ----->
  179.                 <iframe class="w-100" frameborder="0" style="height:1.5rem;width:1.5rem; position:absolute;opacity:0.002"
  180.                
  181.                src="https://www.youtube.com/embed/4KWO3ZGjjPM"
  182.  
  183.                 ></iframe>
  184.                
  185.                 <!----- fontawesome icon here ----->
  186.                 <i class="fas fa-gramophone"></i>
  187.               </a>
  188.             </p>
  189.           </div>
  190.          
  191.           <!----- add more basic info here ----->
  192.          
  193.         </div>
  194.       </div>
  195.     </div>
  196.     <!----- LEFT END ----->
  197.    
  198.        
  199.     <!-----
  200.      
  201.      
  202.      MIDDLE - QUOTE BOX
  203.      
  204.      
  205.    ----->
  206.     <div class="col-lg-2 px-1 flex-column mb-lg-0 mb-2">
  207.       <div class="card p-lg-3 p-2 border-0 rounded-0 d-flex flex-fill" style="background-color:transparent;background-size:200%;background-position:center;
  208.        
  209.        /*----- quote box background; auto-scale center, replace IMG_URL with image address -----*/;
  210.        background-image:url(https://i.pinimg.com/736x/fc/52/81/fc528148c84ba8f6e6c59a4142ac51e8.jpg);
  211.        
  212.      ">
  213.        
  214.         <div class="card d-flex flex-fill p-2 rounded-0 border-0 justify-content-center" style="background-color:rgba(0,0,0,.45);color:#ffffff;">
  215.          
  216.           <!----- DECOR DIVIDER . ONE ----->
  217.           <div class="row no-gutters">
  218.             <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  219.             <div class="col-auto my-auto px-2">
  220.            
  221.             <img src="https://fontmeme.com/permalink/221017/247115f76e8c417383c72978d02844d5.png" alt="damask-dings-font" style="max-height:1rem;" border="0">
  222.            
  223.             </div>
  224.             <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  225.           </div>
  226.          
  227.           <!----- QUOTE ----->
  228.           <p class="text-center font-italic" style="font-family:'optima'">
  229.             <!---- fontawesome decor here ----->
  230.             <i class="fad fa-quote-left fa-fw fa-sm"></i>
  231.            
  232.          
  233.             I dress up. I pretend I'm in love with the idea of being alive. I make a point not to stare at the fragmented crystals.
  234.            
  235.            
  236.             <!---- fontawesome decor here ----->
  237.             <i class="fad fa-quote-right fa-fw fa-sm"></i>
  238.           </p>
  239.         </div>
  240.       </div>
  241.     </div>
  242.     <!----- MIDDLE END ----->
  243.    
  244.    
  245.    
  246.     <!-----
  247.      
  248.      
  249.      RIGHT - PROFILE
  250.      
  251.      
  252.    ----->
  253.     <div class="col-lg-6 px-1">
  254.       <div class="card p-3 border-0 rounded-0" style="background-color:transparent;max-height:100vh;overflow:auto;">
  255.        
  256.         <!---------------
  257.          
  258.          SUMMARY
  259.          
  260.        ----------------->
  261.         <div class="row no-gutters mb-2">
  262.           <div class="col">
  263.             <hr class="faded" style="border-color:#ffffff;">
  264.             <p class="text-lg-center pr-2 mb-2">
  265.              
  266.               <!----- capitalizes first letter ----->
  267.               <span class="mx-1 faded" style="font-size:1.8rem;font-family: 'georgia';">A</span> human being sent to live in a magical realm where their life depends on modeling and detective work. They don't pay much attention to their detective tasks, as their allies do most of that. His strength lies within running statistical analyses handed to them, and the analyses they do for model scoring.</p>
  268.              
  269.           </div>
  270.          
  271.           <!----- fontmeme decor ----->
  272.           <div class="col-auto mt-2 pl-lg-2">
  273.             <img src="https://fontmeme.com/permalink/221022/c85e274de6856ecdaeed2a68f5edd099.png" alt="damask-dings-font" border="0" style="max-width:50px;">
  274.           </div>
  275.          
  276.         </div>
  277.         <!----- SUMMARY END ----->
  278.        
  279.         <!----- DECOR DIVIDER . TWO ----->
  280.         <div class="row no-gutters mb-2">
  281.           <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  282.           <div class="col-auto my-auto px-2">
  283.            
  284.             <img src="https://fontmeme.com/permalink/221017/247115f76e8c417383c72978d02844d5.png" alt="damask-dings-font" style="max-height:1rem;" border="0">
  285.            
  286.           </div>
  287.           <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  288.         </div>
  289.        
  290.        
  291.         <!---------------
  292.          
  293.          PERSONALITY
  294.          
  295.        ----------------->
  296.         <p class="text-center " style="font-family:'optima';letter-spacing:1px;">
  297.          
  298.           <!----- adjectives ----->
  299.           stubborn . fragile . meticulous
  300.          
  301.           <!----- line break ----->
  302.           <br>
  303.          
  304.           <!----- fontmeme decor ----->
  305.           <img src="https://fontmeme.com/permalink/221017/ae127416ed9aeeac5acfe85fe09e3c0e.png" alt="damask-dings-font" border="0" style="max-width:2rem;" class="faded">
  306.         </p>
  307.        
  308.         <!----- TRAITS ----->
  309.         <p><span class="font-italic text-muted mr-1 font-weight-bold" style="font-size:1.1rem;font-family:'georgia';">
  310.             Pressure.</span>
  311.          
  312.           The pressure of successfully completing model shows can get to him. He's come to terms that he won't always get perfect scores. It frustrates them how strange the scoring is, and how they must use incohesive designs to pass. At least the ongoing detective work in this world makes sense to him.
  313.          
  314.         </p>
  315.        
  316.         <!----- Ideology ----->
  317.         <p><span class="font-italic text-muted mr-1 font-weight-bold" style="font-size:1.1rem;font-family:'georgia';">
  318.             Perception.</span>
  319.          
  320.          Often mistaken for a girl, he doesn't mind it. After all, most people sent to this world are unsuspecting girls, made to fight for survival. There isn't much in-fighting or competition, except among those that came to this world years ago.
  321.         </p>
  322.        
  323.         <!----- Bonds ----->
  324.         <p><span class="font-italic text-muted mr-1 font-weight-bold" style="font-size:1.1rem;font-family:'georgia';">
  325.             Isolation.</span>
  326.          
  327.           They are rather lonely and feel isolated at times. They don't converse with fellow models, only detective colleagues. Deva often feels sad if they are not busy, and they <i>especially</i> try not to feel homesick (a far worse feeling).
  328.          
  329.         </p>
  330.        
  331.      
  332.         <!----- PERSONALITY END ----->
  333.  
  334.        
  335.         <!----- DECOR DIVIDER . FOUR ----->
  336.         <div class="row no-gutters mb-2">
  337.           <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  338.           <div class="col-auto my-auto px-3">
  339.             <img src="https://fontmeme.com/permalink/221017/a598d266c25ae6ff30da91edc190b37b.png" alt="damask-dings-font" border="0" style="max-height:1rem;">
  340.           </div>
  341.           <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  342.         </div>
  343.        
  344.        
  345.         <!---------------
  346.          
  347.          LIKES / DISLIKES / TRIVIA
  348.          
  349.        ----------------->
  350.         <div class="row no-gutters mb-2">
  351.          
  352.           <!----- LIKES ----->
  353.           <div class="col-lg-6 mb-lg-0 mb-2">
  354.             <p class="font-weight-bold text-uppercase text-muted" style="font-family:'georgia';letter-spacing:1px;">
  355.               「 Likes 」
  356.             </p>
  357.            
  358.             <ul class="fa-ul">
  359.               <li><span class="fa-li faded">✦</span> Gothic styles</li>
  360.              
  361.               <li><span class="fa-li faded">✦</span> Crystals and sparkly items</li>
  362.              
  363.               <li><span class="fa-li faded">✦</span> Chocolate</li>
  364.              
  365.               <li><span class="fa-li faded">✦</span> Peace</li>
  366.              
  367.               <!----- add more here ----->
  368.              
  369.             </ul>
  370.           </div>
  371.          
  372.           <!----- DISLIKES ----->
  373.           <div class="col-lg-6">
  374.             <p class="font-weight-bold text-uppercase text-muted" style="font-family:'georgia';letter-spacing:1px;">
  375.               「 Dislikes 」
  376.             </p>
  377.            
  378.             <ul class="fa-ul">
  379.               <li><span class="fa-li faded">✧</span> Housing responsibilities</li>
  380.              
  381.               <li><span class="fa-li faded">✧</span> Loud music and noise</li>
  382.              
  383.               <li><span class="fa-li faded">✧</span> High pricetags</li>
  384.              
  385.               <li><span class="fa-li faded">✧</span> Diary-writing</li>
  386.              
  387.               <!----- add more here ----->
  388.              
  389.             </ul>
  390.           </div>
  391.          
  392.           <!----- TRIVIA ----->
  393.           <div class="col-lg-12">
  394.             <p class="font-weight-bold text-uppercase text-muted" style="font-family:'georgia';letter-spacing:1px;">
  395.               「 Trivia 」
  396.             </p>
  397.            
  398.             <ul class="fa-ul">
  399.               <li><span class="fa-li faded">•</span> They never understood how cooking works in this world, so they simply don't cook or eat. Strangely, lacking food and other necessities won't impact their health in this world. Are they even human anymore...? </li>
  400.              
  401.               <li><span class="fa-li faded">•</span> They have a pet cat named Peepo, though for some reason, <i>that</i> creature requires food and basic needs.</li>
  402.              
  403.               <li><span class="fa-li faded">•</span> In his past life, Deva was fairly good at singing and dancing. They also were a data scientist.</li>
  404.              
  405.               <!----- add more here ----->
  406.              
  407.             </ul>
  408.           </div>
  409.         </div>    
  410.  
  411.         <!----- LIKES / DISLIKES / TRIVIA END ----->
  412.        
  413.        
  414.         <!----- DECOR DIVIDER . FIVE ----->
  415.         <div class="row no-gutters mb-2">
  416.           <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  417.           <div class="col-auto my-auto px-2">
  418.            
  419.             <img src="https://fontmeme.com/permalink/221017/247115f76e8c417383c72978d02844d5.png" alt="damask-dings-font" style="max-height:1rem;" border="0">
  420.            
  421.           </div>
  422.           <div class="col"><hr style="border-color:#ffffff;opacity:0.4"></div>
  423.         </div>
  424.        
  425.        
  426.         <!---------------
  427.          
  428.          RELATIONSHIPS
  429.          
  430.        ----------------->
  431.         <!---------- ONE ---------->
  432.         <div class="row no-gutters mb-3">
  433.           <!----- AVATAR LINK ----->
  434.           <div class="col-lg-3 col-4 pr-3">
  435.             <div class="card border rounded-0 mx-auto" style="background:transparent;">
  436.               <!----- avatar image ; fixed width 120px, recommend using square icon 200px * 200px ; replace IMG_URL with image address ----->
  437.               <a href="https://life-makeover.fandom.com/wiki/Larry" class="btn p-2 btn-outline-danger rounded-0 border-0" style="max-height:180px;">
  438.                
  439.                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCyRG6LUeuTcyUbcZYHKckzdYg_1OzRoFezQ&s">
  440.                
  441.               </a>
  442.             </div>
  443.           </div>
  444.          
  445.           <!----- INFO ----->
  446.           <div class="col-lg-9 col-8">
  447.             <!----- fontmeme divider ----->
  448.             <div class="row no-gutters">
  449.              
  450.              
  451.             </div>
  452.            
  453.             <!----- main info ----->
  454.             <p>
  455.               <span class="mx-1 text-muted font-weight-bold" style="font-size:1.2rem;font-family: 'georgia';">
  456.                
  457.                 Larry
  458.                
  459.               </span>
  460.               One of the first people he bonded with sincerely. They talk about work, shared aesthetic preferences, and life. Deva learned to feel prideful again in their work, thanks to his encouragement.
  461.             </p>
  462.           </div>
  463.         </div>
  464.         <!----- ONE END ----->
  465.        
  466.        
  467.         <!---------- TWO ---------->
  468.         <div class="row no-gutters mb-3">
  469.           <!----- AVATAR LINK ----->
  470.           <div class="col-lg-3 col-4 pr-3">
  471.             <div class="card border rounded-0 mx-auto" style="background:transparent;">
  472.               <!----- avatar image ; fixed width 120px, recommend using square icon 200px * 200px ; replace IMG_URL with image address ----->
  473.               <a href="https://life-makeover.fandom.com/wiki/Gerald" class="btn p-2 btn-outline-danger rounded-0 border-0" style="max-width:120px;">
  474.                
  475.                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKJCd7zudmNYnwzNg65FU59clTPs2Mzwv9Jw&s">
  476.                
  477.               </a>
  478.             </div>
  479.           </div>
  480.          
  481.           <!----- INFO ----->
  482.           <div class="col-lg-9 col-8">
  483.             <!----- fontmeme divider ----->
  484.             <div class="row no-gutters">
  485.              
  486.              
  487.             </div>
  488.            
  489.             <!----- main info ----->
  490.             <p>
  491.               <span class="mx-1 text-muted font-weight-bold" style="font-size:1.2rem;font-family: 'georgia';">
  492.                
  493.                 Gerald
  494.                
  495.               </span>
  496.               Their "boss" and main detective coordinator. They were surprised at how nice he can be, despite his initial coldness. A reliable ally.
  497.             </p>
  498.           </div>
  499.         </div>
  500.         <!----- TWO END ----->
  501.        
  502.        
  503.         <!---------- THREE ---------->
  504.         <div class="row no-gutters mb-3">
  505.           <!----- AVATAR LINK ----->
  506.           <div class="col-lg-3 col-4 pr-3">
  507.             <div class="card border rounded-0 mx-auto" style="background:transparent;">
  508.               <!----- avatar image ; fixed width 120px, recommend using square icon 200px * 200px ; replace IMG_URL with image address ----->
  509.               <a href="https://life-makeover.fandom.com/wiki/Roy" class="btn p-2 btn-outline-danger rounded-0 border-0" style="max-width:120px;">
  510.                
  511.                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9_hp8JRn6YnOOUTjpkbPZBqzZqhymPzwYZ5p5ixVRHYOxNgDjxPTdeRW9LJck3gx_QMk&usqp=CAU">
  512.                
  513.               </a>
  514.             </div>
  515.           </div>
  516.          
  517.           <!----- INFO ----->
  518.           <div class="col-lg-9 col-8">
  519.             <!----- fontmeme divider ----->
  520.             <div class="row no-gutters">
  521.              
  522.              
  523.             </div>
  524.            
  525.             <!----- main info ----->
  526.             <p>
  527.               <span class="mx-1 text-muted font-weight-bold" style="font-size:1.2rem;font-family: 'georgia';">
  528.                
  529.                 Roy
  530.                
  531.               </span>
  532.               Although their relationship is distant and work-only, Deva can't help but see himself in him. They make an effort to be warm and say hello whenever possible. He probably needs it.
  533.             </p>
  534.           </div>
  535.         </div>
  536.         <!----- THREE END ----->
  537.        
  538.        
  539.         <!----- add more here ----->
  540.        
  541.        
  542.         <!----- DECOR DIVIDER . SIX ----->
  543.         <div class="row no-gutters mb-2">
  544.           <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  545.           <div class="col-auto my-auto px-3">
  546.             <img src="https://fontmeme.com/permalink/221017/a598d266c25ae6ff30da91edc190b37b.png" alt="damask-dings-font" border="0" style="max-height:1rem;">
  547.           </div>
  548.           <div class="col"><hr style="border-color:rgba(250,250,250,0.5);"></div>
  549.         </div>
  550.       </div>
  551.       </div>
  552.       <!------ RELAIONSHIP END ------>
  553.     </div>  
  554.  
  555.     <!----- RIGHT END ------>
  556.   </div>
  557.  
  558.  
  559.  
  560. <!----- WRAPPER CARD END ----->
  561. <!----- CREDIT ! DO NOT REMOVE ----->
  562. <p class="text-center small text-uppercase mt-2">
  563.   <a href="https://toyhou.se/18523240" class="text-muted" style="text-decoration:none;">code by Leporidebug</a>
  564.   |
  565.   <a href="https://fontmeme.com/" class="text-muted" style="text-decoration:none;">decor via fontmeme</a>
  566. </p>
  567. <!----- CODE END ----->
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!