API tools faq
paste
Advertisement
ooksie

flightless

ooksie
Jul 25th, 2021 (edited)
1,434
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.49 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=DM Serif Display]title[/font]
  5. [font=Nanum Pen Script]cursive/script accent[/font]
  6. [font=Mitr]header[/font]
  7. [font=Otomanopee One]subheader/accent[/font]
  8. [font=Rubik]body[/font]
  9.  
  10. 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 ( ‾́ ◡ ‾́ )
  11.  
  12. [/comment][border=transparent;
  13. --waves: URL('https://i.imgur.com/GxBUSrK.gif');
  14.  
  15. /*main background image*/
  16. --bg-img: url('http://images6.fanpop.com/image/photos/43300000/BAEKHYUN-The-2nd-Mini-Album-Delight-baek-hyun-43367277-1500-1000.jpg');
  17.  
  18. /*main background colour*/
  19. --bg-1: #000;
  20. /*u can ignore this :) */
  21. --bg-2: #1c1c1c;
  22.  
  23. /*accent colour one -- contrast w bg-1*/
  24. --color-1: #fff;
  25. /*accent colour 2 -- do a nice colour that goes well w bg-1*/
  26. --color-2: #7344c4;
  27.  
  28. /*header colour*/
  29. --h1: var(--color-2);
  30. /*header colour 2*/
  31. --h2: var(--color-1);
  32. /*text colour -- make sure visible on bg-1*/
  33. --t-color: var(--color-1);
  34. /*dialogue colour*/
  35. --dialogue: var(--color-2);
  36.  
  37. /*fonts used*/
  38. --title: 'DM Serif Display', sans-serif;
  39. --accent: 'Nanum Pen Script', display;
  40. --header: 'Mitr', sans-serif;
  41. --subheader: 'Otomanopee One', sans-serif;
  42. --body: 'Rubik', sans-serif;
  43.  
  44. /*left icon*/
  45. --img-1: url('https://64.media.tumblr.com/0497a01c0cb67bae768526bf6e15f527/249eb489aeb56662-7d/s1280x1920/06a9cd3acd9c7d9e0dd14b624fd89c48ca8111b6.jpg');
  46.  
  47. /*outfit image*/
  48. --outfit: URL('https://seoulbeats.com/wp-content/uploads/2021/04/2021_seoulbeats_exo_baekhyun_sme_2.jpg');
  49.  
  50. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden;][border=transparent; height:auto; width:100%; max-width:380px; min-width:350px; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative; border-radius:10px; overflow:hidden; background: var(--bg-1); border:1px solid var(--bg-1); justify-content:center; position:relative; line-height:0; margin:15px auto;]
  51.  
  52. [comment]----header----[/comment]
  53. [border=transparent; height:50px; width:100%; padding:5px 18px; box-sizing:border-box; background: var(--bg-1); flex-shrink:0; border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:flex-start; color: var(--color-1); font-family:var(--title); font-size:27px; line-height:27px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; letter-spacing:2px;][comment]
  54.  
  55. ----* * * name here----
  56.  
  57. [/comment]name.[/border]
  58.  
  59. [comment]----top----[/comment]
  60. [border=transparent; height:185px; width:100%; padding:0; position:relative; overflow:hidden;]
  61.  
  62. [comment]----background image----[/comment]
  63. [border=transparent; height:calc(100% + 50px); width:100%; padding:0; background: var(--bg-img), var(--bg-1); background-size:cover; position:absolute; top:-30px; left:0; z-index:1; pointer-events:none; -webkit-filter: saturate(1.3);
  64.  
  65. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  66.  
  67. ][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1);
  68.  
  69. /*adjust this if your background doesn't show up well*/ opacity:0.65;][/border][/border]
  70.  
  71. [comment]----black line----[/comment]
  72. [border=transparent; height:37%; width:100%; padding:0; background: var(--bg-1); position:absolute; bottom:0; left:0; z-index:1;][/border]
  73.  
  74. [comment]----top container----[/comment]
  75. [border=transparent; height:100%; width:100%; padding:15px 10px 15px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  76.  
  77. [comment]----icon----[/comment]
  78. [border=transparent; height:115px; width:clamp(90px, 33%, 115px); padding:0; margin:0 0 10px 5px; position:relative; z-index:4; --size: calc(100% - 10px); flex-shrink:0;][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); top:0; left:0; position:absolute;][/border][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); bottom:0; right:0; position:absolute; background: var(--img-1), var(--bg-2);
  79.  
  80. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  81.  
  82. background-size:cover;][/border][/border]
  83.  
  84. [comment]----details----[/comment]
  85. [border=transparent; height:100px; flex:1; max-width:77%; padding:0; --lm: clamp(15px, 2.5vw, 20px); margin-left: var(--lm);]
  86. [comment]----tabs----[/comment]
  87. [border=transparent; height:30px; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; letter-spacing:-10px; margin:3px -40px 0 clamp(-30px, -65px + 10vw, -20px);][tabs]
  88.  
  89.  
  90. [comment]----mood tab----[/comment]
  91. [tab=.][border=transparent; height:100%; width:100%; padding:15px 10px 15px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end; pointer-events:none; position:absolute; bottom:0; left:0; z-index:2; letter-spacing:0;][border=transparent; height:100%; width:clamp(90px, 33%, 115px); padding:0; margin:0 0 15px 5px; flex-shrink:0;][/border][border=transparent; height:100px; flex:1; max-width:77%; padding:0; margin-left:var(--lm); position:relative; display:flex; flex-flow:column nowrap;]
  92. [comment]----button select----[/comment]
  93. [border=transparent; height:30px; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; margin-bottom:auto; --m:clamp(11px, 3.5vw, 15px);]
  94. [comment]----selected button----[/comment]
  95. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:14px; margin:1px var(--m) 0 var(--m); text-align:center;][fa]far fa-heart[/fa][/border]
  96. [comment]----button----[/comment]
  97. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  98. [comment]----button----[/comment]
  99. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  100. [comment]----button----[/comment]
  101. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  102. [/border]
  103. [comment]----button select end----[/comment]
  104.  
  105. [comment]----tab container----[/comment]
  106. [border=transparent; height:47px; width:100%; padding:0 2px 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; margin-bottom:-2px; pointer-events:auto;]
  107. [comment]----tab title----[/comment]
  108. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; padding:2px 5px 0 0; box-sizing:border-box; color: var(--h1); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold; -webkit-text-stroke:0.2px var(--h1);][comment]
  109.  
  110. ----* * * tab title here----
  111.  
  112. [/comment]mood[/border]
  113.  
  114. [comment]----tab contents----[/comment]
  115. [border=transparent; height:auto; max-height:28px; width:clamp(150px, 100% - 10px, 220px); padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:4px; flex-shrink:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:right;][comment]
  116.  
  117. ----* * * mood here----
  118.  
  119. [/comment]this is how i'm feeling right now!
  120. [/border][/border][/border]
  121. [comment]----tab contents end----[/comment]
  122. [/border]
  123. [comment]----tab container end----[/comment]
  124. [/border][/border][/tab]
  125. [comment]----tab end----[/comment]
  126.  
  127.  
  128. [comment]----outfit tab----[/comment]
  129. [tab=.][border=transparent; height:100%; width:100%; padding:15px 10px 15px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end; pointer-events:none; position:absolute; bottom:0; left:0; z-index:6; letter-spacing:0;]
  130.  
  131. [comment]----outfit image----[/comment]
  132. [border=transparent; height:115px; width:clamp(90px, 33%, 115px); padding:0; margin:0 0 10px 5px; position:relative; z-index:6; --size: calc(100% - 10px); flex-shrink:0;][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid transparent; top:0; left:0; position:absolute;][/border][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); bottom:0; right:0; position:absolute; z-index:2; background: var(--outfit);
  133.  
  134. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  135.  
  136. background-size:cover;][/border][/border]
  137.  
  138. [border=transparent; height:100px; flex:1; padding:0; margin-left:var(--lm); position:relative; display:flex; flex-flow:column nowrap;]
  139. [comment]----button select----[/comment]
  140. [border=transparent; height:30px; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; margin-bottom:auto; --m:clamp(13px, 3.5vw, 15px);]
  141. [comment]----button----[/comment]
  142. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  143. [comment]----selected button----[/comment]
  144. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:14px; margin:1px var(--m) 0 var(--m); text-align:center;][fa]far fa-tshirt[/fa][/border]
  145. [comment]----button----[/comment]
  146. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  147. [comment]----button----[/comment]
  148. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  149. [/border]
  150. [comment]----button select end----[/comment]
  151.  
  152. [comment]----tab container----[/comment]
  153. [border=transparent; height:47px; width:100%; padding:0 2px 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; margin-bottom:-2px; pointer-events:auto;]
  154. [comment]----tab title----[/comment]
  155. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; padding:2px 5px 0 0; box-sizing:border-box; color: var(--h1); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold; -webkit-text-stroke:0.2px var(--h1);][comment]
  156.  
  157. ----* * * tab title here----
  158.  
  159. [/comment]outfit[/border]
  160.  
  161. [comment]----tab contents----[/comment]
  162. [border=transparent; height:auto; max-height:28px; width:clamp(150px, 100% - 10px, 220px); padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:4px; flex-shrink:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; text-align:right; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body);][comment]
  163.  
  164. ----* * * outfit here----
  165.  
  166. [/comment]peep my fit!
  167. [/border][/border][/border]
  168. [comment]----tab contents end----[/comment]
  169. [/border]
  170. [comment]----tab container end----[/comment]
  171. [/border][/border][/tab]
  172. [comment]----tab end----[/comment]
  173.  
  174.  
  175. [comment]----location tab----[/comment]
  176. [tab=.][border=transparent; height:100%; width:100%; padding:15px 10px 15px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end; pointer-events:none; position:absolute; bottom:0; left:0; z-index:2; letter-spacing:0;][border=transparent; height:100%; width:clamp(90px, 33%, 115px); padding:0; margin:0 0 15px 5px; flex-shrink:0;][/border][border=transparent; height:100px; flex:1; padding:0; box-sizing:border-box; margin-left:var(--lm); position:relative; display:flex; flex-flow:column nowrap;]
  177. [comment]----button select----[/comment]
  178. [border=transparent; height:30px; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; margin-bottom:auto; --m:clamp(13px, 3.5vw, 15px);]
  179. [comment]----button----[/comment]
  180. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  181. [comment]----button----[/comment]
  182. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  183. [comment]----selected button----[/comment]
  184. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:14px; margin:1px var(--m) 0 var(--m); text-align:center;][fa]far fa-map-marker-alt[/fa][/border]
  185. [comment]----button----[/comment]
  186. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  187. [/border]
  188. [comment]----button select end----[/comment]
  189.  
  190. [comment]----tab container----[/comment]
  191. [border=transparent; height:47px; width:100%; padding:0 2px 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; margin-bottom:-2px; pointer-events:auto;]
  192. [comment]----tab title----[/comment]
  193. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; padding:2px 5px 0 0; box-sizing:border-box; color: var(--h1); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold; -webkit-text-stroke:0.2px var(--h1);][comment]
  194.  
  195. ----* * * tab title here----
  196.  
  197. [/comment]location[/border]
  198.  
  199. [comment]----tab contents----[/comment]
  200. [border=transparent; height:auto; max-height:28px; width:clamp(150px, 100% - 10px, 220px); padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:4px; flex-shrink:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:right;][comment]
  201.  
  202. ----* * * location here----
  203.  
  204. [/comment]this is where i'm at!
  205. [/border][/border][/border]
  206. [comment]----tab contents end----[/comment]
  207. [/border]
  208. [comment]----tab container end----[/comment]
  209. [/border][/border][/tab]
  210. [comment]----tab end----[/comment]
  211.  
  212.  
  213. [comment]----interactions tab----[/comment]
  214. [tab=.][border=transparent; height:100%; width:100%; padding:15px 10px 15px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:flex-end; pointer-events:none; position:absolute; bottom:0; left:0; z-index:2; letter-spacing:0;][border=transparent; height:100%; width:clamp(90px, 33%, 115px); padding:0; margin:0 0 15px 5px; flex-shrink:0;][/border][border=transparent; height:100px; flex:1; padding:0; margin-left:var(--lm); position:relative; display:flex; flex-flow:column nowrap;]
  215. [comment]----button select----[/comment]
  216. [border=transparent; height:30px; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; margin-bottom:auto; --m:clamp(13px, 3.5vw, 15px);]
  217. [comment]----button----[/comment]
  218. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  219. [comment]----button----[/comment]
  220. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  221. [comment]----button----[/comment]
  222. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:13px; margin:0 var(--m); text-align:center;][fa]far fa-circle[/fa][/border]
  223. [comment]----selected button----[/comment]
  224. [border=transparent; height:auto; width:20px; padding:0; color: var(--color-1); font-size:14px; margin:1px var(--m) 0 var(--m); text-align:center;][fa]far fa-comment-dots[/fa][/border]
  225. [/border]
  226. [comment]----button select end----[/comment]
  227.  
  228. [comment]----tab container----[/comment]
  229. [border=transparent; height:47px; width:100%; padding:0 2px 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; margin-bottom:-2px; pointer-events:auto;]
  230. [comment]----tab title----[/comment]
  231. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; padding:2px 5px 0 0; box-sizing:border-box; color: var(--h1); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold; -webkit-text-stroke:0.2px var(--h1);][comment]
  232.  
  233. ----* * * tab title here----
  234.  
  235. [/comment]interactions[/border]
  236.  
  237. [comment]----tab contents----[/comment]
  238. [border=transparent; height:auto; max-height:28px; width:clamp(150px, 100% - 10px, 220px); padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:4px; flex-shrink:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:right;][comment]
  239.  
  240. ----* * * interactions/tags here----
  241.  
  242. [/comment]in the conversation!
  243. [/border][/border][/border]
  244. [comment]----tab contents end----[/comment]
  245. [/border]
  246. [comment]----tab container end----[/comment]
  247. [/border][/border][/tab]
  248. [comment]----tab end----[/comment]
  249.  
  250.  
  251. [/tabs][/border][/border]
  252. [comment]----tabs end----[/comment]
  253. [/border]
  254. [comment]----details end----[/comment]
  255. [/border]
  256. [comment]----top container end----[/comment]
  257.  
  258. [/border]
  259. [comment]----top end----[/comment]
  260.  
  261.  
  262. [comment]----post contents----[/comment]
  263. [border=transparent; height:277px; width:100%; padding:7px 12px 10px 22px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; font-family: var(--body); line-height:15.5px;][comment]
  264.  
  265. ----* * * text starts here----
  266.  
  267. [/comment][border=0; padding:0; display:inline; color: var(--dialogue); font-weight:bold; letter-spacing:0.3px;]"this is a dialogue."[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices nibh vel arcu vestibulum, a porttitor tellus commodo. Phasellus ipsum metus, egestas quis efficitur quis, consectetur fermentum risus. Donec venenatis condimentum turpis, nec lacinia ante iaculis id. Morbi vitae mauris lobortis, bibendum leo facilisis, ultrices quam. Maecenas commodo velit vel nisi pellentesque, nec congue felis vulputate. Proin ante leo, gravida et eros eu, varius rhoncus ante. Donec sit amet iaculis turpis. Vestibulum nisl eros, placerat non leo eget, tempus lacinia tellus. Nam vel faucibus metus. Donec sollicitudin dolor nec tellus bibendum auctor. Aenean eget nunc vitae enim pharetra pretium.
  268.  
  269. Quisque auctor diam tellus, nec dapibus nulla iaculis vitae. Phasellus mattis nunc egestas erat faucibus, et varius nisi ultrices. Maecenas gravida libero eget est posuere, ac elementum tortor molestie. Maecenas felis mi, lacinia eu imperdiet sed, tempus in velit. Curabitur vel lectus est. Donec elementum posuere lacus, in aliquam libero lobortis efficitur. Nullam at faucibus arcu. Praesent at tincidunt quam.
  270.  
  271. Proin varius finibus metus. Integer vel nisi eu nibh dignissim iaculis ut eget erat. Morbi efficitur pellentesque purus vitae pulvinar. Curabitur dapibus, nisi sed volutpat vehicula, odio felis consectetur eros, sed iaculis leo ex tincidunt diam. Vestibulum eget lobortis dolor. Donec elit est, dapibus vel enim vel, feugiat lacinia purus. Proin in mattis libero. Aliquam ut sodales dolor, nec commodo velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, lorem id ultricies ultrices, magna diam mollis mi, eu ornare felis ipsum quis nunc. Cras eget risus massa. Nullam at turpis sapien. Curabitur sit amet risus sit amet mauris mattis lacinia at a elit.
  272. [/border][/border][/border]
  273. [comment]----post contents end----[/comment]
  274.  
  275.  
  276. [comment]----footer----[/comment]
  277. [border=transparent; height:45px; width:100%; padding:5px 15px; box-sizing:border-box; background: var(--bg-1); flex-shrink:0; border-radius:0 0 10px 10px; display:flex; align-items:center; justify-content:flex-end;]
  278. [comment]---music player container----[/comment]
  279. [border=transparent; height:30px; width:235px; padding:0; overflow:hidden; position:relative;][border=transparent; height:100%; width:auto; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-1); opacity:0.15; font-size:13px; position:absolute; top:0; right:40px; z-index:1;][fa]fas fa-chevron-right[/fa][/border][border=transparent; height:47px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type: x mandatory; position:relative; z-index:2;][border=transparent; height:30px; width:fit-content; width:-moz-fit-content; padding:0; display:flex; flex-flow:row nowrap; align-items:center;]
  280.  
  281. [comment]----waves----[/comment]
  282. [border=transparent; height:18px; width:235px; padding:0 3px; box-sizing:border-box; display:flex; flex-flow:row-reverse nowrap; align-items:center; scroll-snap-align:end; flex-shrink:0; position:relative;][border=transparent; height:18px; width:18px; padding:0; background: var(--bg-1); flex-shrink:0; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--waves); background-size:cover;position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;
  283.  
  284. /*remove this line if you've edited bg-1*/ background: var(--color-2);
  285.  
  286. mix-blend-mode: multiply; position:absolute; top:0; left:0;][/border][/border][/border]
  287.  
  288. [comment]----actual media player----[/comment]
  289. [border=transparent; height:18px; width:18px; padding:0; position:absolute; right:0; top:0; overflow:hidden; opacity:0.1%;]
  290.  
  291. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  292. [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
  293. [media=soundcloud]https://soundcloud.com/l2shareexo3/baekhyun-cry-for-love[/media]
  294. [/border]
  295.  
  296. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  297. [border=transparent; height:500px; width:500px; margin-top:-177px; margin-left:-99px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  298. [media=googledrive]google file code here[/MEDIA]
  299. [/border]
  300.  
  301. [/border]
  302. [comment]----actual media player end----[/comment]
  303. [/border]
  304. [comment]----waves end----[/comment]
  305.  
  306. [comment]----song info----[/comment]
  307. [border=transparent; height:auto; max-height:13px; width:auto; max-width:198px; padding:0 2px 0 3px; box-sizing:border-box; scroll-snap-align:end; display:flex; flex-flow:row wrap; align-items:center; margin-left:15px; background: var(--bg-1); flex-shrink:0; overflow:hidden;]
  308. [comment]----song name----[/comment]
  309. [border=transparent; height:auto; flex:1 0; min-width:fit-content; min-width:-moz-fit-content; padding:0 0 0 1px; box-sizing:border-box; color: var(--h2); font-weight:bold; font-family: var(--header); letter-spacing:3px;
  310.  
  311. /*adjust this if your song title can't fit/looks weird. would advise only going up/down by 1px*/ font-size:12px;
  312.  
  313. line-height:100%; text-align:center; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  314.  
  315. ----* * * song title here----
  316.  
  317. [/comment]cry for love[/border]
  318.  
  319. [comment]----song artist----[/comment]
  320. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:0; width:16px; padding:0; border-top:1px solid var(--color-1); margin:0 10px; flex-shrink:0;][/border][border=transparent; height:auto; max-height:20px; width:auto; max-width:65px; padding:0; color: var(--h2); font-family: var(--header); letter-spacing:2px; font-size:9px; line-height:10px; text-align:center; text-transform:uppercase; opacity:0.8; overflow:hidden;][comment]
  321.  
  322. ----* * * song artist here----
  323.  
  324. [/comment]백현[/border]
  325. [/border]
  326.  
  327. [/border]
  328. [comment]----song info end----[/comment]
  329.  
  330. [/border][/border][/border]
  331. [comment]----music player container end----[/comment]
  332. [/border]
  333.  
  334. [comment]
  335. ----signature! do not remove
  336. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.3;color: var(--color-1); font-size:clamp(9px, 1.2vw, 10px); bottom:14px; left:17px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border]
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!