API tools faq
paste
Advertisement
vermilly

xishi wip

vermilly
Nov 29th, 2023
1,011
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.04 KB | None | 0 0
raw download clone embed print report
  1. <!-- ------------------------------
  2.  
  3.  
  4.        TACIT - COMPACTED VER.
  5.        (code by jiko, layout by straypunk)
  6.        
  7.        
  8.        RULES
  9.        → Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
  10.        thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
  11.        
  12.        → turn OFF WYSIWYG
  13.        → turn ON Code Editor
  14.        
  15.        
  16.        TIPPY TIPS
  17.        → insert your img links INSIDE or in quotation marks!!
  18.        → visit [ fontawesome.com ] for more icons!
  19.        
  20.        ACCENT COLOUR: #777777
  21.        → use control + f in the code editor to change the colours all at once!
  22.  
  23.  
  24. ------------------------------- -->
  25.  <div class="mx-auto mt-4" style="font-size:85%; line-height:16px; letter-spacing:0.5px; max-width:900px;">
  26.  <div class="row no-gutters">
  27.  <!-- ------------------------------
  28.  
  29.  
  30.            TABS
  31.            → if your character doesn't NEED a section, you can delete the <li></li> below!
  32.            no need to delete the actual section down there unless it helps for you to keep it tidy!
  33.  
  34.  
  35. ------------------------------- -->
  36.  <div class="col-lg-1 order-1 order-lg-0 p-1">
  37.  <ul class="nav row no-gutters h-100">
  38.    
  39.    
  40.     <!-- ------ FRONT PAGE ------------------------------ -->
  41.     <li class="col-lg-12 col m-1 nav-item text-center">
  42.         <a class="btn btn-default rounded-0 active d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
  43.        data-toggle="tab" href="#tacitone">
  44.            
  45.             <i class="fas fa-user fa-sm fa-fw m-auto"></i></span>
  46.            
  47.         </a>
  48.     </li>
  49.    
  50. <!-- ------ BACKGROUND ------------------------------ -->
  51.     <li class="col-lg-12 col m-1 nav-item text-center">
  52.         <a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
  53.        data-toggle="tab" href="#tacitfive">
  54.            
  55.             <i class="fas fa-books fa-sm fa-fw m-auto"></i></span>
  56.            
  57.         </a>
  58.     </li>
  59.    
  60.    
  61.     <!-- ------ PERSONALITY ------------------------------ -->
  62.     <li class="col-lg-12 col m-1 nav-item text-center">
  63.         <a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
  64.        data-toggle="tab" href="#tacittwo">
  65.            
  66.             <i class="fas fa-chart-bar fa-sm fa-fw m-auto"></i></span>
  67.            
  68.         </a>
  69.     </li>
  70.  
  71.    
  72.     <!-- ------ RELATIONSHIPS ------------------------------ -->
  73.     <li class="col-lg-12 col m-1 nav-item text-center">
  74.         <a class="btn btn-default rounded-0 d-flex p-3 h-100" style="border-style:double; border-width:4px; color:#777777"
  75.        data-toggle="tab" href="#tacitsix">
  76.            
  77.             <i class="fas fa-heart fa-sm fa-fw m-auto"></i></span>
  78.            
  79.         </a>
  80.     </li>
  81.    
  82.    
  83.  </ul>
  84.  </div>
  85.  <!-- ------------------------------
  86.  
  87.  
  88.            CHARACTER IMAGE
  89.            
  90.            → if the image IS a pagedoll,
  91.            feel free to change [cover] to [contain] or [#px]!
  92.            
  93.            → # being a number between 100px ~ 900px
  94.            
  95.            → minimum image height is recommanded to be 450px (and above)
  96.  
  97.  
  98. ------------------------------- -->
  99.  <div class="col-lg-4 p-1 order-0 order-lg-2 p-2">
  100.  <div class="card-transparent border-0 h-100">
  101.    
  102.     <div class="w-100 h-100" style="min-height:500px;
  103.    
  104.    background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/74173819_WVv8ckmphVEHOIr.png);
  105.    
  106.    background-position: center;
  107.    background-size: cover;
  108.    background-repeat: no-repeat;"></div>
  109.    
  110.  </div>
  111.  </div>
  112.  <!-- ------------------------------
  113.  
  114.            TAB CONTENT START
  115.  
  116. ------------------------------- -->
  117.  <div class="col-lg-7 order-2 order-lg-1 p-2">
  118.  <div class="tab-content table-responsive card rounded-0 bg-faded h-100"
  119. style="border-style:double solid double; border-width:4px 1px 4px">
  120.  <!-- ------------------------------
  121.  
  122.  
  123.            MAIN PROFILE
  124.  
  125.  
  126. ------------------------------- -->
  127.  <div class="tab-pane active show" id="tacitone">
  128.  <div class="pt-4 px-4" style="height:480px; overflow:auto;">
  129.    
  130.    
  131.     <!-- ------ HEADER ------------------------------ -->
  132.     <div class="header">
  133.        
  134.         <!-- ICON -->
  135.         <i class="fal fa-user fa-6x mb-2" style="z-index:0;
  136.        color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
  137.        
  138.         <!-- TITLE -->
  139.         <div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
  140.             <div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
  141.                
  142.                 <span style="color:#777777">X</span>iShi
  143.                
  144.             </div>
  145.            
  146.             <!-- SUBTITLE (DELETABLE)-->
  147.             <div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
  148.                
  149.                 a light footstep.
  150.                
  151.             </div>
  152.         </div>
  153.     </div>
  154.     <hr class="w-100 my-1 mt-3">
  155.     <hr class="w-100 my-1 mb-3">
  156.    
  157.    
  158.     <!-- ------ BASIC INFO ------------------------------ -->
  159.     <div class="basic row no-gutters">
  160.        
  161.         <div class="col-6 p-2">
  162.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Name</span><br>
  163.             <span>Xishi [稀世]</span>
  164.         </div>
  165.        
  166.        
  167.         <div class="col-6 p-2">
  168.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span><br>
  169.             <span>Male [He/him]</span>
  170.         </div>
  171.        
  172.        
  173.         <div class="col-6 p-2">
  174.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Age</span><br>
  175.             <span>Mid 20s</span>
  176.         </div>
  177.        
  178.        
  179.         <div class="col-6 p-2">
  180.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Species</span><br>
  181.             <span>Fire demon</span>
  182.         </div>
  183.        
  184.        
  185.         <div class="col-6 p-2">
  186.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Occupation</span><br>
  187.             <span>Exorcist</span>
  188.         </div>
  189.        
  190.        
  191.         <div class="col-6 p-2">
  192.             <span class="text-uppercase text-muted" style="letter-spacing:1px">Weapon</span><br>
  193.             <span>Shakujo</span>
  194.         </div>
  195.        
  196.        
  197.     <!-- add more/delete above THIS line! -->
  198.     <!-- for a nicer look, make sure it's even amounts of info! -->
  199.     </div>
  200.     <hr class="w-100 my-1 mt-3">
  201.     <hr class="w-100 my-1 mb-3">
  202.    
  203.    
  204.     <!-- ------ SUMMARY ------------------------------ -->
  205.     <div class="text-muted">
  206.        
  207.         <p>XiShi works at an exorcist organization. He's a fire demon disguised as a human, for unknown reasons........ aaaaaand he doesn't know his work partner (Hannah) is also a demon. Both of their motives are unknown.</p>
  208.        
  209.     </div>
  210.    
  211.  </div></div>
  212.  <!-- ------------------------------
  213.  
  214.  
  215.            PERSONALITY
  216.  
  217.  
  218. ------------------------------- -->
  219.  <div class="tab-pane" id="tacittwo">
  220.  <div class="pt-4 px-4" style="height:480px; overflow:auto;">
  221.    
  222.    
  223.     <!-- ------ HEADER ------------------------------ -->
  224.     <div class="header">
  225.        
  226.         <!-- ICON -->
  227.         <i class="fal fa-chart-bar fa-6x mb-2" style="z-index:0;
  228.        color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
  229.        
  230.         <!-- TITLE -->
  231.         <div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
  232.             <div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
  233.                
  234.                 <span style="color:#777777">P</span>ersonality
  235.                
  236.             </div>
  237.            
  238.             <!-- SUBTITLE (DELETABLE)-->
  239.             <div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
  240.                
  241.                 strong willed yet soft.
  242.                
  243.             </div>
  244.         </div>
  245.     </div>
  246.     <hr class="w-100 my-1 mt-3">
  247.     <hr class="w-100 my-1 mb-3">
  248.    
  249.    
  250.     <!-- ------ PERSONALITY ------------------------------ -->
  251.     <div class="personality">
  252.     <div class="text-muted">
  253.        
  254.         <p>Sed vehicdiva id risus at accumsan. Vivamus hendrerit lorem sollicitudin nunc vestibdivum, et dignissim neque malesuada. Phasellus at lacinia purus, quis molestie ante. Vestibdivum in ex vitae ndivla interdum dapibus.</p>
  255.        
  256.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi ante, condimentum facilisis tristique eget, bibendum quis sapien. Maecenas et est blandit, finibus eros non, molestie mi. Quisque ac risus id velit pdivvinar pellentesque sed non turpis.</p>
  257.        
  258.     </div>
  259.     </div>
  260.  
  261.        
  262.     <!-- add more/delete above THIS line! -->
  263.  
  264.     <hr class="w-100 my-1 mt-3">
  265.     <hr class="w-100 my-1 mb-3">
  266.    
  267.    
  268.     <!-- ------ TRIVIA ------------------------------ -->
  269.     <div class="trivia">
  270.     <ul class="text-muted">
  271.        
  272.         <li class="p-1">Xīshì [稀世] means rare in Chinese.</li>
  273.         <li class="p-1">He can't properly use an oven or stovetop. He isn't very good with frying or baking either.</li>
  274.         <li class="p-1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  275.        
  276.         <li class="p-1">Donec laoreet at elit nec hendrerit</li>
  277.        
  278.        
  279.     <!-- add more/delete above THIS line! -->
  280.     </ul>
  281.     </div>
  282.    
  283.    
  284.  </div>
  285.  </div>
  286.  
  287.  <!-- ------------------------------
  288.  
  289.  
  290.            BACKGROUND
  291.  
  292.  
  293. ------------------------------- -->
  294.  <div class="tab-pane" id="tacitfive">
  295.  <div class="pt-4 px-4" style="height:480px; overflow:auto;">
  296.    
  297.    
  298.     <!-- ------ HEADER ------------------------------ -->
  299.     <div class="header">
  300.        
  301.         <!-- ICON -->
  302.         <i class="fal fa-books fa-6x mb-2" style="z-index:0;
  303.        color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
  304.        
  305.         <!-- TITLE -->
  306.         <div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
  307.             <div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
  308.                
  309.                 <span style="color:#777777">B</span>ackground
  310.                
  311.             </div>
  312.            
  313.             <!-- SUBTITLE (DELETABLE)-->
  314.             <div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
  315.                
  316.                 Short subtitle.
  317.                
  318.             </div>
  319.         </div>
  320.     </div>
  321.     <hr class="w-100 my-1 mt-3">
  322.     <hr class="w-100 my-1 mb-3">
  323.    
  324.    
  325.     <!-- ------ BACKGROUND ------------------------------ -->
  326.     <div class="background">
  327.        
  328.         <div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
  329.             <i class="fas fa-bookmark fa-sm"></i> Header</div>
  330.         <div class="text-muted pb-3">
  331.            
  332.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem erat, iaculis vel velit at, mattis euismod lacus. Morbi suscipit ipsum accumsan leo dapibus, eu mattis neque facilisis. Etiam consequat eget eros a mollis. Donec bibendum nibh id augue pharetra consequat. Donec lobortis risus nunc.</p>
  333.            
  334.         </div>
  335.        
  336.        
  337.         <div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
  338.             <i class="fas fa-bookmark fa-sm"></i> Header</div>
  339.         <div class="text-muted pb-3">
  340.            
  341.             <p>Donec porttitor, nulla eget gravida consequat, ligula tellus condimentum augue, eu auctor odio lorem eu risus. Morbi eu turpis ac orci commodo cursus cursus sit amet velit. Aenean in nunc at nunc malesuada laoreet. Aliquam mattis ornare felis, a mollis neque gravida eget. Maecenas sagittis non ante ut placerat.</p>
  342.            
  343.             <p>Aenean eget nisi finibus sapien iaculis maximus. Curabitur sit amet porta quam. Integer orci nibh, eleifend et tellus ullamcorper, consectetur tempus ex. Vestibulum porttitor, ex in semper condimentum, neque lectus accumsan velit, sed feugiat eros enim eu leo. Duis finibus pellentesque orci, vitae vehicula lacus aliquet in.</p>
  344.            
  345.         </div>
  346.        
  347.        
  348.         <div class="text-uppercase py-1" style="font-size:110%; letter-spacing:1px">
  349.             <i class="fas fa-bookmark fa-sm"></i> Header</div>
  350.         <div class="text-muted pb-3">
  351.            
  352.             <p>Vulputate elit sit amet dui bibendum scelerisque. Mauris lacinia erat imperdiet eros gravida varius. Curabitur efficitur dignissim eros id ullamcorper. Curabitur placerat maximus dui vitae cursus. Pellentesque molestie leo sit amet risus luctus, vel sagittis arcu tincidunt. Cras aliquet condimentum elit in iaculis. Phasellus et felis sit amet eros luctus euismod eu non lacus.</p>
  353.            
  354.         </div>
  355.        
  356.     <!-- add more/delete above THIS line! -->
  357.     </div>
  358.    
  359.  </div>
  360.  </div>
  361.  <!-- ------------------------------
  362.  
  363.  
  364.            RELATIONSHIPS
  365.  
  366.  
  367. ------------------------------- -->
  368.  <div class="tab-pane" id="tacitsix">
  369.  <div class="pt-4 px-4" style="height:480px; overflow:auto;">
  370.    
  371.    
  372.     <!-- ------ HEADER ------------------------------ -->
  373.     <div class="header">
  374.        
  375.         <!-- ICON -->
  376.         <i class="fal fa-heart fa-6x mb-2" style="z-index:0;
  377.        color:#777777; opacity:0.2; transform:rotate(350deg); margin-top:-10px"></i>
  378.        
  379.         <!-- TITLE -->
  380.         <div class="text-md-right text-center" style="z-index:1; margin-top:-70px">
  381.             <div class="lead display-4 text-uppercase pb-1"style="letter-spacing:6px">
  382.                
  383.                 <span style="color:#777777">R</span>elationships
  384.                
  385.             </div>
  386.            
  387.             <!-- SUBTITLE (DELETABLE)-->
  388.             <div class="text-muted font-italic" style="z-index:1; position:relative; font-size:95%; letter-spacing:0.6px">
  389.                
  390.                 Short subtitle.
  391.                
  392.             </div>
  393.         </div>
  394.     </div>
  395.     <hr class="w-100 my-1 mt-3">
  396.     <hr class="w-100 my-1 mb-3">
  397.    
  398.    
  399.     <!-- ------ RELATIONSHIPS ------------------------------ -->
  400.     <!-- ---
  401.     when adding more, be aware of the [order-#] for the IMAGE and INFO!
  402.     it's the reason why CHARACTER TWO's image is to the right!
  403.    --- -->
  404.     <div class="relationships">
  405.        
  406.        
  407.         <!-- CHARCTER ONE -->
  408.         <div class="row no-gutters my-3">
  409.            
  410.             <!-- IMAGE -->
  411.             <div class="col-lg-4 p-1 order-1 text-center my-auto">
  412.                
  413.                 <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  414.                class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
  415.                
  416.             </div>
  417.            
  418.             <!-- INFO -->
  419.             <div class="col-lg-8 p-1 order-2">
  420.                
  421.                 <div class="row no-gutters">
  422.                     <div class="col-auto my-auto">
  423.                         <a href="CHARACTER LINK" class="text-uppercase" style="color:#777777; letter-spacing:1px">Name</a>
  424.                     </div>
  425.                     <div class="col px-3"><hr></div>
  426.                     <div class="col-auto my-auto">relationship</div>
  427.                 </div>
  428.                
  429.                 <div class="p-3 card text-muted" style="height:150px; overflow:auto">
  430.                     <p>Your character's thoughts here!</p>
  431.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium tempor lectus, sed vestibulum felis finibus non. Quisque maximus tristique lectus nec venenatis</p>
  432.                     <p>Duis sollicitudin vestibulum risus. Nunc semper purus orci, id facilisis libero semper et. Nunc commodo risus odio, ac porta ante tincidunt at. Morbi volutpat id metus a consectetur.</p>
  433.                 </div>
  434.                
  435.             </div>
  436.         </div>
  437.        
  438.        
  439.         <!-- CHARCTER TWO -->
  440.         <div class="row no-gutters my-3">
  441.            
  442.             <!-- IMAGE -->
  443.             <div class="col-lg-4 order-lg-2 order-1 p-1 text-center my-auto">
  444.                
  445.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13249601?1665982117"
  446.                class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
  447.                
  448.             </div>
  449.            
  450.             <!-- INFO -->
  451.             <div class="col-lg-8 p-1 order-1">
  452.                
  453.                 <div class="row no-gutters">
  454.                     <div class="col-auto my-auto">
  455.                         <a href="https://toyhou.se/13249601.milk" class="text-uppercase" style="color:#777777; letter-spacing:1px">Milk</a>
  456.                     </div>
  457.                     <div class="col px-3"><hr></div>
  458.                     <div class="col-auto my-auto">coworker / temp. partner</div>
  459.                 </div>
  460.                
  461.                 <div class="p-3 card text-muted" style="height:150px; overflow:auto">
  462.                     <p>"Ah, Milk? He's an excellent exorcist! But he's rather uptight in his methods and beliefs. Even now, he hasn't found a stable exorcist partner. I worry that his rigidness may lead to issues down the road... if it hasn't already."</p>
  463.  
  464.                 </div>
  465.                
  466.             </div>
  467.         </div>
  468.        
  469.        
  470.         <!-- CHARCTER THREE -->
  471.         <div class="row no-gutters my-3">
  472.            
  473.             <!-- IMAGE -->
  474.             <div class="col-lg-4 order-1 p-1 text-center my-auto">
  475.                
  476.                 <img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
  477.                class="p-2 fr-rounded img-thumbnail bg-faded" style="border-color:#777777; max-width:120px">
  478.                
  479.             </div>
  480.            
  481.             <!-- INFO -->
  482.             <div class="col-lg-8 p1 order-2">
  483.                
  484.                 <div class="row no-gutters">
  485.                     <div class="col-auto my-auto">
  486.                         <a href="CHARACTER LINK" class="text-uppercase" style="color:#777777; letter-spacing:1px">Name</a>
  487.                     </div>
  488.                     <div class="col px-3"><hr></div>
  489.                     <div class="col-auto my-auto">relationship</div>
  490.                 </div>
  491.                
  492.                 <div class="p-3 card text-muted" style="height:150px; overflow:auto">
  493.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium tempor lectus, sed vestibulum felis finibus non.</p>
  494.                     <p>Duis sollicitudin vestibulum risus. Nunc semper purus orci, id facilisis libero semper et.</p>
  495.                 </div>
  496.                
  497.             </div>
  498.         </div>
  499.        
  500.        
  501.     <!-- add more/delete above THIS line! -->
  502.     </div>
  503.    
  504.  </div>
  505.  </div>
  506.  
  507.  
  508.  <!-- TABS END -->
  509.  <!-- KEEP THE BELOW -->
  510.  </div>
  511.  </div>
  512.  </div>
  513.  <!-- ------------------------------
  514.  
  515.  
  516.            CREDITS
  517.            → please keep credits on the profile
  518.            if you decide to move it!
  519.  
  520.  
  521. ------------------------------- -->
  522.  <div class="small col-lg-12">
  523.     <div class="text-right" style="letter-spacing:0.3em;">
  524.        
  525.         <a href="https://toyhou.se/10141309.-f2u-tacit" class="text-muted tooltipster"
  526.        title="code by jiko" style="text-decoration: none">
  527.             <i class="far fa-code"></i>
  528.         </a> .
  529.        
  530.         <a href="LINK TO ARTIST" class="text-muted tooltipster"
  531.        title="art by ARTIST" style="text-decoration: none;">
  532.             <i class="far fa-image"></i>
  533.         </a> .
  534.        
  535.         <a href="https://toyhou.se/straypunk" class="text-muted tooltipster"
  536.        title="layout by straypunk" style="text-decoration: none;">
  537.             <i class="far fa-lightbulb"></i>
  538.         </a>
  539.        
  540.     </div>
  541.  </div>
  542.  </div>
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!