API tools faq
paste
OpalescentCodes

LCARS Basic Page

OpalescentCodes
Nov 4th, 2025
901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.46 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. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9. <link href="https://fonts.googleapis.com/css?family=Sofia+Sans+Extra+Condensed:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
  10.  
  11. <div class="bigbox">
  12. <div id="begin" style="position:relative;background-color:black;width:100%;height:300px">
  13.  
  14.   <div style="width:100%; height:300px; margin-bottom:5px; position:absolute; z-index:1; left:17px" class="row HUDbackground">
  15.     <div class="column a1">
  16.       <div class="b1 lavender"><a style="color:black;text-decoration:underlined;position:absolute;bottom:0;left:10px" href="#begin">LCARS 110424</a></div>
  17.       <div class="b2 periwinkle">02-583729</div>
  18.     </div>
  19.     <div class="column a2 orange"></div>
  20.     <div class="column a3 lavender"></div>
  21.     <div class="column a4 lavender"></div>
  22.     <div class="column a5 orange"></div>
  23.   </div>
  24.   <div class="HUD"><p class="textorange lcarstitle" style="text-align:right; font-size:5em">STARFLEET PERSONNEL FILES</p>
  25.   <div style="float:right; width:100%;" class="row">
  26.     <div class="column c1">
  27.       <div class="ten textorange">6<br>81282930<br>81922034<p class="textpaperwhite">9178383<br>001283934</p>00405</div>
  28.       <div class="ten textorange"><br>28283<br>4475905<p class="textpaperwhite">000664<br>4</p>4677865</div>
  29.       <div class="ten textorange">12332535<br>333455<br>246<p class="textpaperwhite">87943<br>00202</p>64784</div>
  30.       <div class="ten textorange">2342356<br>46789<br>323657<p class="textpaperwhite">26767324<br>008</p></div>
  31.       <div class="ten textorange">8737894<br>678<br>928727<p class="textpaperwhite">72940<br><br></p>333456</div>
  32.       <div class="ten textorange">23466<br>8962374<br>246234<p class="textpaperwhite">09532<br>63820</p>901783034</div>
  33.       <div class="ten textorange">892162<br>001262<br>9018373<p class="textpaperwhite">36<br>618215</p>49999</div>
  34.       <div class="ten textorange">6600066<br>3133435<br>66142893<br><p class="textpaperwhite">272393<br>93737371</p>6646585</div>
  35.       <div class="ten textorange">90120<br>91234<br>23784<p class="textpaperwhite">029384<br>3141592</p>24</div>
  36.       <div class="ten textorange">9<br>420249<br>006934<p class="textpaperwhite">87341<br>734544</p>23534253</div>
  37.     </div>
  38.     <div class="column c2">
  39.       <div class="horsepill periwinkle">2923-757</div>
  40.       <div class="horsepill peach">9629-444</div>
  41.       <div class="horsepill orange">1524-890</div>
  42.       <div class="horsepill periwinkle">6383-712</div>
  43.     </div>
  44.   </div></div>
  45.  
  46. </div>
  47. <div class="bottombox" style="position:relative;width:100%;height:625px;">
  48.  
  49.   <div style="margin-top:10px;" class="row">
  50.     <div class="column d1">
  51.       <div style="width:100%; float:right;" class="row">
  52.         <div class="column e1">
  53.           <div class="f1 maroon"><p style="position:absolute;bottom:0;left:60px">93-869265</p></div>
  54.           <div class="f2 periwinkle"><p style="position:absolute;bottom:0;left:60px;">03-735280</p></div>
  55.           <div class="f3 peach"><p style="position:absolute;bottom:0;left:60px;">44-720164</p></div>
  56.           <div class="f4 orange"><p style="position:absolute;bottom:0;left:60px;">94-638210</p></div>
  57.         </div>
  58.         <div class="column e2 cream"></div>
  59.       </div>
  60.      
  61.     <div class="leftinfo">
  62.       <div class="picframe">
  63.         <div class="biopic" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/89595021_zgVMgfex11Ek4Gu.png); background-size:150%;"> </div>
  64.       </div>
  65.       <p class="infotext textorange"><span class="textperiwinkle">SF ID NO: </span>___<br>
  66.       <span class="textperiwinkle">RANK: </span>___<br>
  67.       <span class="textperiwinkle">HEIGHT: </span>___<br>
  68.       <span class="textperiwinkle">WEIGHT: </span>___<br>
  69.       <span class="textperiwinkle">BORN: </span>___  <span style="margin-left:50px" class="textperiwinkle">ORIGIN: </span>___<br>
  70.       <span class="textperiwinkle">PLACE OF BIRTH: </span>___<br>
  71.       <span class="textperiwinkle">ASSIGNMENT: </span>___<br>
  72.       <span class="textperiwinkle">LAST SHIP: </span>___<br>
  73.       <span class="textperiwinkle">ACADEMY CLASS: </span>___
  74.       </p>
  75.     </div>
  76.  
  77.     </div>
  78.     <div class="column d2">
  79.       <div style="width:100%; margin-left:0;" class="row">
  80.         <div class="column g1">
  81.           <div class="aa1 periwinkle"></div>
  82.           <div class="aa2 maroon"><p style="position:absolute;bottom:0;left:15px;">4266</p></div>
  83.           <div class="aa3 orange"><p style="position:absolute;bottom:0;left:15px;">7363</p></div>
  84.           <div class="aa4 maroon"><p style="position:absolute;bottom:0;left:15px;">8365</p></div>
  85.           <div class="aa5 lavender"><p style="position:absolute;bottom:0;left:15px;">1029</p></div>
  86.         </div>
  87.         <div class="column g2 maroon"></div>
  88.         <div class="column g3 orange"></div>
  89.         <div class="rightinfo textorange"><p class="lcarsname" style="text-align:right;font-size:2em;line-height:1em;margin-bottom:0;margin-right:20px">name of character</p>
  90.         <p class="textperiwinkle" style="font-size:1.5em;line-height:1em;margin-bottom:0">personal biography:</p>
  91.         <p style="letter-spacing:normal">info about character goes here, automatically all-caps, box scrolls.</p>
  92.         <div class="sig">code by @O-P-A-L</div></div>
  93.       </div>
  94.     </div>
  95.   </div>
  96.  
  97. </div></div>
  98.  
  99.  
  100.  
  101.  
  102.  
  103. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  104. below is the CSS code. paste into the second box on the profile editor.
  105. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  106.  
  107.  
  108.  
  109. @media only screen and (max-width: 1860px) {
  110. .horsepill {width:45% !important;}
  111. }
  112. @media only screen and (max-width: 1700px) {
  113. .f1 p, .f2 p, .f3 p, .f4 p {left:40px !important;}
  114. .b1 {text-indent: 0.3em !important;} .b2 {text-indent:1.5em !important;}
  115. .leftinfo {right:-4px !important;}
  116. .HUD {right:-2px !important;}
  117. .a1 {width:42% !important;} .e1 {width:88.5% !important;} .g1 {width:34% !important;}
  118. .rightinfo p {padding-right:30px !important;}
  119. }
  120. @media only screen and (max-width: 1300px) {
  121. .f1 p, .f2 p, .f3 p, .f4 p {left:10px !important;}
  122. .b1 {text-indent: 0.2em !important;} .b2 {text-indent:1.4em !important;}
  123. .aa1 p, .aa2 p, .aa3 p, .aa4 p, .aa5 p {left:5px !important;}
  124. .b1, .b2, .c1, .horsepill, .f1, .f2, .f3, .f4, .aa1, .aa2, .aa3, .aa4, .aa5 {font-size:25px !important;}
  125. .f1, .f2, .f3, .f4 {left:15px;}
  126. .ten {font-size:20px !important;}
  127. }
  128. @media only screen and (max-width: 1150px) {
  129. .horsepill {width:43% !important; font-size:23px !important;}
  130. }
  131. @media only screen and (max-width: 1050px) {
  132. .ten {width:7% !important; font-size:13px !important;}
  133. .horsepill {height:50px !important;padding:10px !important}
  134. .lcarstitle {font-size:4em !important;}
  135. .lcarsname {font-size:1.5em !important;}
  136. .HUD {height:220px !important;}
  137. .b1.lavender {height:80px !important;}
  138. .b2.periwinkle {height:150px !important;}
  139. .HUDbackground {height:auto !important;}
  140. .a1 {width:41% !important;}
  141. #begin {height:235px !important;}
  142. .e1 {width:81.3% !important;margin-right:21px !important;}
  143. .e2 {width:7.3% !important;}
  144. .rightinfo.textorange p.textperiwinkle {font-size:1.2em !important;}
  145. }
  146. @media only screen and (max-width:1000px) {
  147. .d1 {width:100% !important;height:650px !important;}
  148. .d2 {width:97% !important; right:-20px !important;}
  149. .bottombox {height:1300px !important;}
  150. .e1 {width:87.3% !important;}
  151. }
  152. @media only screen and (max-width:666px) {
  153. .bigbox {min-width:390px !important; margin-right:0 !important;text-decoration:none;}
  154. .lcarstitle {font-size:2.8em !important;}
  155. .rightinfo p {padding-right:45px !important;}
  156. .c1 {width:100% !important; height:100px !important; margin-left:-25px !important;}
  157. .ten {margin:5px !important;}
  158. .c2 {width:100% !important;}
  159. .HUD {height:290px !important;}
  160. #begin {height:300px !important; margin-bottom:15px !important}
  161. .b2.periwinkle {height:223px !important; border-radius:0 0 0 110px !important;text-indent:-9999999px !important;}
  162. .b1 {text-indent:-99999999px !important;}
  163. .a1 {width:37% !important;}
  164. .f1 p, .f2 p, .f3 p, .f4 p, {font-size:18px !important;}
  165. .aa1 p, .aa2 p, .aa3 p, .aa4 p, .aa5 p  {font-size:23px !important;}
  166. .e1 {width:83.3% !important;}
  167. }
  168. @import url('https://fonts.googleapis.com/css?family=Sofia+Sans+Extra+Condensed:ital,wght@0,700;1,700&display=swap');
  169. .peach {background-color:LightSalmon;}.textpeach {color:LightSalmon;}
  170. .orange {background-color:DarkOrange;}.textorange {color:DarkOrange;}
  171. .maroon{background-color:IndianRed;}.textmaroon{color:IndianRed;}
  172. .lavender {background-color:Plum;}.textlavender{color:Plum;}
  173. .periwinkle {background-color:CornflowerBlue;}.textperiwinkle{color:CornflowerBlue;}
  174. .paperwhite {background-color:LightYellow;}.textpaperwhite{color:LightYellow;}
  175. .cream {background-color:PeachPuff;}.textcream{color:PeachPuff;}
  176. .profile-content-title {
  177.     display: none;
  178. }
  179. #content {
  180.     padding: 0;
  181. }
  182. .bigbox {  
  183.   font-family: 'Sofia Sans Extra Condensed', sans-serif;
  184.     font-weight: 700 !important;
  185.     font-style: normal;
  186.     text-transform: uppercase;
  187.     letter-spacing: -.05em;
  188. }  
  189. .row.profile-header {
  190.     display: none;
  191. }
  192. body {
  193.   background-color:black;
  194. }
  195. .a1 {
  196.     width: 43%;
  197.     margin-right: 7px;
  198.     font-size:2em;
  199. }
  200. .a2 {
  201.     width: 3%;
  202.     margin-right: 7px;
  203. }
  204. .a3 {
  205.     width: 19%;
  206.     margin-right: 7px;
  207. }
  208. .a4 {
  209.     width: 30%;
  210. }
  211. .a5 {
  212.     width: 3%;
  213.     margin-left: 7px;
  214. }
  215. .b1.lavender {
  216.     height: 100px;
  217.     margin-bottom: 7px;
  218.     color: #000;
  219.     text-indent: 0.8em;
  220.     position:relative;
  221. }
  222. .b2.periwinkle {
  223.     height: 193px;
  224.     border-radius: 0 0 0 150px;
  225.     color: #000;
  226.     text-indent: 1.8em;
  227. }
  228. .HUD {
  229.     background-color: black;
  230.     height: 280px;
  231.     width: 90%;
  232.     position: absolute;
  233.     z-index: 2;
  234.     right: 0;
  235.     border-radius: 0 0 0 70px;
  236. }
  237. .c1 {
  238.     width: 64%;
  239.     height: 160px;
  240. }
  241. .c2 {
  242.     width: 35%;
  243.     height: 160px;
  244. }
  245. .ten {
  246.     width: 8%;
  247.     height: 150px;
  248.     float: right;
  249.     margin: 5px;
  250.     line-height: 1.2em;
  251.     font-size: 1.5em;
  252.     text-align: right;
  253. }
  254. .horsepill {
  255.     color: #000;
  256.     width: 230px;
  257.     height: 75px;
  258.     border-radius: 100px;
  259.     margin: 7px 7px 0 7px;
  260.     display: inline-block;
  261.     vertical-align: top;
  262.     text-align: right;
  263.     padding: 30px;
  264.     line-height: 1.5;
  265.     font-size:2em;
  266. }
  267. .d1 {
  268.     width: 46.6%;
  269.     height: 500px;
  270.     margin-right: 7px;
  271.     position:relative;
  272.     z-index:1;
  273. }
  274. .d2 {
  275.   height: 500px;
  276.     width: 52%;
  277.     position:relative;
  278.     z-index:1;
  279. }
  280. .e1 {
  281.     height: 600px;
  282.     width: 91%;
  283.     margin-right: 7px;
  284.     z-index: 1;
  285.     color:black;
  286.     font-size:2em;
  287. }
  288. .e2 {
  289.     width: 6.3%;
  290.     height: 600px;
  291.     z-index: 1;
  292. }
  293. .f1 {
  294.     width: 100%;
  295.     height: 125px;
  296.     border-radius: 100px 0 0 0;
  297.     margin-bottom: 7px;
  298.     position:relative;
  299. }
  300. .f2 {
  301.     width: 100%;
  302.     height: 200px;
  303.     margin-bottom: 7px;
  304.     color:black;
  305.     position:relative;
  306. }
  307. .f3 {
  308.     width: 100%;
  309.     height: 50px;
  310.     margin-bottom: 7px;
  311.     position:relative;
  312. }
  313. .f4 {
  314.     width: 100%;
  315.     height: 208px;
  316.     position:relative;
  317. }
  318. .g1 {
  319.     width: 36%;
  320.     height: 600px;
  321.     margin-right: 7px;
  322.     color:black;
  323.     font-size:2em;
  324. }
  325. .g2 {
  326.     width: 56.5%;
  327.     height: 600px;
  328.     margin-right: 7px;
  329. }
  330. .g3 {
  331.     width: 5.6%;
  332.     height: 600px;
  333. }
  334. .leftinfo {
  335.     background-color: black;
  336.     width: 77%;
  337.     height: 585px;
  338.     position: absolute;
  339.     z-index: 2;
  340.     right: -1px;
  341.     top: 20px;
  342.     border-radius: 60px 0 0 0;
  343. }
  344. .aa1 {
  345.     width: 100%;
  346.     height: 80px;
  347.     border-radius: 75px 0 0 0;
  348.     margin-bottom: 7px;
  349.     position:relative;
  350. }
  351. .aa2 {
  352.     width: 100%;
  353.     height: 125px;
  354.     margin-bottom: 7px;
  355.     position:relative;
  356. }
  357. .aa3 {
  358.     width: 100%;
  359.     height: 125px;
  360.     margin-bottom: 7px;
  361.     position:relative;
  362. }
  363. .aa4 {
  364.     width: 100%;
  365.     height: 100px;
  366.     margin-bottom: 7px;
  367.     position:relative;
  368. }
  369. .aa5 {
  370.     width: 100%;
  371.     height: 150px;
  372.     position:relative;
  373. }
  374. .rightinfo {
  375.     background-color: #000;
  376.     position: absolute;
  377.     z-index: 2;
  378.     height: 600px;
  379.     width: 94%;
  380.     right: -15px;
  381.     top: 20px;
  382.     border-radius: 50px 0 0 0;
  383.     padding: 0 0 10px 20px;
  384.     font-size: 2em;
  385.     overflow-y: scroll;
  386. }
  387. .picframe {
  388.     background-image: linear-gradient(to bottom,#00008B,#4169E1);
  389.     height: 300px;
  390.     width: 250px;
  391.     margin: 30px 0 0 30px;
  392.     padding-top: 10px;
  393. }
  394. .biopic {
  395.     height: 290px;
  396.     width: 250px;
  397.     background-position: top;
  398.     background-repeat: no-repeat;
  399. }
  400. .infotext {
  401.     font-size: 2em;
  402.     line-height: 1em;
  403.     margin-left: 30px;
  404. }
  405. .sig {
  406.     font-size: 20px;
  407.     position: absolute;
  408.     bottom: 0;
  409.     right: 50px;
  410.     margin:5px;
  411. }
Tags: toyhouse profile code
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!