API tools faq
paste
Advertisement
soxxx

16.5 - light

soxxx
Jun 3rd, 2025
16
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.07 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. [font=Handjet]titles[/font]
  4. [font=Saira SemiCondensed]body text[/font]
  5.  
  6. [/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  7.  
  8.  
  9. /*---- COLORS: i recommend keeping these in relatively the same range of brightness as the default values! -----*/
  10. /*------------ note: changing these hex codes will change them everywhere they're used; -----*/
  11. /*------------ you can change which accent colors are used where in the "values to edit" section! ----*/
  12.  
  13.  
  14. /*monochrome colors*/
  15. --accent00: #fafafa; /*off white*/
  16. --accent01: #000; /*black*/
  17. --accent02: #588a4d; /*green*/
  18. --accent03: #616e56; /*muted green*/
  19. --accent04: #676b65; /*gray green*/
  20. --accent05: #7d340f; /*orange*/
  21. --accent06: #b57d5c; /*light orange*/
  22.  
  23.  
  24.  
  25. /*---- PICS ----*/
  26. --mainpic: url('https://i.imgur.com/gQQiqyn.png'); /*main pic*/
  27. --mainpicsize: cover; /*pic size*/
  28. --mainpicposition: 50% 50%; /*pic positioning*/
  29.  
  30. --outfit: url('https://i.imgur.com/Xt1PCJA.png'); /*outfit pic*/
  31. --outfitsize: cover; /*pic size*/
  32. --outfitposition: 50% 50%; /*pic positioning*/
  33.  
  34.  
  35. /*---- VALUES TO EDIT ----*/
  36. /*text*/
  37. --bodyfont: var(--font2); /*main body text font family*/
  38. --body2size: 10px; /*main body text size*/
  39. --body2lh: 12px; /*main body text line height*/
  40. --body1size: 11px; /*details text size*/
  41. --body1lh: 13px; /*details text line height*/
  42.  
  43. /*colors*/
  44. --bkgd: var(--accent00); /*page background color*/
  45. --textcolor: var(--accent01); /*body text color*/
  46. --dccolor: var(--accent06); /*drop cap color*/
  47.  
  48. --d1: var(--accent02); /*dialogue 1 color*/
  49. --d2: var(--accent03); /*dialogue 2 color*/
  50. --d3: var(--accent05); /*dialogue 3 color*/
  51. --d4: var(--accent04); /*dialogue 4 color*/
  52.  
  53. --orgcolor: var(--accent03); /*org name text color*/
  54. --headercolor: var(--accent02); /*page title text color ("latest movements")*/
  55. --nametagcolor: var(--accent06); /*name tag text color ("suspect")*/
  56. --namecolor: var(--accent05); /*name text color*/
  57. --outfitcolor: var(--accent02); /*outfit header text color*/
  58. --tagcolor: var(--accent02); /*details tag color*/
  59.  
  60. --errorcolor: var(--accent05); /*error box text color*/
  61. --textbubblecolor: var(--accent05); /*hacked bubble text color */
  62.  
  63. --playcolor: var(--accent02); /*music play symbol color*/
  64. --songcolor: var(--accent05); /*song title color*/
  65. --artistcolor: var(--accent06); /*song artist color*/
  66. --npcolor: var(--accent04); /* now listening text color*/
  67.  
  68. --matchcolor: var(--accent05); /*match arrows/tile color*/
  69. --tilecolor0: var(--accent01); /*tile style 1 color*/
  70. --tilecolor1: var(--accent02); /*tile style 2 color*/
  71. --tilecolor2: var(--accent03); /*tile style 3 color*/
  72. --tilecolor3: var(--accent04); /*tile style 4 color*/
  73. --tilecolor4: var(--matchcolor); /*tile style 5 match color*/
  74.  
  75. /*borders*/
  76. --border0: 1px solid var(--accent03); /*main border color + style*/
  77. --border1: 1px solid var(--accent06); /*error/hacked border color + style*/
  78. --border2: 1px solid var(--accent04); /*outer border color + style*/
  79.  
  80. /*---- effects/textures----*/
  81. --musicpic: url('https://i.imgur.com/m53OSQ0.gif'); /*music player button gif*/
  82. --errorfilter: saturate(50%) contrast(1.1); /*outfit pic filter*/
  83.  
  84.  
  85. /*---- FONTS ----*/
  86. --font1: 'Handjet', sans-serif; /*titles*/
  87. --font2: 'Saira SemiCondensed', sans-serif; /*body*/
  88.  
  89.  
  90.  
  91. /*---- VALUES YOU PROBABLY DON'T NEED TO EDIT ----*/
  92. /*------------- these are mostly to make my life easier! ----*/
  93.  
  94. /*bold presets*/
  95. /*---- i use these instead of bold tags to preserve the font style on mobile ----*/
  96. --d1bold: 0.5px var(--d1);
  97. --d2bold: 0.5px var(--d2);
  98. --d3bold: 0.5px var(--d3);
  99. --d4bold: 0.5px var(--d4);
  100. --dcbold: 2px var(--dccolor);
  101. --tagbold: 0.6px var(--tagcolor);
  102. --orgbold: 0.6px var(--orgcolor);
  103. --headerbold: 0.6px var(--headercolor);
  104. --nametagbold: 0.6px var(--nametagcolor);
  105. --namebold: 0.6px var(--namecolor);
  106. --outfitbold: 0.6px var(--outfitcolor);
  107. --songbold: 0.6px var(--songcolor);
  108. --artistbold: 0.5px var(--artistcolor);
  109. --npbold: 0.5px var(--npcolor);
  110. --errorbold: 0.5px var(--errorcolor);
  111. --textbubblebold: 0.5px var(--textbubblecolor);
  112.  
  113. /*margins + positions + sizes*/
  114. --leftmargin: 20px;
  115. --rightmargin: 20px;
  116. --topmargin: 20px;
  117. --bottommargin: 20px;
  118. --xmargin: calc(var(--leftmargin) + var(--rightmargin));
  119. --ymargin: calc(var(--topmargin) + var(--bottommargin));
  120. --contentwidth: calc(100% - var(--xmargin));
  121. --contentheight: calc(100% - var(--ymargin));
  122. --tagspacen: 5.8px 0px 5.8px 10px;
  123. --tagspacec: 5.8px 10px 5.8px 0px;
  124. --tagsize: 13px;
  125. --tagfont: var(--font1);
  126. --categoryw: 30%;
  127. --inputw: 70%;
  128.  
  129. /*visage match color tiles*/
  130. --tilex: 13px;
  131. --tiley: 13px;
  132. --tilebr: 1px;
  133. --tileborder: 1px solid var(--bkgd);
  134.  
  135. /*---- finger/handprints ----*/
  136. --handprint1: url('https://i.imgur.com/m5PUKZE.png');
  137. --hp1color: linear-gradient(to top, var(--accent06), var(--accent04));
  138. --hp1size: cover; /*pic size*/
  139. --hp1position: 50% 50%; /*pic positioning*/
  140.  
  141. --glitch: url('https://i.imgur.com/2zoG3oa.jpeg');
  142. --gsize: cover;
  143. --gposition: 50% 50%;
  144. --gtexture: url('https://i.imgur.com/sU7Nso6.gif');
  145. --gtexturecolor: linear-gradient(to bottom, var(--accent03), var(--accent06));
  146.  
  147.  
  148.  
  149. ][div=margin:auto; position:relative; width:fit-content; height:fit-content; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin-top:20px; margin-bottom:20px; outline:var(--border2); outline-offset:1.5px; border-radius:0px; box-sizing:border-box; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--textcolor); overflow:hidden;][nobr]
  150.  
  151. [comment]---- LEFT START ----[/comment]
  152. [div=position:relative; margin:2.5px; width:350px; height:480px; overflow:hidden; background:var(--bkgd);]
  153.  
  154. [comment]---- bkgd texture ----[/comment]
  155. [div=transparent; height:100%; width:100%; padding:0; background: radial-gradient(2px 2px, var(--accent03), transparent); background-size: 3px 3px; opacity:0.1; position:absolute; top:0; left:0;][/div]
  156.  
  157. [comment]---- content start ----[/comment]
  158. [div=position:absolute; left:var(--leftmargin); top:var(--topmargin); width:var(--contentwidth); height:var(--contentheight); background:var(--bkgd); box-siding:border-box; border:var(--border0);]
  159.  
  160.  
  161. [comment]---- HEADER START ----[/comment]
  162. [div=position:absolute; left:0px; top:0px; width:100%; height:30px; box-siding:border-box; border-bottom:var(--border0); overflow:hidden;]
  163.  
  164. [comment]-- spinner --[/comment][div=position:absolute; top:0px; left:0px; width:28px; height:30px; border-right:var(--border0); font-size:15px; line-height:31px; text-align:center; color:var(--accent04);][fa]fas fa-circle-notch fa-spin[/fa][/div]
  165.  
  166. [comment]-- header text --[/comment][div=position:absolute; left:35px; top:5px; font-family:var(--font1); font-size:10px; line-height:10px; color:var(--orgcolor); text-align:left; text-transform:uppercase; -webkit-text-stroke:var(--orgbold); letter-spacing:0.6px;][comment]
  167.  
  168.  
  169. ---- ORG NAME HERE ----
  170. [/comment]NCPD:
  171.  
  172. [br][/br][div=display:inline; color:var(--headercolor); -webkit-text-stroke:var(--headerbold);][comment]
  173.  
  174.  
  175. ---- TAB NAME HERE ----
  176. [/comment]latest movements
  177.  
  178. [/div][/div]
  179.  
  180. [comment]-- name --[/comment][div=position:absolute; right:5px; top:5px; font-family:var(--font1); font-size:10px; line-height:10px; color:var(--nametagcolor); text-align:right; text-transform:uppercase; -webkit-text-stroke:var(--nametagbold); letter-spacing:0.6px;][comment]
  181.  
  182.  
  183. ---- SUSPECT TAG HERE ----
  184. [/comment]suspect
  185.  
  186. [br][/br][div=display:inline; color:var(--bamecolor); -webkit-text-stroke:var(--namebold);][comment]
  187.  
  188.  
  189. ---- CHARACTER NAME HERE ----
  190. [/comment]nakamoto yuta
  191.  
  192. [/div][/div][/div][comment]---- HEADER END ----[/comment]
  193.  
  194.  
  195. [comment]-- pic --[/comment][div=position:absolute; top:31px; left:0px; width:183px; height:225px; background:var(--mainpic); background-size:var(--mainpicsize); background-position:var(--mainpicposition); border-right:var(--border0); border-bottom:var(--border0);][div=transparent; height:100%; width:100%; padding:0; background: radial-gradient(2px 2px, var(--accent00), transparent); background-size: 3px 3px; opacity:0.1; position:absolute; top:0; left:0;][/div][/div]
  196.  
  197.  
  198. [comment]-- match tiles start --[/comment]
  199. [comment]-- container --[/comment][div=position:absolute; top:267px; left:0px; width:183px; height:71px; border-right:var(--border0); border-top:var(--border0); overflow:hidden;]
  200. [comment]-- dots filter --[/comment][div=transparent; height:100%; width:100%; padding:0; background: radial-gradient(2px 2px, var(--accent02), transparent); background-size: 3px 3px; opacity:0.2; position:absolute; top:0; left:0;][/div]
  201. [comment]-- row 1 --[/comment]
  202. [div=position:absolute; top:0px; left:14px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  203. [div=position:absolute; top:0px; left:56px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor0); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  204. [div=position:absolute; top:0px; left:84px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor1); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  205. [div=position:absolute; top:0px; left:112px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor4); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  206. [div=position:absolute; top:0px; left:126px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  207. [div=position:absolute; top:0px; left:168px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  208. [comment]-- row 2 --[/comment]
  209. [div=position:absolute; top:14px; left:0px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  210. [div=position:absolute; top:14px; left:28px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor1); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  211. [div=position:absolute; top:14px; left:70px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  212. [div=position:absolute; top:14px; left:84px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  213. [div=position:absolute; top:14px; left:154px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor4); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  214. [comment]-- row 3 --[/comment]
  215. [div=position:absolute; top:28px; left:0px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor1); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  216. [div=position:absolute; top:28px; left:42px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  217. [div=position:absolute; top:28px; left:98px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  218. [div=position:absolute; top:28px; left:126px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  219. [div=position:absolute; top:28px; left:140px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor1); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  220. [div=position:absolute; top:28px; left:168px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  221. [comment]-- row 4 --[/comment]
  222. [div=position:absolute; top:42px; left:14px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  223. [div=position:absolute; top:42px; left:28px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor0); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  224. [div=position:absolute; top:42px; left:70px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  225. [div=position:absolute; top:42px; left:112px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor4); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  226. [div=position:absolute; top:42px; left:154px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  227. [comment]-- row 5 --[/comment]
  228. [div=position:absolute; top:56px; left:0px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor4); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  229. [div=position:absolute; top:56px; left:42px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor1); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  230. [div=position:absolute; top:56px; left:84px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor3); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  231. [div=position:absolute; top:56px; left:126px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor2); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  232. [div=position:absolute; top:56px; left:154px; width:var(--tilex); height:var(--tiley); background:var(--tilecolor0); border-radius:var(--tilebr); border:var(--tileborder); box-siding:border-box][/div]
  233. [/div][comment]-- match tiles end--[/comment]
  234.  
  235.  
  236. [comment]-- handprint --[/comment]
  237. [div=position:absolute; top:31px; right:0px; width:116px; height:130px; border-bottom:var(--border0); border-left:var(--border0);]
  238. [div=position:absolute; top:15px; left:18px; width:80px; height:105px; background:var(--hp1color); -webkit-mask-image:var(--handprint1); mask-image:var(--handprint1); mask-size:var(--hp1size); mask-position:var(--hp1position); transform:scalex(-1);][/div]
  239. [comment]-- corner lines--[/comment]
  240. [div=position:absolute; top:9px; left:9px; width:10px; height:1px; background:var(--accent03);][/div]
  241. [div=position:absolute; top:9px; left:9px; width:1px; height:10px; background:var(--accent03);][/div]
  242. [div=position:absolute; bottom:9px; right:9px; width:10px; height:1px; background:var(--accent03);][/div]
  243. [div=position:absolute; bottom:9px; right:9px; width:1px; height:10px; background:var(--accent03);][/div]
  244. [/div]
  245.  
  246.  
  247. [comment]-- outfit heading --[/comment][div=position:absolute; top:161px; right:0px; width:116px; height:20px; box-siding:border-box; border-bottom:var(--border0); border-left:var(--border0); text-align:center; text-transform:uppercase; font-size:13px; line-height:21px; font-family:var(--font1); letter-spacing:1.3px; color:var(--outfitcolor); -webkit-text-stroke:var(--outfitbold);][comment]
  248.  
  249. ---- OUTFIT HEADER HERE ----
  250. [/comment]current attire
  251. [/div]
  252.  
  253. [comment]-- outfit pic --[/comment][div=position:absolute; top:182px; right:0px; width:116px; height:157px; border-bottom:var(--border0); border-left:var(--border0);][div=width:100%; height:100%; background:var(--outfit); background-size:var(--outfitsize); background-position:var(--outfitposition); filter:var(--errorfilter);][div=transparent; height:100%; width:100%; padding:0; background: radial-gradient(2px 2px, var(--accent00), transparent); background-size: 3px 3px; opacity:0.2; position:absolute; top:0; left:0;][/div][/div]
  254.  
  255. [comment]-- glitch lines --[/comment][div=position:absolute; top:0px; left:0px; width:100%; height:100%; background:var(--glitch); background-size:var(--gsize); background-position:var(--gposition); mix-blend-mode:soft-light; filter:saturate(50%);][/div]
  256.  
  257. [comment]-- error text --[/comment][div=position:absolute; bottom:8px; left:8px; width:50px; height:20px; background:var(--bkgd); border:var(--border1); font-family:var(--font1); font-size:11px; line-height:20px; color:var(--errorcolor); text-align:center; text-transform:uppercase; -webkit-text-stroke:var(--errorbold); letter-spacing:0.5px; text-decoration:line-through;][comment]
  258.  
  259. ---- ERROR TAG HERE ----
  260. [/comment]error!
  261. [/div]
  262.  
  263. [comment]-- glitch effect --[/comment][div=position:absolute; top:0px; left:0px; width:100%; height:100%; background:var(--gtexturecolor); background-size:var(--gsize); background-position:var(--gposition); -webkit-mask-image:var(--gtexture); mask-image:var(--gtexture); mask-repeat: no-repeat; mask-size:cover; mask-position:center;][/div]
  264. [/div]
  265.  
  266. [comment]-- arrow 1 --[/comment]
  267. [div=position:absolute; top:290px; left:155px; width:50px; height:2px; background:var(--matchcolor); border-radius:1px;][/div]
  268. [div=position:absolute; top:298px; left:200px; width:22px; height:2px; background:var(--matchcolor); transform:rotate(50deg); border-radius:1px;][/div]
  269. [div=position:absolute; top:305px; left:215px; width:4px; height:4px; border:2px solid var(--matchcolor);][/div]
  270.  
  271. [comment]---- outfit & tiles end ----[/comment]
  272.  
  273.  
  274.  
  275. [comment]---- details start ----[/comment]
  276. [div=position:absolute; bottom:0px; left:0px; width:100%; height:100px; border-top:var(--border0); overflow-x:hidden; overflow-y:scroll; scrollbar-width:none; font-size:var(--body1size); line-height:var(--body1lh); text-transform:uppercase; letter-spacing:1px; color:var(--textcolor); font-family:var(--tagfont); pointer-events: auto;]
  277.  
  278.  
  279. [comment] -----DETAIL TAGS SCROLL START ----- [/comment]
  280.  
  281. [comment]-- TAG START: copy me to add another! --[/comment]
  282. [div=display:flex; position:relative; width:100%; border-bottom:var(--border0);][div=display:inline-block; float:left; width:var(--categoryw); text-align:left; padding:var(--tagspacen); color:var(--tagcolor); -webkit-text-stroke:var(--tagbold)][comment]
  283.  
  284. ---- TAG TITLE HERE ----
  285. [/comment]location
  286. [/div][div=display:inline-block; float:right; width:var(--inputw); text-align:right; padding:var(--tagspacec); vertical-align:top;][comment]
  287.  
  288. ---- TAG CONTENT HERE ----
  289. [/comment]a skycraper in n-city
  290. [/div][/div][comment]-- TAG END: copy me too! --[/comment]
  291.  
  292.  
  293. [comment]-- TAG START: copy me to add another! --[/comment]
  294. [div=display:flex; position:relative; width:100%; border-bottom:var(--border0);][div=display:inline-block; float:left; width:var(--categoryw); text-align:left; padding:var(--tagspacen); color:var(--tagcolor); -webkit-text-stroke:var(--tagbold);][comment]
  295.  
  296. ---- TAG TITLE HERE ----
  297. [/comment]inventory
  298. [/div][div=display:inline-block; float:right; width:var(--inputw); text-align:right; padding:var(--tagspacec); vertical-align:top;][comment]
  299.  
  300. ---- TAG CONTENT HERE ----
  301. [/comment]1 reforged wakizashi, 2 pistols
  302. [/div][/div][comment]-- TAG END: copy me too! --[/comment]
  303.  
  304.  
  305. [comment]-- TAG START: copy me to add another! --[/comment]
  306. [div=display:flex; position:relative; width:100%; border-bottom:var(--border0);][div=display:inline-block; float:left; width:var(--categoryw); text-align:left; padding:var(--tagspacen); color:var(--tagcolor); -webkit-text-stroke:var(--tagbold);][comment]
  307.  
  308. ---- TAG TITLE HERE ----
  309. [/comment]mood
  310. [/div][div=display:inline-block; float:right; width:var(--inputw); text-align:right; padding:var(--tagspacec); vertical-align:top;][comment]
  311.  
  312. ---- TAG CONTENT HERE ----
  313. [/comment]"you tell me— what's that cctv for?"
  314. [/div][/div][comment]-- TAG END: copy me too! --[/comment]
  315.  
  316.  
  317. [comment]-- TAG START: copy me to add another! --[/comment]
  318. [div=display:flex; position:relative; width:100%; border-bottom:var(--border0);][div=display:inline-block; float:left; width:var(--categoryw); text-align:left; padding:var(--tagspacen); color:var(--tagcolor); -webkit-text-stroke:var(--tagbold);][comment]
  319.  
  320. ---- TAG TITLE HERE ----
  321. [/comment]interactions
  322. [/div][div=display:inline-block; float:right; width:var(--inputw); text-align:right; padding:var(--tagspacec); vertical-align:top;][comment]
  323.  
  324. ---- TAG CONTENT HERE ----
  325. [/comment]@user001 @user002 @user003
  326. [/div][/div][comment]-- TAG END: copy me too! --[/comment]
  327.  
  328. [comment] ----- DETAIL TAGS SCROLL END ----- [/comment]
  329.  
  330. [/div][comment]---- details end ----[/comment]
  331.  
  332. [/div][comment]---- content end ----[/comment]
  333.  
  334. [comment]-- binary --[/comment][div=position:absolute; top:-2px; left:0px; font-family:var(--font2); font-size:6px; line-height:6px; color:var(--accent04); text-align:left; text-transform:uppercase; -webkit-text-stroke:0.3px var(--accent04); letter-spacing:1.2px; text-shadow:-0.5px -0.5px 0px var(--bkgd); white-space: pre-line;][comment]
  335.  
  336. ---- BINARY HERE ----
  337. [/comment]01101110011010111
  338. 1110111010001110110
  339. 00100000011001100110
  340. 0001011100110100
  341. 110100
  342. 110
  343. [/div]
  344.  
  345. [comment]-- text bubble 1 --[/comment][div=position:absolute; top:5px; left:5px; width:auto; height:16px; background:var(--bkgd); box-siding:border-box; border:var(--border1); text-align:left; text-transform:uppercase; font-size:11px; line-height:16px; font-family:var(--font1); letter-spacing:0.8px; color:var(--textbubblecolor); -webkit-text-stroke:var(--textbubblebold); padding:0 5px 0 5px;][comment]
  346.  
  347. ---- BUBBLE 1 TEXT HERE ----
  348. [/comment]my, my ...
  349. [/div]
  350. [/div][comment]---- LEFT END ----[/comment]
  351.  
  352.  
  353.  
  354.  
  355. [comment]---- RIGHT START ----[/comment]
  356. [div=position:relative; margin:2.5px; width:350px; height:480px; overflow:hidden; background:var(--bkgd);]
  357.  
  358. [comment]---- bkgd texture ----[/comment]
  359. [div=transparent; height:100%; width:100%; padding:0; background: radial-gradient(2px 2px, var(--accent03), transparent); background-size: 3px 3px; opacity:0.1; position:absolute; top:0; left:0;][/div]
  360.  
  361. [comment]---- content start ----[/comment]
  362. [div=position:absolute; left:var(--leftmargin); top:var(--topmargin); width:var(--contentwidth); height:var(--contentheight); background:var(--bkgd); box-siding:border-box; border:var(--border0);]
  363.  
  364.  
  365. [comment]---- HEADER START ----[/comment]
  366. [div=position:absolute; left:0px; top:0px; width:100%; height:30px; box-siding:border-box; border-bottom:var(--border0); overflow:hidden;]
  367.  
  368. [comment]---- music player start ----[/comment]
  369. [div=position:absolute; top:0px; right:0px; width:28px; height:30px; border-left:var(--border0); font-size:15px; line-height:31px; text-align:center; color:var(--accent06);]
  370.  
  371. [comment] ---- MUSIC PLAYER BUTTON
  372. ---- graciously granted to me by uxie ty queen ily [/comment]
  373. [div=position:absolute; top:5px; left:4px; width:20px; height:20px;]
  374. [div=height:20px; width:100%; flex-shrink:0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  375.  
  376. [comment] ---- play button ---- [/comment]
  377. [div=height:20px; width:20px; border-radius:100%; position:relative; flex-shrink:0;][div=height:100%; width:100%; background-size:cover; position:relative; z-index:2; pointer-events:none;][div=position:absolute; left:0px; top:0px; width:20px; height:20px; background:var(--playcolor); -webkit-mask-image:var(--musicpic); mask-image:var(--musicpic); mask-repeat: no-repeat; mask-size:cover; mask-position:center;][/div][/div]
  378.  
  379. [comment] ---- media files ---- [/comment]
  380. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:30px; width:40px; padding:0; position:relative; pointer-events:auto;]
  381.  
  382. [comment]---- SOUNDCLOUD ---- (replace the soundcloud link within media tag with your own) ---- [/comment]
  383. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  384. [media=soundcloud]https://soundcloud.com/nct/nct-u-ok[/media][/border]
  385.  
  386. [comment]---- GOOGLE DRIVE ---- (replace the google file code within media tag with your own) ---- [/comment]
  387. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;/*remove this to use me, and add it to the other*/ display:none;]
  388. [media=googledrive]1EwyiuGOGDy8NrbyIm2mfdHc7szRnCMBC[/MEDIA]
  389.  
  390. [/border][/border][/border]
  391. [/div][/div][/div]
  392. [/div][comment]---- music player end ----[/comment]
  393.  
  394.  
  395. [comment]-- header text --[/comment][div=position:absolute; left:6px; top:5px; font-family:var(--font1); font-size:10px; line-height:10px; color:var(--orgcolor); text-align:left; text-transform:uppercase; -webkit-text-stroke:var(--orgbold); letter-spacing:0.6px;][comment]
  396.  
  397.  
  398. ---- ORG NAME HERE ----
  399. [/comment]evidence:
  400.  
  401. [br][/br][div=display:inline; color:var(--headercolor); -webkit-text-stroke:var(--headerbold);][comment]
  402.  
  403.  
  404. ---- TAB NAME HERE ----
  405. [/comment]correspondence
  406.  
  407. [/div][/div]
  408.  
  409. [comment]-- music details --[/comment][div=position:absolute; right:35px; top:5px; font-family:var(--font1); font-size:10px; line-height:10px; color:var(--npcolor); text-align:right; text-transform:uppercase; -webkit-text-stroke:var(--npbold); letter-spacing:0.6px;][comment]
  410.  
  411.  
  412. ---- NOW PLAYING TAG HERE ----
  413. [/comment]now listening to
  414.  
  415. [br][/br][div=display:inline; color:var(--artistcolor); -webkit-text-stroke:var(--artistbold);][comment]
  416.  
  417.  
  418. ---- ARTIST NAME HERE ----
  419. [/comment]nct u —
  420.  
  421. [/div]
  422. [div=display:inline; color:var(--songcolor); -webkit-text-stroke:var(--songbold);][comment]
  423.  
  424.  
  425. ---- SONG NAME HERE ----
  426. [/comment]ok!
  427.  
  428. [/div]
  429. [/div][/div][comment]---- HEADER END ----[/comment]
  430.  
  431.  
  432. [comment]---- body start ----[/comment]
  433. [div=position:absolute; left:20px; top:45px; width:270px; height:374px; overflow-x:hidden; overflow-y:scroll; scrollbar-width:none; white-space: pre-line; font-family:var(--bodyfont); font-size:var(--body2size); line-height:var(--body2lh); color:var(--textcolor); text-align:justify;][div=display:inline; color: var(--dccolor); float: left; font-family: var(--font1); font-size:45px; line-height:32px; text-transform:uppercase; padding: 2px 5px 2px 0; -webkit-text-stroke:var(--dcbold);][comment]
  434.  
  435. ---- BODY TEXT HERE ----
  436. ------ DROP CAP LETTER: 1st letter of 1st word goes between the /comment and /div tags
  437. [/comment]S[/div]int occaecat lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula urna ac mauris vestibulum ultrices. Duis non justo porttitor, tempor diam at, porta nulla. Vivamus sed feugiat est. Curabitur placerat iaculis mi, at fermentum velit condimentum non. In fermentum vel leo tempor egestas. Praesent orci quam, blandit sed maximus vel, eleifend eget risus. Aenean malesuada dolor eget massa commodo ultricies. Suspendisse potenti. Sed porttitor lectus quis sodales rutrum. In ac gravida ligula. In hac habitasse platea dictumst.
  438.  
  439. [div=display:inline; color:var(--d1); -webkit-text-stroke:var(--d1bold); letter-spacing:0.2px;]"Bored of playing with me so soon?"[/div] he crooned, unc porttitor ullamcorper nisi, vitae molestie nisi tincidunt in. Pellentesque fringilla felis arcu, ac rutrum nibh molestie vitae. In interdum commodo aliquet. Aenean id ligula ultricies quam euismod sollicitudin. Nunc pretium, enim at gravida varius, nibh orci varius diam, et rutrum eros leo et tortor. Curabitur fringilla eu tortor eget ullamcorper. Ut vel libero ante.
  440.  
  441. [div=display:inline; color:var(--d2); -webkit-text-stroke:var(--d2bold); letter-spacing:0.2px;]"You've got some nerve hiding here,"[/div] she scoffed. [div=display:inline; color:var(--d2); -webkit-text-stroke:var(--d2bold); letter-spacing:0.2px;]"The entire premise is already surrounded— your little game's over."[/div] Morbi placerat porttitor ex, non condimentum nulla vehicula sit amet. Maecenas lacinia eget quam et fringilla. Duis ac lobortis neque, in dignissim neque. Donec vehicula varius ultricies. Suspendisse ac magna porttitor, aliquet purus vel, suscipit mi.
  442.  
  443. Donec egestas diam sed nibh tincidunt mollis. Ut tempus dignissim dui, vitae euismod dolor ullamcorper eget. Nulla consequat, ligula vel eleifend sodales, nibh augue dignissim nisl, eget commodo orci ante nec massa. Proin hendrerit nec magna vel accumsan. Vestibulum mauris nulla, dictum id consectetur a, consectetur non ipsum. Nam luctus dui sed dolor blandit, ut egestas sapien aliquet. Vestibulum porttitor justo nec dui molestie semper.
  444.  
  445. [div=display:inline; color:var(--d3); -webkit-text-stroke:var(--d3bold); letter-spacing:0.2px;]"NCPD, useless as ever,"[/div] came a familiar voice, nam efficitur convallis pretium. Nam ut facilisis purus. Nulla lacinia metus enim, eu porta lorem gravida eget. Quisque vestibulum nec augue id venenatis. Cras porta metus at scelerisque tincidunt. In orci ligula, fringilla imperdiet vulputate ac, tempus non ligula. Integer metus neque, interdum nec magna at, ultrices sagittis purus. Fusce semper sem finibus leo accumsan scelerisque. Sed ullamcorper orci et rutrum porta. Maecenas finibus laoreet iaculis. Sed luctus sapien sit amet blandit commodo.
  446. [/div]
  447.  
  448.  
  449.  
  450. [/div][comment]---- content end ----[/comment]
  451.  
  452. [comment]-- binary --[/comment][div=position:absolute; bottom:-2px; right:-1px; font-family:var(--font2); font-size:6px; line-height:6px; color:var(--accent04); text-align:right; text-transform:uppercase; -webkit-text-stroke:0.3px var(--accent04); letter-spacing:1.2px; text-shadow:-0.5px -0.5px 0px var(--bkgd); white-space: pre-line;][comment]
  453.  
  454. ---- BINARY HERE ----
  455. [/comment]101
  456. 0010000000111
  457. 0001011100110111010011
  458. 10110011001101111100100
  459. 1100110110010101101101000101
  460. 10101110110110110110111001101101101011
  461. 110011011001010110110100010110010
  462. [/div]
  463.  
  464. [comment]-- text bubble 2 --[/comment][div=position:absolute; bottom:5px; right:5px; width:auto; height:16px; background:var(--bkgd); box-siding:border-box; border:var(--border1); text-align:right; text-transform:uppercase; font-size:11px; line-height:16px; font-family:var(--font1); letter-spacing:0.8px; color:var(--textbubblecolor); -webkit-text-stroke:var(--textbubblebold); padding:0 5px 0 5px;]
  465. [comment]
  466.  
  467. ---- BUBBLE 2 TEXT HERE ----
  468. [/comment]so obsessed with me!
  469. [/div]
  470. [/div][comment]---- RIGHT END ----[/comment]
  471.  
  472. [/nobr][/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!