API tools faq
paste
OpalescentCodes

Hologram File Adv. Page

OpalescentCodes
Nov 4th, 2025 (edited)
768
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.64 KB | None | 0 0
raw download clone embed print report
  1. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  2. below is the Profile CSS. put it in the first box.
  3. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  4.  
  5.  
  6.  
  7. <div class="cyberbox">
  8.   <link rel="preconnect" href="https://fonts.googleapis.com">
  9.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.   <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">
  11.   <div class="pictureframe">
  12.     <div class="pictureinpicture"
  13.      style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75980070_oV5LhX7gJ5gAQsw.png?1704814914)">
  14.     </div>
  15.   </div>
  16.   <div class="infobox">
  17.     <div class="row">
  18.       <div class="column" style="width:20%;">
  19.         <div style="height:380px;"></div>
  20.         <ul class="nav flex-column">
  21.           <li class="cybutton"><a data-toggle="pill" href="#sum"
  22.              style="text-decoration:none;font-size:30px;">Summary</a></li><br>
  23.           <li class="cybutton"><a data-toggle="pill" href="#bio"
  24.              style="text-decoration:none;font-size:30px;">Biography</a></li><br>
  25.           <li class="cybutton"><a data-toggle="pill" href="#per"
  26.              style="text-decoration:none;font-size:25px;">Personality</a></li><br>
  27.           <li class="cybutton"><a data-toggle="pill" href="#rel" style="text-decoration:none;">Relationships</a></li>
  28.         </ul>
  29.       </div>
  30.       <div class="column" style="width:80%">
  31.         <h1>Name</h1>
  32.         <div class="titlehr"></div>
  33.         <div class="row" style="margin-left:5px;width:90%">
  34.           <div class="column" style="width:50%"><span class="call">Homeworld:</span>___</div>
  35.           <div class="column" style="width:50%"><span class="call">Born:</span>___</div>
  36.         </div>
  37.         <div class="secondhr"></div>
  38.         <div class="row" style="margin-left:5px;width:90%">
  39.           <div class="column" style="width:50%"><span class="call">Species:</span>___</div>
  40.           <div class="column" style="width:50%"><span class="call">Pronouns:</span>___</div>
  41.         </div>
  42.         <div class="secondhr"></div>
  43.         <span class="call" style="margin-left:10px;">Height:</span>___<div class="secondhr"></div>
  44.         <span class="call" style="margin-left:10px;">Weight:</span>___<div class="secondhr"></div>
  45.         <div class="row" style="margin-left:5px;width:90%;">
  46.           <div class="column" style="width:25%"><span class="call">Hair:</span>___</div>
  47.           <div class="column" style="width:25%"><span class="call">Eyes:</span>___</div>
  48.           <div class="column" style="width:25%"><span class="call">Affil.</span>___</div>
  49.           <div class="column" style="width:25%"><span class="call">Rank:</span>___</div>
  50.         </div>
  51.         <br>
  52.         <div class="tab-content">
  53.           <div id="sum" class="tab-pane fade show active">
  54.             General summary goes here. This box will scroll with enough text inside it.
  55.           </div>
  56.           <div id="bio" class="tab-pane fade">Biographical information can go here. This box will scroll with enough
  57.             text inside it.</div>
  58.           <div id="per" class="tab-pane fade">Personality details can go here.This box will scroll with enough text
  59.             inside it.</div>
  60.           <div id="rel" class="tab-pane fade">
  61.             <div class="row" style="width:100%;margin:auto;">
  62.               <div class="column" style="padding:5px;margin-left:5px;">
  63.                 <div class="pictureframe2">
  64.                   <div class="pictureinpicture2"
  65.                    style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75980093_GMvNH1IngMLqMXS.png)">
  66.                   </div>
  67.                 </div>
  68.               </div>
  69.               <div class="column" style="width:66%;padding:5px;"><span class="highlight"><a
  70.                    href="https://toyhou.se/36021249.chr-hologram-file-adv">Associate</a></span><br>Info about how your
  71.                 character and this character get along.</div>
  72.             </div>
  73.  
  74.             <div class="row" style="width:100%;margin:auto;">
  75.               <div class="column" style="padding:5px;margin-left:5px;">
  76.                 <div class="pictureframe2">
  77.                   <div class="pictureinpicture2"
  78.                    style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75983184_EcEMNcFX8WInvsc.png)">
  79.                   </div>
  80.                 </div>
  81.               </div>
  82.               <div class="column" style="width:66%;padding:5px;"><span class="highlight"><a
  83.                    href="https://toyhou.se/36021249.chr-hologram-file-adv">Associate</a></span><br>Info about how your
  84.                 character and this character get along.</div>
  85.             </div>
  86.  
  87.             <div class="row" style="width:100%;margin:auto;">
  88.               <div class="column" style="padding:5px;margin-left:5px;">
  89.                 <div class="pictureframe2">
  90.                   <div class="pictureinpicture2"
  91.                    style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75981153_bc9SLycIpCsPkzI.png)">
  92.                   </div>
  93.                 </div>
  94.               </div>
  95.               <div class="column" style="width:66%;padding:5px;"><span class="highlight"><a
  96.                    href="https://toyhou.se/36021249.chr-hologram-file-adv">Associate</a></span><br>Info about how your
  97.                 character and this character get along.</div>
  98.             </div>
  99.  
  100.             <div class="row" style="width:100%;margin:auto;">
  101.               <div class="column" style="padding:5px;margin-left:5px;">
  102.                 <div class="pictureframe2">
  103.                   <div class="pictureinpicture2"
  104.                    style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75982303_IiyFJRvUyGwg3KY.png?1704811805)">
  105.                   </div>
  106.                 </div>
  107.               </div>
  108.               <div class="column" style="width:66%;padding:5px;"><span class="highlight"><a
  109.                    href="https://toyhou.se/36021249.chr-hologram-file-adv">Associate</a></span><br>Info about how your
  110.                 character and this character get along.</div>
  111.             </div>
  112.  
  113.             <div class="row" style="width:100%;margin:auto;">
  114.               <div class="column" style="padding:5px;margin-left:5px;">
  115.                 <div class="pictureframe2">
  116.                   <div class="pictureinpicture2"
  117.                    style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/75984736_bDEVuYczt8OcRJm.png)">
  118.                   </div>
  119.                 </div>
  120.               </div>
  121.               <div class="column" style="width:66%;padding:5px;"><span class="highlight"><a
  122.                    href="https://toyhou.se/36021249.chr-hologram-file-adv">Associate</a></span><br>Info about how your
  123.                 character and this character get along. <b class="blue">You can remove these sections safely if you have
  124.                   too many, or add more.</b></div>
  125.             </div>
  126.           </div><!--end rel tab-->
  127.         </div>
  128.       </div><!--end column-->
  129.     </div>
  130.  
  131.  
  132.   </div>
  133. </div>
  134.  
  135.  
  136.  
  137. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  138. below is the CSS code. paste into the second box on the profile editor.
  139. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  140.  
  141.  
  142.  
  143. .cyberbox {
  144.   @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
  145.   font-size: 20px;
  146.   font-family: 'Ubuntu Mono', monospace;
  147.   width: 1550px;
  148.   height: 1000;
  149.   margin: auto;
  150.   background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/76104719_lYQFqQvYaSzrrOD.png?1705034712);
  151.   background-position: left;
  152.   background-size: contain;
  153.   background-repeat: no-repeat;
  154.   position: relative;
  155.   z-index: 1;
  156. }
  157.  
  158. .pictureframe {
  159.   background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/76104718_fcPdKfdi4kKOFvn.png);
  160.   background-size: cover;
  161.   background-repeat: no-repeat;
  162.   overflow: hidden;
  163.   border: 5px solid #4770e6;
  164.   border-radius: 20px;
  165.   width: 300px;
  166.   height: 450px;
  167.   position: absolute;
  168.   top: 100px;
  169.   left: 100px;
  170.   z-index: 3;
  171. }
  172.  
  173. .pictureinpicture {
  174.   width: 300px;
  175.   height: 450px;
  176.   background-size: cover;
  177.   background-repeat: no-repeat;
  178.   background-position: center;
  179. }
  180.  
  181. .pictureframe2 {
  182.   display: inline-block;
  183.   background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/76104718_fcPdKfdi4kKOFvn.png);
  184.   background-size: cover;
  185.   background-repeat: no-repeat;
  186.   overflow: hidden;
  187.   border: 3px solid #638dff;
  188.   border-radius: 20px;
  189.   width: 250px;
  190.   height: 300px;
  191. }
  192.  
  193. .pictureinpicture2 {
  194.   display: inline-block;
  195.   width: 250px;
  196.   height: 300px;
  197.   background-size: 120%;
  198.   background-repeat: no-repeat;
  199.   background-position: top;
  200. }
  201.  
  202. .infobox {
  203.   width: 1150px;
  204.   height: 750px;
  205.   position: absolute;
  206.   z-index: 2;
  207.   top: 180;
  208.   left: 180;
  209. }
  210.  
  211. .titlehr {
  212.   height: 5px;
  213.   width: 100%;
  214.   background-image: linear-gradient(to right, rgba(71, 112, 230, 1), rgba(71, 112, 230, 0)90%);
  215. }
  216.  
  217. .secondhr {
  218.   height: 3px;
  219.   width: 100%;
  220.   background-image: linear-gradient(to right, rgba(99, 141, 255, 0), rgba(99, 141, 255, 1), rgba(99, 141, 255, 0)90%);
  221. }
  222.  
  223. .cyberbox h1 {
  224.   font-size: 35px;
  225.   margin-left: 15px;
  226.   margin-top: 10px;
  227. }
  228.  
  229. .call {
  230.   margin: 5px;
  231.   font-size: 25px;
  232.   color: #638dff;
  233. }
  234.  
  235. .highlight {
  236.   font-size: 25px;
  237.   color: #638dff;
  238. }
  239.  
  240. .blue {
  241.   color: #638dff
  242. }
  243.  
  244. .cybutton {
  245.   margin-top: 30px;
  246.   padding-left: 70px;
  247.   font-size: 20px;
  248.   background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/76112997_Ahmp0OaE601cv1l.png);
  249.   background-repeat: no-repeat;
  250.   background-position: bottom center;
  251.   background-size: contain;
  252.   width: 250px;
  253.   height: 50px;
  254. }
  255.  
  256. .cyberbox a:hover {
  257.   color: white;
  258. }
  259.  
  260. .cyberbox a:onclick {
  261.   color: #638dff;
  262. }
  263.  
  264. .cyberbox .tab-content {
  265.   width: 90%;
  266.   height: 450px;
  267.   margin-left: 20px;
  268.   border: 5px solid #4770e6;
  269.   border-radius: 20px;
  270.   padding: 10px;
  271.   font-size: 20px;
  272.   overflow-y: auto;
  273.   background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/76104718_fcPdKfdi4kKOFvn.png);
  274.   background-size: cover;
  275.   background-repeat: no-repeat;
  276. }
  277.  
  278. /*--colors from brightest to darkest--
  279. teal
  280.   00ffa7  0,255,167
  281.   00e49b  0,228,155
  282.   006460  0,100,96
  283.   00413a  0,65,58
  284. honey
  285.   ffb32f  255,179,47
  286.   f58e00  245,142,0
  287.   6d3d00  109,61,0
  288.   562e00  86,46,0
  289. blue
  290.   638dff  99,141,255
  291.   4770e6  71,112,230
  292.   2d3168  45,49,104
  293.   1b1e44  27,30,68
  294. purple
  295.   b877ff  184,119,255
  296.   893de8  137,61,232
  297.   3c136e  60,19,110
  298.   270d47  39,13,71
  299. green
  300.   00c776  0,199,118
  301.   009d70  0,157,112
  302.   003625  0,54,37
  303.   00201b  0,32,27
  304. */
Tags: Toyhouse Code toyhouse
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!