API tools faq
paste
Advertisement
ooksie

new crazy (04 ver.)

ooksie
May 9th, 2022 (edited)
322
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.62 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Work Sans]headers[/font]
  5. [font=Days One]buttons[/font]
  6. [font=DM Sans]body[/font]
  7.  
  8. 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 ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11.  
  12. /*background colour*/
  13. --bg-color: #0c0c0c;
  14.  
  15. /*main accent colour*/
  16. --color-1: #fff;
  17. /*secondary accent colour (usually on images*/
  18. --color-2: var(--bg-color);
  19.  
  20. /*text colour*/
  21. --t-color: #f9f9f9;
  22.  
  23. /*fonts used*/
  24. --header: 'Work Sans', sans-serif;
  25. --button: 'Days One', sans-serif;
  26. --body: 'DM Sans', sans-serif;
  27.  
  28. /*left icon*/
  29. --img-1: url('https://i.imgur.com/jYqFHGh.gif');
  30.  
  31.  
  32. height:auto; width:100%; padding:0; margin:20px 0 30px 0; overflow-x:auto; overflow-y:hidden; line-height:0;][border=transparent; height:auto; width:100%; max-width:540px; min-width:300px; padding:clamp(14px, -40px + 12vw, 21px) clamp(25px, -40px + 12vw, 38px); padding-bottom:24px; box-sizing:border-box; background: var(--bg-color); position:relative; margin:0 auto; display:flex; flex-flow:column nowrap; align-items:center; border-radius:1px; --m: 11px;
  33.  
  34. /*remove the following if you want to use colours!*/ -webkit-filter: grayscale(1);]
  35. [comment]----title----[/comment]
  36. [border=transparent; height:55px; width:100%; padding:4px 18px 20px 18px; box-sizing:border-box; position:relative;][border=transparent; height:100%; width:100%; padding:0; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0;][border=transparent; height:100%; width:75%; padding:0; border-bottom:6px solid var(--color-1);][/border][/border][border=transparent; height:auto; width:100%; padding:0; position:relative; z-index:2; color: var(--color-1); font-weight:bold; -webkit-text-stroke:1px var(--color-1); letter-spacing:2.5px; font-family: var(--header); line-height:100%; font-size:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; text-transform:uppercase;][comment]
  37.  
  38. ----* * * title here----
  39.  
  40. [/comment]a cool title[/border]
  41. [/border]
  42. [comment]----title end----[/comment]
  43.  
  44. [comment]----main container----[/comment]
  45. [border=transparent; height:auto; min-height:320px; width:100%; padding:0; margin-top:18px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative;]
  46.  
  47. [comment]----left/top----[/comment]
  48. [border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; pointer-events:none;][border=transparent; height:clamp(190px, -50px + 43vw, 240px); flex:43; min-width:170px; max-width:200px; padding:0; box-sizing:border-box; margin: var(--m); display:flex; flex-flow:column nowrap; align-items:center; background: var(--bg-color); margin-bottom:clamp(0px, -40px + 11vw, 21px);]
  49.  
  50. [comment]----image----[/comment]
  51. [border=transparent; flex:1; width:100%; padding:0; position:relative;][border=transparent; height:45px; width:45px; padding:0; background: var(--color-1); position:absolute; top:0; left:0;][/border][border=transparent; height:60px; width:60px; padding:0; background: var(--color-1); position:absolute; bottom:0; right:0;][/border][border=transparent; height:calc(100% - 16px); width:calc(100% - 16px); padding:0; background: var(--img-1), var(--color-2); background-size:cover; background-repeat:no-repeat;
  52.  
  53. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  54.  
  55. display:flex; align-items:flex-end; position:relative; margin:8px;]
  56.  
  57. [comment]----name----[/comment]
  58. [border=transparent; height:auto; width:100%; padding:6px 8px; box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.8; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:auto; width:100%; padding:0; font-family: var(--header); letter-spacing:1.5px; font-size:12px; text-transform:uppercase; -webkit-text-stroke:0.5px var(--color-1); color: var(--color-1); position:relative; z-index:2; text-align:center; line-height:14px; pointer-events:auto;][comment]
  59.  
  60. ----* * * name here----
  61.  
  62. [/comment]username[/border][/border]
  63. [/border]
  64. [comment]----music player----[/comment]
  65. [border=transparent; height:auto; width:auto; padding:0; position:absolute; top:-4px; right:8px; display:flex; flex-flow:row-reverse nowrap; align-items:center;][border=transparent; height:auto; flex:1; padding:0; color: var(--color-1); font-size:8px; font-family: var(--header); letter-spacing:0.5px; text-transform:uppercase; line-height:100%; opacity:0.85;]now playing[/border][border=transparent; height:auto; width:auto; padding:0; position:relative; opacity:0.95;][border=transparent; height:auto; width:auto; padding:0 0 0.3px 0; box-sizing:border-box; position:relative; z-index:2; color: var(--color-1); font-size:5.5px; line-height:100%; pointer-events:none; margin-right:6px;][fa]fas fa-play[/fa][/border]
  66. [comment]----actual media player----[/comment]
  67. [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;]
  68.  
  69. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  70. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0; /*remove this to use me, and add it to the other*/ display:none;]
  71. [media=soundcloud]soundcloud link[/media]
  72. [/border]
  73.  
  74. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  75. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;]
  76. [media=googledrive]1aw4rab_7NBp4ZNiN91sECNwuqjpZc0lq[/MEDIA]
  77. [/border]
  78.  
  79. [/border][/border]
  80. [comment]----actual media player end----[/comment]
  81. [/border][/border]
  82. [comment]----music player end----[/comment]
  83. [/border]
  84. [comment]----image end----[/comment]
  85.  
  86. [comment]----tabs cover----[/comment]
  87. [border=transparent; height:20px; width:170px; padding:0; display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; margin-top:20px; flex-shrink:0;]
  88. [comment]----button----[/comment]
  89. [border=transparent; height:auto; width:auto; padding:0 2px 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family: var(--button); font-size:20px; letter-spacing:2px; color: transparent; -webkit-text-stroke:0.4px var(--color-1); line-height:100%; flex-shrink:0;]01[/border]
  90. [border=transparent; height:100%; flex:1; padding:0; flex-shrink:0; pointer-events:auto;][/border]
  91.  
  92. [comment]----button----[/comment]
  93. [border=transparent; height:auto; width:auto; padding:0 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family: var(--button); font-size:20px; letter-spacing:2px; color: transparent; -webkit-text-stroke:0.4px var(--color-1); line-height:100%; flex-shrink:0;]02[/border]
  94. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  95.  
  96. [comment]----button----[/comment]
  97. [border=transparent; height:auto; width:auto; padding:0 2px 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family: var(--button); font-size:20px; letter-spacing:2px; color: transparent; -webkit-text-stroke:0.4px var(--color-1); line-height:100%; flex-shrink:0; margin-right:-2px;]03[/border]
  98. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  99.  
  100. [comment]----button----[/comment]
  101. [border=transparent; height:auto; width:auto; padding:0 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family: var(--button); font-size:20px; letter-spacing:2px; color: transparent; -webkit-text-stroke:0.4px var(--color-1); line-height:100%; flex-shrink:0;]04[/border]
  102. [/border]
  103. [comment]----tabs cover end----[/comment]
  104.  
  105. [/border][border=transparent; height:304px; flex:57; min-width:230px; padding:0; margin: var(--m)][/border][/border]
  106. [comment]----left/top end----[/comment]
  107.  
  108.  
  109. [comment]----tabs----[/comment]
  110. [border=transparent; height:clamp(190px, -50px + 43vw, 230px); flex:42; min-width:170px; max-width:200px; padding:0; box-sizing:border-box; margin: var(--m); display:flex; align-items:flex-end; justify-content:center; margin-bottom:clamp(0px, -40px + 11vw, 20px);][border=transparent; height:20px; width:170px; padding:0; overflow:hidden; margin-bottom:1px;][border=transparent; padding:0; margin:0 -40px 0 -43px; letter-spacing:-50px;][tabs]
  111.  
  112. [comment]----about tab----[/comment]
  113. [tab=.][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; pointer-events:none;][border=transparent; height:clamp(190px, -50px + 43vw, 240px); flex:43; min-width:170px; max-width:200px; padding:0; margin: var(--m); ][/border][border=transparent; height:304px; flex:57; min-width:230px; padding:0; box-sizing:border-box; margin: var(--m); margin-right:clamp(2px, var(--m) + 50px - 9vw, var(--m)); overflow:hidden; pointer-events:auto; letter-spacing:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; --m-t: 23px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-t) * -1);][/border]
  114.  
  115. [comment]----copy this whole thing to make a new section (info tags)----[/comment]
  116. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  117. [comment]----title----[/comment]
  118. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  119.  
  120. ----* * * title icon here----
  121.  
  122. [/comment][fa]fal fa-star-christmas[/fa][/border]
  123. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  124.  
  125. ----* * * section title here----
  126.  
  127. [/comment]about me[/border]
  128. [/border]
  129. [comment]----title end----[/comment]
  130.  
  131. [comment]----section contents----[/comment]
  132. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-10px;][/border]
  133.  
  134. [comment]----copy this whole thing to get another piece of info----[/comment]
  135. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  136. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:50%; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin-right:15px;][comment]
  137.  
  138. ----* * * info title here----
  139.  
  140. [/comment]call me[/border]
  141. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); letter-spacing:0.5px;][comment]
  142.  
  143. ----* * * info contents here----
  144.  
  145. [/comment]answer[/border]
  146. [/border]
  147. [comment]----copy me too!----[/comment]
  148.  
  149. [comment]----copy this whole thing to get another piece of info----[/comment]
  150. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  151. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:50%; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin-right:15px;][comment]
  152.  
  153. ----* * * info title here----
  154.  
  155. [/comment]pronouns[/border]
  156. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); letter-spacing:0.5px;][comment]
  157.  
  158. ----* * * info contents here----
  159.  
  160. [/comment]answer[/border]
  161. [/border]
  162. [comment]----copy me too!----[/comment]
  163.  
  164. [comment]----copy this whole thing to get another piece of info----[/comment]
  165. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  166. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:50%; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin-right:15px;][comment]
  167.  
  168. ----* * * info title here----
  169.  
  170. [/comment]timezone[/border]
  171. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); letter-spacing:0.5px;][comment]
  172.  
  173. ----* * * info contents here----
  174.  
  175. [/comment]answer[/border]
  176. [/border]
  177. [comment]----copy me too!----[/comment]
  178.  
  179. [comment]----copy this whole thing to get another piece of info----[/comment]
  180. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  181. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:50%; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin-right:15px;][comment]
  182.  
  183. ----* * * info title here----
  184.  
  185. [/comment]age range[/border]
  186. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); letter-spacing:0.5px;][comment]
  187.  
  188. ----* * * info contents here----
  189.  
  190. [/comment]answer[/border]
  191. [/border]
  192. [comment]----copy me too!----[/comment]
  193.  
  194. [comment]----copy this whole thing to get another piece of info----[/comment]
  195. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  196. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:50%; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin-right:15px;][comment]
  197.  
  198. ----* * * info title here----
  199.  
  200. [/comment]question[/border]
  201. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); letter-spacing:0.5px;][comment]
  202.  
  203. ----* * * info contents here----
  204.  
  205. [/comment]answer[/border]
  206. [/border]
  207. [comment]----copy me too!----[/comment]
  208.  
  209. [comment]----copy this whole thing to get another piece of text----[/comment]
  210. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-size:12px; line-height:16px; font-family: var(--body); text-align:justify; margin-top:20px;][comment]
  211.  
  212. ----* * * text starts here----
  213.  
  214. [/comment]if you want to mix some text in here too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue.
  215. [/border]
  216. [comment]----copy me too!----[/comment]
  217. [/border]
  218. [comment]----section contents end----[/comment]
  219. [/border]
  220. [comment]----copy me too! (section)----[/comment]
  221.  
  222. [comment]----copy this whole thing to make a new section (text)----[/comment]
  223. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  224. [comment]----title----[/comment]
  225. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  226.  
  227. ----* * * title icon here----
  228.  
  229. [/comment][fa]fal fa-star-christmas[/fa][/border]
  230. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  231.  
  232. ----* * * section title here----
  233.  
  234. [/comment]about you[/border]
  235. [/border]
  236. [comment]----title end----[/comment]
  237.  
  238. [comment]----section contents----[/comment]
  239. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box; color: var(--t-color); font-size:12px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  240.  
  241. ----* * * text starts here----
  242.  
  243. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue. Mauris et accumsan lorem, quis tempus orci. Ut erat velit, blandit vel massa at, fermentum efficitur purus. Integer nec ante ac elit bibendum maximus. Donec ullamcorper arcu sed magna tincidunt consectetur vel eu sem. Fusce nibh leo, commodo in efficitur at, semper quis nisl.
  244.  
  245. Proin condimentum mauris in augue consequat, vitae molestie risus fringilla. Vivamus ut facilisis nibh. Duis tincidunt orci eu cursus ullamcorper. Sed iaculis venenatis magna nec ultricies. Cras fringilla urna nibh, iaculis faucibus metus sagittis quis. Curabitur vel nisi sit amet nunc congue euismod et quis elit. Duis lacinia sit amet neque eu auctor. Sed malesuada sodales lacus, vitae tempus eros tincidunt nec. Aenean aliquet sem risus, ac consectetur erat iaculis quis.
  246. [/border]
  247. [comment]----section contents end----[/comment]
  248. [/border]
  249. [comment]----copy me too! (section)----[/comment]
  250.  
  251. [/border][/border][/border][/border][/tab]
  252. [comment]----about tab end----[/comment]
  253.  
  254.  
  255. [comment]----rules tab----[/comment]
  256. [tab=.][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; pointer-events:none;][border=transparent; height:clamp(190px, -50px + 43vw, 240px); flex:43; min-width:170px; max-width:200px; padding:0; margin: var(--m); ][/border][border=transparent; height:304px; flex:57; min-width:230px; padding:0; box-sizing:border-box; margin: var(--m); margin-right:clamp(2px, var(--m) + 50px - 9vw, var(--m)); overflow:hidden; pointer-events:auto; letter-spacing:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; --m-t: 23px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-t) * -1);][/border]
  257.  
  258. [comment]----copy this whole thing to make a new section (rules/list)----[/comment]
  259. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  260. [comment]----title----[/comment]
  261. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  262.  
  263. ----* * * title icon here----
  264.  
  265. [/comment][fa]fal fa-star-christmas[/fa][/border]
  266. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  267.  
  268. ----* * * section title here----
  269.  
  270. [/comment]rules[/border]
  271. [/border]
  272. [comment]----title end----[/comment]
  273.  
  274. [comment]----section contents----[/comment]
  275. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-16px;][/border]
  276.  
  277. [comment]----copy this whole thing to add another rule----[/comment]
  278. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); text-align:justify; font-size:12px; font-family: var(--body); line-height:16px; margin-top:16px;][border=transparent; height:32px; width:auto; padding:2px 15px 0 0; box-sizing:border-box; float:left; display:flex; align-items:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:11px; font-weight:bold; letter-spacing:1px;][comment]
  279.  
  280. ----* * * info title here----
  281.  
  282. [/comment]rule one[/border][/border][comment]
  283.  
  284. ----* * * text starts here----
  285.  
  286. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue.
  287. [/border]
  288. [comment]----copy me too!----[/comment]
  289.  
  290. [comment]----copy this whole thing to add another rule----[/comment]
  291. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); text-align:justify; font-size:12px; font-family: var(--body); line-height:16px; margin-top:16px;][border=transparent; height:32px; width:auto; padding:2px 15px 0 0; box-sizing:border-box; float:left; display:flex; align-items:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:11px; font-weight:bold; letter-spacing:1px;][comment]
  292.  
  293. ----* * * info title here----
  294.  
  295. [/comment]rule two[/border][/border][comment]
  296.  
  297. ----* * * text starts here----
  298.  
  299. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue.
  300. [/border]
  301. [comment]----copy me too!----[/comment]
  302.  
  303. [comment]----copy this whole thing to add another rule----[/comment]
  304. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); text-align:justify; font-size:12px; font-family: var(--body); line-height:16px; margin-top:16px;] [border=transparent; height:32px; width:auto; padding:2px 15px 0 0; box-sizing:border-box; float:left; display:flex; align-items:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:11px; font-weight:bold; letter-spacing:1px;][comment]
  305.  
  306. ----* * * info title here----
  307.  
  308. [/comment]rule three[/border][/border][comment]
  309.  
  310. ----* * * text starts here----
  311.  
  312. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue.
  313. [/border]
  314. [comment]----copy me too!----[/comment]
  315.  
  316. [/border]
  317. [comment]----section contents end----[/comment]
  318. [/border]
  319. [comment]----copy me too! (section)----[/comment]
  320.  
  321. [/border][/border][/border][/border][/tab]
  322. [comment]----rules tab end----[/comment]
  323.  
  324.  
  325. [comment]----vibes tab----[/comment]
  326. [tab=.][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; pointer-events:none;][border=transparent; height:clamp(190px, -50px + 43vw, 240px); flex:43; min-width:170px; max-width:200px; padding:0; margin: var(--m); ][/border][border=transparent; height:304px; flex:57; min-width:230px; padding:0; box-sizing:border-box; margin: var(--m); margin-right:clamp(2px, var(--m) + 50px - 9vw, var(--m)); overflow:hidden; pointer-events:auto; letter-spacing:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; --m-t: 23px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-t) * -1);][/border]
  327.  
  328. [comment]----copy this whole thing to make a new section (gallery)----[/comment]
  329. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  330. [comment]----title----[/comment]
  331. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  332.  
  333. ----* * * title icon here----
  334.  
  335. [/comment][fa]fal fa-star-christmas[/fa][/border]
  336. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  337.  
  338. ----* * * section title here----
  339.  
  340. [/comment]moodboard[/border]
  341. [/border]
  342. [comment]----title end----[/comment]
  343.  
  344. [comment]----section contents----[/comment]
  345. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box; display:flex; flex-flow:row wrap; --m-g: 5px;]
  346.  
  347. [comment]----copy this whole thing to add another image----[/comment]
  348. [border=transparent; flex:1; min-width:clamp(50px, 28%, 80px); padding:0; flex-shrink:0; margin: var(--m-g);][border=transparent; padding:0; padding-top:100%;
  349.  
  350. /*add image URL here*/ background: URL('https://64.media.tumblr.com/c2a1dbcc55152770eb8c7a9a778392fd/ba7f717bf4e2197a-24/s540x810/8ae400f1d770aadfbae6d5c42540dce2a0f75b1e.gif');
  351.  
  352. /*adjust the following to adjust the cropping of the image*/ background-position:50% 50%;
  353.  
  354. background-size:cover; background-repeat:no-repeat;][/border][/border]
  355. [comment]----copy me too!----[/comment]
  356.  
  357. [comment]----copy this whole thing to add another image----[/comment]
  358. [border=transparent; flex:1; min-width:clamp(50px, 28%, 80px); padding:0; flex-shrink:0; margin: var(--m-g);][border=transparent; padding:0; padding-top:100%;
  359.  
  360. /*add image URL here*/ background: URL('https://64.media.tumblr.com/336c6fc6216f6f1a6c354725383c5dde/e2fad890570f7c81-9e/s540x810/f8bcde8c833189ebb7b31b9b9225ba38eed2d5d6.gif');
  361.  
  362. /*adjust the following to adjust the cropping of the image*/ background-position:50% 50%;
  363.  
  364. background-size:cover; background-repeat:no-repeat;][/border][/border]
  365. [comment]----copy me too!----[/comment]
  366.  
  367. [comment]----copy this whole thing to add another image----[/comment]
  368. [border=transparent; flex:1; min-width:clamp(50px, 28%, 80px); padding:0; flex-shrink:0; margin: var(--m-g);][border=transparent; padding:0; padding-top:100%;
  369.  
  370. /*add image URL here*/ background: URL('https://64.media.tumblr.com/b7aaaaef648571da7a63179a0b9b4f14/ba7f717bf4e2197a-07/s540x810/122e553983d6172608fc09702fdbede62af99149.gif');
  371.  
  372. /*adjust the following to adjust the cropping of the image*/ background-position:50% 50%;
  373.  
  374. background-size:cover; background-repeat:no-repeat;][/border][/border]
  375. [comment]----copy me too!----[/comment]
  376.  
  377. [comment]----copy this whole thing to add another image----[/comment]
  378. [border=transparent; flex:1; min-width:clamp(50px, 28%, 80px); padding:0; flex-shrink:0; margin: var(--m-g);][border=transparent; padding:0; padding-top:100%;
  379.  
  380. /*add image URL here*/ background: URL('https://64.media.tumblr.com/0fbaa2b0c1033c6927faa67d0d2a6f11/e2fad890570f7c81-42/s540x810/f7119cf384ee9abd23a7e2c7d0e791529b802022.gif');
  381.  
  382. /*adjust the following to adjust the cropping of the image*/ background-position:50% 50%;
  383.  
  384. background-size:cover; background-repeat:no-repeat;][/border][/border]
  385. [comment]----copy me too!----[/comment]
  386.  
  387. [comment]----copy this whole thing to add another image----[/comment]
  388. [border=transparent; flex:1; min-width:clamp(50px, 28%, 80px); padding:0; flex-shrink:0; margin: var(--m-g);][border=transparent; padding:0; padding-top:100%;
  389.  
  390. /*add image URL here*/ background: URL('https://64.media.tumblr.com/fbcec3d02361d2a48c8a6265d6b431ab/e2fad890570f7c81-b0/s540x810/e240ceb4081879d9548e53ddc6f0be1c677e125a.gif');
  391.  
  392. /*adjust the following to adjust the cropping of the image*/ background-position:50% 50%;
  393.  
  394. background-size:cover; background-repeat:no-repeat;][/border][/border]
  395. [comment]----copy me too!----[/comment]
  396.  
  397. [/border]
  398. [comment]----section contents end----[/comment]
  399. [/border]
  400. [comment]----copy me too! (section)----[/comment]
  401.  
  402. [comment]----copy this whole thing to make a new section (short list)----[/comment]
  403. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  404. [comment]----title----[/comment]
  405. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  406.  
  407. ----* * * title icon here----
  408.  
  409. [/comment][fa]fal fa-star-christmas[/fa][/border]
  410. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  411.  
  412. ----* * * section title here----
  413.  
  414. [/comment]wordbank[/border]
  415. [/border]
  416. [comment]----title end----[/comment]
  417.  
  418. [comment]----section contents----[/comment]
  419. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box; color: var(--t-color); font-size:12px; font-family: var(--body); display:flex; flex-flow:row wrap; justify-content:center; margin-top:-3px; --m-w:3px 4px;]
  420.  
  421. [comment]----copy this whole thing to add another tag----[/comment]
  422. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  423.  
  424. ----* * * tag here----
  425.  
  426. [/comment]idea[/border]
  427. [comment]----copy me too!----[/comment]
  428.  
  429. [comment]----copy this whole thing to add another tag----[/comment]
  430. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  431.  
  432. ----* * * tag here----
  433.  
  434. [/comment]ideas[/border]
  435. [comment]----copy me too!----[/comment]
  436.  
  437. [comment]----copy this whole thing to add another tag----[/comment]
  438. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  439.  
  440. ----* * * tag here----
  441.  
  442. [/comment]longer idea[/border]
  443. [comment]----copy me too!----[/comment]
  444.  
  445. [comment]----copy this whole thing to add another tag----[/comment]
  446. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  447.  
  448. ----* * * tag here----
  449.  
  450. [/comment]idea[/border]
  451. [comment]----copy me too!----[/comment]
  452.  
  453. [comment]----copy this whole thing to add another tag----[/comment]
  454. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  455.  
  456. ----* * * tag here----
  457.  
  458. [/comment]ideas[/border]
  459. [comment]----copy me too!----[/comment]
  460.  
  461. [comment]----copy this whole thing to add another tag----[/comment]
  462. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  463.  
  464. ----* * * tag here----
  465.  
  466. [/comment]long idea[/border]
  467. [comment]----copy me too!----[/comment]
  468.  
  469. [comment]----copy this whole thing to add another tag----[/comment]
  470. [border=transparent; height:auto; width:auto; min-width:fit-content; min-width:-moz-fit-content; padding:3px 7px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:10.5px; font-weight:bold; letter-spacing:1px; margin: var(--m-w);][comment]
  471.  
  472. ----* * * tag here----
  473.  
  474. [/comment]long idea[/border]
  475. [comment]----copy me too!----[/comment]
  476.  
  477. [/border]
  478. [comment]----section contents end----[/comment]
  479. [/border]
  480. [comment]----copy me too! (section)----[/comment]
  481.  
  482. [/border][/border][/border][/border][/tab]
  483. [comment]----vibes tab end----[/comment]
  484.  
  485.  
  486. [comment]----plots tab----[/comment]
  487. [tab=.][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:absolute; bottom:0; right:0; pointer-events:none;][border=transparent; height:clamp(190px, -50px + 43vw, 240px); flex:43; min-width:170px; max-width:200px; padding:0; margin: var(--m); ][/border][border=transparent; height:304px; flex:57; min-width:230px; padding:0; box-sizing:border-box; margin: var(--m); margin-right:clamp(2px, var(--m) + 50px - 9vw, var(--m)); overflow:hidden; pointer-events:auto; letter-spacing:0;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; box-sizing:border-box; --m-t: 23px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-t) * -1);][/border]
  488.  
  489. [comment]----copy this whole thing to make a new section (plots)----[/comment]
  490. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-t);]
  491. [comment]----title----[/comment]
  492. [border=transparent; height:auto; width:100%; padding:1px 5px 13px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; position:sticky; top:0; z-index:5;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:17px; flex-shrink:0; margin-right:14px;][comment]
  493.  
  494. ----* * * title icon here----
  495.  
  496. [/comment][fa]fal fa-star-christmas[/fa][/border]
  497. [border=transparent; height:auto; width;auto; padding:0; color: var(--color-1); font-family: var(--header); letter-spacing:2px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-size:22px; line-height:21px; text-align:right; flex-shrink:0; letter-spacing:1px; text-transform:uppercase; margin-right:-5px;][comment]
  498.  
  499. ----* * * section title here----
  500.  
  501. [/comment]plots[/border]
  502. [/border]
  503. [comment]----title end----[/comment]
  504.  
  505. [comment]----section contents----[/comment]
  506. [border=transparent; height:auto; width:100%; padding:0 0.5px 0 0; box-sizing:border-box; --m-p: 30px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-p) * -1);][/border]
  507.  
  508. [comment]----copy this whole thing to make another plot----[/comment]
  509. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-p);]
  510. [comment]----plot header----[/comment]
  511. [border=transparent; height:auto; width:100%; padding:0 0 10px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap; align-items:flex-end; position:sticky; top:35px;]
  512. [comment]----plot image----[/comment]
  513. [border=transparent; min-height:58px; height:auto; max-height:68px; width:100%; padding:15px 10px; box-sizing:border-box; border-radius:1px;
  514.  
  515. /*put your plot image url here*/ background:url('https://64.media.tumblr.com/453ab42104ed9eb981f6806225428aa0/e5c91488df729cb8-db/s540x810/d85c9ded0735fd3259ee34e7238d7c1924480f2d.jpg');
  516.  
  517. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  518.  
  519. background-size:cover; display:flex; align-items:center; justify-content:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2);
  520.  
  521. /*adjust the opacity of colour background here*/ opacity:0.2;
  522.  
  523. position:absolute; top:0; left:0; border-radius:1px;][/border][border=transparent;
  524.  
  525. /*adjust font size here if it's too big!*/ --fs: 20px;
  526.  
  527. height:auto; max-height:45px; overflow:hidden; width:100%; padding:0; color: var(--color-1); font-size: var(--fs); font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:calc(var(--fs) + 2px); position:relative; z-index:2; text-align:center; letter-spacing:2px;][comment]
  528.  
  529. ----* * * plot title here (max two lines)----
  530.  
  531. [/comment]plot title[/border]
  532.  
  533. [comment]----music player----[/comment]
  534. [border=transparent; height:18px; width:18px; padding:1px 0 0 0; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; border-radius:0 0 1px 1px; overflow:hidden;
  535.  
  536. /*remove display:none; if you want to add a song to your plot*/ display:none;
  537.  
  538. ][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; background: var(--color-2); opacity:0.5;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:9.5px; position:relative; z-index:5; pointer-events:none;][fa]fas fa-music-alt[/fa][/border]
  539. [comment]----actual media player----[/comment]
  540. [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;]
  541.  
  542. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  543. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  544. [media=soundcloud]soundcloud link[/media]
  545. [/border]
  546.  
  547. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  548. [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;]
  549. [media=googledrive]google file code[/MEDIA]
  550. [/border]
  551.  
  552. [/border][/border]
  553. [comment]----actual media player end----[/comment]
  554. [/border]
  555. [comment]----music player end----[/comment]
  556. [/border]
  557. [comment]----plot image end----[/comment]
  558.  
  559. [comment]----plot tags----[/comment]
  560. [border=transparent; height:18px; width:auto; max-width:78%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; opacity:0.7; margin-top:8px;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); flex-shrink:0; font-size:14px; margin:1px 8px 0 0; opacity:0.4;][fa]far fa-angle-right[/fa][/border][border=transparent; height:18px; flex:1; padding:0; overflow:hidden;][border=transparent; height:35px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:18px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;][border=transparent; height:100%; width:0; padding:0; margin-right:-8px;][/border]
  561.  
  562. [comment]----copy this whole thing to add another plot tag----[/comment]
  563. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  564.  
  565. ----* * * tag here----
  566.  
  567. [/comment]#tag[/border]
  568. [comment]----copy me too----[/comment]
  569.  
  570. [comment]----copy this whole thing to add another plot tag----[/comment]
  571. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  572.  
  573. ----* * * tag here----
  574.  
  575. [/comment]#tag[/border]
  576. [comment]----copy me too----[/comment]
  577.  
  578. [comment]----copy this whole thing to add another plot tag----[/comment]
  579. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  580.  
  581. ----* * * tag here----
  582.  
  583. [/comment]#this scrolls[/border]
  584. [comment]----copy me too----[/comment]
  585.  
  586. [/border][/border][/border][/border]
  587. [comment]----plot tags end----[/comment]
  588. [/border]
  589. [comment]----plot header end----[/comment]
  590.  
  591. [comment]----plot contents----[/comment]
  592. [border=transparent; height:auto; width:100%; padding:0; font-size:12px; text-align:justify; line-height:16px; font-family: var(--body); color: var(--t-color);][comment]
  593.  
  594. ----* * * text starts here----
  595.  
  596. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue. Mauris et accumsan lorem, quis tempus orci. Ut erat velit, blandit vel massa at, fermentum efficitur purus. Integer nec ante ac elit bibendum Maximus. Donec ullamcorper arcu sed magna tincidunt consectetur vel eu sem. Fusce nibh leo, commodo in efficitur at, semper quis nisl.
  597. [/border]
  598. [comment]----plot contents end----[/comment]
  599. [/border]
  600. [comment]----copy me too! (plot)----[/comment]
  601.  
  602. [comment]----copy this whole thing to make another plot----[/comment]
  603. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-p);]
  604. [comment]----plot header----[/comment]
  605. [border=transparent; height:auto; width:100%; padding:0 0 10px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap; align-items:flex-end; position:sticky; top:35px;]
  606. [comment]----plot image----[/comment]
  607. [border=transparent; min-height:58px; height:auto; max-height:68px; width:100%; padding:15px 10px; box-sizing:border-box; border-radius:1px;
  608.  
  609. /*put your plot image url here*/ background:url('https://64.media.tumblr.com/968389148c48668d57a39553a5eea4bf/6cdef68476f463e9-1d/s540x810/4ef25399ad9bf01342ddac5aa1d5f1ecf8d39234.pnj');
  610.  
  611. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  612.  
  613. background-size:cover; display:flex; align-items:center; justify-content:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2);
  614.  
  615. /*adjust the opacity of colour background here*/ opacity:0.2;
  616.  
  617. position:absolute; top:0; left:0; border-radius:1px;][/border][border=transparent;
  618.  
  619. /*adjust font size here if it's too big!*/ --fs: 20px;
  620.  
  621. height:auto; max-height:45px; overflow:hidden; width:100%; padding:0; color: var(--color-1); font-size: var(--fs); font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:calc(var(--fs) + 2px); position:relative; z-index:2; text-align:center; letter-spacing:2px;][comment]
  622.  
  623. ----* * * plot title here (max two lines)----
  624.  
  625. [/comment]plot title[/border]
  626.  
  627. [comment]----music player----[/comment]
  628. [border=transparent; height:18px; width:18px; padding:1px 0 0 0; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; border-radius:0 0 1px 1px; overflow:hidden;
  629.  
  630. /*remove display:none; if you want to add a song to your plot*/ display:none;
  631.  
  632. ][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; background: var(--color-2); opacity:0.5;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:9.5px; position:relative; z-index:5; pointer-events:none;][fa]fas fa-music-alt[/fa][/border]
  633. [comment]----actual media player----[/comment]
  634. [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;]
  635.  
  636. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  637. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  638. [media=soundcloud]soundcloud link[/media]
  639. [/border]
  640.  
  641. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  642. [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;]
  643. [media=googledrive]google file code[/MEDIA]
  644. [/border]
  645.  
  646. [/border][/border]
  647. [comment]----actual media player end----[/comment]
  648. [/border]
  649. [comment]----music player end----[/comment]
  650. [/border]
  651. [comment]----plot image end----[/comment]
  652.  
  653. [comment]----plot tags----[/comment]
  654. [border=transparent; height:18px; width:auto; max-width:78%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; opacity:0.7; margin-top:8px;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); flex-shrink:0; font-size:14px; margin:1px 8px 0 0; opacity:0.4;][fa]far fa-angle-right[/fa][/border][border=transparent; height:18px; flex:1; padding:0; overflow:hidden;][border=transparent; height:35px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:18px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;][border=transparent; height:100%; width:0; padding:0; margin-right:-8px;][/border]
  655.  
  656. [comment]----copy this whole thing to add another plot tag----[/comment]
  657. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  658.  
  659. ----* * * tag here----
  660.  
  661. [/comment]#tag[/border]
  662. [comment]----copy me too!----[/comment]
  663.  
  664. [comment]----copy this whole thing to add another plot tag----[/comment]
  665. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  666.  
  667. ----* * * tag here----
  668.  
  669. [/comment]#tag[/border]
  670. [comment]----copy me too----[/comment]
  671.  
  672. [comment]----copy this whole thing to add another plot tag----[/comment]
  673. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  674.  
  675. ----* * * tag here----
  676.  
  677. [/comment]#this scrolls[/border]
  678. [comment]----copy me too----[/comment]
  679.  
  680. [/border][/border][/border][/border]
  681. [comment]----plot tags end----[/comment]
  682. [/border]
  683. [comment]----plot header end----[/comment]
  684.  
  685. [comment]----plot contents----[/comment]
  686. [border=transparent; height:auto; width:100%; padding:0; font-size:12px; text-align:justify; line-height:16px; font-family: var(--body); color: var(--t-color);][comment]
  687.  
  688. ----* * * text starts here----
  689.  
  690. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue. Mauris et accumsan lorem, quis tempus orci. Ut erat velit, blandit vel massa at, fermentum efficitur purus. Integer nec ante ac elit bibendum Maximus. Donec ullamcorper arcu sed magna tincidunt consectetur vel eu sem. Fusce nibh leo, commodo in efficitur at, semper quis nisl.
  691. [/border]
  692. [comment]----plot contents end----[/comment]
  693. [/border]
  694. [comment]----copy me too! (plot)----[/comment]
  695.  
  696. [comment]----copy this whole thing to make another plot----[/comment]
  697. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top: var(--m-p);]
  698. [comment]----plot header----[/comment]
  699. [border=transparent; height:auto; width:100%; padding:0 0 10px 0; box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap; align-items:flex-end; position:sticky; top:35px;]
  700. [comment]----plot image----[/comment]
  701. [border=transparent; min-height:58px; height:auto; max-height:68px; width:100%; padding:15px 10px; box-sizing:border-box; border-radius:1px;
  702.  
  703. /*put your plot image url here*/ background:url('https://64.media.tumblr.com/3128e1369ac968a6399a934d402aa2f9/17e277a5b1e21348-87/s1280x1920/be43197160f2e2780f3c16dc76eaab00e1fec71a.pnj');
  704.  
  705. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  706.  
  707. background-size:cover; display:flex; align-items:center; justify-content:center; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2);
  708.  
  709. /*adjust the opacity of colour background here*/ opacity:0.2;
  710.  
  711. position:absolute; top:0; left:0; border-radius:1px;][/border][border=transparent;
  712.  
  713. /*adjust font size here if it's too big!*/ --fs: 20px;
  714.  
  715. height:auto; max-height:45px; overflow:hidden; width:100%; padding:0; color: var(--color-1); font-size: var(--fs); font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:calc(var(--fs) + 2px); position:relative; z-index:2; text-align:center; letter-spacing:2px;][comment]
  716.  
  717. ----* * * plot title here (max two lines)----
  718.  
  719. [/comment]plot title[/border]
  720.  
  721. [comment]----music player----[/comment]
  722. [border=transparent; height:18px; width:18px; padding:1px 0 0 0; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; border-radius:0 0 1px 1px; overflow:hidden;
  723.  
  724. /*remove display:none; if you want to add a song to your plot*/ display:none;
  725.  
  726. ][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; background: var(--color-2); opacity:0.5;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:9.5px; position:relative; z-index:5; pointer-events:none;][fa]fas fa-music-alt[/fa][/border]
  727. [comment]----actual media player----[/comment]
  728. [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;]
  729.  
  730. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  731. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  732. [media=soundcloud]soundcloud link[/media]
  733. [/border]
  734.  
  735. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  736. [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;]
  737. [media=googledrive]google file code[/MEDIA]
  738. [/border]
  739.  
  740. [/border][/border]
  741. [comment]----actual media player end----[/comment]
  742. [/border]
  743. [comment]----music player end----[/comment]
  744. [/border]
  745. [comment]----plot image end----[/comment]
  746.  
  747. [comment]----plot tags----[/comment]
  748. [border=transparent; height:18px; width:auto; max-width:78%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; opacity:0.7; margin-top:8px;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); flex-shrink:0; font-size:14px; margin:1px 8px 0 0; opacity:0.4;][fa]far fa-angle-right[/fa][/border][border=transparent; height:18px; flex:1; padding:0; overflow:hidden;][border=transparent; height:35px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:18px; width:auto; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start;][border=transparent; height:100%; width:0; padding:0; margin-right:-8px;][/border]
  749.  
  750. [comment]----copy this whole thing to add another plot tag----[/comment]
  751. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  752.  
  753. ----* * * tag here----
  754.  
  755. [/comment]#tag[/border]
  756. [comment]----copy me too!----[/comment]
  757.  
  758. [comment]----copy this whole thing to add another plot tag----[/comment]
  759. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  760.  
  761. ----* * * tag here----
  762.  
  763. [/comment]#tag[/border]
  764. [comment]----copy me too----[/comment]
  765.  
  766. [comment]----copy this whole thing to add another plot tag----[/comment]
  767. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:fit-content; min-width:-moz-fit-content; padding:3px 8px; box-sizing:border-box; border:1px solid var(--color-1); flex-shrink:0; color: var(--color-1); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:8.5px; font-weight:bold; letter-spacing:1px; margin-left:8px;][comment]
  768.  
  769. ----* * * tag here----
  770.  
  771. [/comment]#this scrolls[/border]
  772. [comment]----copy me too----[/comment]
  773.  
  774. [/border][/border][/border][/border]
  775. [comment]----plot tags end----[/comment]
  776. [/border]
  777. [comment]----plot header end----[/comment]
  778.  
  779. [comment]----plot contents----[/comment]
  780. [border=transparent; height:auto; width:100%; padding:0; font-size:12px; text-align:justify; line-height:16px; font-family: var(--body); color: var(--t-color);][comment]
  781.  
  782. ----* * * text starts here----
  783.  
  784. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor ultrices erat id lacinia. Aliquam vitae ultrices ante. Curabitur eu purus ut odio imperdiet blandit ut nec libero. In congue quam eu sodales congue. Mauris et accumsan lorem, quis tempus orci. Ut erat velit, blandit vel massa at, fermentum efficitur purus. Integer nec ante ac elit bibendum Maximus. Donec ullamcorper arcu sed magna tincidunt consectetur vel eu sem. Fusce nibh leo, commodo in efficitur at, semper quis nisl.
  785. [/border]
  786. [comment]----plot contents end----[/comment]
  787. [/border]
  788. [comment]----copy me too! (plot)----[/comment]
  789.  
  790. [/border]
  791. [comment]----section contents end----[/comment]
  792. [/border]
  793. [comment]----copy me too! (section)----[/comment]
  794.  
  795. [/border][/border][/border][/border][/tab]
  796. [comment]----plots tab end----[/comment]
  797.  
  798.  
  799. [/tabs][/border][/border][/border]
  800. [comment]----tabs end----[/comment]
  801.  
  802. [comment]----right filler (ignore!)----[/comment]
  803. [border=transparent; height:304px; flex:57; min-width:230px; padding:0; margin: var(--m)][/border]
  804. [/border]
  805. [comment]----main container end----[/comment]
  806.  
  807.  
  808. [comment]----left & right text strips----[/comment]
  809. [border=transparent; height:calc(100% - 50px); width:8px; padding:0; box-sizing:border-box; position:absolute; top:9px; left:12px; pointer-events:none; color: var(--color-1); font-size:clamp(6px, -40px + 8vw, 7px); text-transform:uppercase; font-family: var(--header); writing-mode: vertical-rl; text-orientation: sideways; word-break: break-all; line-height:140%; overflow:hidden; text-align:center; opacity:0.7; transform:rotate(180deg); -webkit-transform-origin: 50% 52%;][comment]
  810.  
  811. ----* * * long quote here----
  812.  
  813. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum facilisis lectus, vitae ultrices nulla facilisis nec. Vivamus dictum, lorem at venenatis malesuada.[/border]
  814.  
  815. [border=transparent; height:calc(100% - 50px); width:8px; padding:0; box-sizing:border-box; position:absolute; top:24px; right:12px; pointer-events:none; color: var(--color-1); font-size:clamp(6px, -40px + 8vw, 7px); text-transform:uppercase; font-family: var(--header); writing-mode: vertical-rl; text-orientation: sideways; word-break: break-all; line-height:140%; overflow:hidden; text-align:center; opacity:0.7;][comment]
  816.  
  817. ----* * * long quote here----
  818.  
  819. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum facilisis lectus, vitae ultrices nulla facilisis nec. Vivamus dictum, lorem at venenatis malesuada.[/border]
  820.  
  821. [comment]----signature! do not remove----[/comment]
  822. [bg=transparent; height:10px;width:100%; padding:0; position:absolute ;z-index:6;opacity:0.2;color: var(--color-1); font-size:9px;text-align:center; letter-spacing:0.3px; bottom:9px; left:0;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  823. [/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!