API tools faq
paste
Advertisement
ooksie

it-girl

ooksie
Nov 3rd, 2023 (edited)
205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.01 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Bagel Fat One]title[/font]
  4. [font=Sometype Mono]body[/font]
  5. [font=Ms Madi]scribble[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][div=
  10.  
  11. --bg-1: #212121;
  12. --bg-2: #111111;
  13. --grid-l: #303030;
  14. --grid: linear-gradient(to right, var(--grid-l) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-l) 1px, transparent 1px);
  15.  
  16. /*main accent*/
  17. --color-1: #EA4090;
  18. /*off-white colour for photo borders*/
  19. --color-2: #f9eff4;
  20.  
  21. /*header text colour*/
  22. --h: var(--bg-2);
  23. /*body text colour*/
  24. --t-color:#fff;
  25.  
  26. /*sticker colours*/
  27. --s1: #B9A2CC;
  28. --s2: #D8C7CD;
  29. --s3: #EEA0C2;
  30. --s4: #b08cd1;
  31. --s5: #F1D851;
  32. --s6: #5891C6;
  33.  
  34. /*fonts used*/
  35. --title: 'Bagel Fat One', display;
  36. --header: 'Sometype Mono', sans;
  37. --body: 'Sometype Mono', sans;
  38. --scribble: 'Ms Madi', display;
  39.  
  40. /*main icon on left*/
  41. --img-1: url('https://i.pinimg.com/564x/8b/d9/f6/8bd9f6ccd37def9cf488ecec6897627d.jpg');
  42.  
  43. /*photo strip pictures*/
  44. --eimg-1: url('https://i.pinimg.com/564x/2b/b8/4d/2bb84dc42a9b5b744f11cda46f6c4e74.jpg');
  45. --eimg-2: url('https://i.pinimg.com/736x/4f/4f/58/4f4f58c934e8a98a5276ba0d0b2e3baf.jpg');
  46. --eimg-3: url('https://i.pinimg.com/564x/d5/15/3f/d5153f219a74a23c5f946a4f9527d925.jpg');
  47. --eimg-4: url('https://i.pinimg.com/564x/b5/7a/42/b57a42a222f404d5b9f03d4366a143be.jpg');
  48.  
  49. height:auto; width:100%; overflow-y:auto; margin:20px 0 30px 0; line-height:0;][div=height:auto; min-height:570px; width:100%; max-width:630px; background: var(--bg-1); margin:0 auto; line-height:0; position:relative; padding:15px; box-sizing:border-box; border:1px solid var(--grid-l); display:flex; flex-flow:row-reverse wrap; overflow:hidden;]
  50.  
  51. [comment]----right column----[/comment]
  52. [div=height:auto; min-height:30px; flex:32; min-width:178px; margin:15px; display:flex; flex-flow:column nowrap;]
  53. [comment]----tabs (only 3!!!)----[/comment]
  54. [div=height:60px; width:180px; overflow:hidden;][div=margin:20px -50px 0 -15px;][tabs]
  55.  
  56. [comment]----(about) tab----[/comment]
  57. [tab=.][div=height:100%; width:100%; padding:15px 14px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row-reverse wrap; pointer-events:none;]
  58. [comment]----tab select----[/comment]
  59. [div=height:auto; min-height:30px; flex:32; min-width:178px; margin:15px; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:60px; width:180px; overflow:hidden; display:flex; flex-flow:row nowrap; align-items:center; padding:10px 8px; box-sizing:border-box; justify-content:center; flex-shrink:0;][div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div]
  60.  
  61. [comment]----selected button----[/comment]
  62. [div=height:auto; width:30px; background: var(--bg-2); text-align:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  63.  
  64. ----* * * change button icon here----
  65.  
  66. [/comment][fa]far fa-heart-broken[/fa][/div]
  67.  
  68. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  69. [div=height:100%; width:30px; flex-shrink:0;][/div]
  70. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  71. [div=height:100%; width:30px; flex-shrink:0;][/div]
  72.  
  73. [div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div][/div][/div]
  74. [comment]----tab select end----[/comment]
  75.  
  76. [comment]----tab contents----[/comment]
  77. [div=height:510px; flex:68; min-width:250px; margin:15px; padding:0 1px; box-sizing:border-box; position:relative;][div=height:150px; width:100%;][/div]
  78.  
  79. [comment]----tab title----[/comment]
  80. [div=height:auto; width:auto; min-width:110px; padding:4px; box-sizing:border-box; position:absolute; top:168px; right:12px;
  81.  
  82. background: linear-gradient(25deg, var(--s1) 40%, var(--s2) 60%, var(--s3) 70%);
  83.  
  84. box-shadow:3px 3px 3px var(--bg-1); border-radius:50%; transform:rotate(6deg);][div=height:auto; width:auto; padding:8px 13px 12px 13px; box-sizing:border-box; border-radius:50%; border:1px solid var(--bg-2);color: var(--color-2); -webkit-text-stroke:1px var(--bg-2); text-shadow:1.5px 1.5px var(--bg-2); font-size:19px; font-family: var(--title); line-height:80%; text-transform:uppercase; text-align:center;][comment]
  85.  
  86. ----* * * title here----
  87.  
  88. [/comment]about me[/div][/div]
  89.  
  90. [comment]----main container----[/comment]
  91. [div=height:270px; width:100%; background: var(--bg-2); margin-top:30px; padding:42px 0 20px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 14px 0 22px; box-sizing:border-box; --m:9px; margin-bottom: 16px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  92.  
  93. [comment]----copy this whole thing to add another text section----[/comment]
  94. [div=height:auto; width:100%; margin-top: var(--m); text-align:justify; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px;][comment]
  95.  
  96. ----* * * text starts here----
  97.  
  98. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitudin est, ut mollis dolor justo sed massa. Proin interdum nunc quis nisi elementum tristique. Etiam tempus dolor a dui congue, eget faucibus velit condimentum. Ut tristique nunc quis eleifend aliquam. Aenean sollicitudin fringilla ante eget aliquam. Curabitur ac mattis metus, id ultrices elit. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Vivamus sed risus sit amet turpis condimentum varius sit amet sit amet nulla. Mauris eu lacus sit amet metus condimentum vehicula quis ac turpis. Nulla porttitor rhoncus massa aliquam vulputate.
  99. [/div]
  100. [comment]----copy me too!----[/comment]
  101.  
  102. [/div][/div][/div]
  103. [comment]----main container end----[/comment]
  104. [/div]
  105. [comment]----tab contents end----[/comment]
  106. [/div][/tab]
  107. [comment]----(about) tab end----[/comment]
  108.  
  109.  
  110. [comment]----(rules) tab----[/comment]
  111. [tab=.][div=height:100%; width:100%; padding:15px 14px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row-reverse wrap; pointer-events:none;]
  112. [comment]----tab select----[/comment]
  113. [div=height:auto; min-height:30px; flex:32; min-width:178px; margin:15px; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:60px; width:180px; overflow:hidden; display:flex; flex-flow:row nowrap; align-items:center; padding:10px 8px; box-sizing:border-box; justify-content:center; flex-shrink:0;][div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div]
  114.  
  115. [div=height:100%; width:30px; flex-shrink:0;][/div]
  116. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  117.  
  118. [comment]----selected button----[/comment]
  119. [div=height:auto; width:30px; background: var(--bg-2); text-align:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  120.  
  121. ----* * * change button icon here----
  122.  
  123. [/comment][fa]far fa-heart-broken[/fa][/div]
  124.  
  125. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  126. [div=height:100%; width:30px; flex-shrink:0;][/div]
  127.  
  128. [div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div][/div][/div]
  129. [comment]----tab select end----[/comment]
  130.  
  131. [comment]----tab contents----[/comment]
  132. [div=height:510px; flex:68; min-width:250px; margin:15px; padding:0 1px; box-sizing:border-box; position:relative;][div=height:150px; width:100%;][/div]
  133.  
  134. [comment]----tab title----[/comment]
  135. [div=height:auto; width:auto; min-width:110px; padding:4px; box-sizing:border-box; position:absolute; top:168px; right:12px;
  136.  
  137. background: linear-gradient(25deg, var(--s1) 40%, var(--s2) 60%, var(--s3) 70%);
  138.  
  139. box-shadow:3px 3px 3px var(--bg-1); border-radius:50%; transform:rotate(6deg);][div=height:auto; width:auto; padding:8px 13px 12px 13px; box-sizing:border-box; border-radius:50%; border:1px solid var(--bg-2);color: var(--color-2); -webkit-text-stroke:1px var(--bg-2); text-shadow:1.5px 1.5px var(--bg-2); font-size:19px; font-family: var(--title); line-height:80%; text-transform:uppercase; text-align:center;][comment]
  140.  
  141. ----* * * title here----
  142.  
  143. [/comment]rules[/div][/div]
  144.  
  145. [comment]----main container----[/comment]
  146. [div=height:270px; width:100%; background: var(--bg-2); margin-top:30px; padding:42px 0 20px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 14px 0 22px; box-sizing:border-box; --m:10px; margin-bottom: 16px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1 + 2px);][/div]
  147.  
  148. [comment]----copy this whole thing to add another rule----[/comment]
  149. [div=height:auto; width:100%; padding:0 0 7px 0; box-sizing:border-box; margin-top: var(--m); display:flex; flex-flow:row nowrap; align-items:flex-start;]
  150. [div=height:auto; width:auto; font-size:37px; -webkit-text-stroke:2px var(--color-2); position:relative; top:0; line-height:100%; flex-shrink:0;
  151.  
  152. /*change the colour and rotation here!*/ color: var(--color-1); transform:rotate(10deg);
  153.  
  154. ][fa]fas fa-badge[/fa][div=height:100%; width:100%; position:absolute; top:1px; left:0; display:flex; align-items:center; justify-content:center; color: var(--h); font-family: var(--header); font-size:16px; line-height:100%; -webkit-text-stroke:0.3px var(--h); font-weight:bold; text-align:right; letter-spacing:0px;][comment]
  155.  
  156. ----* * * rule number here----
  157.  
  158. [/comment]01[/div][/div]
  159. [div=height:auto; width:auto; min-height:24px; color: var(--t-color); font-size:12px; margin-left:18px; text-align:justify; font-family: var(--body); line-height:15px; align-self:center;][comment]
  160.  
  161. ----* * * rule contents here----
  162.  
  163. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitudin est, ut mollis dolor justo sed massa.[/div]
  164. [/div]
  165. [comment]----copy me too!----[/comment]
  166.  
  167. [comment]----copy this whole thing to add another rule----[/comment]
  168. [div=height:auto; width:100%; padding:0 0 7px 0; box-sizing:border-box; margin-top: var(--m); display:flex; flex-flow:row nowrap; align-items:flex-start;]
  169. [div=height:auto; width:auto; font-size:37px; -webkit-text-stroke:2px var(--color-2); position:relative; top:0; line-height:100%; flex-shrink:0;
  170.  
  171. /*change the colour and rotation here!*/ color: var(--s3); transform:rotate(-5deg);
  172.  
  173. ][fa]fas fa-badge[/fa][div=height:100%; width:100%; position:absolute; top:1px; left:0; display:flex; align-items:center; justify-content:center; color: var(--h); font-family: var(--header); font-size:16px; line-height:100%; -webkit-text-stroke:0.3px var(--h); font-weight:bold; text-align:right; letter-spacing:0px;][comment]
  174.  
  175. ----* * * rule number here----
  176.  
  177. [/comment]02[/div][/div]
  178. [div=height:auto; width:auto; min-height:24px; color: var(--t-color); font-size:12px; margin-left:18px; text-align:justify; font-family: var(--body); line-height:15px; align-self:center;][comment]
  179.  
  180. ----* * * rule contents here----
  181.  
  182. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  183. [/div]
  184. [comment]----copy me too!----[/comment]
  185.  
  186. [comment]----copy this whole thing to add another rule----[/comment]
  187. [div=height:auto; width:100%; padding:0 0 7px 0; box-sizing:border-box; margin-top: var(--m); display:flex; flex-flow:row nowrap; align-items:flex-start;]
  188. [div=height:auto; width:auto; font-size:37px; -webkit-text-stroke:2px var(--color-2); position:relative; top:0; line-height:100%; flex-shrink:0;
  189.  
  190. /*change the colour and rotation here!*/ color: var(--s4); transform:rotate(-18deg);
  191.  
  192. ][fa]fas fa-badge[/fa][div=height:100%; width:100%; position:absolute; top:1px; left:0; display:flex; align-items:center; justify-content:center; color: var(--h); font-family: var(--header); font-size:16px; line-height:100%; -webkit-text-stroke:0.3px var(--h); font-weight:bold; text-align:right; letter-spacing:0px;][comment]
  193.  
  194. ----* * * rule number here----
  195.  
  196. [/comment]03[/div][/div]
  197. [div=height:auto; min-height:24px; width:auto; color: var(--t-color); font-size:12px; margin-left:18px; text-align:justify; font-family: var(--body); line-height:15px; align-self:center;][comment]
  198.  
  199. ----* * * rule contents here----
  200.  
  201. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitugdin est, ut mollis dolor justo sed massa.[/div]
  202. [/div]
  203. [comment]----copy me too!----[/comment]
  204.  
  205. [comment]----copy this whole thing to add another rule----[/comment]
  206. [div=height:auto; width:100%; padding:0 0 7px 0; box-sizing:border-box; margin-top: var(--m); display:flex; flex-flow:row nowrap; align-items:flex-start;]
  207. [div=height:auto; width:auto; font-size:37px; -webkit-text-stroke:2px var(--color-2); position:relative; top:0; line-height:100%; flex-shrink:0;
  208.  
  209. /*change the colour and rotation here!*/ color: var(--s5); transform:rotate(2deg);
  210.  
  211. ][fa]fas fa-badge[/fa][div=height:100%; width:100%; position:absolute; top:1px; left:0; display:flex; align-items:center; justify-content:center; color: var(--h); font-family: var(--header); font-size:16px; line-height:100%; -webkit-text-stroke:0.3px var(--h); font-weight:bold; text-align:right; letter-spacing:0px;][comment]
  212.  
  213. ----* * * rule number here----
  214.  
  215. [/comment]04[/div][/div]
  216. [div=height:auto; width:auto; min-height:24px; color: var(--t-color); font-size:12px; margin-left:18px; text-align:justify; font-family: var(--body); line-height:15px; align-self:center;][comment]
  217.  
  218. ----* * * rule contents here----
  219.  
  220. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  221. [/div]
  222. [comment]----copy me too!----[/comment]
  223.  
  224. [/div][/div][/div]
  225. [comment]----main container end----[/comment]
  226. [/div]
  227. [comment]----tab contents end----[/comment]
  228. [/div][/tab]
  229. [comment]----(rules) tab end----[/comment]
  230.  
  231.  
  232. [comment]----(plots) tab----[/comment]
  233. [tab=.][div=height:100%; width:100%; padding:15px 14px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row-reverse wrap; pointer-events:none;]
  234. [comment]----tab select----[/comment]
  235. [div=height:auto; min-height:30px; flex:32; min-width:178px; margin:15px; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:60px; width:180px; overflow:hidden; display:flex; flex-flow:row nowrap; align-items:center; padding:10px 8px; box-sizing:border-box; justify-content:center; flex-shrink:0;][div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div]
  236. [div=height:100%; width:30px; flex-shrink:0;][/div]
  237. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  238. [div=height:100%; width:30px; flex-shrink:0;][/div]
  239. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  240.  
  241. [comment]----selected button----[/comment]
  242. [div=height:auto; width:30px; background: var(--bg-2); text-align:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  243.  
  244. ----* * * change button icon here----
  245.  
  246. [/comment][fa]far fa-heart-broken[/fa][/div]
  247.  
  248. [div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div][/div][/div]
  249. [comment]----tab select end----[/comment]
  250.  
  251. [comment]----tab contents----[/comment]
  252. [div=height:510px; flex:68; min-width:250px; margin:15px; padding:0 1px; box-sizing:border-box; position:relative;][div=height:150px; width:100%;][/div]
  253.  
  254. [comment]----tab title----[/comment]
  255. [div=height:auto; width:auto; min-width:110px; padding:4px; box-sizing:border-box; position:absolute; top:168px; right:12px; z-index:8;
  256.  
  257. background: linear-gradient(25deg, var(--s1) 40%, var(--s2) 60%, var(--s3) 70%);
  258.  
  259. box-shadow:3px 3px 3px var(--bg-1); border-radius:50%; transform:rotate(6deg);][div=height:auto; width:auto; padding:8px 13px 12px 13px; box-sizing:border-box; border-radius:50%; border:1px solid var(--bg-2);color: var(--color-2); -webkit-text-stroke:1px var(--bg-2); text-shadow:1.5px 1.5px var(--bg-2); font-size:19px; font-family: var(--title); line-height:80%; text-transform:uppercase; text-align:center;][comment]
  260.  
  261. ----* * * title here----
  262.  
  263. [/comment]plot ideas[/div][/div]
  264.  
  265. [comment]----main container----[/comment]
  266. [div=height:270px; width:100%; background: var(--bg-2); margin-top:30px; padding:28px 0 20px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 14px 0 22px; box-sizing:border-box; --m:20px; margin-bottom: 16px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  267.  
  268. [comment]----copy this whole thing to add another plot idea----[/comment]
  269. [div=height:auto; width:100%; margin-top: var(--m); display:flex; flex-flow:column nowrap;]
  270. [div=height:auto; padding:4px 4px 17px 18px; box-sizing:border-box; position:sticky; top:-0.5px; background: var(--bg-2);][div=height:56px; width:24px; background: var(--color-1); opacity:0.6; transform:rotate(36deg) skew(10deg); position:absolute; top:4px; left:8px; z-index:5;][/div][div=height:75px; width:100%; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);
  271.  
  272. /*edit plot image here*/ background: url('https://pbs.twimg.com/media/FONeHw_VkAAlpEZ.jpg');
  273. /*adjust the cropping of the image here*/ background-position:50% 50%;
  274.  
  275. background-size:cover; position:relative; z-index:2;][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div][div=height:calc(100% - 14px); width:calc(100% - 22px); background: var(--color-2); position:absolute; top:1px; left:18px; z-index:1; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);][/div]
  276. [comment]----plot details----[/comment]
  277. [div=height:30px; width:auto; max-width:170px; position:absolute; bottom:4px; right:12px; z-index:3; overflow:hidden; border-radius:3px;][div=height:47px; width:100%; overflow-x:auto; overflow-y:hidden;][div=height:30px; width:auto; margin-right:3px; display:flex; flex-flow:row nowrap; align-items:flex-start; --md:6px;][div=height:100%; width:0; margin-right:calc(var(--md) * -1);][/div]
  278.  
  279. [comment]----copy me to add another detail----[/comment]
  280. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  281.  
  282. /*edit colour of detail here*/ background: var(--s1);][comment]
  283.  
  284. ----* * * detail here----
  285.  
  286. [/comment]#genre[/div]
  287. [comment]----copy me too!----[/comment]
  288.  
  289. [comment]----copy me to add another detail----[/comment]
  290. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  291.  
  292. /*edit colour of detail here*/ background: var(--s6);][comment]
  293.  
  294. ----* * * detail here----
  295.  
  296. [/comment]#pair[/div]
  297. [comment]----copy me too!----[/comment]
  298.  
  299. [comment]----copy me to add another detail----[/comment]
  300. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  301.  
  302. /*edit colour of detail here*/ background: var(--s3);][comment]
  303.  
  304. ----* * * detail here----
  305.  
  306. [/comment]#status[/div]
  307. [comment]----copy me too!----[/comment]
  308.  
  309. [/div][/div][/div]
  310. [comment]----plot details end----[/comment]
  311. [/div]
  312.  
  313. [comment]----plot contents----[/comment]
  314. [div=height:auto; width:100%; text-align:justify; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px;][comment]
  315.  
  316. ----* * * text starts here----
  317.  
  318. [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]Muse A.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitudin est, ut mollis dolor justo sed massa. Proin interdum nunc quis nisi elementum tristique. Etiam tempus dolor a dui congue, eget faucibus velit condimentum. Ut tristique nunc quis eleifend aliquam. Aenean sollicitudin fringilla ante eget aliquam. Curabitur ac mattis metus, id ultrices elit. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Vivamus sed risus sit amet turpis condimentum varius sit amet sit amet nulla. Mauris eu lacus sit amet metus condimentum vehicula quis ac turpis. Nulla porttitor rhoncus massa aliquam vulputate.
  319. [/div]
  320. [comment]----plot contents end----[/comment]
  321. [/div]
  322. [comment]----copy me too! (plot idea)----[/comment]
  323.  
  324. [comment]----copy this whole thing to add another plot idea----[/comment]
  325. [div=height:auto; width:100%; margin-top: var(--m); display:flex; flex-flow:column nowrap;]
  326. [div=height:auto; padding:4px 4px 17px 18px; box-sizing:border-box; position:sticky; top:-0.5px; background: var(--bg-2);][div=height:56px; width:24px; background: var(--color-1); opacity:0.6; transform:rotate(36deg) skew(10deg); position:absolute; top:4px; left:8px; z-index:5;][/div][div=height:75px; width:100%; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);
  327.  
  328. /*edit plot image here*/ background: url('https://pbs.twimg.com/media/FONeH4vUYAEwOkI.jpg');
  329. /*adjust the cropping of the image here*/ background-position:50% 50%;
  330.  
  331. background-size:cover; position:relative; z-index:2;][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div][div=height:calc(100% - 14px); width:calc(100% - 22px); background: var(--color-2); position:absolute; top:1px; left:18px; z-index:1; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);][/div]
  332. [comment]----plot details----[/comment]
  333. [div=height:30px; width:auto; max-width:170px; position:absolute; bottom:4px; right:12px; z-index:3; overflow:hidden; border-radius:3px;][div=height:47px; width:100%; overflow-x:auto; overflow-y:hidden;][div=height:30px; width:auto; margin-right:3px; display:flex; flex-flow:row nowrap; align-items:flex-start; --md:6px;][div=height:100%; width:0; margin-right:calc(var(--md) * -1);][/div]
  334.  
  335. [comment]----copy me to add another detail----[/comment]
  336. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  337.  
  338. /*edit colour of detail here*/ background: var(--s1);][comment]
  339.  
  340. ----* * * detail here----
  341.  
  342. [/comment]#genre[/div]
  343. [comment]----copy me too!----[/comment]
  344.  
  345. [comment]----copy me to add another detail----[/comment]
  346. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  347.  
  348. /*edit colour of detail here*/ background: var(--s6);][comment]
  349.  
  350. ----* * * detail here----
  351.  
  352. [/comment]#pair[/div]
  353. [comment]----copy me too!----[/comment]
  354.  
  355. [comment]----copy me to add another detail----[/comment]
  356. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  357.  
  358. /*edit colour of detail here*/ background: var(--s3);][comment]
  359.  
  360. ----* * * detail here----
  361.  
  362. [/comment]#status[/div]
  363. [comment]----copy me too!----[/comment]
  364.  
  365. [/div][/div][/div]
  366. [comment]----plot details end----[/comment]
  367. [/div]
  368.  
  369. [comment]----plot contents----[/comment]
  370. [div=height:auto; width:100%; text-align:justify; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px;][comment]
  371.  
  372. ----* * * text starts here----
  373.  
  374. [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]Muse A.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitudin est, ut mollis dolor justo sed massa. Proin interdum nunc quis nisi elementum tristique. Etiam tempus dolor a dui congue, eget faucibus velit condimentum. Ut tristique nunc quis eleifend aliquam. Aenean sollicitudin fringilla ante eget aliquam. Curabitur ac mattis metus, id ultrices elit. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Vivamus sed risus sit amet turpis condimentum varius sit amet sit amet nulla. Mauris eu lacus sit amet metus condimentum vehicula quis ac turpis. Nulla porttitor rhoncus massa aliquam vulputate.
  375. [/div]
  376. [comment]----plot contents end----[/comment]
  377. [/div]
  378. [comment]----copy me too! (plot idea)----[/comment]
  379.  
  380. [comment]----copy this whole thing to add another plot idea----[/comment]
  381. [div=height:auto; width:100%; margin-top: var(--m); display:flex; flex-flow:column nowrap;]
  382. [div=height:auto; padding:4px 4px 17px 18px; box-sizing:border-box; position:sticky; top:-0.5px; background: var(--bg-2);][div=height:56px; width:24px; background: var(--color-1); opacity:0.6; transform:rotate(36deg) skew(10deg); position:absolute; top:4px; left:8px; z-index:5;][/div][div=height:75px; width:100%; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);
  383.  
  384. /*edit plot image here*/ background: url('https://pbs.twimg.com/media/FONeHztVkAMabdT.jpg');
  385. /*adjust the cropping of the image here*/ background-position:50% 50%;
  386.  
  387. background-size:cover; position:relative; z-index:2;][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div][div=height:calc(100% - 14px); width:calc(100% - 22px); background: var(--color-2); position:absolute; top:1px; left:18px; z-index:1; clip-path: polygon(0% 13%, 7% 4%, 18% 0%, 28% 8%, 39% 1%, 46% 7%, 58% 2%, 65% 4%, 78% 0%, 83% 6%, 88% 3%, 98% 1%, 100% 100%, 89% 96%, 80% 100%, 69% 97%, 62% 93%, 50% 100%, 42% 96%, 32% 100%, 25% 93%, 18% 98%, 8% 97%, 1% 99%);][/div]
  388. [comment]----plot details----[/comment]
  389. [div=height:30px; width:auto; max-width:170px; position:absolute; bottom:4px; right:12px; z-index:3; overflow:hidden; border-radius:3px;][div=height:47px; width:100%; overflow-x:auto; overflow-y:hidden;][div=height:30px; width:auto; margin-right:3px; display:flex; flex-flow:row nowrap; align-items:flex-start; --md:6px;][div=height:100%; width:0; margin-right:calc(var(--md) * -1);][/div]
  390.  
  391. [comment]----copy me to add another detail----[/comment]
  392. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  393.  
  394. /*edit colour of detail here*/ background: var(--s1);][comment]
  395.  
  396. ----* * * detail here----
  397.  
  398. [/comment]#genre[/div]
  399. [comment]----copy me too!----[/comment]
  400.  
  401. [comment]----copy me to add another detail----[/comment]
  402. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  403.  
  404. /*edit colour of detail here*/ background: var(--s6);][comment]
  405.  
  406. ----* * * detail here----
  407.  
  408. [/comment]#pair[/div]
  409. [comment]----copy me too!----[/comment]
  410.  
  411. [comment]----copy me to add another detail----[/comment]
  412. [div=height:auto; width:auto; border:2.5px solid var(--color-2); padding:3px 8px; box-sizing:border-box; color: var(--h); font-family: var(--header); text-transform:uppercase; line-height:100%; white-space:nowrap; font-size:9.5px; border-radius:5px; font-weight:bold; letter-spacing:1px; box-shadow:1px 1px 1px var(--bg-1); margin-left: var(--md);
  413.  
  414. /*edit colour of detail here*/ background: var(--s3);][comment]
  415.  
  416. ----* * * detail here----
  417.  
  418. [/comment]#status[/div]
  419. [comment]----copy me too!----[/comment]
  420.  
  421. [/div][/div][/div]
  422. [comment]----plot details end----[/comment]
  423. [/div]
  424.  
  425. [comment]----plot contents----[/comment]
  426. [div=height:auto; width:100%; text-align:justify; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:16px;][comment]
  427.  
  428. ----* * * text starts here----
  429.  
  430. [/comment][div=display:inline; color: var(--color-1); font-weight:bold;]Muse A.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, tellus a ultricies suscipit, orci arcu sollicitudin est, ut mollis dolor justo sed massa. Proin interdum nunc quis nisi elementum tristique. Etiam tempus dolor a dui congue, eget faucibus velit condimentum. Ut tristique nunc quis eleifend aliquam. Aenean sollicitudin fringilla ante eget aliquam. Curabitur ac mattis metus, id ultrices elit. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Donec at ultrices velit. Nunc imperdiet egestas mauris, non aliquet metus dapibus eu. Duis tincidunt consequat fringilla. Vivamus sed risus sit amet turpis condimentum varius sit amet sit amet nulla. Mauris eu lacus sit amet metus condimentum vehicula quis ac turpis. Nulla porttitor rhoncus massa aliquam vulputate.
  431. [/div]
  432. [comment]----plot contents end----[/comment]
  433. [/div]
  434. [comment]----copy me too! (plot)----[/comment]
  435.  
  436. [/div][/div][/div]
  437. [comment]----main container end----[/comment]
  438. [/div]
  439. [comment]----tab contents end----[/comment]
  440. [/div][/tab]
  441. [comment]----(plots) tab end----[/comment]
  442.  
  443. [/tabs][/div][tabs][/tabs][/div][tabs][/tabs]
  444. [comment]----tabs end----[/comment]
  445.  
  446. [/div]
  447. [comment]----right column end----[/comment]
  448.  
  449. [comment]----left column----[/comment]
  450. [div=height:510px; flex:68; min-width:250px; margin:15px; display:flex; flex-flow:column nowrap;]
  451. [comment]----intro section----[/comment]
  452. [div=height:150px; width:100%; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;]
  453. [comment]----picture----[/comment]
  454. [div=width:clamp(98px, -200px + 35vw, 128px); margin:5px 18px 0 5px; position:relative; z-index:8;][div=padding-top:calc(100% - 18px); border:9px solid var(--color-2); box-sizing:border-box; background: var(--img-1); background-size:cover; position:relative; transform:rotate(-2deg);
  455.  
  456. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  457.  
  458. box-shadow:2px 2px 8px var(--bg-1);][div=height:100%; width:100%; background: var(--color-1); position:absolute; top:0; left:0; mix-blend-mode:overlay; opacity:0.2;][/div][div=height:25px; width:60px; background: var(--color-1); opacity:0.6; position:absolute; top:-20px; left:20px; transform:rotate(1deg);][/div][/div][/div]
  459.  
  460. [comment]----intro container----[/comment]
  461. [div=height:100%; flex:1; background:var(--bg-2); padding:16px 0; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:3;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; --m:8px;][div=height:0; width:100%; margin: calc(var(--m) * -1);][/div]
  462.  
  463. [comment]----copy this whole thing to add another info tag----[/comment]
  464. [div=height:auto; width:100%; display:flex; flex-flow:row wrap; align-items:center; margin-top: calc(var(--m) - 6px);]
  465. [div=height:auto; width:auto; max-width:100%; background: var(--color-1); color: var(--h); padding:3px 5px 2px 5px; box-sizing:border-box; font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:6px 12px 0 0; font-weight:bold;][comment]
  466.  
  467. ----* * * tag title here----
  468.  
  469. [/comment]call me[/div]
  470. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; color: var(--t-color); font-family: var(--header); font-size:12px; text-transform:uppercase; line-height:14px; margin-top:6px;][comment]
  471.  
  472. ----* * * tag info here----
  473.  
  474. [/comment]name![/div]
  475. [/div]
  476. [comment]----copy me too!----[/comment]
  477.  
  478. [comment]----copy this whole thing to add another info tag----[/comment]
  479. [div=height:auto; width:100%; display:flex; flex-flow:row wrap; align-items:center; margin-top: calc(var(--m) - 6px);]
  480. [div=height:auto; width:auto; max-width:100%; background: var(--color-1); color: var(--h); padding:3px 5px 2px 5px; box-sizing:border-box; font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:6px 12px 0 0; font-weight:bold;][comment]
  481.  
  482. ----* * * tag title here----
  483.  
  484. [/comment]pronouns[/div]
  485. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; color: var(--t-color); font-family: var(--header); font-size:12px; text-transform:uppercase; line-height:14px; margin-top:6px;][comment]
  486.  
  487. ----* * * tag info here----
  488.  
  489. [/comment]hee/hee[/div]
  490. [/div]
  491. [comment]----copy me too!----[/comment]
  492.  
  493. [comment]----copy this whole thing to add another info tag----[/comment]
  494. [div=height:auto; width:100%; display:flex; flex-flow:row wrap; align-items:center; margin-top: calc(var(--m) - 6px);]
  495. [div=height:auto; width:auto; max-width:100%; background: var(--color-1); color: var(--h); padding:3px 5px 2px 5px; box-sizing:border-box; font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:6px 12px 0 0; font-weight:bold;][comment]
  496.  
  497. ----* * * tag title here----
  498.  
  499. [/comment]age[/div]
  500. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; color: var(--t-color); font-family: var(--header); font-size:12px; text-transform:uppercase; line-height:14px; margin-top:6px;][comment]
  501.  
  502. ----* * * tag info here----
  503.  
  504. [/comment]00[/div]
  505. [/div]
  506. [comment]----copy me too!----[/comment]
  507.  
  508. [comment]----copy this whole thing to add another info tag----[/comment]
  509. [div=height:auto; width:100%; display:flex; flex-flow:row wrap; align-items:center; margin-top: calc(var(--m) - 6px);]
  510. [div=height:auto; width:auto; max-width:100%; background: var(--color-1); color: var(--h); padding:3px 5px 2px 5px; box-sizing:border-box; font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:6px 12px 0 0; font-weight:bold;][comment]
  511.  
  512. ----* * * tag title here----
  513.  
  514. [/comment]timezone[/div]
  515. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; color: var(--t-color); font-family: var(--header); font-size:12px; text-transform:uppercase; line-height:14px; margin-top:6px;][comment]
  516.  
  517. ----* * * tag info here----
  518.  
  519. [/comment]gmt+0[/div]
  520. [/div]
  521. [comment]----copy me too!----[/comment]
  522.  
  523. [comment]----copy this whole thing to add another info tag----[/comment]
  524. [div=height:auto; width:100%; display:flex; flex-flow:row wrap; align-items:center; margin-top: calc(var(--m) - 6px);]
  525. [div=height:auto; width:auto; max-width:100%; background: var(--color-1); color: var(--h); padding:3px 5px 2px 5px; box-sizing:border-box; font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:6px 12px 0 0; font-weight:bold;][comment]
  526.  
  527. ----* * * tag title here----
  528.  
  529. [/comment]partners[/div]
  530. [div=height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; color: var(--t-color); font-family: var(--header); font-size:12px; text-transform:uppercase; line-height:14px; margin-top:6px;][comment]
  531.  
  532. ----* * * tag info here----
  533.  
  534. [/comment]X/8[/div]
  535. [/div]
  536. [comment]----copy me too!----[/comment]
  537.  
  538. [/div][/div][/div]
  539. [comment]----intro container end----[/comment]
  540. [/div]
  541. [comment]----intro section end----[/comment]
  542.  
  543. [comment]----music player----[/comment]
  544. [div=height:29.5px; width:100%; background: var(--bg-2); padding:9px 18px 8px 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; font-family: var(--body); text-transform:uppercase; position:relative; z-index:3; margin-top:auto; flex-shrink:0;]
  545. [comment]----play button----[/comment]
  546. [div=height:11px; width:13px; color: var(--color-1); position:relative; flex-shrink:0;][div=height:auto; width:auto; line-height:100%; position:relative; z-index:2; pointer-events:none; font-size:11px;][fa]fas fa-play[/fa][/div]
  547. [comment]----actual media player----[/comment]
  548. [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;]
  549.  
  550. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  551. [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;]
  552. [media=soundcloud]https://soundcloud.com/chaewon23/lesserafim-the-great-mermaid[/media]
  553. [/border]
  554.  
  555. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  556. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px;]
  557. [media=googledrive]1YLzmWVXtz1dH5xuIAwE-dOwyc5Lf1H80[/MEDIA]
  558. [/border]
  559.  
  560. [/border][/border]
  561. [comment]----actual media player end----[/comment]
  562. [/div]
  563. [comment]----play button end----[/comment]
  564.  
  565. [comment]----music info----[/comment]
  566. [div=height:auto; max-height:12px; flex:1; overflow:hidden; margin-left:15px; color: var(--color-2); font-family: var(--header); text-transform:uppercase; font-size:11.5px; letter-spacing:1px; display:flex; flex-flow:row wrap; align-items:center; font-weight:bold;]
  567. [div=height:auto; width:auto; max-width:100%; line-height:100%; margin-left:auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;][comment]
  568.  
  569. ----* * * song title here----
  570.  
  571. [/comment]baddie[/div]
  572. [div=height:0; width:15px; border-top:2px solid var(--color-2); margin:0 12px;][/div]
  573. [div=height:auto; width:auto; line-height:100%;][comment]
  574.  
  575. ----* * * song artist here----
  576.  
  577. [/comment]ive[/div]
  578. [/div]
  579. [comment]----music info end----[/comment]
  580. [/div]
  581. [comment]----music player end----[/comment]
  582. [/div]
  583. [comment]----left column end----[/comment]
  584.  
  585. [comment]----tab buttons----[/comment]
  586. [div=height:100%; width:100%; padding:15px 14px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow:row-reverse wrap; pointer-events:none;][div=height:auto; min-height:30px; flex:32; min-width:178px; margin:15px; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:60px; width:180px; overflow:hidden; background: var(--bg-2); display:flex; flex-flow:row nowrap; align-items:center; padding:10px 8px; box-sizing:border-box; justify-content:center; flex-shrink:0; position:relative; z-index:3;][div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div]
  587.  
  588. [comment]----button----[/comment]
  589. [div=height:100%; width:30px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  590.  
  591. ----* * * change button icon here----
  592.  
  593. [/comment][fa]fas fa-heart[/fa][/div]
  594. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  595. [comment]----button----[/comment]
  596. [div=height:100%; width:30px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  597.  
  598. ----* * * change button icon here----
  599.  
  600. [/comment][fa]fas fa-heart[/fa][/div]
  601. [div=height:100%; width:23px; pointer-events:auto; flex-shrink:0;][/div]
  602. [comment]----button----[/comment]
  603. [div=height:100%; width:30px; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-size:22px; text-shadow:0 0 3px var(--color-2); flex-shrink:0;][comment]
  604.  
  605. ----* * * change button icon here----
  606.  
  607. [/comment][fa]fas fa-heart[/fa][/div]
  608.  
  609. [div=height:100%; width:12px; pointer-events:auto; flex-shrink:0;][/div][/div]
  610.  
  611. [comment]----extra pics----[/comment]
  612. [div=height:100%; width:clamp(0px, -300px + 48vw, 130px); border:clamp(0px, -120px + 18vw, 10px) solid var(--color-2); border-bottom:45px solid var(--color-2); box-sizing:border-box; transform:rotate(4deg); position:relative; z-index:8; display:flex; flex-flow:column nowrap; margin:30px 0 10px 20px; box-shadow:3px 3px 10px var(--bg-1);][div=height:28px; width:clamp(0px, -200px + 28vw, 76px); background: var(--color-1); opacity:0.6; position:absolute; top:-20px; left:30px; transform:rotate(6deg);][/div]
  613. [comment]----scribble----[/comment]
  614. [div=height:auto; width:auto; max-width:123px; box-sizing:border-box; color: var(--color-1); font-family: var(--scribble); line-height:65%; position:absolute; top:355px; right:-5px; transform:rotate(-10deg); font-size:clamp(0px, -100px + 13vw, 26px); font-weight:bold; letter-spacing:1px; text-shadow:1px 1px var(--color-2), -1px -1px var(--color-2); text-align:right;][comment]
  615.  
  616. ----* * * scribble here (keep it short)----
  617.  
  618. [/comment]pretty little risky![/div]
  619.  
  620. [div=flex:1; width:100%; background: var(--eimg-1); background-size:cover;
  621.  
  622. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  623.  
  624. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div]
  625. [div=height:10px; width:100%; flex-shrink:0; background: var(--color-2);][/div]
  626.  
  627. [div=flex:1; width:100%; background: var(--eimg-2); background-size:cover;
  628.  
  629. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  630.  
  631. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div]
  632. [div=height:10px; width:100%; flex-shrink:0; background: var(--color-2);][/div]
  633.  
  634. [div=flex:1; width:100%; background: var(--eimg-3); background-size:cover;
  635.  
  636. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  637.  
  638. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div]
  639. [div=height:10px; width:100%; flex-shrink:0; background: var(--color-2);][/div]
  640.  
  641. [div=flex:1; width:100%; background: var(--eimg-4); background-size:cover;
  642.  
  643. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  644.  
  645. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:overlay; opacity:0.2;][/div][/div]
  646.  
  647. [/div]
  648. [comment]----extra pics end----[/comment]
  649.  
  650. [/div][div=height:480px; flex:68; min-width:250px; margin:15px;][/div][/div]
  651. [comment]----tab buttons end----[/comment]
  652.  
  653. [comment]----stickers----[/comment]
  654. [div=height:calc(100% - var(--mob)); width:100%; position:absolute; top: var(--mob); left:0; z-index:9; --mob: clamp(0px, 300px - 38vw, 80px); pointer-events:none;]
  655. [div=height:auto; width:auto; position:absolute; top:120px; left:18px; color: var(--s4); font-size:24px; line-height:100%; transform:rotate(-14deg); text-shadow:1px 1px 1px var(--bg-1);][fa]fas fa-star[/fa][/div]
  656. [div=height:auto; width:auto; position:absolute; top:142px; left:8px; color: var(--s4); font-size:12px; line-height:100%; transform:rotate(6deg); text-shadow:1px 1px 1px var(--bg-1);][fa]fas fa-star[/fa][/div]
  657. [div=height:44px; width:44px; background: var(--bg-2); border-radius:50%; position:absolute; bottom:175px; right:clamp(-10px, -200px + 26vw, 33px); color: var(--s5); font-size:40px; line-height:100%; transform:rotate(-9deg) scale(0.95, 1); text-shadow:1px 1px 3px var(--bg-1); display:flex; align-items:center; justify-content:center;][fa]fas fa-kiss-beam[/fa][/div]
  658. [div=height:auto; width:auto; position:absolute; top:clamp(90px, -400px + 70vw, 212px); right:clamp(15px, -400px + 50vw, 175px); color: var(--s1); font-size:19px; line-height:100%; transform:rotate(25deg); text-shadow:1px 1px 1px var(--bg-1);][fa]fas fa-star[/fa][/div]
  659. [div=height:auto; width:auto; position:absolute; top:clamp(60px, -400px + 70vw, 242px); right:clamp(-10px, -400px + 50vw, 158px); color: var(--s3); font-size:35px; line-height:100%; text-shadow:1px 1px 2px var(--bg-1); -webkit-text-stroke:2.5px var(--color-2); transform:scale(1, 0.9) rotate(-20deg);][fa]fas fa-heart[/fa][/div]
  660. [div=height:auto; width:auto; position:absolute; bottom:52px; left:120px; color: var(--s6); font-size:60px; line-height:100%; transform:rotate(28deg) scale(1.15, 1); text-shadow:1px 1px 3px var(--bg-1); -webkit-text-stroke:4px var(--color-2);][fa]fas fa-heart[/fa][div=height:100%; width:100%; position:absolute; top:0px; left:0; display:flex; align-items:center; justify-content:center; color: transparent; font-size:52px; -webkit-text-stroke:1.5px var(--h); text-shadow:0px 0px transparent; transform:scale(1.07, 1.03);][fa]fas fa-heart[/fa][/div][div=height:100%; width:100%; padding:10px 10px 20px 8px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-family: var(--scribble); font-size:19px; line-height:60%; -webkit-text-stroke:0px; text-shadow:0px 0px transparent; text-align:center; -webkit-text-stroke:1px var(--h); text-shadow:2px 2px var(--h); letter-spacing:-1px;][font=Caprasimo]ooh![/font][/div][/div]
  661. [div=height:auto; width:auto; position:absolute; bottom:300px; left:16px; color: var(--s5); font-size:22px; line-height:100%; transform:rotate(20deg); text-shadow:1px 1px 1px var(--bg-1);][fa]fas fa-asterisk[/fa][/div]
  662. [/div]
  663. [div=height:60px; width:130px; position:absolute; bottom:clamp(-50px, -300px + 40vw, 50px); right:clamp(-20px, -300px + 47vw, 135px); z-index:2; padding:0 12px; box-sizing:border-box; background: linear-gradient(0deg, var(--s5), var(--s6)); box-shadow:3px 3px 8px var(--bg-1); border-radius:10px; transform:rotate(-15deg); color: var(--h); display:flex; align-items:center; justify-content:center; font-size:20px; line-height:70%; text-align:center; border:2px solid var(--color-2); pointer-events:none; overflow:hidden;][font=Pinyon Script][comment]
  664.  
  665. ----* edit sticker text here!----
  666.  
  667. [/comment]Don't think, just do![/font][/div]
  668. [div=height:auto; width:auto; position:absolute; bottom:75px; left:78px; z-index:2; color: var(--s3); font-size:22px; line-height:100%; transform:rotate(-45deg); text-shadow:1px 1px 1px var(--bg-1);][fa]fas fa-star-christmas[/fa][/div]
  669. [div=height:auto; width:auto; position:absolute; top:35px; right:110px; z-index:2; font-size:50px; line-height:100%; transform:rotate(25deg) scale(1.4, 1); background: -webkit-linear-gradient(45deg, var(--s3) 30%, var(--s1) 50%, var(--s6) 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; pointer-events:none;][font=Redacted Script]abnyjys[/font][/div]
  670. [comment]----stickers end----[/comment]
  671.  
  672. [comment]----grid----[/comment]
  673. [div=height:100%; width:100%; background: var(--grid); background-size:30px 30px; position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/div]
  674.  
  675. [comment]----signature! do not remove----[/comment]
  676. [bg=transparent; height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute ;z-index:6;opacity:0.2;color: var(--color-2); font-size:9px;text-align:center; bottom:2px; right:0px; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  677. [/div][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!