API tools faq
paste
ooksie

saudade (day ver.)

ooksie
May 20th, 2022 (edited)
283
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.06 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Mitr]title[/font]
  4. [font=Radio Canada]header[/font]
  5. [font=Rubik]body text[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10.  
  11. /*main background colour*/
  12. --bg-1: #f9f9f9;
  13. /*textbox background colour*/
  14. --bg-2: #fcfcfc;
  15.  
  16. /*contrasting colour to bg-1; you can make it in the same hue as color-2*/
  17. --color-1: #3a4456;
  18. /*textbox borders; you can make it an in-between between color-1 and bg-1 in the same hue as color-2*/
  19. --color-1b: #b1b9c9;
  20. /*main accent colour -- most tags and headers*/
  21. --color-2: #9CADCE;
  22. /*secondary accent colour -- large title text, decorative icons*/
  23. --color-3: #CB8CB6;
  24.  
  25. /*unselected button colour*/
  26. --button: var(--color-1b);
  27.  
  28. /*text colour*/
  29. --t-color:#020202;
  30.  
  31. /*fonts used*/
  32. --title: 'Mitr', sans-serif;
  33. --header: 'Radio Canada', sans-serif;
  34. --body: 'Rubik', sans-serif;
  35.  
  36. /*left/top large image*/
  37. --img-1: url('https://64.media.tumblr.com/78f82f7b05c3eb9eac3ff09e1e4d70f3/1394fcbcadedcf78-b6/s400x600/ca9ef3f3c5944ddcbd81ded46c04ab11027a0c7d.gifv');
  38. /*quote icon on tab 1*/
  39. --img-2: url('https://64.media.tumblr.com/d77146e78bd3774f433f214a6f61eea5/bf85b2ef8d6d3702-e9/s1280x1920/21638dd68fa6fb80e13da03a0c23e2be0f1c0bdc.jpg');
  40. /*bottom image on tab 3*/
  41. --img-3: URL('https://64.media.tumblr.com/fc96cb833e388a6949b99735f38ec4d6/1fb7cd2b527ef061-29/s400x600/85720e80415a1f7f3cd5408b51a2c01e9633fabe.gifv');
  42. /*image next to music player on tab 4*/
  43. --img-4: URL('https://64.media.tumblr.com/2f7a1834e2c1730e973e7d5b0a4e9138/1394fcbcadedcf78-f2/s400x600/40c32c5ff27353d18e84996766f67ea443b6fc1d.gifv');
  44.  
  45. /*gallery images*/
  46. --gimg-1: url('https://64.media.tumblr.com/41d0952b91fa09cd7b8dbea79e1d126d/10b3a256ae3c592f-9c/s1280x1920/28b93432b85f93644813824017cf40483f63c2cd.jpg');
  47. --gimg-2: url('https://64.media.tumblr.com/41d0952b91fa09cd7b8dbea79e1d126d/10b3a256ae3c592f-9c/s1280x1920/28b93432b85f93644813824017cf40483f63c2cd.jpg');
  48. --gimg-3: url('https://64.media.tumblr.com/41d0952b91fa09cd7b8dbea79e1d126d/10b3a256ae3c592f-9c/s1280x1920/28b93432b85f93644813824017cf40483f63c2cd.jpg');
  49.  
  50.  
  51. height:auto; width:100%; padding:0; margin:15px 0 25px 0; overflow-x:auto; line-height:0;][border=transparent; height:auto; width:clamp(320px, 90vw, 670px); padding:0; margin:5px auto; border:4px solid var(--color-2); box-sizing:border-box; overflow:hidden; border-radius:8px;][border=transparent; height:100%; width:100%; padding:clamp(5px, -40px + 12vw, 15px) clamp(9px, -40px + 12vw, 19px); box-sizing:border-box; position:relative; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; --m:10px 9px;]
  52.  
  53. [comment]----left----[/comment]
  54. [border=transparent; height:clamp(300px, -150px + 58vw, 350px); width:260px; padding:0; margin: var(--m); margin-right:clamp(-80px, -250px + 45vw, var(--m)); position:relative; z-index:5; display:flex; flex-flow:column nowrap; justify-content:flex-end;]
  55.  
  56. [comment]----image----[/comment]
  57. [border=transparent; flex:1; width:calc(100% - 40px); padding:0; background: var(--img-1); background-size:cover;
  58.  
  59. /*edit the following to adjust the cropping of the image*/ background-position:50% 80%;
  60.  
  61. border-radius:10px 10px 0 0; overflow:hidden; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.2;][/border][/border]
  62. [border=transparent; height:9px; width:calc(100% - 40px); padding:0; background: var(--color-2); border-radius:0 0 1px 1px; opacity:0.8;][/border]
  63.  
  64. [comment]----accordion----[/comment]
  65. [border=transparent; height:auto; width:auto; padding:0; position:relative; z-index:2; font-size:0; visibility:hidden;][accordion=100%;]
  66.  
  67. [comment]----name container----[/comment]
  68. {slide=[border=transparent; height:auto; min-height:65px; width:260px; padding:0; position:relative; display:flex; flex-flow:column nowrap; margin:-7px; font-variant:normal; font-weight:normal; position:relative; visibility:visible;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:10px; left:0; color: var(--color-1); pointer-events:none; font-size:8px; font-family: var(--header); letter-spacing:2px; opacity:0.6; text-transform:uppercase; font-weight:bold; background:var(--bg-1);]click![/border]
  69.  
  70. [comment]----title text----[/comment]
  71. [border=transparent;
  72.  
  73. /*edit font-size here*/ --fs: 68px;
  74.  
  75. height:fit-content; width:85%; padding:0; color: var(--color-3); font-size: var(--fs); font-family: var(--title); font-weight:bold; text-shadow:3px 3px var(--bg-1); position:relative; top:-25px; margin:0 3px -23px auto; text-align:right; line-height:calc(var(--fs) - 2px); letter-spacing:2px; transform:rotate(3deg); text-transform:uppercase; position:relative; z-index:5;][comment]
  76.  
  77. ----* * * title here (keep this short)----
  78.  
  79. [/comment]title[/border]
  80.  
  81. [comment]----subtitle----[/comment]
  82. [border=transparent; height:auto; width:85%; padding:0; color: var(--color-1); font-size:15px; font-family: var(--header); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; line-height:100%; margin-top:10px; text-shadow:1px 1px var(--color-2);][comment]
  83.  
  84.  
  85. ----* * * subtitle here----
  86.  
  87. [/comment]subtitle ![/border]
  88.  
  89. [/border]}
  90. [comment]----basics----[/comment]
  91. [border=transparent; height:auto; max-height:110px; width:220px; padding:0; visibility:visible; margin:10px -7px -7px -7px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:237px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:220px; padding:0; margin-bottom:3px; --m-b:6px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-b) * -1);][/border]
  92.  
  93. [comment]----copy this whole thing to make another tag----[/comment]
  94. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-b);]
  95. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  96.  
  97. ----* * * info title here----
  98.  
  99. [/comment]full name[/border][/border]
  100.  
  101. [border=transparent; height:20px; flex:1; padding:0;][/border]
  102. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  103.  
  104. ----* * *info text here----
  105.  
  106. [/comment]answer[/border]
  107. [/border]
  108. [comment]----copy me too!----[/comment]
  109.  
  110. [comment]----copy this whole thing to make another tag----[/comment]
  111. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-b);]
  112. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  113.  
  114. ----* * * info title here----
  115.  
  116. [/comment]nickname.s[/border][/border]
  117.  
  118. [border=transparent; height:20px; flex:1; padding:0;][/border]
  119. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  120.  
  121. ----* * *info text here----
  122.  
  123. [/comment]answer[/border]
  124. [/border]
  125. [comment]----copy me too!----[/comment]
  126.  
  127. [comment]----copy this whole thing to make another tag----[/comment]
  128. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-b);]
  129. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  130.  
  131. ----* * * info title here----
  132.  
  133. [/comment]age[/border][/border]
  134.  
  135. [border=transparent; height:20px; flex:1; padding:0;][/border]
  136. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  137.  
  138. ----* * *info text here----
  139.  
  140. [/comment]answer[/border]
  141. [/border]
  142. [comment]----copy me too!----[/comment]
  143.  
  144. [comment]----copy this whole thing to make another tag----[/comment]
  145. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-b);]
  146. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  147.  
  148. ----* * * info title here----
  149.  
  150. [/comment]d.o.b.[/border][/border]
  151.  
  152. [border=transparent; height:20px; flex:1; padding:0;][/border]
  153. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  154.  
  155. ----* * *info text here----
  156.  
  157. [/comment]xx.xx.xxxx[/border]
  158. [/border]
  159. [comment]----copy me too!----[/comment]
  160.  
  161. [comment]----copy this whole thing to make another tag----[/comment]
  162. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-b);]
  163. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  164.  
  165. ----* * * info title here----
  166.  
  167. [/comment]p.o.b.[/border][/border]
  168.  
  169. [border=transparent; height:20px; flex:1; padding:0;][/border]
  170. [border=transparent; height:auto; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12.5px; line-height:16px; text-transform:uppercase; letter-spacing:0.5px;][comment]
  171.  
  172. ----* * *info text here----
  173.  
  174. [/comment]answer[/border]
  175. [/border]
  176. [comment]----copy me too!----[/comment]
  177.  
  178. [/border][/border][/border]{/slide}
  179. [/accordion][/border]
  180. [comment]----accordion end----[/comment]
  181.  
  182. [/border]
  183. [comment]----left end----[/comment]
  184.  
  185. [comment]----right (main container)----[/comment]
  186. [border=transparent; height:380px; flex:53; min-width:280px; max-width:380px; padding:0; position:relative; margin: var(--m); display:flex; justify-content:flex-end;]
  187. [comment]----tabs----[/comment]
  188. [border=transparent; height:25px; width:190px; padding:0; overflow:hidden;][border=transparent; padding:0; margin:-2px -40px 0 -25px; letter-spacing:-50px;][tabs]
  189.  
  190. [comment]----tab 1----[/comment]
  191. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; z-index:4; pointer-events:none; letter-spacing:0; display:flex; flex-flow:column nowrap;]
  192. [comment]----button select----[/comment]
  193. [border=transparent; height:25px; width:190px; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; margin:0 0 0 auto; flex-shrink:0;]
  194.  
  195. [comment]----selected button----[/comment]
  196. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0; position:relative;][border=transparent; height:14px; width:14px; padding:0; border-radius:50%; background:var(--color-2); position:relative; z-index:2;][/border][border=transparent; height:19px; width:19px; padding:0; box-sizing:border-box; border:4px solid var(--color-2); opacity:0.45; position:absolute; top:-2.5px; left:-2.5px; z-index:1; border-radius:50%;][/border][/border]
  197. [border=transparent;height:100%; flex:1; padding:0;][/border]
  198.  
  199. [comment]----filler button----[/comment]
  200. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  201. [border=transparent;height:100%; flex:1; padding:0;][/border]
  202. [comment]----filler button----[/comment]
  203. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  204. [border=transparent;height:100%; flex:1; padding:0;][/border]
  205. [comment]----filler button----[/comment]
  206. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  207. [/border]
  208. [comment]----button select end----[/comment]
  209.  
  210. [comment]----tab contents----[/comment]
  211. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top:20px; pointer-events:auto;]
  212.  
  213. [comment]----quote----[/comment]
  214. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;]
  215. [comment]----quote icon----[/comment]
  216. [border=transparent; height:68px; width:68px; padding:8px; box-sizing:border-box; position:relative; border-radius:50%; overflow:hidden; flex-shrink:0; margin-top:25px;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.4; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; background-position:center; border-radius:50%; position:relative; z-index:3; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.2;][/border][/border][/border]
  217.  
  218. [comment]----quote box----[/comment]
  219. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap; position:relative; margin:0 2px 0 8px;][border=transparent; height:75px; width:calc(100% - 10px); padding:9px 0 10px 0; box-sizing:border-box; border:2px solid var(--color-2); background: var(--bg-2); border-radius:15px; position:relative; margin-left:10px; display:flex; align-items:center; justify-content:center;][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:-12px; left:-12px; color: var(--color-1); font-size:33px; opacity:0.8;][fa]fas fa-quote-left[/fa][/border][border=transparent; height:auto; max-height:46px; width:100%; padding:0 15px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:12px; letter-spacing:0.5px; line-height:15px; font-family: var(--body); text-align:justify; overflow:hidden;][comment]
  220.  
  221. ----* * * quote here----
  222.  
  223. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla consectetur orci, non.[/border]
  224.  
  225. [/border]
  226. [border=transparent; height:12px; width:60px; padding:0; border:2px solid var(--color-2); box-sizing:border-box; background: var(--bg-1); border-radius:8px; margin:7px 0 0 18px;][/border]
  227. [border=transparent; height:10px; width:10px; padding:0; border:2px solid var(--color-2); box-sizing:border-box; background: var(--bg-1); border-radius:50%; margin:2px 0 0 3px;][/border]
  228. [/border]
  229. [/border]
  230. [comment]----quote end----[/comment]
  231.  
  232. [comment]----appearance----[/comment]
  233. [border=transparent; height:205px; width:100%; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); display:flex; flex-flow:column nowrap; margin-top:25px;]
  234. [comment]----textbox header----[/comment]
  235. [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:30px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  236.  
  237. ----* * * textbox icon here----
  238.  
  239. [/comment][fa]fas fa-eye[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  240.  
  241. ----* * * textbox title here----
  242.  
  243. [/comment]appearance[/border]
  244. [/border]
  245. [comment]----textbox header end----[/comment]
  246.  
  247. [comment]----textbox contents----[/comment]
  248. [border=transparent; height:calc(100% - 30px); width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;]
  249. [comment]----appearance details----[/comment]
  250. [border=transparent; height:100%; width:88px; padding:15px 0; box-sizing:border-box; border-left:1px solid var(--color-1b); flex-shrink:0; display:flex; align-items:center;][border=transparent; height:auto; max-height:145px; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 8px; box-sizing:border-box; --m-a: 16px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-a) * -1);][/border]
  251.  
  252. [comment]----copy this whole thing to add another appearance detail----[/comment]
  253. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-a);]
  254. [border=transparent; height:auto; width:auto; padding:0; text-align:center; font-family: var(--body); font-weight:bold; letter-spacing:1px; color: var(--color-2); font-size:11px; line-height:100%; text-transform:uppercase;][comment]
  255.  
  256. ----* * * detail title here----
  257.  
  258. [/comment]height[/border]
  259. [border=transparent; height:auto; width:100%; padding:0; text-align:center; font-family: var(--body); color: var(--t-color); font-size:12px; line-height:100%; text-transform:uppercase; margin-top:5px;][comment]
  260.  
  261. ----* * * detail info here----
  262.  
  263. [/comment]answer[/border]
  264. [/border]
  265. [comment]----copy me too!----[/comment]
  266.  
  267. [comment]----copy this whole thing to add another appearance detail----[/comment]
  268. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-a);]
  269. [border=transparent; height:auto; width:auto; padding:0; text-align:center; font-family: var(--body); font-weight:bold; letter-spacing:1px; color: var(--color-2); font-size:11px; line-height:100%; text-transform:uppercase;][comment]
  270.  
  271. ----* * * detail title here----
  272.  
  273. [/comment]weight[/border]
  274. [border=transparent; height:auto; width:100%; padding:0; text-align:center; font-family: var(--body); color: var(--t-color); font-size:12px; line-height:100%; text-transform:uppercase; margin-top:5px;][comment]
  275.  
  276. ----* * * detail info here----
  277.  
  278. [/comment]answer[/border]
  279. [/border]
  280. [comment]----copy me too!----[/comment]
  281.  
  282. [comment]----copy this whole thing to add another appearance detail----[/comment]
  283. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-a);]
  284. [border=transparent; height:auto; width:auto; padding:0; text-align:center; font-family: var(--body); font-weight:bold; letter-spacing:1px; color: var(--color-2); font-size:11px; line-height:100%; text-transform:uppercase;][comment]
  285.  
  286. ----* * * detail title here----
  287.  
  288. [/comment]hair c.[/border]
  289. [border=transparent; height:auto; width:100%; padding:0; text-align:center; font-family: var(--body); color: var(--t-color); font-size:12px; line-height:100%; text-transform:uppercase; margin-top:5px;][comment]
  290.  
  291. ----* * * detail info here----
  292.  
  293. [/comment]answer[/border]
  294. [/border]
  295. [comment]----copy me too!----[/comment]
  296.  
  297. [comment]----copy this whole thing to add another appearance detail----[/comment]
  298. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top: var(--m-a);]
  299. [border=transparent; height:auto; width:auto; padding:0; text-align:center; font-family: var(--body); font-weight:bold; letter-spacing:1px; color: var(--color-2); font-size:11px; line-height:100%; text-transform:uppercase;][comment]
  300.  
  301. ----* * * detail title here----
  302.  
  303. [/comment]eye c.[/border]
  304. [border=transparent; height:auto; width:100%; padding:0; text-align:center; font-family: var(--body); color: var(--t-color); font-size:12px; line-height:100%; text-transform:uppercase; margin-top:5px;][comment]
  305.  
  306. ----* * * detail info here----
  307.  
  308. [/comment]answer[/border]
  309. [/border]
  310. [comment]----copy me too!----[/comment]
  311. [/border][/border][/border][/border]
  312. [comment]----appearance details end----[/comment]
  313.  
  314. [comment]----appearance contents----[/comment]
  315. [border=transparent; height:172px; flex:1; padding:11px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; margin-bottom:3px; --m-a: 9px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-a) * -1);][/border]
  316.  
  317. [comment]----copy this whole thing to make another tag----[/comment]
  318. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-a);]
  319. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  320.  
  321. ----* * * info title here----
  322.  
  323. [/comment]hair styling[/border][/border]
  324.  
  325. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  326.  
  327. ----* * *info text here----
  328.  
  329. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
  330. [/border]
  331. [comment]----copy me too!----[/comment]
  332.  
  333. [comment]----copy this whole thing to make another tag----[/comment]
  334. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-a);]
  335. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  336.  
  337. ----* * * info title here----
  338.  
  339. [/comment]build[/border][/border]
  340.  
  341. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  342.  
  343. ----* * *info text here----
  344.  
  345. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
  346. [/border]
  347. [comment]----copy me too!----[/comment]
  348.  
  349. [comment]----copy this whole thing to make another tag----[/comment]
  350. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-a);]
  351. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  352.  
  353. ----* * * info title here----
  354.  
  355. [/comment]body mods.[/border][/border]
  356.  
  357. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  358.  
  359. ----* * *info text here----
  360.  
  361. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
  362. [/border]
  363. [comment]----copy me too!----[/comment]
  364.  
  365. [comment]----copy this whole thing to make another tag----[/comment]
  366. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-a);]
  367. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  368.  
  369. ----* * * info title here----
  370.  
  371. [/comment]faceclaim[/border][/border]
  372.  
  373. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  374.  
  375. ----* * *info text here----
  376.  
  377. [/comment]answer[/border]
  378. [/border]
  379. [comment]----copy me too!----[/comment]
  380.  
  381. [/border][/border][/border]
  382. [comment]----appearance contents end----[/comment]
  383. [/border]
  384. [comment]----textbox contents end----[/comment]
  385. [/border]
  386. [comment]----appearance end----[/comment]
  387.  
  388. [/border]
  389. [comment]----tab contents end----[/comment]
  390. [/border][/tab]
  391. [comment]----tab 1 end----[/comment]
  392.  
  393.  
  394. [comment]----tab 2----[/comment]
  395. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; z-index:4; pointer-events:none; letter-spacing:0; display:flex; flex-flow:column nowrap;]
  396. [comment]----button select----[/comment]
  397. [border=transparent; height:25px; width:190px; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; margin:0 0 0 auto; flex-shrink:0;]
  398. [comment]----filler button----[/comment]
  399. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  400. [border=transparent;height:100%; flex:1; padding:0;][/border]
  401.  
  402. [comment]----selected button----[/comment]
  403. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0; position:relative;][border=transparent; height:14px; width:14px; padding:0; border-radius:50%; background:var(--color-2); position:relative; z-index:2;][/border][border=transparent; height:19px; width:19px; padding:0; box-sizing:border-box; border:4px solid var(--color-2); opacity:0.45; position:absolute; top:-2.5px; left:-2.5px; z-index:1; border-radius:50%;][/border][/border]
  404. [border=transparent;height:100%; flex:1; padding:0;][/border]
  405.  
  406. [comment]----filler button----[/comment]
  407. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  408. [border=transparent;height:100%; flex:1; padding:0;][/border]
  409. [comment]----filler button----[/comment]
  410. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  411. [/border]
  412. [comment]----button select end----[/comment]
  413.  
  414. [comment]----tab contents----[/comment]
  415. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top:15px; pointer-events:auto;]
  416.  
  417. [comment]----personality----[/comment]
  418. [border=transparent; height:58%; width:100%; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); display:flex; flex-flow:column nowrap; flex-shrink:0;]
  419. [comment]----textbox header----[/comment]
  420. [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:30px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  421.  
  422. ----* * * textbox icon here----
  423.  
  424. [/comment][fa]fas fa-user[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  425.  
  426. ----* * * textbox title here----
  427.  
  428. [/comment]personality[/border]
  429. [/border]
  430. [comment]----textbox header end----[/comment]
  431.  
  432. [comment]----textbox contents----[/comment]
  433. [border=transparent; height:calc(100% - 30px); width:100%; padding:11px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; --m-p:11px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-p) * -1);][/border]
  434.  
  435. [comment]----copy this whole thing for a long text----[/comment]
  436. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-size:11.5px; text-align:justify; font-family: var(--body); line-height:16px; margin-top: var(--m-p)][comment]
  437.  
  438. ----* * * text starts here----
  439.  
  440. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius laoreet sem nec consequat. Cras nec dignissim magna. Fusce eu ornare enim, vitae molestie ligula. Nullam aliquam sem elit, sed porta sem varius sed. In sit amet mollis arcu. Nulla sed leo aliquam ligula pulvinar lobortis eget a justo. Quisque commodo molestie rutrum. Donec quis vehicula velit, eget porta risus. Nullam tortor enim, volutpat lacinia libero venenatis, fermentum auctor libero. Mauris in dapibus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam a iaculis augue. Sed consectetur tristique sapien, non lobortis mi vehicula id.
  441. [/border]
  442. [comment]----copy me too!----[/comment]
  443.  
  444. [comment]----copy this whole thing to make another tag----[/comment]
  445. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-p);]
  446. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  447.  
  448. ----* * * info title here----
  449.  
  450. [/comment]virtues[/border][/border]
  451.  
  452. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  453.  
  454. ----* * *info text here----
  455.  
  456. [/comment]virtue, virtue, virtue, virtue, virtue[/border]
  457. [/border]
  458. [comment]----copy me too!----[/comment]
  459.  
  460. [comment]----copy this whole thing to make another tag----[/comment]
  461. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-p);]
  462. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  463.  
  464. ----* * * info title here----
  465.  
  466. [/comment]vices[/border][/border]
  467.  
  468. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  469.  
  470. ----* * *info text here----
  471.  
  472. [/comment]vice, vice, vice, vice, vice[/border]
  473. [/border]
  474. [comment]----copy me too!----[/comment]
  475.  
  476. [/border][/border][/border]
  477. [comment]----textbox contents end----[/comment]
  478. [/border]
  479. [comment]----personality end----[/comment]
  480.  
  481. [comment]----personality details----[/comment]
  482. [border=transparent; height:37%; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:auto;]
  483.  
  484. [comment]----likes----[/comment]
  485. [border=transparent; height:100%; flex:1; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); display:flex; flex-flow:column nowrap;]
  486. [comment]----textbox header----[/comment]
  487. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:27px; width:30px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:12px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  488.  
  489. ----* * * textbox icon here----
  490.  
  491. [/comment][fa]fas fa-thumbs-up[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2);
  492. font-family: var(--header); font-size:13px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  493.  
  494. ----* * * textbox title here----
  495.  
  496. [/comment]likes[/border]
  497. [/border]
  498. [comment]----textbox header end----[/comment]
  499.  
  500. [comment]----textbox contents----[/comment]
  501. [border=transparent; height:calc(100% - 27px); width:100%; padding:9px 0 10px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  502.  
  503. ----* * * text starts here----
  504.  
  505. [/comment]a list of likes here. this scrolls!
  506. [/border][/border][/border]
  507. [comment]----textbox contents end----[/comment]
  508. [/border]
  509. [comment]----likes end----[/comment]
  510.  
  511. [border=transparent; height:100%; width:18px; padding:0; flex-shrink:0;][/border]
  512.  
  513. [comment]----dislikes----[/comment]
  514. [border=transparent; height:100%; flex:1; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); display:flex; flex-flow:column nowrap;]
  515. [comment]----textbox header----[/comment]
  516. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:27px; width:30px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:12px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  517.  
  518. ----* * * textbox icon here----
  519.  
  520. [/comment][fa]fas fa-thumbs-down[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-3); font-family: var(--header); font-size:13px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  521.  
  522. ----* * * textbox title here----
  523.  
  524. [/comment]dislikes[/border]
  525. [/border]
  526. [comment]----textbox header end----[/comment]
  527.  
  528. [comment]----textbox contents----[/comment]
  529. [border=transparent; height:calc(100% - 27px); width:100%; padding:9px 0 10px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  530.  
  531. ----* * * text starts here----
  532.  
  533. [/comment]a list of dislikes here. this scrolls!
  534. [/border][/border][/border]
  535. [comment]----textbox contents end----[/comment]
  536. [/border]
  537. [comment]----dislikes end----[/comment]
  538.  
  539. [/border]
  540. [comment]----personality details end----[/comment]
  541. [/border]
  542. [comment]----tab contents end----[/comment]
  543. [/border][/tab]
  544. [comment]----tab 2 end----[/comment]
  545.  
  546.  
  547. [comment]----tab 3----[/comment]
  548. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; z-index:4; pointer-events:none; letter-spacing:0; display:flex; flex-flow:column nowrap;]
  549. [comment]----button select----[/comment]
  550. [border=transparent; height:25px; width:190px; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; margin:0 0 0 auto; flex-shrink:0;]
  551. [comment]----filler button----[/comment]
  552. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  553. [border=transparent;height:100%; flex:1; padding:0;][/border]
  554. [comment]----filler button----[/comment]
  555. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  556. [border=transparent;height:100%; flex:1; padding:0;][/border]
  557.  
  558. [comment]----selected button----[/comment]
  559. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0; position:relative;][border=transparent; height:14px; width:14px; padding:0; border-radius:50%; background:var(--color-2); position:relative; z-index:2;][/border][border=transparent; height:19px; width:19px; padding:0; box-sizing:border-box; border:4px solid var(--color-2); opacity:0.45; position:absolute; top:-2.5px; left:-2.5px; z-index:1; border-radius:50%;][/border][/border]
  560. [border=transparent;height:100%; flex:1; padding:0;][/border]
  561.  
  562. [comment]----filler button----[/comment]
  563. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  564. [/border]
  565. [comment]----button select end----[/comment]
  566.  
  567. [comment]----tab contents----[/comment]
  568. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top:10px; pointer-events:auto;]
  569.  
  570. [comment]----history----[/comment]
  571. [border=transparent; height:69%; width:calc(100% - 10px); padding:0; background: var(--bg-2); border:1px solid var(--color-1b); flex-shrink:0; position:relative; margin:0 3px 0 auto;]
  572. [comment]----textbox header----[/comment]
  573. [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:30px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  574.  
  575. ----* * * textbox icon here----
  576.  
  577. [/comment][fa]fas fa-book[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  578.  
  579. ----* * * textbox title here----
  580.  
  581. [/comment]history[/border]
  582. [/border]
  583. [comment]----textbox header end----[/comment]
  584.  
  585. [comment]----textbox contents----[/comment]
  586. [border=transparent; height:calc(100% - 30px); width:calc(100% + 10px); position:absolute; bottom:0; left:-10px; padding:7px 0 11px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 0px; box-sizing:border-box; --m-h:16px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-h) * -1);][/border]
  587.  
  588. [comment]----copy this whole thing for a history section----[/comment]
  589. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-h);]
  590. [comment]----section header----[/comment]
  591. [border=transparent; height:auto; width:100%; padding:0 8px 4px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-1px;][border=transparent; height:100%; width:calc(100% - 10px); padding:0; background: var(--bg-2); position:absolute; top:0; right:0; z-index:1;][/border][border=transparent; height:auto; width:auto; padding:3px 2px; box-sizing:border-box; position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; background: var(--bg-1);][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-size:13px; line-height:13px; margin-top:1px;][comment]
  592.  
  593. ----* * * history icon here----
  594.  
  595. [/comment][fa]far fa-star[/fa][/border][/border]
  596. [border=transparent; height:auto; flex:1; padding:3px 0 0 0; box-sizing:border-box; margin-left:13px; color: var(--color-3); font-size:13px; font-weight:bold; letter-spacing:2px; line-height:14px; font-family: var(--body); position:relative; z-index:2; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  597.  
  598. ----* * * section title here----
  599.  
  600. [/comment]section 1[/border]
  601. [/border]
  602. [comment]----section header end----[/comment]
  603.  
  604. [comment]----section contents----[/comment]
  605. [border=transparent; height:auto; width:100%; padding:0 0 0 23px; box-sizing:border-box; margin-top:3px; color: var(--t-color); font-size:11.5px; text-align:justify; font-family: var(--body); line-height:16px;][comment]
  606.  
  607. ----* * * text starts here----
  608.  
  609. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius laoreet sem nec consequat. Cras nec dignissim magna. Fusce eu ornare enim, vitae molestie ligula. Nullam aliquam sem elit, sed porta sem varius sed. In sit amet mollis arcu. Nulla sed leo aliquam ligula pulvinar lobortis eget a justo. Quisque commodo molestie rutrum. Donec quis vehicula velit, eget porta risus. Nullam tortor enim, volutpat lacinia libero venenatis, fermentum auctor libero. Mauris in dapibus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam a iaculis augue. Sed consectetur tristique sapien, non lobortis mi vehicula id.
  610. [/border]
  611. [comment]----section contents end----[/comment]
  612. [/border]
  613. [comment]----copy me too!----[/comment]
  614.  
  615. [comment]----copy this whole thing for a history section----[/comment]
  616. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-h);]
  617. [comment]----section header----[/comment]
  618. [border=transparent; height:auto; width:100%; padding:0 8px 4px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:-1px;][border=transparent; height:100%; width:calc(100% - 10px); padding:0; background: var(--bg-2); position:absolute; top:0; right:0; z-index:1;][/border][border=transparent; height:auto; width:auto; padding:3px 2px; box-sizing:border-box; position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; background: var(--bg-1);][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-size:13px; line-height:13px; margin-top:1px;][comment]
  619.  
  620. ----* * * history icon here----
  621.  
  622. [/comment][fa]far fa-star[/fa][/border][/border]
  623. [border=transparent; height:auto; flex:1; padding:3px 0 0 0; box-sizing:border-box; margin-left:13px; color: var(--color-3); font-size:13px; font-weight:bold; letter-spacing:2px; line-height:14px; font-family: var(--body); position:relative; z-index:2; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  624.  
  625. ----* * * section title here----
  626.  
  627. [/comment]section 2[/border]
  628. [/border]
  629. [comment]----section header end----[/comment]
  630.  
  631. [comment]----section contents----[/comment]
  632. [border=transparent; height:auto; width:100%; padding:0 0 0 23px; box-sizing:border-box; margin-top:3px; color: var(--t-color); font-size:11.5px; text-align:justify; font-family: var(--body); line-height:16px;][comment]
  633.  
  634. ----* * * text starts here----
  635.  
  636. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius laoreet sem nec consequat. Cras nec dignissim magna. Fusce eu ornare enim, vitae molestie ligula. Nullam aliquam sem elit, sed porta sem varius sed. In sit amet mollis arcu. Nulla sed leo aliquam ligula pulvinar lobortis eget a justo. Quisque commodo molestie rutrum. Donec quis vehicula velit, eget porta risus. Nullam tortor enim, volutpat lacinia libero venenatis, fermentum auctor libero. Mauris in dapibus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam a iaculis augue. Sed consectetur tristique sapien, non lobortis mi vehicula id.
  637. [/border]
  638. [comment]----section contents end----[/comment]
  639. [/border]
  640. [comment]----copy me too!----[/comment]
  641.  
  642. [/border][/border][/border]
  643. [comment]----textbox contents end----[/comment]
  644. [/border]
  645. [comment]----history end----[/comment]
  646.  
  647. [comment]----history image----[/comment]
  648. [border=transparent; flex:1; width:calc(100% - 10px); padding:0; margin:18px 3px 0 auto; display:flex; flex-flow:row nowrap;][border=transparent; height:100%; flex:1; padding:0; background: var(--img-3);
  649.  
  650. /*edit the following to adjust the cropping of the image*/ background-position:50% 80%;
  651.  
  652. border-radius:8px 0 0 8px; overflow:hidden; background-size:cover; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.2;][/border][/border][border=transparent; height:100%; width:8px; padding:0; background: var(--color-2); opacity:0.8; flex-shrink:0; border-radius:0 1px 1px 0;][/border][/border]
  653.  
  654. [/border]
  655. [comment]----tab contents end----[/comment]
  656. [/border][/tab]
  657. [comment]----tab 3 end----[/comment]
  658.  
  659.  
  660. [comment]----tab 4----[/comment]
  661. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; z-index:4; pointer-events:none; letter-spacing:0; display:flex; flex-flow:column nowrap;]
  662. [comment]----button select----[/comment]
  663. [border=transparent; height:25px; width:190px; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; margin:0 0 0 auto; flex-shrink:0;]
  664. [comment]----filler button----[/comment]
  665. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  666. [border=transparent;height:100%; flex:1; padding:0;][/border]
  667. [comment]----filler button----[/comment]
  668. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  669. [border=transparent;height:100%; flex:1; padding:0;][/border]
  670. [comment]----filler button----[/comment]
  671. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][/border]
  672. [border=transparent;height:100%; flex:1; padding:0;][/border]
  673.  
  674. [comment]----selected button----[/comment]
  675. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0; position:relative;][border=transparent; height:14px; width:14px; padding:0; border-radius:50%; background:var(--color-2); position:relative; z-index:2;][/border][border=transparent; height:19px; width:19px; padding:0; box-sizing:border-box; border:4px solid var(--color-2); opacity:0.45; position:absolute; top:-2.5px; left:-2.5px; z-index:1; border-radius:50%;][/border][/border]
  676. [/border]
  677. [comment]----button select end----[/comment]
  678.  
  679. [comment]----tab contents----[/comment]
  680. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin-top:10px; pointer-events:auto;]
  681.  
  682. [comment]----row one----[/comment]
  683. [border=transparent; height:62%; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
  684. [comment]----misc----[/comment]
  685. [border=transparent; height:100%; flex:1; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); display:flex; flex-flow:column nowrap;]
  686. [comment]----textbox header----[/comment]
  687. [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:30px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  688.  
  689. ----* * * textbox icon here----
  690.  
  691. [/comment][fa]fas fa-star[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  692.  
  693. ----* * * textbox title here----
  694.  
  695. [/comment]extra[/border]
  696. [/border]
  697. [comment]----textbox header end----[/comment]
  698.  
  699. [comment]----textbox contents----[/comment]
  700. [border=transparent; height:calc(100% - 30px); width:100%; padding:10px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 12px; box-sizing:border-box; --m-m:9px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-m) * -1);][/border]
  701.  
  702. [comment]----copy this whole thing to make another tag----[/comment]
  703. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-m);]
  704. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  705.  
  706. ----* * * info title here----
  707.  
  708. [/comment]misc[/border][/border]
  709.  
  710. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  711.  
  712. ----* * *info text here----
  713.  
  714. [/comment]Lorem ipsum[/border]
  715. [/border]
  716. [comment]----copy me too!----[/comment]
  717.  
  718. [comment]----copy this whole thing to make another tag----[/comment]
  719. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-m);]
  720. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  721.  
  722. ----* * * info title here----
  723.  
  724. [/comment]misc[/border][/border]
  725. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  726.  
  727. ----* * *info text here----
  728.  
  729. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus dui sit amet vehicula faucibus. Nulla nisl neque, pellentesque ac neque at, varius condimentum purus. In eu eros in massa rutrum blandit sed ut ex.[/border]
  730. [/border]
  731. [comment]----copy me too!----[/comment]
  732.  
  733. [comment]----copy this whole thing to make another tag----[/comment]
  734. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top: var(--m-m);]
  735. [border=transparent; height:auto; width:auto; margin:3px 10px 0 0; padding:3px 6px 2px 6px; box-sizing:border-box; flex-shrink:0; border:2px solid var(--color-2); position:relative; border-radius:4px;][border=transparent; height: calc(100% + 1px); width:calc(100% + 1px); padding:0; background: var(--color-2); opacity:0.5; position:absolute; top:-0.4px; left:-0.5px;][/border][border=transparent; height:auto; width:auto; padding:0; font-size:11px; font-family: var(--body); line-height:100%; letter-spacing:1px; text-transform:uppercase; color: var(--color-1); font-weight:bold; position:relative; z-index:2;][comment]
  736.  
  737. ----* * * info title here----
  738.  
  739. [/comment]misc[/border][/border]
  740.  
  741. [border=transparent; height:auto; flex:1; min-width:fit-content; min-width:-moz-fit-content; padding:0; margin:5px 0 0 2px; color: var(--t-color); font-family: var(--body); font-size:11.5px; line-height:16px; text-align:justify;][comment]
  742.  
  743. ----* * *info text here----
  744.  
  745. [/comment]Lorem ipsum[/border]
  746. [/border]
  747. [comment]----copy me too!----[/comment]
  748.  
  749. [/border][/border][/border]
  750. [comment]----textbox contents end----[/comment]
  751. [/border]
  752. [comment]----misc end----[/comment]
  753.  
  754. [comment]----gallery----[/comment]
  755. [border=transparent; height:100%; width:clamp(60px, -50px + 14vw, 70px); padding:0; margin-left:18px; overflow:hidden; border-radius:5px; position:relative;][border=transparent; height:100%; width:clamp(77px, -50px + 14vw, 87px); padding:0; overflow-y:scroll;][border=transparent; height:auto; width:clamp(60px, -50px + 14vw, 70px); padding:0; display:flex; flex-flow:column nowrap; --m-g: 12px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-g) * -1);][/border]
  756.  
  757. [comment]----copy this whole thing to add another gallery image----[/comment]
  758. [border=transparent; width:100%; padding:0; flex-shrink:0; margin-top: var(--m-g);][border=transparent; padding:0; padding-top:100%; position:relative;
  759.  
  760. /*edit this to match variables*/ background: var(--gimg-1);
  761.  
  762. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  763.  
  764. background-size:cover; border-radius:5px; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.23; position:absolute; top:0; left:0;][/border][/border][/border]
  765. [comment]----copy me too!----[/comment]
  766.  
  767. [comment]----copy this whole thing to add another gallery image----[/comment]
  768. [border=transparent; width:100%; padding:0; flex-shrink:0; margin-top: var(--m-g);][border=transparent; padding:0; padding-top:100%; position:relative;
  769.  
  770. /*edit this to match variables*/ background: var(--gimg-2);
  771.  
  772. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  773.  
  774. background-size:cover; border-radius:5px; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.23; position:absolute; top:0; left:0;][/border][/border][/border]
  775. [comment]----copy me too!----[/comment]
  776.  
  777. [comment]----copy this whole thing to add another gallery image----[/comment]
  778. [border=transparent; width:100%; padding:0; flex-shrink:0; margin-top: var(--m-g);][border=transparent; padding:0; padding-top:100%; position:relative;
  779.  
  780. /*edit this to match variables*/ background: var(--gimg-3);
  781.  
  782. /*edit this to adjust the cropping of the image*/ background-position:50% 50%;
  783.  
  784. background-size:cover; border-radius:5px; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.23; position:absolute; top:0; left:0;][/border][/border][/border]
  785. [comment]----copy me too!----[/comment]
  786.  
  787. [/border][/border][/border]
  788. [comment]----gallery end----[/comment]
  789.  
  790. [/border]
  791. [comment]----row one end----[/comment]
  792.  
  793. [comment]----music player----[/comment]
  794. [border=transparent; height:37%; width:100%; padding:0; margin-top:20px; display:flex; flex-flow:row nowrap;]
  795.  
  796. [comment]----music image----[/comment]
  797. [border=transparent; height:101%; width:clamp(70px, -50px + 19vw, 105px); padding:0; border-radius:8px; flex-shrink:0; background: var(--img-4); background-size:cover; background-position:50% 50%; position:relative; margin-right:15px; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.23; position:absolute; top:0; left:0;][/border][/border]
  798.  
  799. [comment]----music info----[/comment]
  800. [border=transparent; height:100%; flex:1; padding:0; background: var(--bg-2); border:1px solid var(--color-1b); box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  801. [comment]----textbox header----[/comment]
  802. [border=transparent; height:25px; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--color-1b); flex-shrink:0;][border=transparent; height:25px; width:35px; padding:0; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:12px; border-left:1px solid var(--color-1b); flex-shrink:0;][comment]
  803.  
  804. ----* * * textbox icon here----
  805.  
  806. [/comment][fa]fas fa-music[/fa][/border][border=transparent; height:100%; flex:1; padding:3px 10px; box-sizing:border-box; display:flex; align-items:center; color: var(--color-2); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  807.  
  808. ----* * * textbox title here----
  809.  
  810. [/comment]now playing...[/border]
  811. [/border]
  812. [comment]----textbox header end----[/comment]
  813.  
  814. [comment]----textbox contents----[/comment]
  815. [border=transparent; height:calc(100% - 25px); padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;]
  816. [comment]----song title----[/comment]
  817. [border=transparent; height:auto; width:100%; max-width:190px; padding:0; color: var(--color-3); font-family: var(--header); font-weight:bold; letter-spacing:1px; text-transform:uppercase; font-size:15px; line-height:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center;][comment]
  818.  
  819. ----* * * song title here----
  820.  
  821. [/comment]song name[/border]
  822.  
  823. [comment]----artist----[/comment]
  824. [border=transparent; height:auto; width:100%; max-width:190px; padding:0; color: var(--color-1b); font-weight:bold; font-family: var(--body); font-size:9px; text-transform:uppercase; letter-spacing:1px; line-height:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; margin-top:6px;][comment]
  825.  
  826. ----* * * song artist here----
  827.  
  828. [/comment]artist name[/border]
  829.  
  830. [comment]----buttons----[/comment]
  831. [border=transparent; height:auto; width:120px; padding:0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; margin-top:7px;]
  832. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:13.5px; margin-top:2px;][fa]fas fa-backward[/fa][/border]
  833.  
  834. [comment]----play button----[/comment]
  835. [border=transparent; height:auto; width:auto; padding:0; position:relative; overflow:hidden;][border=transparent; height:auto; width:auto; padding:5px; box-sizing:border-box; color: var(--color-1); font-size:17px; line-height:100%; position:relative; pointer-events:none; z-index:2;][fa]fas fa-play[/fa][/border]
  836. [comment]----actual media player----[/comment]
  837. [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;]
  838.  
  839. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  840. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  841. [media=soundcloud]https://soundcloud.com/hoxl1e5ylvbp/brave-girls-after-we-ride[/media]
  842. [/border]
  843.  
  844. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  845. [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;]
  846. [media=googledrive]google file code[/MEDIA]
  847. [/border]
  848.  
  849. [/border][/border]
  850. [comment]----actual media player end----[/comment]
  851. [/border]
  852. [comment]----play button end----[/comment]
  853.  
  854. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:13.5px; margin:2px 0 0 -4px;][fa]fas fa-forward[/fa][/border]
  855. [/border]
  856. [comment]----buttons end----[/comment]
  857. [/border]
  858. [comment]----textbox contents end----[/comment]
  859. [/border]
  860. [comment]----music info----[/comment]
  861. [/border]
  862. [comment]----music player end----[/comment]
  863.  
  864. [/border]
  865. [comment]----tab contents end----[/comment]
  866. [/border][/tab]
  867. [comment]----tab 4 end----[/comment]
  868.  
  869.  
  870. [/tabs][/border][/border]
  871. [comment]----tabs end----[/comment]
  872.  
  873. [comment]----tabs cover----[/comment]
  874. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; z-index:3; display:flex; justify-content:flex-end; pointer-events:none;][border=transparent; height:25px; width:190px; padding:0; display:flex; flex-flow:row nowrap; justify-content:center;]
  875.  
  876. [comment]----button----[/comment]
  877. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][border=transparent; height:14px; width:14px; padding:0; border:2px solid var(--button); box-sizing:border-box; border-radius:50%; background:var(--bg-1);][/border][/border]
  878. [border=transparent;height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  879.  
  880. [comment]----button----[/comment]
  881. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][border=transparent; height:14px; width:14px; padding:0; border:2px solid var(--button); box-sizing:border-box; border-radius:50%; background:var(--bg-1);][/border][/border]
  882. [border=transparent;height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  883.  
  884. [comment]----button----[/comment]
  885. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][border=transparent; height:14px; width:14px; padding:0; border:2px solid var(--button); box-sizing:border-box; border-radius:50%; background:var(--bg-1);][/border][/border]
  886. [border=transparent;height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  887.  
  888. [comment]----button----[/comment]
  889. [border=transparent; height:14px; width:15px; padding:0; flex-shrink:0;][border=transparent; height:14px; width:14px; padding:0; border:2px solid var(--button); box-sizing:border-box; border-radius:50%; background:var(--bg-1);][/border][/border]
  890.  
  891. [/border][/border]
  892. [comment]----tabs cover end----[/comment]
  893. [/border]
  894. [comment]----right end----[/comment]
  895.  
  896. [comment]----decor icons----[/comment]
  897. [border=transparent; height:auto; width:auto; padding:0; position:absolute; top:-30px; left:-45px; z-index:2; font-size:170px; color: var(--color-3); transform:rotate(20deg);][fa]fal fa-star[/fa][/border]
  898. [border=transparent; height:auto; width:auto; padding:0; position:absolute; bottom:-40px; right:-65px; z-index:2; font-size:230px; color: var(--color-3); transform:rotate(-20deg);][fa]fal fa-star[/fa][/border]
  899.  
  900.  
  901. [comment]----grid pattern----[/comment]
  902. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1); position:absolute; top:0; left:0; z-index:1; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; background: linear-gradient(to right, var(--color-1) 1px, transparent 1px), linear-gradient(to bottom, var(--color-1) 1px, transparent 1px); background-size:32px 32px; background-position:50% 45%; opacity:0.2;][/border][/border]
  903.  
  904. [comment]----signature! do not remove----[/comment]
  905. [bg=transparent; height:10px;width:fit-content; position:absolute ;z-index:6;opacity:0.4;color: var(--color-3); font-size:9px;text-align:center; top:7px; right:3px;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  906. [/border][/border][/border]
Add Comment
Please, Sign In to add comment
Public Pastes
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!