API tools faq
paste
Advertisement
soxxx

013.5 - light

soxxx
Feb 6th, 2025 (edited)
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.12 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. THE PREVIEW WILL LOOK KINDA WONKY. idk why but that's normal!
  4.  
  5. [font=League Spartan]titles[/font]
  6. [font=Outfit]body text[/font]
  7.  
  8. [/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  9.  
  10.  
  11. /*---- COLORS: i recommend keeping these in relatively the same range of brightness as the default values! -----*/
  12. /*------------ note: changing these hex codes will change them everywhere they're used; -----*/
  13. /*------------ you can change which accent colors are used where in the "values to edit" section! ----*/
  14.  
  15. /*background*/
  16. --bkgd: #f0f0f0; /*very light gray*/
  17.  
  18. /*monochrome colors*/
  19. --accent00: #000; /*black*/
  20. --accent01: #cfcfcf; /*gray*/
  21. --accent02: #FFF; /*white*/
  22.  
  23. /*dull colors*/
  24. --accent10: #312926; /*dark - grayish brown*/
  25. --accent11: #937B7F; /*medium - mauve gray*/
  26. --accent12: #EBE2DB; /*light - cream white*/
  27.  
  28. /*saturated colors*/
  29. --accent20: #401100; /*dark - blood red*/
  30. --accent21: #C65B51; /*medium - orange red*/
  31. --accent22: #D1DBC2; /*light - pastel green*/
  32.  
  33.  
  34. /*---- PICS ----*/
  35. --mainpic: url('https://i.imgur.com/Les6a3f.png'); /*main pic url*/
  36. --mainsize: cover; /*pic size*/
  37. --mainposition: 50% 50%; /*pic positioning*/
  38.  
  39.  
  40. /*---- VALUES TO EDIT ----*/
  41. --windowbkgd: var(--accent02); /*page background color*/
  42. --border0: 1px solid var(--accent00); /*main border color + style*/
  43. --border1: 1px solid var(--accent01); /*meter border color + style*/
  44. --overlay: linear-gradient(to bottom, var(--accent22), var(--accent21)); /*lineart color overlay: accent22 to accent21*/
  45.  
  46. /*energy meter*/
  47. --statlevel: 85%;
  48.  
  49. /*dialogue colors*/
  50. --d1: var(--accent20); /*person 1*/
  51. --d2: var(--accent21); /*person 2*/
  52. --d3: var(--accent11); /*person 3*/
  53. --d4: var(--accent10); /*person 4*/
  54.  
  55. /*text*/
  56. --titlesize: 25px; /*title text font size*/
  57. --titlelineheight: 25px; /*title text line height*/
  58. --dropcolor: var(--accent21); /*drop cap color*/
  59. --textcolor: var(--accent00); /*body text color*/
  60. --bodysize: 11px; /*body text font size*/
  61. --bodylineheight: 12px; /*body text line height*/
  62. --bodyfont: var(--font2); /*body text font family*/
  63. --tagsize: 9px; /*subtitle font size*/
  64. --detailsize: 9px; /*details body font size*/
  65. --detaillineheight: 10px; /*details body line height*/
  66.  
  67. /*tabs*/
  68. --tab1bkgd: var(--accent10); /*mindset button color*/
  69. --tab2bkgd: var(--accent11); /*setting button color*/
  70. --tab3bkgd: var(--accent12); /*mentions button color*/
  71. --tab1color: var(--accent02); /*mindset text color*/
  72. --tab2color: var(--accent02); /*setting text color*/
  73. --tab3color: var(--accent00); /*mentions text color*/
  74.  
  75. /*lineart colors*/
  76. --diagram1color: var(--accent21);
  77. --diagram2color: var(--accent11);
  78. --diagram3color: var(--accent22);
  79.  
  80.  
  81.  
  82. /*---- VALUES YOU PROBABLY DON'T NEED TO EDIT ----*/
  83. /*------------- these are mostly to make my life easier! ----*/
  84.  
  85. /*bold presets*/
  86. /*---- i use these instead of bold tags to preserve the font style on mobile! ----*/
  87. --morebold: 0.8px var(--textcolor);
  88. --extrabold: 1px var(--textcolor);
  89. --blackbold: 1.5px var(--textcolor);
  90. --tabbold1: 0.5px var(--tab1color);
  91. --tabbold2: 0.5px var(--tab2color);
  92. --tabbold3: 0.5px var(--tab3color);
  93. --dropbold: 3px var(--dropcolor);
  94. --dialogue1: 0.6px var(--d1);
  95. --dialogue2: 0.6px var(--d2);
  96. --dialogue3: 0.6px var(--d3);
  97. --dialogue4: 0.6px var(--d4);
  98.  
  99.  
  100. /*margins + positions*/
  101. --leftmargin: 40px;
  102. --rightmargin: 40px;
  103. --topmargin: 25px;
  104. --bottommargin: 20px;
  105. --xmargin: calc(var(--leftmargin) + var(--rightmargin));
  106. --ymargin: calc(var(--topmargin) + var(--bottommargin));
  107. --contentwidth: 460px;
  108. --contentheight: calc(100% - var(--ymargin) - 60px);
  109. --innerheight: 90px;
  110. --ytabs: 315px;
  111. --xtabs: 40px;
  112. --tagspace: 3px; /*margin below tags*/
  113. --tagspace2: 8px; /*margin above tags*/
  114.  
  115. /*sizes*/
  116. --smalldotwidth: 15px;
  117. --largedotwidth: 25px;
  118. --tinydotwidth: 12px;
  119. --playdotwidth: 30px;
  120. --tabswidth: 210px;
  121. --tabsheight: 122px;
  122. --tabcoverheight: 35px;
  123. --tabcoverwidth: 220px;
  124. --ytabcover: 312px;
  125.  
  126. /*buttons*/
  127. --buttonheight: 22px;
  128. --buttonwidth: 67px;
  129. --buttonspace: 10px;
  130. --buttonfontsize: 11px;
  131. --buttonlineheight: 22px;
  132.  
  133. /*title*/
  134. --titlestroke: var(--textcolor);
  135. --titlefont: var(--font1);
  136.  
  137. /*lineart pics*/
  138. --tab1diagram: url('https://i.imgur.com/qSqJsmi.png'); /*mindset icon pic*/
  139. --tab2diagram: url('https://i.imgur.com/9RHY9UZ.png'); /*setting icon pic*/
  140. --tab3diagram: url('https://i.imgur.com/uf6uPRk.png'); /*mentions icon pic*/
  141.  
  142. /*music player*/
  143. --playbkgd: var(--accent20); /*play button color*/
  144. --playcolor: var(--accent02); /*play symbol color*/
  145. --playsize: 20px;
  146. --playlineheight: calc(var(--playdotwidth) + 5px);
  147. --playfont: var(--font1);
  148.  
  149. /*---- FONTS ----*/
  150. --font1: 'League Spartan', sans-serif; /*titles*/
  151. --font2: 'Outfit', sans-serif; /*body*/
  152.  
  153.  
  154. ][div=margin:auto; position:relative; width:600px; height:600px; margin-top:20px; margin-bottom:20px; background:var(--bkgd); border-radius:2px; box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--accent00); color:var(--textcolor);][nobr]
  155.  
  156. [comment]---- HEADER BAR START ----[/comment]
  157. [div=position:absolute; left:30px; top:25px; width:540px; height:50px; background:var(--windowbkgd); border:var(--border0); box-sizing:border-box; border-radius:50px 0 0 50px; padding-right:20px; font-family:var(--titlefont); font-size:12px; line-height:50px; color:var(--textcolor); font-weight:100; text-align:right; text-transform:uppercase;]
  158.  
  159. [comment]---- header menu ----[/comment]
  160. home⠀|⠀ browse⠀|⠀ library⠀|⠀ friends⠀|⠀ [div=display:inline; -webkit-text-stroke:var(--morebold); letter-spacing:1px; font-size:11.5px;]profile[/div] ⠀|⠀ log out
  161.  
  162. [comment]---- left window buttons ----[/comment]
  163. [div=position:absolute; left:15px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  164. [div=position:absolute; left:40px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent11); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  165. [div=position:absolute; left:65px; top:17px; width:var(--smalldotwidth); height:var(--smalldotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  166. [/div]
  167. [comment]---- HEADER BAR END ----[/comment]
  168.  
  169.  
  170.  
  171. [comment]---- PAGE BODY START ----[/comment]
  172. [/nobr][div=position:absolute; left:30px; top:80px; width:540px; height:495px; background:var(--windowbkgd); border:var(--border0); box-sizing:border-box; border-radius:50px 0 50px 50px;][nobr]
  173.  
  174. [comment]---- title start ----[/comment]
  175.  
  176. [comment]---- title decorations----[/comment]
  177. [comment]-- line --[/comment][div=position:absolute; left:var(--leftmargin); top:36px; width:455px; height:1px; background:var(--accent00);][/div]
  178. [comment]-- dot --[/comment][div=position:absolute; right:var(--rightmargin); top:30px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent01); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  179.  
  180. [comment]---- title text ----[/comment]
  181. [div=position:absolute; left:var(--leftmargin); top:25px; width:auto; height:30px; padding-right:15px; background:var(--windowbkgd); font-family:var(--titlefont); font-size:var(--titlesize); line-height:var(--titlelineheight); color:var(--textcolor); font-weight:100; text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--blackbold); letter-spacing:1px; font-size:calc(var(--titlesize) - 1px);][comment]
  182.  
  183. ---- NAME HERE ----
  184. [/comment]sunwoo kim[/div]
  185. // [comment]
  186.  
  187. ---- ROLE HERE ----
  188. [/comment][I]the all-rounder[/I]
  189. [/div]
  190. [comment]---- title end----[/comment]
  191.  
  192.  
  193. [comment]-- pic --[/comment]
  194. [div=position:absolute; left:var(--leftmargin); top:60px; width:210px; height:240px; background:var(--mainpic); background-size:var(--mainsize); background-position:var(--mainposition); border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1;][/div]
  195.  
  196. [comment]-- pic deco --[/comment][div=position:absolute; left:228px; top:58px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  197.  
  198.  
  199. [comment]-- body --[/comment]
  200. [/nobr][div=position:absolute; right:var(--rightmargin); top:60px; width:230px; height:375px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:30px; opacity:1; overflow:hidden;][div=position:relative; overflow-y:scroll; width:355px; height:315px; margin-top:18px; padding:0px 0px 20px 30px; color:var(--text); font-family:var(--bodyfont); font-size:var(--bodysize); line-height:var(--bodylineheight); text-align:justify;][div=width:50%;][div=display:inline; color:var(--dropcolor); float:left; font-family:var(--font1); font-size:42px; line-height:20px; text-transform:uppercase; padding:13px 5px 0 0; -webkit-text-stroke:var(--dropbold);][comment]
  201.  
  202. ---- BODY TEXT HERE ----
  203. ------ DROP CAP LETTER: 1st letter of 1st word goes between the /comment and /div tags
  204. [/comment]G[/div]iven his natural aptitude for mischief, selerisque feugiat magna fusce. Ac consequat neque est imperdiet dictum tempor sem. Eget volutpat metus ac phasellus luctus finibus eros fermentum habitant. Porttitor dis parturient nulla, venenatis dui lacus suscipit nisi. Ullamcorper nam nibh conubia aenean vel vivamus suscipit elementum efficitur.
  205.  
  206. [div=display:inline; color:var(--d1); -webkit-text-stroke:var(--dialogue1);]"Class tristique ullamcorper ultrices molestie sapien."[/div] Eleifend eros dui varius sodales rutrum pulvinar parturient suspendisse. Ex non morbi dui taciti iaculis leo cubilia neque. Nulla conubia malesuada enim aliquet primis; cursus commodo mauris. Sem quis tempor amet felis vestibulum. Sociosqu integer aptent nisl lobortis sodales viverra aenean. Nunc turpis taciti dictum mattis augue ut odio hac consequat. Luctus sociosqu lacinia natoque tortor vehicula montes. Curabitur taciti commodo adipiscing leo tellus. Sodales erat sapien dignissim bibendum curae curabitur.
  207.  
  208. [div=display:inline; color:var(--d2); -webkit-text-stroke:var(--dialogue2);]"Tempor cras non quam consectetur ex porta praesent egestas."[/div] Habitasse conubia sollicitudin libero proin sem. Pretium dictumst lectus cursus praesent urna nullam a nisi eu. Rutrum primis amet consequat pharetra mattis penatibus aliquam accumsan.
  209.  
  210. Curabitur tortor consectetur congue lectus vulputate purus. Lacus maecenas venenatis per nisi nibh vivamus mattis. Ut tellus magnis aenean, nunc commodo ac adipiscing. Fames lobortis iaculis commodo quam dui lacinia. Platea nibh ullamcorper, elit blandit platea et magnis parturient eros. Fermentum cubilia pretium urna tortor convallis.
  211.  
  212. [div=display:inline; color:var(--d3); -webkit-text-stroke:var(--dialogue3);]"Nunc justo curabitur porta mus lacinia viverra lobortis mus."[/div] Est sit phasellus ligula placerat est netus amet lacus? Molestie eros purus sollicitudin ad quisque mi; taciti class. Morbi bibendum ante nostra sociosqu, est dolor tellus luctus aliquet. Habitant cras vehicula lobortis; semper laoreet tristique neque. Ad eu proin platea iaculis integer, mollis mattis mi. Rhoncus et habitasse ullamcorper venenatis nascetur feugiat. Tellus tincidunt ante eget metus risus felis mi vulputate. Ad euismod proin euismod ex magnis imperdiet mi justo arcu.
  213.  
  214. [/div][/div][/div][nobr]
  215.  
  216.  
  217. [comment]---- DETAILS START ----
  218. -- container --[/comment][div=transparent; position:absolute; left:var(--xtabs); top:var(--ytabs); width:var(--tabswidth); height:var(--tabsheight); padding:0px; line-height:0px;][comment]
  219. -- border a --[/comment][div=transparent; height:30px; width:100%; padding:0px; overflow:hidden;][comment]
  220. -- border b --[/comment][div=transparent; padding:0px; margin:-2px -15px 0 -20px; letter-spacing:clamp(3px, -200px + 25vw, 4px);][tabs][comment]
  221.  
  222. ---- TAB ONE: MINDSET ----
  223. [/comment][tab=..][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;][comment]
  224.  
  225. -- diagram --
  226. [/comment][div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--tab1diagram); background-size:cover; background-position:50% 50%; background-color:var(--windowbkgd);][/div][div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--overlay); mix-blend-mode:lighten;][/div]
  227.  
  228. [comment]-- mindset text box --[/comment]
  229. [div=position:absolute; left:0px; bottom:0px; width:110px; height:90px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:20px; opacity:1; overflow:hidden;]
  230. [div=position:relative; overflow-y:scroll; width:190px; height:60px; margin-top:10px; padding:0px 0px 10px 10px; color:var(--text); font-family:var(--bodyfont); font-size:var(--detailsize); line-height:var(--detaillineheight); text-align:left;][div=width:50%;][comment]-- tag --[/comment][div=margin-bottom:var(--tagspace); text-transform:uppercase; -webkit-text-stroke:var(--morebold); font-size:var(--tagsize); letter-spacing:1px;]energy.[/div][comment]
  231.  
  232. ---- METER HERE ----
  233. [/comment][comment]-- bar --[/comment][div=position:relative: margin-top:1px; height:8px; background:var(--accent10); border-radius:10px; border:var(--border1); box-sizing:border-box; overflow:hidden;][div=width:var(--statlevel); height:6px; background:var(--accent01); border-radius:0 5px 5px 0;][/div][/div]
  234. [br][/br][comment]-- tag --[/comment][div=margin-bottom:var(--tagspace); text-transform:uppercase; -webkit-text-stroke:var(--morebold); font-size:var(--tagsize); letter-spacing:1px;]mood.[/div][comment]
  235.  
  236. ---- MOOD HERE ----
  237. [/comment]"i thought yeji said this place was always empty...? it's more kkeondaes in here than the HYBE board room..."
  238. [/div][/div][/div]
  239.  
  240. [div=display:none;]mindset[/div]
  241. [/div][/tab][comment]
  242.  
  243.  
  244.  
  245. ---- TAB TWO: SETTING ----
  246. [/comment][tab=..][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  247.  
  248. [comment]-- diagram --[/comment]
  249. [div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--tab2diagram); background-size:cover; background-position:50% 50%; background-color:var(--windowbkgd);][/div][div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--overlay); mix-blend-mode:lighten;][/div]
  250.  
  251. [comment]-- setting text box --[/comment]
  252. [div=position:absolute; left:0px; bottom:0px; width:110px; height:90px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:20px; opacity:1; overflow:hidden;]
  253. [div=position:relative; overflow-y:scroll; width:190px; height:60px; margin-top:10px; padding:0px 0px 10px 10px; color:var(--text); font-family:var(--bodyfont); font-size:var(--detailsize); line-height:var(--detaillineheight); text-align:left;][div=width:50%;][comment]-- tag --[/comment][div=margin-bottom:var(--tagspace); text-transform:uppercase; -webkit-text-stroke:var(--morebold); font-size:var(--tagsize); letter-spacing:1px;]outfit.[/div][comment]
  254.  
  255. ---- OUTFIT URL HERE ----
  256. [/comment]→ [URL='https://i.pinimg.com/736x/bf/07/a1/bf07a1cf44132916da80011a0ac398e1.jpg']a cozy groutfit.[/URL]
  257. [br][/br][div=margin-bottom:var(--tagspace); margin-top:var(--tagspace2); text-transform:uppercase; -webkit-text-stroke:var(--morebold); font-size:var(--tagsize); letter-spacing:1px;]location.[/div][comment]
  258.  
  259. ---- LOCATION HERE ----
  260. [/comment]the busiest coffee shop in the city, apparently...
  261. [/div][/div][/div]
  262.  
  263. [div=display:none;]setting[/div]
  264. [/div][/tab][comment]
  265.  
  266.  
  267.  
  268. ---- TAB THREE: MENTIONS ----
  269. [/comment][tab=..][div=transparent; position:absolute; height:var(--innerheight); width:100%; padding:10px 0 0 0; bottom:0px; right:0px; background:var(--tabbkgd); letter-spacing:0;]
  270.  
  271. [comment]-- diagram --[/comment]
  272. [div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--tab3diagram); background-size:cover; background-position:50% 50%; background-color:var(--windowbkgd);][/div][div=position:absolute; right:0px; bottom:0px; width:var(--innerheight); height:var(--innerheight); background:var(--overlay); mix-blend-mode:lighten;][/div]
  273.  
  274.  
  275. [comment]-- interactions text box --[/comment]
  276. [div=position:absolute; left:0px; bottom:0px; width:110px; height:90px; background:var(--accent02); border:var(--border0); box-sizing:border-box; border-radius:20px; opacity:1; overflow:hidden;]
  277. [div=position:relative; overflow-y:scroll; width:190px; height:60px; margin-top:10px; padding:0px 0px 10px 10px; color:var(--text); font-family:var(--bodyfont); font-size:var(--detailsize); line-height:var(--detaillineheight); text-align:justify;][div=width:50%;][comment]-- tag --[/comment][div=margin-bottom:var(--tagspace); text-transform:uppercase; -webkit-text-stroke:var(--morebold); font-size:var(--tagsize); letter-spacing:1px;]interactions.[/div][comment]
  278.  
  279. ---- TAGS HERE ----
  280. [/comment][comment]-- user tag --[/comment]→ name 1
  281. [br][/br][comment]-- user tag --[/comment]→ name 2
  282. [br][/br][comment]-- user tag --[/comment]→ name 3
  283. [br][/br][comment]-- user tag --[/comment]→ name 4
  284. [br][/br][comment]-- user tag --[/comment]→ name 5
  285. [/div][/div][/div]
  286.  
  287. [div=display:none;]mentions[/div]
  288. [/div][/tab][/tabs][/div][/div][/div][comment]
  289.  
  290.  
  291. ---- tabs cover start ----[/comment]
  292. [comment]-- cover --[/comment][div=position:absolute; left:0px; top:var(--ytabcover); width:260px; height:var(--tabcoverheight); background:var(--windowbkgd); pointer-events:none; opacity:1;][/div]
  293.  
  294. [comment]-- button container --[/comment][div=position:absolute; left:var(--leftmargin); top:var(--ytabcover); width:var(--tabcoverwidth); height:var(--buttonheight); pointer-events:none; opacity:1; display: flex;]
  295.  
  296. [comment]-- mood --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--tab1bkgd); color:var(--tab1color); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]mind[div=display:inline; -webkit-text-stroke:var(--tabbold1); letter-spacing:0.5px;]set.[/div][/div]
  297.  
  298. [comment]-- setting --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--tab2bkgd); color:var(--tab2color); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]sett[div=display:inline; -webkit-text-stroke:var(--tabbold2); letter-spacing:0.5px;]ing.[/div][/div]
  299.  
  300. [comment]-- tags --[/comment][div=position:relative; display:inline-block; margin-top:0px; margin-right:var(--buttonspace); width:var(--buttonwidth); height:var(--buttonheight); padding:0 0px 0 0px; background:var(--tab3bkgd); color:var(--tab3color); font-size:var(--buttonfontsize); line-height:var(--buttonlineheight); text-align:center; border:var(--border0); box-sizing:border-box; border-radius:50px;]men[div=display:inline; -webkit-text-stroke:var(--tabbold3); letter-spacing:0.5px;]tions.[/div][/div]
  301.  
  302. [/div][comment]---- DETAILS END ----[/comment]
  303.  
  304.  
  305.  
  306. [comment] ---- MUSIC PLAYER
  307. ---- graciously granted to me by uxie ty queen ily [/comment]
  308. [div=position:absolute; right:var(--rightmargin); bottom:15px; width:var(--playdotwidth); height:var(--playdotwidth);]
  309. [div=width:var(--playdotwidth); height:var(--playdotwidth); flex-shrink:0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  310.  
  311. [comment] ---- play button ---- [/comment]
  312. [div=width:var(--playdotwidth); height:var(--playdotwidth); border-radius:100%; position:relative; flex-shrink:0;][div=height:100%; width:100%; background:var(--playbkgd); border:var(--border0); box-sizing:border-box; border-radius:100%; position:relative; z-index:2; pointer-events:none; text-align:center; font-family:var(--playfont); font-size:var(--playsize); line-height:var(--playlineheight); color:var(--playcolor);][fa]fas fa-circle-play[/fa][/div]
  313.  
  314. [comment] ---- media files ---- [/comment]
  315. [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:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  316.  
  317. [comment]---- SOUNDCLOUD ---- (replace the soundcloud link within media tag with your own) ---- [/comment]
  318. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  319. [media=soundcloud]https://soundcloud.com/official_theboyz/like-a-birthday-cake[/media][/border]
  320.  
  321. [comment]---- GOOGLE DRIVE ---- (replace the google file code within media tag with your own) ---- [/comment]
  322. [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;]
  323. [media=googledrive]1EwyiuGOGDy8NrbyIm2mfdHc7szRnCMBC[/MEDIA]
  324.  
  325. [/border][/border][/border]
  326. [/div][/div][/div]
  327.  
  328. [comment]-- music details --[/comment]
  329. [comment]-- line --[/comment][div=position:absolute; left:var(--leftmargin); bottom:27px; width:calc(var(--contentwidth) - 5px); height:1px; background:var(--accent00);][/div]
  330. [comment]-- start dot --[/comment][div=position:absolute; left:var(--leftmargin); bottom:22px; width:var(--tinydotwidth); height:var(--tinydotwidth); background:var(--accent22); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  331.  
  332. [comment]-- song details--[/comment]
  333. [div=position:absolute; left:70px; bottom:15px; width:auto; height:25px; padding:0 10px 0 10px; background:var(--windowbkgd); font-family:var(--playfont); font-size:12px; line-height:25px; color:var(--textcolor); text-align:left; text-transform:uppercase;][div=display:inline; -webkit-text-stroke:var(--morebold); letter-spacing:1px; font-size:11px;][comment]
  334.  
  335.  
  336. ---- SONG NAME // ARTIST // LYRICS HERE ----
  337. [/comment]berry. // [/div][I]kim sunwoo.[/I][/div]
  338.  
  339.  
  340. [comment] ---- MUSIC END ---- [/comment]
  341. [/nobr][/div][nobr][comment]---- PAGE BODY END ----[/comment]
  342.  
  343.  
  344. [comment]---- right window dots ----[/comment]
  345. [div=position:absolute; right:18px; bottom:155px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent10); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  346. [div=position:absolute; right:18px; bottom:200px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent11); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  347. [div=position:absolute; right:18px; bottom:245px; width:var(--largedotwidth); height:var(--largedotwidth); background:var(--accent12); border:var(--border0); box-sizing:border-box; border-radius:100%;][/div]
  348.  
  349. [/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!