API tools faq
paste
Advertisement
Lairai

[TH] RoS Interactions Card

Lairai
Apr 5th, 2024 (edited)
733
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.86 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!---
  4.    ╭── ⋅ ⋅ ──────── ✩ ──────── ⋅ ⋅ ──╮
  5.    
  6.    For use within Realm of Serpents! Do not remove the credits.
  7.    This code is meant to be used by people who are at least decently familiar with:
  8.    - HTML
  9.    - Toyhouse HTML specifically
  10.    If you have never seen HTML before or you do not know how to edit it,
  11.    please do not DM me or reach out to me privately with a request to walk you through the process - I cannot instruct everyone 1:1.
  12.    Similarly, if you edit the code outside of the indicated areas and something breaks,
  13.    it is best to re-paste the base code and start from there.
  14.    
  15.    ╰── ⋅ ⋅ ──────── ✩ ──────── ⋅ ⋅ ──╯
  16.    ------------------->
  17.  
  18. <div class="col-sm col-md-7 mx-auto my-5" style="font-family:'Garamond';font-size:13px;letter-spacing:0.6px;color:#505066">
  19.  
  20.  
  21.     <!---
  22.    
  23.    NAME PLATE
  24.    The first letter of the name and surname has to be separate and has to be in THAT EXACT SPOT to preserve the formatting.
  25.    Do not add any spaces outside of what is already there
  26.    
  27.    --->  
  28.       <div class="row no-gutters mt-3">
  29.         <div class="hidden-md-down col-md-1"></div>
  30.         <div class="col-sm-12 col-md-10 px-3 py-2" style="background:#5D609C;font-variant:small-caps;color:#E3DCCF;font-size:2em;letter-spacing:2px;font-weight:bold;position:relative;border-width:0 3px 0px 3px;border-style:solid;border-color:#9CA5BE">
  31.          
  32.           <div style="width:97%;height:120%;position:absolute;border:1px solid #BEB3A0;top:-20%;left:0;right:0;margin:auto;border-bottom:0;"></div>
  33.          
  34.           <span style="color:#9CA5BE">
  35.            
  36.             N</span>ame
  37.          
  38.          
  39.           <span style="color:#9CA5BE">
  40.            
  41.            
  42.             S</span>urname
  43.          
  44.           <a href="
  45.          
  46.          
  47.          
  48.          
  50.          LoTS PROFILE LINK HERE
  51.          
  52.          
  55.          
  56.          
  57.          " target="_blank" class="text-secondary tooltipster" title="
  58.          
  59.          
  60.          
  62.          Profile up to date / Profile update pending
  63.          
  66.          
  67.          
  68.          " style="text-shadow:0px 0px 5px;position:absolute;right:3%;">
  69.          
  70.           <i class="fat fa-user-magnifying-glass float-right mt-1"></i></a>
  71.    
  72.          
  73.           </div>
  74.         <div class="hidden-md-down col-md-1"></div>
  75.       </div>
  76.    
  77.     <!----
  78.    
  79.    MAIN BODY
  80.    Replace the URL with a URL leading to an image of your character. It has to be an image with a non-transparent background ideally.
  81.  
  82.  
  83.    --->
  84.     <div class="row no-gutters p-2 justify-content-between" style="background:url(https://i.postimg.cc/1t3FDN4Q/dfu5q6f-f633ca85-a5d2-461f-b90a-4625839786e2.png);background-repeat:repeat;border-radius:0.15em;background-size:50%">
  85.      
  86.       <div class="col-sm-12 col-md-3 ml-md-n3" style="background:url(
  87.      
  88.      
  89.      
  90.      
  91.      https://images.pexels.com/photos/2169276/pexels-photo-2169276.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
  92.      
  93.      
  94.      
  95.      
  96.      );height:300px;background-size:cover;border-radius:0.15em;position:relative;border-width:3px 0 3px 0;border-style:solid;border-color:#5D609C">
  97.        
  98.         <div style="width:90%;height:90%;background:url(https://i.postimg.cc/jdgXJtwc/Frame-Ro-SColor.png);background-size:contain;background-repeat:no-repeat;background-position:center;margin:auto;margin-top:5%"></div>
  99.        
  100.       </div>
  101.    
  102.     <div class="col-sm-12 col-md-9 my-2 pb-4" style="background:#E3DCCF;position:relative;border:2px solid #DCD5C7">
  103.     <div style="width:104%;height:90%;position:absolute;border:1px solid #BEB3A0;left:-1.5%;top:5%;z-index:1"></div>  
  104.    
  105.     <div class="p-1" style="background:#E3DCCF;z-index:2;position:absolute;left:2%;font-variant:small-caps;font-size:1.2em;letter-spacing:2px;font-weight:bold;color:#8490b4">
  106.       <i class="fat fa-magnifying-glass" style="color:#BEB3A0"></i>
  107.      
  108.       Information Summary
  109.      
  110.       </div>
  111.      
  112.       <!---- AGE ETC --->
  113.       <div class="row no-gutters">
  114.       <div class="col-sm-12 col-md-6 p-2 mt-4">
  115.        
  116.         <i class="fad fa-bracket-square" style="color:#9CA5BE;"></i>
  117.        
  118.         <b style="color:#5D609C;">
  119.          
  120.          
  121.          
  122.         28
  123.          
  124.          
  125.          
  126.         </b>
  127.        
  128.        
  129.        
  130.         years old
  131.        
  132.  
  133.  
  134.         <i class="fad fa-bracket-square-right" style="color:#9CA5BE;"></i>
  135.         <span style="font-variant:small-caps;font-weight:bold;">
  136.        
  137.        
  138.        
  139.        
  140.         Male Human
  141.        
  142.        
  143.        
  144.        
  145.         </span>
  146.        
  147.       </div>
  148.       <div class="col-sm-12 col-md-6 p-2 mt-4" style="font-style:italic;font-size:1.1em;color:#82745c;">
  149.         <i class="fa-duotone fa-quotes mr-2" style="color:#9CA5BE"></i>
  150.        
  151.        
  152.        
  153.  
  154.         Very short quote here, ideally on one line.
  155.        
  156.        
  157.  
  158.        
  159.       </div>  
  160.       </div><!---- AGE ETC --->
  161.       <!----
  162.    
  163.    CHARACTER TAGS
  164.    Each <span> class is its own separate tag. Feel free to copy and paste the element to add more tags.
  165.    
  166.  
  167.      --->
  168.       <div class="flex-row flex-wrap" style="font-size:0.85em;">
  169.        
  170.         <span class="px-3 mx-1 my-1" style="background:#5D609C;color:#EEEAE2;font-variant:small-caps;letter-spacing:2px;font-weight:bold;border-radius:0.15em 0;border-width:0 2px;border-style:solid;border-color:#BEB3A0">
  171.          
  172.          
  173.        
  174.            
  175.  
  176.         Talons Agent  
  177.        
  178.        
  179.  
  180.          
  181.          
  182.         </span>
  183.         <span class="px-3 mx-1 my-1" style="background:#5D609C;color:#EEEAE2;font-variant:small-caps;letter-spacing:2px;font-weight:bold;border-radius:0.15em 0;border-width:0 2px;border-style:solid;border-color:#BEB3A0">
  184.          
  185.        
  186.            
  187.  
  188.          
  189.         Revived  
  190.          
  191.  
  192.  
  193.          
  194.          
  195.         </span>
  196.         <span class="px-3 mx-1 my-1" style="background:#5D609C;color:#EEEAE2;font-variant:small-caps;letter-spacing:2px;font-weight:bold;border-radius:0.15em 0;border-width:0 2px;border-style:solid;border-color:#BEB3A0">
  197.         <i class="fa-duotone fa-message-heart mr-1"></i>
  198.          
  199.        
  200.        
  201.  
  202.         Panromantic Asexual  
  203.          
  204.  
  205.  
  206.          
  207.          
  208.         </span>
  209.         <span class="px-3 mx-1 my-1" style="background:#5D609C;color:#EEEAE2;font-variant:small-caps;letter-spacing:2px;font-weight:bold;border-radius:0.15em 0;border-width:0 2px;border-style:solid;border-color:#BEB3A0">
  210.         <i class="fa-messages-question fad mr-1"></i>
  211.          
  212.  
  213.  
  214.          
  215.         He/him  
  216.          
  217.        
  218.        
  219.  
  220.          
  221.         </span>    
  222.        
  223.       </div>
  224.      
  225.       <p class="p-2 text-justify mb-1" style="color:#82745c">
  226.        
  227.        
  228.         <b style="color:#505066">
  229.          
  230.  
  231.  
  232.          
  233.         Provide a short description of your character here.
  234.        
  235.  
  236.  
  237.        
  238.         </b>
  239.        
  240.  
  241.  
  242.         Include things like their reputation, how others could hear of them, who they typically work with or encounter on a day-to-day basis, anything that could be relevant to interactions with other people's characters.
  243.        
  244.  
  245.  
  246.        
  247.       </p>
  248.      
  249.      
  250.       <p class="px-3" style="font-weight:bold;font-variant:small-caps;border-bottom:1px dashed #BEB3A0"><span style="color:#8490b4;font-size:1.2em;">L</span>ocations</p>
  251.    
  252.     <div class="row no-gutters">
  253.       <div class="col-sm-12 col-md-6">
  254.     <!-----
  255.    
  256.    LOCATION  BULLET POINT
  257.    
  258.    ---->
  259.       <div class="row no-gutters px-3 py-1" style="color:#82745c">
  260.         <div class="col text-center pr-2"><i class="fat fa-solid fa-map-pin" style="transform:rotate(-90deg);color:#8490b4"></i></div>
  261.         <div class="col-11">
  262.          
  263.  
  264.  
  265.         Urbis Lumen, Ironbrook  
  266.          
  267.  
  268.  
  269.         </div>
  270.        
  271.       </div>
  272.     <!-----
  273.    
  274.    LOCATION  BULLET POINT
  275.    
  276.    ---->
  277.     <!-----
  278.    
  279.    LOCATION  BULLET POINT
  280.    
  281.    ---->
  282.       <div class="row no-gutters px-3 py-1" style="color:#82745c">
  283.         <div class="col text-center pr-2"><i class="fat fa-solid fa-map-pin" style="transform:rotate(-90deg);color:#8490b4"></i></div>
  284.         <div class="col-11">
  285.          
  286.  
  287.  
  288.         Urbis Lumen, Ironbrook  
  289.          
  290.  
  291.  
  292.         </div>
  293.        
  294.       </div>
  295.     <!-----
  296.    
  297.    LOCATION  BULLET POINT
  298.    
  299.    ---->
  300.     </div>
  301.      
  302.     <!----- LOCATIONS LEFT END--->
  303.       <div class="col-sm-12 col-md-6">
  304.     <!-----
  305.    
  306.    LOCATION  BULLET POINT
  307.    
  308.    ---->
  309.       <div class="row no-gutters px-3 py-1" style="color:#82745c">
  310.         <div class="col text-center pr-2"><i class="fat fa-solid fa-map-pin" style="transform:rotate(-90deg);color:#8490b4"></i></div>
  311.         <div class="col-11">
  312.          
  313.  
  314.  
  315.         Urbis Lumen, Ironbrook  
  316.          
  317.        
  318.  
  319.         </div>
  320.        
  321.       </div>
  322.     <!-----
  323.    
  324.    LOCATION  BULLET POINT
  325.    
  326.    ---->
  327.     <!-----
  328.    
  329.    LOCATION  BULLET POINT
  330.    
  331.    ---->
  332.       <div class="row no-gutters px-3 py-1" style="color:#82745c">
  333.         <div class="col text-center pr-2"><i class="fat fa-solid fa-map-pin" style="transform:rotate(-90deg);color:#8490b4"></i></div>
  334.         <div class="col-11">
  335.          
  336.  
  337.  
  338.         Urbis Lumen, Ironbrook  
  339.          
  340.  
  341.  
  342.         </div>
  343.        
  344.       </div>
  345.     <!-----
  346.    
  347.    LOCATION  BULLET POINT
  348.    
  349.    ---->
  350.     </div><!----- LOCATIONS RIGHT END---></div><!---- LOCATIONS ROW END---></div></div>
  351.    
  352. <!------
  353.    
  354.     LOOKING FOR
  355.     In this section, each icon has a "fal" or "fas" preceding it.
  356.     Use "fal" for icons that are NEGATIVE (Not looking)
  357.     Use "fas" for icons that are POSITIVE (Looking)
  358.     The icon is always ordered after the description.
  359.  
  360. ------>
  361.     <div class="row no-gutters justify-content-between">
  362.    
  363.     <div class="col-md-1 col-sm-12 ml-1 text-center py-2" style="background:#5D609C;border-radius:0 0 0.15em 0.15em">
  364.      
  365.       <a href="https://toyhou.se/Lairai" class="text-secondary tooltipster" title="Code by Lairai" style="text-shadow:0px 0px 5px;"><i class="fal fa-code mr-1"></i></a>
  366.       <a href="https://toyhou.se/J-Haskell" class="text-secondary tooltipster" title="Visual style by J-Haskell" style="text-shadow:0px 0px 5px;"><i class="fal fa-books mr-1"></i></a>
  367.      
  368.     </div>
  369.    
  370.    
  371.     <div class="col-sm-12 col-md-4 py-2 mx-2" style=" background: rgb(190,179,160);background: linear-gradient(180deg, rgba(190,179,160,1) 0%, rgba(220,213,199,1) 100%); ;border-radius: 0 0 0.15em 0.15em;border-bottom:2px solid #8490b4;position:relative">
  372.     <div class="px-3" style="position:absolute;font-variant:small-caps;font-weight:bold;background:#8490b4;border-radius:0.15em;color:#E3DCCF;right:3%;bottom:-20px;">Looking For</div>
  373.    
  374.     <div class="row no-gutters px-3 py-1 justify-content-center fa-lg" style="border-width:1px 0px;border-style:dashed;border-color:#82745c;color:#5D609C;text-shadow:1px 2px 1px #8490b4;">
  375.      
  376.    
  377.      
  378.     <div class="col-1 tooltipster mr-3" title="
  379.    
  380.    
  381.    Not Looking for romantic relationships
  382.    
  383.    
  384.    ">
  385.     <i class="
  386.    
  387.    fal
  388.    
  389.    fa-heart"></i></div>  
  390.     <div class="col-1 tooltipster mr-3" title="
  391.    
  392.    
  393.    Looking for friendships
  394.    
  395.    
  396.    ">
  397.     <i class="
  398.    
  399.    fas
  400.    
  401.    fa-people-simple"></i></div>  
  402.     <div class="col-1 tooltipster mr-3" title="
  403.    
  404.    
  405.    Looking for familial connections
  406.    
  407.    
  408.    ">
  409.     <i class="
  410.    
  411.    fas
  412.    
  413.    fa-people-roof"></i></div>
  414.     <div class="col-1 tooltipster mr-3" title="
  415.    
  416.    
  417.    Looking for rivals
  418.    
  419.    
  420.    ">
  421.     <i class="
  422.    
  423.    fas
  424.    
  425.    fa-swords"></i></div>
  426.      
  427.     </div> </div> </div>   </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!