API tools faq
paste
Advertisement
ooksie

die 4 you (uxie x miyabi)

ooksie
Jan 9th, 2024 (edited)
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.91 KB | None | 0 0
raw download clone embed print report
  1. [comment]code machine // coded by uxie, design by miyabi
  2.  
  3. [font=News Cycle]name[/font]
  4. [font=Karla]body, labels[/font]
  5. [font=Nanum Myeongjo]quotes[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][div=
  10.  
  11. /*overall border around code*/
  12. --border: #606060;
  13. /*background image of entire code*/
  14. --bg: url('https://i.pinimg.com/736x/4f/c8/43/4fc843bc51f9f4d48fa81e0148d8a4ca.jpg');
  15. /*textbox background colour*/
  16. --bg-color: #fefefe;
  17.  
  18. /*main accent colour*/
  19. --color-1: #0B0B0B;
  20. /*secondary accent colour, contrast with color-1*/
  21. --color-2: var(--bg-color);
  22.  
  23. /*text colour*/
  24. --t-color: #0B0B0B;
  25. /*dialogue colour*/
  26. --d: #686868;
  27.  
  28. /*fonts used*/
  29. --name: 'News Cycle', sans-serif;
  30. --body: 'Karla', sans-serif;
  31. --quote: 'Nanum Myeongjo', serif;
  32.  
  33. /*main, large image*/
  34. --img-1: url('https://i.imgur.com/FnSMpt5.png');
  35. /*icon on second tab*/
  36. --img-2: url('https://i.pinimg.com/564x/19/dd/05/19dd059ee7131759e3489afa785fab6a.jpg');
  37.  
  38.  
  39. width:100%; height:auto; overflow-x:auto; overflow-y:hidden; padding:0 0 16px 0; box-sizing:border-box; position:relative; margin:20px 0 30px 0; line-height:0;][div=height:600px; width:100%; max-width:450px; min-width:340px; position:relative; margin:0 auto; border: 2px solid var(--border); box-sizing:border-box; border-radius:1px; background:var(--bg); background-size:cover; background-position:center; padding:55px 60px;]
  40. [comment]----tabs----[/comment]
  41. [div=height:30px; width:30px; overflow:hidden; margin-left:auto;][div=margin:-25px -40px 0 -30px;][tabs]
  42.  
  43. [comment]----lobby tab----[/comment]
  44. [tab=.][div=height:100%; width:100%; position:absolute; top:0; right:0; pointer-events:none; padding:20px; box-sizing:border-box;][div=height:100%; width:100%; border:1px solid var(--bg-color); border-radius:35px; padding:20px 20px 15px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  45.  
  46. [comment]----main image----[/comment]
  47. [div=height:90%; width:100%; border-radius:25px; background: var(--img-1); background-size:cover; position:relative;
  48.  
  49. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
  50.  
  51. [comment]----button----[/comment]
  52. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; align-items:center; position:absolute; top:20px; right:20px; color: var(--color-2);][div=height:18px; width:18px; padding:0 0 0.5px 0.5px; box-sizing:border-box; background: var(--color-1); font-size:7px; border-radius:50%; display:flex; align-items:center; justify-content:center;][fa]fas fa-play[/fa][/div][div=height:auto; width:auto; font-size:8px; text-transform:uppercase; font-family: var(--body); line-height:100%; margin-top:3px;]click here[/div][/div]
  53.  
  54. [comment]----quote one----[/comment]
  55. [div=height:auto; width:172px; position:absolute; left:-8px; top:160px; color: var(--color-2); font-family: var(--quote); font-size:11px; text-align:justify; line-height:15px; pointer-events:auto;][comment]
  56.  
  57. ----* * * quote here----
  58.  
  59. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas posuere faucibus. Aliquam et sapien dictum.[/div]
  60.  
  61. [comment]----quote two----[/comment]
  62. [div=height:auto; width:172px; position:absolute; right:15px; bottom:20px; color: var(--color-2); font-family: var(--quote); font-size:11px; text-align:justify; line-height:15px; pointer-events:auto;][comment]
  63.  
  64. ----* * * quote here----
  65.  
  66. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas posuere faucibus. Aliquam et sapien dictum.[/div]
  67.  
  68. [comment]----music player----[/comment]
  69. [div=height:30px; width:auto; max-width:160px; display:flex; flex-flow:row nowrap; align-items:center; position:absolute; bottom:20px; left:20px; pointer-events:auto;]
  70. [comment]----play button----[/comment]
  71. [div=height:18px; width:18px; background: url('https://i.imgur.com/GxBUSrK.gif'); background-size:cover; background-repeat:no-repeat; position:relative; top:1px; flex-shrink:0;][div=height:100%; width:100%; mix-blend-mode:multiply; background: var(--color-2); position:absolute; top:0; left:0; pointer-events:none; z-index:3;
  72.  
  73. /*add display:none; after this if you want this the waveform to stay white*/ ][/div]
  74. [comment]----actual media player----[/comment]
  75. [div=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%;][div=height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  76.  
  77. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  78. [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  79. [media=soundcloud]https://soundcloud.com/user_96879275/dean-die-4-you[/media]
  80. [/div]
  81.  
  82. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  83. [div=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;]
  84. [media=googledrive]google drive file code here[/MEDIA]
  85. [/div]
  86.  
  87. [/div][/div]
  88. [comment]----actual media player end----[/comment]
  89. [/div]
  90. [comment]----play button end----[/comment]
  91.  
  92. [comment]----music info----[/comment]
  93. [div=height:auto; flex:1; max-width:80px; display:flex; flex-flow:column nowrap; justify-content:center; color: var(--color-2); font-size:9px; text-transform:uppercase; margin-left:10px;]
  94. [div=height:auto; width:auto; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  95.  
  96. ----* * * song name here----
  97.  
  98. [/comment]die 4 you[/div]
  99.  
  100. [div=height:auto; width:auto; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;][comment]
  101.  
  102. ----* * * artist name here----
  103.  
  104. [/comment]dean[/div]
  105. [/div]
  106. [comment]----music info end----[/comment]
  107. [/div]
  108. [comment]----music player end----[/comment]
  109. [/div]
  110. [comment]----main image end----[/comment]
  111.  
  112. [comment]----name----[/comment]
  113. [div=height:auto; width:100%; max-height:90px; overflow:hidden; padding:0 15px; box-sizing:border-box; text-align:center; margin-top:10px; flex-shrink:0; color: var(--color-2); font-family: var(--name); text-transform:uppercase; line-height:100%; font-size:45px; pointer-events:auto;][comment]
  114.  
  115. ----* * * name here (max 2 lines)----
  116.  
  117. [/comment]name here[/div]
  118.  
  119. [/div][/div][/tab]
  120. [comment]----lobby tab end----[/comment]
  121.  
  122. [comment]----main content tab----[/comment]
  123. [tab=.][div=height:100%; width:100%; position:absolute; top:0; right:0; padding:20px; box-sizing:border-box;][div=height:100%; width:100%; border:1px solid var(--bg-color); border-radius:35px; padding:20px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][div=height:100%; width:100%; border-radius:25px; background: var(--img-1); background-size:cover; position:relative; overflow:hidden;
  124.  
  125. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
  126.  
  127. [comment]----header----[/comment]
  128. [div=height:140px; width:100%; padding:18px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;]
  129. [div=height:100%; width:clamp(50px, 49% - 30px, 155px); border-radius:15px; background: var(--img-2); background-size:cover; flex-shrink:0; margin-right:20px;
  130.  
  131. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  132.  
  133. border:1px solid var(--color-1); box-sizing:border-box;][/div]
  134.  
  135. [comment]----info----[/comment]
  136. [div=height:100%; flex:1; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  137. [comment]----name----[/comment]
  138. [div=height:auto; width:100%; max-height:var(--fs); overflow:hidden; color: var(--color-2); font-family: var(--name); text-transform:uppercase; line-height:100%; font-size:var(--fs); flex-shrink:0;
  139.  
  140. /*edit font size here*/ --fs:35px;][comment]
  141.  
  142. ----* * * name here (one line only)----
  143.  
  144. [/comment]name here[/div]
  145.  
  146. [comment]----description----[/comment]
  147. [div=height:auto; max-height:46px; overflow:hidden; width:100%; margin-top:10px; color: var(--color-2); font-family: var(--quote); font-size:10px; text-align:justify; line-height:15px; pointer-events:auto;][comment]
  148.  
  149. ----* * * description here (max 3 lines)----
  150.  
  151. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas posuere faucibus.[/div]
  152. [/div]
  153. [comment]----info end----[/comment]
  154. [/div]
  155. [comment]----header end----[/comment]
  156.  
  157. [comment]----main content area----[/comment]
  158. [div=height:375px; width:100%; background: var(--bg-color); padding:20px 12px 20px 20px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  159.  
  160. [comment]----main text----[/comment]
  161. [div=height:90%; width:100%; overflow:hidden; display:flex; flex-direction:column;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; color: var(--t-color); font-size:12px; font-family: var(--body); text-align:justify; line-height:15px;][comment]
  162.  
  163. ----* * * text starts here----
  164.  
  165. [/comment][div=display:inline; font-weight:bold; color: var(--d);]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/div] In egestas posuere faucibus. Aliquam et sapien dictum arcu sagittis lobortis ac a tellus. Maecenas magna lacus, vestibulum non lectus sed, dictum porta dui. Integer lobortis venenatis libero, vel gravida metus efficitur non. In id euismod augue. Pellentesque bibendum tortor sapien, eget fringilla sem dictum a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam rhoncus tristique nunc, vel porta sapien dignissim at. Maecenas sem erat, varius quis congue a, venenatis a justo. Quisque pretium nec augue sed volutpat. Aenean gravida dictum diam et tempus. Quisque sed felis mauris. Proin rutrum consequat suscipit.
  166.  
  167. Aenean id ante ac velit rutrum euismod. Mauris commodo semper erat, ac auctor libero interdum ac. Proin tincidunt erat sit amet porta lacinia. Nunc massa ante, vehicula et efficitur commodo, volutpat eget tortor. Proin lorem massa, semper sed mollis ut, interdum id tortor. Mauris laoreet, nisi a vulputate lacinia, nulla odio egestas risus, rutrum pellentesque elit quam ut nisi. Vestibulum mattis, leo ac congue convallis, nisi ipsum lacinia ex, eget cursus mi tellus in mi.
  168. [/div][/div][/div]
  169. [comment]----main text end----[/comment]
  170.  
  171. [comment]----details----[/comment]
  172. [div=height:auto; width:100%; padding:0 8px 5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; margin-top:15px; --m:4px; flex-shrink:0;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  173.  
  174. [comment]----copy this whole thing to add another piece of info----[/comment]
  175. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; font-family: var(--body); margin-top: var(--m);]
  176. [div=height:auto; width:auto; padding:4px 6px; box-sizing:border-box; background: var(--color-1); font-size:11.5px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 10px 0 0; color: var(--color-2);][comment]
  177.  
  178. ----* * * info title here----
  179.  
  180. [/comment]location[/div]
  181. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px; text-transform:uppercase; color: var(--t-color);][comment]
  182.  
  183. ----* * * info contents here----
  184.  
  185. [/comment]location here[/div]
  186. [/div]
  187. [comment]----copy me too!----[/comment]
  188.  
  189. [comment]----copy this whole thing to add another piece of info----[/comment]
  190. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; font-family: var(--body); margin-top: var(--m);]
  191. [div=height:auto; width:auto; padding:4px 6px; box-sizing:border-box; background: var(--color-1); font-size:11.5px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 10px 0 0; color: var(--color-2);][comment]
  192.  
  193. ----* * * info title here----
  194.  
  195. [/comment]interaction[/div]
  196. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px; text-transform:uppercase; color: var(--t-color);][comment]
  197.  
  198. ----* * * info contents here----
  199.  
  200. [/comment]interaction here[/div]
  201. [/div]
  202. [comment]----copy me too!----[/comment]
  203.  
  204. [comment]----copy this whole thing to add another piece of info----[/comment]
  205. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:center; font-family: var(--body); margin-top: var(--m);]
  206. [div=height:auto; width:auto; padding:4px 6px; box-sizing:border-box; background: var(--color-1); font-size:11.5px; text-transform:uppercase; font-weight:bold; line-height:100%; margin:3px 10px 0 0; color: var(--color-2);][comment]
  207.  
  208. ----* * * info title here----
  209.  
  210. [/comment]mood[/div]
  211. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; margin:3px 0 0 0; font-size:12px; line-height:16px; text-transform:uppercase; color: var(--t-color);][comment]
  212.  
  213. ----* * * info contents here----
  214.  
  215. [/comment]mood here[/div]
  216. [/div]
  217. [comment]----copy me too!----[/comment]
  218.  
  219. [/div]
  220. [comment]----details end----[/comment]
  221. [/div]
  222. [comment]----main content area end----[/comment]
  223. [/div][/div][/div][/tab]
  224. [comment]----main content tab end----[/comment]
  225. [/tabs][/div][/div]
  226. [comment]----tabs end----[/comment]
  227. [comment]----signature! (do not remove!)-----
  228. [/comment][div=height:auto; width:100%; padding:0; position:absolute; bottom:-15px; left:0; z-index:7; text-align:center; box-sizing:border-box; opacity:0.65;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by miyabi, coded by uxie♡[/font][/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!