ooksie

seeing stars (uxie x howlingwoods)

Feb 18th, 2021 (edited)
204
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Just Another Hand]headers[/font]
  5. [font=Lato]body text[/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][border=transparent;
  10.  
  11. *background image (tiled) -- if you dont want a tiled bg, ctrl + f "main background" and follow the instructions there!;
  12. --bg: url('https://i.pinimg.com/474x/9e/60/2d/9e602dbe15b714cf64bbe166f3044d6d.jpg');
  13.  
  14. *textbox background;
  15. --t-bg: url('https://i.pinimg.com/originals/5d/4d/4a/5d4d4a32de34875bf5828a218023979f.jpg');
  16.  
  17. *titlebox + buttonbox + textbox colour;
  18. --color-1: #c48a4a;
  19.  
  20. *header background + button colour;
  21. --color-2: #23262d;
  22.  
  23. *title text colour;
  24. --h1: #23262d;
  25. *header text colour;
  26. --h2: #fff;
  27. *body text colour;
  28. --t-color: #fff;
  29. *button text colour;
  30. --b-t: #ffffff;
  31.  
  32. *fonts used;
  33. --header: 'Just Another Hand', display;
  34. --body: 'Lato', sans-serif;
  35.  
  36. height:fit-content; min-height:500px; width:100%; max-width:720px; padding:0; padding-bottom:20px; line-height:0; margin:auto; position:relative;][border=transparent; height:fit-content; min-height:500px; width:100%; max-width:720px; padding:30px 15px; box-sizing:border-box; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative;]
  37. [comment]----main background (ignore!)----[/comment]
  38. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg); position:absolute; top:0; left:0; z-index:1; pointer-events:none;
  39. /*edit this to choose zoom/size of background. <100% for tiled, cover for full*/ background-size: 55%;][/border]
  40.  
  41. [comment]----main content----[/comment]
  42. [border=transparent; height:fit-content; min-height:425px; width:100%; max-width:620px; padding:0 0 15px 0; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-end;]
  43.  
  44. [comment]----title----[/comment]
  45. [border=transparent; height:60px; width:clamp(88px, 100% - 7vw - 15px, 490px); padding:5px; box-sizing:border-box; position:relative; margin:0 auto auto 0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center; border-radius:15px; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.5; position:absolute; top:0; left:0; z-index:1;][/border]
  46. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-family: var(--header); font-size:clamp(30px, 10vw, 50px); text-align:center; line-height:100%; position:relative; z-index:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  47. ----* * * title here---
  48. [/comment]To See the Stars[/border]
  49. [/border]
  50. [comment]----title end----[/comment]
  51.  
  52. [comment]----music info----[/comment]
  53. [border=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:-5px; right:0; display:flex; flex-flow: row nowrap;]
  54. [border=transparent; height:fit-content; flex:1; padding:0 10px; box-sizing:border-box; text-align:right; color: var(--t-color); font-size:clamp(9px, 3vw, 13px); font-family: var(--body); line-height:100%;][comment]
  55. ----* * * music info here----
  56. [/comment][I]Song Name[/I] by Song Artist[/border]
  57. [border=transparent; height:10px; width:clamp(88px, 20vw, 115px); margin-left:10px; flex-shrink:0; padding:0; font-size:0;]filler thing. ignore[/border]
  58. [/border]
  59. [comment]----music info----[/comment]
  60.  
  61.  
  62. [comment]----tabs----[/comment]
  63. [border=transparent; height:225px; width:clamp(90px, 20vw, 105px); flex-shrink:0; padding:0; overflow:hidden; margin:0 0 80px 10px;][border=transparent; padding:0; line-height:73px; margin:-12px 0 0 0; letter-spacing:clamp(-15px, -3vw, 0px);][tabs]
  64.  
  65.  
  66. [comment]----tab one (post)----[/comment]
  67. [tab=a.][border=transparent; height:100%; width:100%; padding:0 0 10px 0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-start; pointer-events:none; letter-spacing:0; line-height:0;]
  68.  
  69. [comment]----tab contents----[/comment]
  70. [border=transparent; height:calc(82% - 10px); width:clamp(88px, 100% - 7vw - 15px, 490px); max-width:clamp(88px, 100% - 7vw - 15px, 490px); padding:20px; box-sizing:border-box; position:relative; border-radius:15px; overflow:hidden; pointer-events:auto;]
  71.  
  72. [comment]----textbox contents----[/comment]
  73. [border=transparent; height:100%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  74. ----* * * text starts here----
  75. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  76.  
  77. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.
  78. [/border][/border][/border]
  79. [comment]----textbox contents end----[/comment]
  80.  
  81. [comment]----textbox background----[/comment]
  82. [border=transparent; height:100%; width:100%; padding:0; background:var(--color-1); opacity:0.4; position:absolute; top:0; left:0; z-index:2;][/border]
  83. [border=transparent; height:100%; width:100%; padding:0; background: var(--t-bg), var(--color-1); background-size:cover; background-position:center; background-blend-mode:multiply; opacity:0.25; position:absolute; top:0; left:0; z-index:1;][/border]
  84.  
  85. [/border]
  86. [comment]----tab contents end----[/comment]
  87.  
  88. [comment]----button select (ignore!)----[/comment]
  89. [border=transparent; height:calc(82% - 10.3px); width:clamp(88px, 18vw, 115px); flex-shrink:0; padding:0; z-index:4; pointer-events:none; margin-left:15px;][border=transparent; height:100%; width:100%; padding:20px 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; justify-content:space-around; border-radius:20px; overflow:hidden; position:relative; z-index:3; font-size:clamp(25px, 7.5vw, 35px);]
  90.  
  91. [comment]----selected button----[/comment]
  92. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--b-t); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--color-2); position:relative; z-index:2; margin-bottom:auto; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  93. ----* * * button here----
  94. [/comment]Post[/border]
  95.  
  96. [comment]----filler button----[/comment]
  97. [border=transparent; height:55px; width:100%; padding:0;margin:auto 0;][/border]
  98. [comment]----filler button----[/comment]
  99. [border=transparent; height:55px; width:100%; padding:0;margin:auto 0;][/border]
  100. [comment]----filler button----[/comment]
  101. [border=transparent; height:55px; width:100%; padding:0; margin-top:auto;][/border]
  102.  
  103. [/border][/border]
  104. [comment]----button select end----[/comment]
  105. [/border][/tab]
  106. [comment]----tab one end----[/comment]
  107.  
  108.  
  109. [comment]----tab two (history)----[/comment]
  110. [tab=a.][border=transparent; height:100%; width:100%; padding:0 0 10px 0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-start; pointer-events:none; letter-spacing:0; line-height:0;]
  111.  
  112. [comment]----tab contents----[/comment]
  113. [border=transparent; height:calc(82% - 10px); width:clamp(88px, 100% - 7vw - 15px, 490px); max-width:clamp(88px, 100% - 7vw - 15px, 490px); padding:20px; box-sizing:border-box; position:relative; border-radius:15px; overflow:hidden; pointer-events:auto;]
  114.  
  115. [comment]----textbox contents----[/comment]
  116. [border=transparent; height:100%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  117. ----* * * text starts here----
  118. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  119.  
  120. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.
  121. [/border][/border][/border]
  122. [comment]----textbox contents end----[/comment]
  123.  
  124. [comment]----textbox background----[/comment]
  125. [border=transparent; height:100%; width:100%; padding:0; background:var(--color-1); opacity:0.4; position:absolute; top:0; left:0; z-index:2;][/border]
  126. [border=transparent; height:100%; width:100%; padding:0; background: var(--t-bg), var(--color-1); background-size:cover; background-position:center; background-blend-mode:multiply; opacity:0.25; position:absolute; top:0; left:0; z-index:1;][/border]
  127.  
  128. [/border]
  129. [comment]----tab contents end----[/comment]
  130.  
  131. [comment]----button select (ignore!)----[/comment]
  132. [border=transparent; height:calc(82% - 10.3px); width:clamp(88px, 18vw, 115px); flex-shrink:0; padding:0; z-index:4; pointer-events:none; margin-left:15px;][border=transparent; height:100%; width:100%; padding:20px 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; justify-content:space-around; border-radius:20px; overflow:hidden; position:relative; z-index:3; font-size:clamp(25px, 7.5vw, 35px);]
  133.  
  134. [comment]----filler button----[/comment]
  135. [border=transparent; height:55px; width:100%; padding:0;margin-bottom:auto;][/border]
  136.  
  137. [comment]----selected button----[/comment]
  138. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--b-t); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--color-2); position:relative; z-index:2; margin:auto 0; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  139. ----* * * button here----
  140. [/comment]History[/border]
  141.  
  142. [comment]----filler button----[/comment]
  143. [border=transparent; height:55px; width:100%; padding:0;margin:auto 0;][/border]
  144. [comment]----filler button----[/comment]
  145. [border=transparent; height:55px; width:100%; padding:0; margin-top:auto;][/border]
  146.  
  147. [/border][/border]
  148. [comment]----button select end----[/comment]
  149. [/border][/tab]
  150. [comment]----tab two end----[/comment]
  151.  
  152.  
  153. [comment]----tab three (lore)----[/comment]
  154. [tab=a.][border=transparent; height:100%; width:100%; padding:0 0 10px 0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:flex-start; pointer-events:none; letter-spacing:0; line-height:0;]
  155.  
  156. [comment]----tab contents----[/comment]
  157. [border=transparent; height:calc(82% - 10px); width:clamp(88px, 100% - 7vw - 15px, 490px); max-width:clamp(88px, 100% - 7vw - 15px, 490px); padding:20px; box-sizing:border-box; position:relative; border-radius:15px; overflow:hidden; pointer-events:auto;]
  158.  
  159. [comment]----textbox contents----[/comment]
  160. [border=transparent; height:100%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  161.  
  162. [comment]----copy this whole thing to make a new section!----[/comment]
  163. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:15px;]
  164. [comment]----section header----[/comment]
  165. [border=transparent; height:fit-content; width:100%; padding:5px; box-sizing:border-box; background: var(--color-2); text-align:center; color: var(--h2); font-family: var(--header); font-size:clamp(20px, 8vw, 42px); line-height:100%; margin-bottom:11px; letter-spacing:clamp(0px, 1vw, 1px); position:sticky; top:0;][comment]
  166. ----* * * section header here----
  167. [/comment]Header Text[/border]
  168.  
  169. [comment]----section contents----[/comment]
  170. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  171. ----* * * text starts here----
  172. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  173.  
  174. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.[/border]
  175. [/border]
  176. [comment]----copy me too!----[/comment]
  177.  
  178. [comment]----copy this whole thing to make a new section!----[/comment]
  179. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:15px;]
  180. [comment]----section header----[/comment]
  181. [border=transparent; height:fit-content; width:100%; padding:5px; box-sizing:border-box; background: var(--color-2); text-align:center; color: var(--h2); font-family: var(--header); font-size:clamp(20px, 8vw, 42px); line-height:100%; margin-bottom:11px; letter-spacing:clamp(0px, 1vw, 1px); position:sticky; top:0;][comment]
  182. ----* * * section header here----
  183. [/comment]Header Text[/border]
  184.  
  185. [comment]----section contents----[/comment]
  186. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  187. ----* * * text starts here----
  188. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  189.  
  190. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.[/border]
  191. [/border]
  192. [comment]----copy me too!----[/comment]
  193.  
  194. [comment]----copy this whole thing to make a new section!----[/comment]
  195. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:15px;]
  196. [comment]----section header----[/comment]
  197. [border=transparent; height:fit-content; width:100%; padding:5px; box-sizing:border-box; background: var(--color-2); text-align:center; color: var(--h2); font-family: var(--header); font-size:clamp(20px, 8vw, 42px); line-height:100%; margin-bottom:11px; letter-spacing:clamp(0px, 1vw, 1px); position:sticky; top:0;][comment]
  198. ----* * * section header here----
  199. [/comment]Header Text[/border]
  200.  
  201. [comment]----section contents----[/comment]
  202. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  203. ----* * * text starts here----
  204. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  205.  
  206. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.[/border]
  207. [/border]
  208. [comment]----copy me too!----[/comment]
  209.  
  210. [comment]----copy this whole thing to make a new section!----[/comment]
  211. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:15px;]
  212. [comment]----section header----[/comment]
  213. [border=transparent; height:fit-content; width:100%; padding:5px; box-sizing:border-box; background: var(--color-2); text-align:center; color: var(--h2); font-family: var(--header); font-size:clamp(20px, 8vw, 42px); line-height:100%; margin-bottom:11px; letter-spacing:clamp(0px, 1vw, 1px); position:sticky; top:0;][comment]
  214. ----* * * section header here----
  215. [/comment]Header Text[/border]
  216.  
  217. [comment]----section contents----[/comment]
  218. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  219. ----* * * text starts here----
  220. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  221.  
  222. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.[/border]
  223. [/border]
  224. [comment]----copy me too!----[/comment]
  225.  
  226. [comment]----copy this whole thing to make a new section!----[/comment]
  227. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:15px;]
  228. [comment]----section header----[/comment]
  229. [border=transparent; height:fit-content; width:100%; padding:5px; box-sizing:border-box; background: var(--color-2); text-align:center; color: var(--h2); font-family: var(--header); font-size:clamp(20px, 8vw, 42px); line-height:100%; margin-bottom:11px; letter-spacing:clamp(0px, 1vw, 1px); position:sticky; top:0;][comment]
  230. ----* * * section header here----
  231. [/comment]Header Text[/border]
  232.  
  233. [comment]----section contents----[/comment]
  234. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; text-align:justify; line-height:16.5px;][comment]
  235. ----* * * text starts here----
  236. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, lacus elementum placerat volutpat, sapien sem pretium enim, eget varius nibh erat in nulla. Praesent sit amet mauris lobortis odio sodales mollis eget vitae metus. Sed pulvinar felis ut hendrerit luctus. In dignissim facilisis lectus a vulputate. Proin in cursus odio. Vivamus interdum laoreet congue. Sed sollicitudin nisi ac nibh hendrerit efficitur. Fusce ultricies, sem sed mattis blandit, sem elit placerat elit, at pretium lectus enim non dui. Etiam nulla leo, luctus dignissim molestie quis, suscipit in ipsum. In et egestas leo, vitae bibendum arcu. Donec accumsan a leo vitae ullamcorper. Cras arcu nisl, vehicula eu ligula id, porttitor vulputate justo. Nulla imperdiet auctor lacinia.
  237.  
  238. Quisque magna neque, efficitur eu ullamcorper sit amet, congue a lacus. Integer malesuada, enim placerat auctor blandit, augue eros imperdiet libero, eget convallis tellus ipsum vel augue. Sed imperdiet gravida tortor non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pulvinar nulla arcu, eu vehicula metus pretium eget. Sed porttitor dui bibendum, convallis enim imperdiet, rhoncus ligula. Vivamus mollis ornare lacus, sit amet ultrices eros efficitur nec. Nunc venenatis purus vitae urna finibus, et interdum ante pulvinar. Pellentesque ut est egestas, ullamcorper nisi vitae, varius massa. Curabitur ligula libero, commodo quis pharetra in, malesuada sed dolor. Maecenas in condimentum ipsum. Praesent non sapien sit amet lectus dapibus malesuada sed id nunc. Vestibulum elementum augue ex, at fermentum ipsum viverra ut. Ut enim est, finibus posuere augue in, cursus porttitor magna. Pellentesque nec magna nec urna commodo congue id vitae orci.[/border]
  239. [/border]
  240. [comment]----copy me too!----[/comment]
  241.  
  242. [/border][/border]
  243. [comment]----textbox contents end----[/comment]
  244.  
  245. [comment]----textbox background----[/comment]
  246. [border=transparent; height:100%; width:100%; padding:0; background:var(--color-1); opacity:0.4; position:absolute; top:0; left:0; z-index:2;][/border]
  247. [border=transparent; height:100%; width:100%; padding:0; background: var(--t-bg), var(--color-1); background-size:cover; background-position:center; background-blend-mode:multiply; opacity:0.25; position:absolute; top:0; left:0; z-index:1;][/border]
  248.  
  249. [/border]
  250. [comment]----tab contents end----[/comment]
  251.  
  252. [comment]----button select (ignore!)----[/comment]
  253. [border=transparent; height:calc(82% - 10.3px); width:clamp(88px, 18vw, 115px); flex-shrink:0; padding:0; z-index:4; pointer-events:none; margin-left:15px;][border=transparent; height:100%; width:100%; padding:20px 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; justify-content:space-around; border-radius:20px; overflow:hidden; position:relative; z-index:3; font-size:clamp(25px, 7.5vw, 35px);]
  254.  
  255.  
  256. [comment]----filler button----[/comment]
  257. [border=transparent; height:55px; width:100%; padding:0;margin-bottom:auto;][/border]
  258. [comment]----filler button----[/comment]
  259. [border=transparent; height:55px; width:100%; padding:0;margin:auto 0;][/border]
  260.  
  261. [comment]----selected button----[/comment]
  262. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--b-t); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--color-2); position:relative; z-index:2; margin:auto 0; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  263. ----* * * button here----
  264. [/comment]Lore[/border]
  265.  
  266. [comment]----filler button----[/comment]
  267. [border=transparent; height:55px; width:100%; padding:0; margin-top:auto;][/border]
  268.  
  269. [/border][/border]
  270. [comment]----button select end----[/comment]
  271. [/border][/tab]
  272. [comment]----tab three end----[/comment]
  273.  
  274.  
  275. [/tabs][/border][/border]
  276. [comment]----tabs end----[/comment]
  277.  
  278. [comment]----tabs cover----[/comment]
  279. [border=transparent; height:calc(80% - 10px); width:clamp(88px, 20vw, 115px); flex-shrink:0; padding:0; position:absolute; bottom:10px; right:0; z-index:2; pointer-events:none;][border=transparent; height:100%; width:100%; padding:20px 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; justify-content:space-around; border-radius:20px; overflow:hidden; position:relative; font-size:clamp(25px, 7.5vw, 35px);]
  280.  
  281. [comment]----button----[/comment]
  282. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--color-2); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--b-t); position:relative; z-index:2; margin-bottom:auto; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  283. ----* * * button here----
  284. [/comment]Post[/border]
  285.  
  286. [comment]----button----[/comment]
  287. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--color-2); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--b-t); position:relative; z-index:2; margin:auto 0; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  288. ----* * * button here----
  289. [/comment]History[/border]
  290.  
  291. [comment]----button----[/comment]
  292. [border=transparent; height:55px; width:100%; padding:10px 0; box-sizing:border-box; background:var(--color-2); border-radius:15px; line-height:100%; text-align:center; font-family: var(--header); color: var(--b-t); position:relative; z-index:2; margin:auto 0; display:flex; align-items:center; justify-content:center; white-space:nowrap;][comment]
  293. ----* * * button here----
  294. [/comment]Lore[/border]
  295.  
  296. [comment]----music player----[/comment]
  297. [border=transparent; height:55px; width:100%; padding:5px 0; box-sizing:border-box; background:var(--color-2); border-radius:15px; display:flex; flex-flow: column nowrap; color: var(--b-t); position:relative; z-index:2; align-items:center; justify-content:center; overflow:hidden; margin-top:auto;]
  298. [comment]----music title----[/comment]
  299. [border=transparent; height:fit-content; width:100%; padding:0; line-height:100%; text-align:center; font-family: var(--header); font-size:22px; pointer-events:auto; white-space:nowrap;][comment]
  300. ----* * * titlehere----
  301. [/comment]Music[/border]
  302.  
  303. [comment]----play button----[/comment]
  304. [border=transparent; height:fit-content; width:100%; padding:5px 2px 0 2px; box-sizing:border-box; background: var(--color-2); position:relative; z-index:2; line-height:100%; text-align:center; font-size:16px; letter-spacing:2px; pointer-events:none;][fa]fas fa-play-circle[/fa] [fa]fas fa-pause-circle[/fa][/border]
  305.  
  306. [comment]----actual media player----[/comment]
  307. [border=transparent; height:14px; width:100%; padding:0; position:absolute; bottom:7.5px; left:0; z-index:1; overflow:hidden; pointer-events:auto;]
  308.  
  309. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  310. [border=transparent; height:80px; width:180px; padding:0; margin-top:-15px; margin-left:clamp(-25px, -3vw, -20px); position:relative; left:clamp(10px, 5vw, 38px);]
  311. [media=soundcloud]https://soundcloud.com/ellacos-v/ost-covered-by-yen-reve[/media]
  312. [/border]
  313.  
  314. [/border]
  315. [comment]----actual media player end----[/comment]
  316.  
  317. [/border]
  318. [comment]----music player end----[/comment]
  319.  
  320. [comment]----tabs cover background----[/comment]
  321. [border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); position:absolute; top:0; left:0; z-index:1; opacity:0.5;][/border]
  322.  
  323. [/border][/border]
  324. [comment]----tabs cover end----[/comment]
  325.  
  326.  
  327. [/border][/border][comment]----signature! (do not remove!)-----
  328. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%; color: var(--color-1);][font=Open Sans]♡design by howlingwoods, coded by uxie♡[/font][/bg][/border]
RAW Paste Data Copied