API tools faq
paste
Advertisement
ooksie

neverland

ooksie
Jul 12th, 2021 (edited)
1,469
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 73.18 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=DM Serif Display]title[/font]
  5. [font=Euphoria Script]script accent[/font]
  6. [font=Nanum Pen Script]special script accent[/font]
  7. [font=Mitr]header[/font]
  8. [font=Otomanopee One]subheader/accent[/font]
  9. [font=Rubik]body[/font]
  10.  
  11. 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 ( ‾́ ◡ ‾́ )
  12.  
  13. [/comment][border=transparent;
  14.  
  15. /*main background image*/
  16. --bg-img: url('https://i.imgur.com/VyEbHUb.png');
  17. /*this image only shows up on mobile*/
  18. --bg-img-2: url('https://static.asiachan.com/SAAY.full.211787.png');
  19.  
  20. /*main background colour*/
  21. --bg-1: #000;
  22. /*u can ignore this :) */
  23. --bg-2: #1c1c1c;
  24.  
  25. /*accent colour one -- contrast w bg-1*/
  26. --color-1: #fff;
  27. /*accent colour 2 -- do a nice colour that goes well w bg-1*/
  28. --color-2: #C73326;
  29.  
  30. /*header colour*/
  31. --h1: var(--color-2);
  32. /*header colour 2*/
  33. --h2: var(--color-1);
  34. /*text colour -- make sure visible on bg-1*/
  35. --t-color: var(--color-1);
  36.  
  37. /*fonts used*/
  38. --title: 'DM Serif Display', sans-serif;
  39. --accent: 'Euphoria Script', display;
  40. --accent-2: 'Nanum Pen Script', display;
  41. --header: 'Mitr', sans-serif;
  42. --subheader: 'Otomanopee One', sans-serif;
  43. --body: 'Rubik', sans-serif;
  44.  
  45. /*left icon*/
  46. --img-1: url('https://64.media.tumblr.com/5c9eb59b020d02621989afcb514823b0/fb4aaee6cb5da2d3-91/s1280x1920/7524ae04d8082dff1e2971105947a555ea4f0b7a.jpg');
  47.  
  48. /*appearane/visage images -- if you keep all 3 as the same image you'll have to adjust the cropping*/
  49. --aimg-1: url('https://i.imgur.com/NnUZsEN.png');
  50. --aimg-2: url('https://i.imgur.com/NnUZsEN.png');
  51. --aimg-3: url('https://i.imgur.com/NnUZsEN.png');
  52.  
  53. /*gallery images*/
  54. --gimg-1: url('https://64.media.tumblr.com/dd9c69ecc776aead43c352e094c60bd4/01240dec623ce133-6f/s1280x1920/23c156ace5d41c7c05004cb15b2badb3b2f65035.jpg');
  55. --gimg-2: url('https://64.media.tumblr.com/ee7bd7199249d422b4de3f5344703383/28dcfbf48eb0dd46-0a/s640x960/49e9197d6d894b8d901ad7cc1fbc3f2251ab42e2.jpg');
  56.  
  57. /*relationship images*/
  58. --r1: url('https://i.pinimg.com/474x/79/fe/72/79fe721c518fa3285d29b6de042fee71.jpg');
  59. --r2: url('https://i.pinimg.com/474x/79/fe/72/79fe721c518fa3285d29b6de042fee71.jpg');
  60.  
  61. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden;][border=transparent; height:auto; width:auto; max-width:700px; min-width:280px; padding:0; box-sizing:border-box; display:flex; flex-flow:row wrap; position:relative; border-radius:10px; overflow:hidden; background: var(--bg-1); border:1px solid var(--bg-1); justify-content:center; position:relative; line-height:0; margin:15px auto;
  62. --flex-1: 42; --flex-2: 58;
  63. --min-1: 240px; --max-1: 300px; --min-h-1: 355px; --min-2: clamp(250px, 90vw, 300px); --max-2:450px;]
  64. [comment]----background image----[/comment]
  65. [border=transparent; height:clamp(183px, 29vw, 295px); width:100%; padding:0; background: var(--bg-img), var(--bg-2); background-size:cover; -webkit-filter: saturate(1.3); position:absolute; top:50px; left:0; z-index:2;
  66.  
  67. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;
  68.  
  69. ][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1);
  70.  
  71. /*adjust this if your image doesn't show up well*/ opacity:0.6;][/border][/border]
  72.  
  73. [comment]----header----[/comment]
  74. [border=transparent; height:50px; width:100%; padding:5px 20px; box-sizing:border-box; background: var(--bg-1); position:absolute; top:0; left:0; z-index:5; border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:flex-start; color: var(--color-1); font-family:var(--title); font-size:28px; line-height:28px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; letter-spacing:2px;][comment]
  75.  
  76. ----* * * role/title here----
  77.  
  78. [/comment]someword.[/border]
  79.  
  80. [comment]----sidebar----[/comment]
  81. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none;][border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;]
  82.  
  83. [comment]----basics container----[/comment]
  84. [border=transparent; height:235px; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; pointer-events:auto;]
  85.  
  86. [comment]----icon/name container----[/comment]
  87. [border=transparent; height:100%; width:50%; padding:0; display:flex; align-items:flex-end; position:relative;][border=transparent; height:auto; max-height:clamp(95px, 11vw, 105px); width:100%; padding:0; display:flex; flex-flow:row nowrap; --w: clamp(90px, 11vw, 105px)]
  88.  
  89. [comment]----icon----[/comment]
  90. [border=transparent; width:clamp(90px, 11vw, 105px); padding:0; flex-shrink:0;][border=transparent; height:0; padding:0; padding-top:100%; position:relative; --size: calc(100% - 10px);][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; bottom:0; right:0; z-index:2; background: var(--img-1), var(--bg-2); background-size:cover;
  91.  
  92. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border][/border]
  93.  
  94. [comment]----name container----[/comment]
  95. [border=transparent; height:auto; flex:1; max-width:clamp(90px, 100% - var(--w), 185px); padding:36px 0 0 0; box-sizing:border-box; margin:0 0 15px 16px; position:relative;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); position:absolute; top:10px; left:0; font-size:8.5px; text-transform:uppercase; letter-spacing:2px; font-family: var(--header); opacity:0.8;]scroll [fa]fas fa-chevron-down[/fa][/border]
  96. [border=transparent; padding:0; width:fit-content; width:-moz-fit-content; max-width:100%; max-height:70px; overflow:hidden; position:relative; z-index:2; color: var(--color-1); font-size:clamp(35px, 4vw, 40px); line-height:90%; letter-spacing:5px; font-family: var(--title); margin:auto; text-transform:uppercase;][comment]
  97.  
  98. ----* * * name here----
  99.  
  100. [/comment]name[/border]
  101.  
  102. [comment]----name/role accent----[/comment]
  103. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:1; display:flex; justify-content:center; align-items:flex-end;
  104.  
  105. /*add display:none; after this if you don't want an accent at all*/
  106.  
  107. ][border=transparent; width:100%; padding:0; margin:0 18px clamp(-5px, -15px + 2vw, 5px) 0; display:flex; align-items:center; justify-content:center;][border=transparent; padding:0; max-width:calc(100% - 10px); color: var(--color-2); font-size:clamp(45px, 5.1vw, 50px); line-height:60%; font-family: var(--accent); font-style:oblique; opacity:0.8; font-weight:bold; text-align:center; letter-spacing:1px; margin:5px 0 0 5px;][comment]
  108.  
  109. ----* * * role/accent here (keep this short plz)----
  110.  
  111. [/comment]hehe[/border]
  112. [/border][/border]
  113.  
  114. [comment]----korean name accent! (ignore if u don't want it ^^)----[/comment]
  115. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:1; display:flex; justify-content:center; align-items:flex-end;
  116.  
  117. /*remove this to use!*/ display:none;
  118.  
  119. ][border=transparent; padding:0; margin:0 18px clamp(-5px, -15px + 2vw, 5px) 0; display:flex; align-items:center;][border=transparent; padding:0; color: var(--color-2); font-size:clamp(65px, 7.1vw, 70px); line-height:40%; font-family: var(--accent-2); font-style:oblique; opacity:0.8; margin-top:5px;][comment]
  120.  
  121. ----* * * role/accent here----
  122.  
  123. [/comment]ㅎㅎ[/border]
  124. [/border][/border]
  125. [/border]
  126. [comment]----name container end----[/comment]
  127.  
  128. [/border][/border]
  129. [comment]----icon/name container end----[/comment]
  130.  
  131. [comment]----basics contents----[/comment]
  132. [border=transparent; height:130px; width:50%; padding:15px 0 0 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory;][border=transparent; height:auto; width:clamp(150px, 50% + 1vw, 250px); padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-6px;][/border]
  133.  
  134. [comment]----copy this whole thing to add another basic info----[/comment]
  135. [border=transparent; height:auto; max-height:55px; overflow:hidden; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:6px; scroll-snap-align:end;]
  136. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; display:flex; flex-flow:column nowrap;]
  137. [border=transparent; height:auto; width:auto; padding:5px 0; box-sizing:border-box; color: var(--color-1); font-size:24px; letter-spacing:1px; font-family: var(--subheader); line-height:24px;][comment]
  138.  
  139. ---* * * number here----
  140.  
  141. [/comment]01.[/border]
  142. [border=transparent; height:auto; width:auto; min-width:90px; padding:3px 0 0 0; box-sizing:border-box; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); line-height:14px; border-top:2px solid var(--color-2);][comment]
  143.  
  144. ----* * * info title here----
  145.  
  146. [/comment]full name[/border]
  147. [/border]
  148.  
  149. [comment]----info contents----[/comment]
  150. [border=transparent; height:auto; max-height:32px; flex:1; padding:0; box-sizing:border-box; margin:15px 0 0 15px; display:flex; overflow:hidden; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); text-align:right; line-height:16px;][comment]
  151.  
  152. ----* * * info contents here (max 3 lines)----
  153.  
  154. [/comment]info[/border]
  155. [/border][/border]
  156. [/border]
  157. [comment]----copy me too!----[/comment]
  158.  
  159. [comment]----copy this whole thing to add another basic info----[/comment]
  160. [border=transparent; height:auto; max-height:55px; overflow:hidden; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:6px; scroll-snap-align:end;]
  161. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; display:flex; flex-flow:column nowrap;]
  162. [border=transparent; height:auto; width:auto; padding:5px 0; box-sizing:border-box; color: var(--color-1); font-size:24px; letter-spacing:1px; font-family: var(--subheader); line-height:24px;][comment]
  163.  
  164. ---* * * number here----
  165.  
  166. [/comment]02.[/border]
  167. [border=transparent; height:auto; width:auto; min-width:90px; padding:3px 0 0 0; box-sizing:border-box; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); line-height:14px; border-top:2px solid var(--color-2);][comment]
  168.  
  169. ----* * * info title here----
  170.  
  171. [/comment]age[/border]
  172. [/border]
  173.  
  174. [comment]----info contents----[/comment]
  175. [border=transparent; height:auto; max-height:32px; flex:1; padding:0; box-sizing:border-box; margin:15px 0 0 15px; display:flex; overflow:hidden; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); text-align:right; line-height:16px;][comment]
  176.  
  177. ----* * * info contents here (max 3 lines)----
  178.  
  179. [/comment]info[/border]
  180. [/border][/border]
  181. [/border]
  182. [comment]----copy me too!----[/comment]
  183.  
  184. [comment]----copy this whole thing to add another basic info----[/comment]
  185. [border=transparent; height:auto; max-height:55px; overflow:hidden; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-top:6px; scroll-snap-align:end;]
  186. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; display:flex; flex-flow:column nowrap;]
  187. [border=transparent; height:auto; width:auto; padding:5px 0; box-sizing:border-box; color: var(--color-1); font-size:24px; letter-spacing:1px; font-family: var(--subheader); line-height:24px;][comment]
  188.  
  189. ---* * * number here----
  190.  
  191. [/comment]03.[/border]
  192. [border=transparent; height:auto; width:auto; min-width:90px; padding:3px 0 0 0; box-sizing:border-box; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); line-height:14px; border-top:2px solid var(--color-2);][comment]
  193.  
  194. ----* * * info title here----
  195.  
  196. [/comment]sexuality[/border]
  197. [/border]
  198.  
  199. [comment]----info contents----[/comment]
  200. [border=transparent; height:auto; max-height:32px; flex:1; padding:0; box-sizing:border-box; margin:15px 0 0 15px; display:flex; overflow:hidden; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); text-align:right; line-height:16px;][comment]
  201.  
  202. ----* * * info contents here (max 3 lines)----
  203.  
  204. [/comment]info[/border]
  205. [/border][/border]
  206. [/border]
  207. [comment]----copy me too!----[/comment]
  208.  
  209. [/border][/border][/border]
  210. [comment]----basics contents end----[/comment]
  211.  
  212. [/border][/border]
  213. [comment]----basics container----[/comment]
  214.  
  215. [comment]----button container----[/comment]
  216. [border=transparent; height:30px; width:240px; padding:0 clamp(0px, 0.75vw, 7px) 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:25px 0 8px 0;]
  217. [comment]----button----[/comment]
  218. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:13px; margin:0 21px; text-align:center;][fa]far fa-circle[/fa][/border]
  219. [comment]----button----[/comment]
  220. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:13px; margin:0 21px; text-align:center;][fa]far fa-circle[/fa][/border]
  221. [comment]----button----[/comment]
  222. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:13px; margin:0 21px; text-align:center;][fa]far fa-circle[/fa][/border]
  223. [comment]----button----[/comment]
  224. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:13px; margin:0 21px; text-align:center;][fa]far fa-circle[/fa][/border]
  225. [/border]
  226. [comment]----button container end----[/comment]
  227.  
  228. [/border][border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:0; box-sizing:border-box; position:relative;][/border][/border]
  229. [comment]----sidebar end----[/comment]
  230.  
  231. [comment]----left (tabs container)----[/comment]
  232. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][border=transparent; height:30px; width:240px; padding:0; overflow:hidden; margin-bottom:8px;][border=transparent; padding:0; margin:5px -50px 0 -68px; letter-spacing:-2px;][tabs]
  233.  
  234. [comment]----lobby tab----[/comment]
  235. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; letter-spacing:0;]
  236. [comment]-----filler----[/comment]
  237. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][/border]
  238.  
  239. [comment]----tab contents----[/comment]
  240. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:clamp(18px, 2.5vw, 25px); box-sizing:border-box; letter-spacing:0; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:flex-end; pointer-events:auto; position:relative;][border=transparent; height:clamp(295px, 295px + 90px - 9vw, 344px); width:clamp(150px, 100vw, 700px); padding:0; position:absolute; top:clamp(0px, -40px + 9vw, 50px); right:0; background: var(--bg-img-2), var(--bg-2); background-size:cover; -webkit-filter:saturate(1.2);
  241.  
  242. /*edit the following to adjust the cropping of the image*/ background-position:50% 30%;
  243.  
  244. ][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1);
  245.  
  246. /*adjust this if your image doesn't show up well*/ opacity:0.3;][/border][/border]
  247.  
  248. [comment]----quote title----[/comment]
  249. [border=transparent; height:auto; width:auto; padding:0; text-align:right; color: var(--color-1); font-size:33px; line-height:30px; font-family: var(--title); font-style:oblique; letter-spacing:2px; opacity:0.95; margin-top:40px;][comment]
  250.  
  251. ----* * * quote title here----
  252.  
  253. [/comment]a word.[/border]
  254.  
  255. [comment]----quote contents----[/comment]
  256. [border=transparent; height:auto; max-height:54px; overflow:hidden; width:210px; padding:3px 5px 0 0; box-sizing:border-box; color: var(--t-color); font-size:10px; letter-spacing:0; line-height:13px; font-family: var(--body); text-align:right; opacity:0.9; margin:0 0 10px 0;][comment]
  257.  
  258. ----* * * quote contents here (max 4 lines)----
  259.  
  260. [/comment]some more words that are somewhat related to that big word and sounds kind of philosophical.
  261. [/border]
  262.  
  263. [/border]
  264. [comment]----tab contents end----[/comment]
  265. [/border][/tab]
  266. [comment]---lobby tab end----[/comment]
  267.  
  268.  
  269. [comment]----tab 1----[/comment]
  270. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:6; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; letter-spacing:0;]
  271. [comment]-----button select----[/comment]
  272. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][border=transparent; height:30px; width:240px; padding:0 clamp(0px, 0.75vw, 7px) 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:25px 0 8px 0;]
  273. [comment]----selected button----[/comment]
  274. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:16px; margin:0 21px; text-align:center; background: var(--bg-1);][fa]fal fa-star-christmas[/fa][/border]
  275.  
  276. [comment]----filler button----[/comment]
  277. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  278.  
  279. [comment]----filler button----[/comment]
  280. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  281. [comment]----filler button----[/comment]
  282. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  283. [/border][/border]
  284. [comment]----button select end----[/comment]
  285.  
  286. [comment]----tab contents----[/comment]
  287. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:50px 0 clamp(18px, 2.5vw, 25px) 0; box-sizing:border-box; letter-spacing:0; display:flex; flex-direction:column; overflow:hidden; position:relative; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  288.  
  289. [comment]----tab title----[/comment]
  290. [border=transparent; height:50px; width:100%; padding:0 20px 5px 20px; position:absolute; top:0; right:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-start; font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; line-height:15px;][border=transparent; padding:0; height:0; width:25px; border-top:2px solid var(--color-2); box-sizing:border-box; margin:2px 0 0 10px;][/border][border=transparent; padding:0; width:fit-content; width:-moz-fit-content; color: var(--color-1);][comment]
  291.  
  292. ----* * * tab title here----
  293.  
  294. [/comment]visage[/border]
  295. [/border]
  296.  
  297. [comment]----visage images----[/comment]
  298. [border=transparent; height:295px; width:50%; padding:15px clamp(18px, 2.5vw, 25px); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center;]
  299.  
  300. [border=transparent; height:100px; width:130px; padding:0; position:relative; --size:calc(100% - 8px); margin:0 clamp(10px, 3vw, 25px) 0 0px;][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; bottom:0; right:0; z-index:2; background: var(--aimg-1), var(--bg-2);
  301.  
  302. /*edit the following to adjust the cropping of the image*/ background-position:30% 20%;
  303.  
  304. /*replace the px value with cover if you used 3 different images*/ background-size: 295px;
  305.  
  306. -webkit-filter: saturate(1.2);][border=transparent; padding:0; height:100%; width:100%; background: var(--bg-1); opacity:0.12;][/border][/border][/border]
  307.  
  308. [border=transparent; height:90px; width:115px; padding:0; position:relative; --size:calc(100% - 8px); margin:-20px clamp(150px, 1.7vw, 165px) 0 0;][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; bottom:0; right:0; z-index:2; background: var(--aimg-2), var(--bg-2);
  309.  
  310. /*edit the following to adjust the cropping of the image*/ background-position:20% 50%;
  311.  
  312. /*replace the px value with cover if you used 3 different images*/ background-size: 295px;
  313.  
  314. -webkit-filter: saturate(1.2);][border=transparent; padding:0; height:100%; width:100%; background: var(--bg-1); opacity:0.12;][/border][/border][/border]
  315.  
  316. [border=transparent; height:107px; width:145px; padding:0; position:relative; --size:calc(100% - 8px); margin:-15px clamp(5px, 2.5vw, 20px) 0 auto;][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; bottom:0; right:0; z-index:2; background: var(--aimg-3), var(--bg-2);
  317.  
  318. /*edit the following to adjust the cropping of the image*/ background-position:100% 100%;
  319.  
  320. /*replace the px value with cover if you used 3 different images*/ background-size: 295px;
  321.  
  322. -webkit-filter: saturate(1.2);][border=transparent; padding:0; height:100%; width:100%; background: var(--bg-1); opacity:0.12;][/border][/border][/border]
  323.  
  324. [/border]
  325. [comment]----visage images end----[/comment]
  326.  
  327. [comment]----visage container----[/comment]
  328. [border=transparent; height:auto; width:calc(50% + 8px); padding:20px 22px 20px 15px; box-sizing:border-box; margin:30px 0 0 0; background: var(--bg-1); display:flex; flex-flow:column nowrap; border-radius:2px;]
  329.  
  330. [comment]----visage details----[/comment]
  331. [border=transparent; height:auto; width:100%; padding:0 0 10px 0; box-sizing:border-box; display:flex; flex-flow:row wrap; position:sticky; top:0; background: var(--bg-1);]
  332.  
  333. [comment]----copy this whole thing to add another visage detail----[/comment]
  334. [border=transparent; height:auto; flex:1; min-width:clamp(100px, 50% - 10px, 250px); padding:7px 10px; box-sizing:border-box; margin:5px; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  335. [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold;][comment]
  336.  
  337. ----* * * detail title here----
  338.  
  339. [/comment]height[/border]
  340. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:16px; margin-top:5px;][comment]
  341.  
  342. ----* * * detail info here----
  343.  
  344. [/comment]info[/border]
  345. [/border]
  346. [comment]----copy me too!----[/comment]
  347.  
  348. [comment]----copy this whole thing to add another visage detail----[/comment]
  349. [border=transparent; height:auto; flex:1; min-width:clamp(100px, 50% - 10px, 250px); padding:7px 10px; box-sizing:border-box; margin:5px; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  350. [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold;][comment]
  351.  
  352. ----* * * detail title here----
  353.  
  354. [/comment]weight[/border]
  355. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:16px; margin-top:5px;][comment]
  356.  
  357. ----* * * detail info here----
  358.  
  359. [/comment]info[/border]
  360. [/border]
  361. [comment]----copy me too!----[/comment]
  362.  
  363. [comment]----copy this whole thing to add another visage detail----[/comment]
  364. [border=transparent; height:auto; flex:1; min-width:clamp(100px, 50% - 10px, 250px); padding:7px 10px; box-sizing:border-box; margin:5px; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  365. [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold;][comment]
  366.  
  367. ----* * * detail title here----
  368.  
  369. [/comment]hair colour[/border]
  370. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:16px; margin-top:5px;][comment]
  371.  
  372. ----* * * detail info here----
  373.  
  374. [/comment]info[/border]
  375. [/border]
  376. [comment]----copy me too!----[/comment]
  377.  
  378. [comment]----copy this whole thing to add another visage detail----[/comment]
  379. [border=transparent; height:auto; flex:1; min-width:clamp(100px, 50% - 10px, 250px); padding:7px 10px; box-sizing:border-box; margin:5px; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  380. [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:13px; font-weight:bold;][comment]
  381.  
  382. ----* * * detail title here----
  383.  
  384. [/comment]eye colour[/border]
  385. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); font-size:12px; text-transform:uppercase; letter-spacing:1px; line-height:16px; margin-top:5px;][comment]
  386.  
  387. ----* * * detail info here----
  388.  
  389. [/comment]info[/border]
  390. [/border]
  391. [comment]----copy me too!----[/comment]
  392.  
  393. [/border]
  394. [comment]----visage details end----[/comment]
  395.  
  396. [comment]----visage contents----[/comment]
  397. [border=transparent; height:auto; width:100%; padding:0; margin-top:15px; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-15px;][/border]
  398.  
  399. [comment]----copy this whole thing to make another tag----[/comment]
  400. [border=transparent; height:auto; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:15px;]
  401. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; margin-bottom:auto; padding:1px 6px 2px 6px; box-sizing:border-box; color: var(--color-1); background: var(--color-2); border-radius:2px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--header);][comment]
  402.  
  403. ----* * * info title here----
  404.  
  405. [/comment]title[/border]
  406. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); text-align:justify; margin:-1px 0 0 15px; font-size:11px; font-family: var(--body); line-height:16px;][comment]
  407.  
  408. ----* * * info contents here----
  409.  
  410. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt purus ac facilisis. Aliquam commodo dapibus auctor. Ut eget arcu ut enim euismod bibendum a quis risus. Nam sed egestas lectus.
  411. [/border]
  412. [/border]
  413. [comment]----copy me too!----[/comment]
  414.  
  415. [/border]
  416. [comment]----visage contents end----[/comment]
  417.  
  418. [/border]
  419. [comment]----visage container end----[/comment]
  420. [/border][/border]
  421. [comment]----tab contents end----[/comment]
  422. [/border][/tab]
  423. [comment]----tab 1 end----[/comment]
  424.  
  425.  
  426. [comment]----tab 2----[/comment]
  427. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:6; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; letter-spacing:0;]
  428. [comment]-----button select----[/comment]
  429. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][border=transparent; height:30px; width:240px; padding:0 clamp(0px, 0.75vw, 7px) 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:25px 0 8px 0;]
  430. [comment]----filler button----[/comment]
  431. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  432.  
  433. [comment]----selected button----[/comment]
  434. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:16px; margin:0 21px; text-align:center; background: var(--bg-1);][fa]fal fa-star-christmas[/fa][/border]
  435.  
  436. [comment]----filler button----[/comment]
  437. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  438. [comment]----filler button----[/comment]
  439. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  440. [/border][/border]
  441. [comment]----button select end----[/comment]
  442.  
  443. [comment]----tab contents----[/comment]
  444. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:50px 0 clamp(18px, 2.5vw, 25px) 0; box-sizing:border-box; letter-spacing:0; pointer-events:auto; position:relative;]
  445.  
  446. [comment]----tab title----[/comment]
  447. [border=transparent; height:50px; width:100%; padding:0 20px 5px 20px; position:absolute; top:0; right:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-start; font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; line-height:15px;][border=transparent; padding:0; height:0; width:25px; border-top:2px solid var(--color-2); box-sizing:border-box; margin:2px 0 0 10px;][/border][border=transparent; padding:0; width:fit-content; width:-moz-fit-content; color: var(--color-1);][comment]
  448.  
  449. ----* * * tab title here----
  450.  
  451. [/comment]persona[/border]
  452. [/border]
  453.  
  454. [comment]----persona contents----[/comment]
  455. [border=transparent; height:100%; width:100%; padding:5px 15px 10px 25px; box-sizing:border-box; display:flex; flex-flow:column nowrap; background: var(--bg-1);]
  456.  
  457. [comment]----persona text container----[/comment]
  458. [border=transparent; height:55.5%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  459. [comment]----copy this whole thing to make a paragraph text----[/comment]
  460. [border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  461.  
  462. ----* * * text starts here----
  463.  
  464. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et faucibus erat. Sed lobortis tincidunt imperdiet. Nulla a ultricies risus. Pellentesque rutrum ipsum non tempus convallis. Maecenas eget nibh eu diam blandit auctor in interdum ligula. Nam ultrices risus vel ante suscipit facilisis. Ut ac semper nulla. Morbi accumsan finibus turpis nec gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tempus, erat nec porttitor finibus, nulla diam molestie leo, eu interdum nunc tortor non tellus. Nunc non pharetra libero, sit amet convallis elit. Proin in diam finibus, porttitor mauris hendrerit, cursus velit. Vestibulum quis faucibus tortor, eu ullamcorper metus. Aliquam erat volutpat. Nulla a enim magna.
  465.  
  466. Sed ut tempor libero. Morbi vel felis et libero consequat vulputate sit amet vel elit. Suspendisse at porta mi, vitae venenatis mauris. Curabitur id maximus nibh, sed fringilla mauris. Aliquam efficitur finibus diam. Nam pharetra ac turpis ut ornare. Curabitur sed tellus ut nisi dictum cursus eu at nisl. Praesent eleifend nunc erat, at ornare sem accumsan et. Integer in massa rutrum, placerat quam vel, ultrices dolor. Maecenas et risus pellentesque, pulvinar enim nec, consequat tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ullamcorper massa ac sodales ultricies. In pellentesque vestibulum tristique.
  467. [/border]
  468. [comment]----copy me too!----[/comment]
  469.  
  470. [/border][/border]
  471. [comment]----persona text container end----[/comment]
  472.  
  473. [comment]----persona details----[/comment]
  474. [border=transparent; height:calc(44.5% - 18px); width:100%; padding:0; margin-top:18px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
  475.  
  476. [comment]----copy this whole thing to add another persona section----[/comment]
  477. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  478. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:100px; padding:3px 15px 5px 0; box-sizing:border-box; border-bottom:2px solid var(--color-2); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:100%; color: var(--h1);][comment]
  479.  
  480. ----* * * section title here----
  481.  
  482. [/comment]virtues[/border]
  483. [comment]----section contents----[/comment]
  484. [border=transparent; height:auto; width:100%; padding:0; margin-top:5px; display:flex; flex-flow:row wrap;]
  485. [comment]----copy this whole thing to add another section item----[/comment]
  486. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  487.  
  488. ----* * * item here----
  489.  
  490. [/comment]hehe[/border]
  491. [/border]
  492. [comment]----copy me too!----[/comment]
  493.  
  494. [comment]----copy this whole thing to add another section item----[/comment]
  495. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  496.  
  497. ----* * * item here----
  498.  
  499. [/comment]hehe[/border]
  500. [/border]
  501. [comment]----copy me too!----[/comment]
  502. [/border]
  503. [comment]----section contents end----[/comment]
  504. [/border]
  505. [comment]----copy me too!----[/comment]
  506.  
  507. [comment]----copy this whole thing to add another persona section----[/comment]
  508. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  509. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:100px; padding:3px 15px 5px 0; box-sizing:border-box; border-bottom:2px solid var(--color-2); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:100%; color: var(--h1);][comment]
  510.  
  511. ----* * * section title here----
  512.  
  513. [/comment]vices[/border]
  514. [comment]----section contents----[/comment]
  515. [border=transparent; height:auto; width:100%; padding:0; margin-top:5px; display:flex; flex-flow:row wrap;]
  516. [comment]----copy this whole thing to add another section item----[/comment]
  517. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  518.  
  519. ----* * * item here----
  520.  
  521. [/comment]hehe[/border]
  522. [/border]
  523. [comment]----copy me too!----[/comment]
  524.  
  525. [comment]----copy this whole thing to add another section item----[/comment]
  526. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  527.  
  528. ----* * * item here----
  529.  
  530. [/comment]hehe[/border]
  531. [/border]
  532. [comment]----copy me too!----[/comment]
  533. [/border]
  534. [comment]----section contents end----[/comment]
  535. [/border]
  536. [comment]----copy me too!----[/comment]
  537.  
  538. [comment]----copy this whole thing to add another persona section----[/comment]
  539. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  540. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:100px; padding:3px 15px 5px 0; box-sizing:border-box; border-bottom:2px solid var(--color-2); font-family: var(--header); font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:100%; color: var(--h1);][comment]
  541.  
  542. ----* * * section title here----
  543.  
  544. [/comment]whatever[/border]
  545. [comment]----section contents----[/comment]
  546. [border=transparent; height:auto; width:100%; padding:0; margin-top:5px; display:flex; flex-flow:row wrap;]
  547. [comment]----copy this whole thing to add another section item----[/comment]
  548. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  549.  
  550. ----* * * item here----
  551.  
  552. [/comment]hehe[/border]
  553. [/border]
  554. [comment]----copy me too!----[/comment]
  555.  
  556. [comment]----copy this whole thing to add another section item----[/comment]
  557. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:3px; display:flex; flex-flow:row nowrap; align-items:center; margin:4px;][border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); letter-spacing:1px; font-family: var(--body); font-size:11px; line-height:10px;][comment]
  558.  
  559. ----* * * item here----
  560.  
  561. [/comment]hehe[/border]
  562. [/border]
  563. [comment]----copy me too!----[/comment]
  564. [/border]
  565. [comment]----section contents end----[/comment]
  566. [/border]
  567. [comment]----copy me too!----[/comment]
  568.  
  569. [/border][/border][/border]
  570. [comment]----persona details end----[/comment]
  571. [/border]
  572. [comment]----persona contents end----[/comment]
  573.  
  574. [/border]
  575. [comment]----tab contents end----[/comment]
  576. [/border][/tab]
  577. [comment]----tab 2 end----[/comment]
  578.  
  579.  
  580. [comment]----tab 3----[/comment]
  581. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; letter-spacing:0;]
  582. [comment]-----button select----[/comment]
  583. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][border=transparent; height:30px; width:240px; padding:0 clamp(0px, 0.75vw, 7px) 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:25px 0 8px 0;]
  584. [comment]----filler button----[/comment]
  585. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  586. [comment]----filler button----[/comment]
  587. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  588.  
  589. [comment]----selected button----[/comment]
  590. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:16px; margin:0 21px; text-align:center; background: var(--bg-1);][fa]fal fa-star-christmas[/fa][/border]
  591.  
  592. [comment]----filler button----[/comment]
  593. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  594. [/border][/border]
  595. [comment]----button select end----[/comment]
  596.  
  597. [comment]----tab contents----[/comment]
  598. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:50px 0 clamp(18px, 2.5vw, 25px) 0; box-sizing:border-box; letter-spacing:0; position:relative; pointer-events:auto;]
  599.  
  600. [comment]----tab title----[/comment]
  601. [border=transparent; height:50px; width:100%; padding:0 20px 5px 20px; position:absolute; top:0; right:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-start; font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; line-height:15px;][border=transparent; padding:0; height:0; width:25px; border-top:2px solid var(--color-2); box-sizing:border-box; margin:2px 0 0 10px;][/border][border=transparent; padding:0; width:fit-content; width:-moz-fit-content; color: var(--color-1);][comment]
  602.  
  603. ----* * * tab title here----
  604.  
  605. [/comment]history[/border]
  606. [/border]
  607.  
  608. [comment]----history contents----[/comment]
  609. [border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; background: var(--bg-1); display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px 0 20px; box-sizing:border-box;][border=transparent; height:calc(100% - 8px); width:0; padding:0; border-right:1px solid var(--color-1); position:absolute; top:8px; left:28px;][/border][border=transparent; height:0; width:100%; padding:0; margin-bottom:-19px;][/border]
  610.  
  611. [comment]----copy this whole thing to make another event----[/comment]
  612. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2; margin-top:20px;]
  613. [comment]----event header----[/comment]
  614. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0;][border=transparent; height:11px; width:20px; padding:0; border:1px solid var(--color-1); position:relative; left:3px; flex-shrink:0; background: var(--bg-1); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; right:3px; display:flex; align-items:center;][border=transparent; height:0; width:22px; border-top:5px solid var(--color-2); padding:0;][/border][/border][/border][border=transparent; height:auto; flex:1; padding:4px 10px 4px 18px; box-sizing:border-box; background: var(--bg-1); color: var(--h2); font-size:13px; text-transform:uppercase; font-weight:bold; letter-spacing:3px; line-height:15px; font-family: var(--header);][comment]
  615.  
  616. ----* * * event title here----
  617.  
  618. [/comment]event title[/border]
  619. [/border]
  620.  
  621. [comment]----event contents----[/comment]
  622. [border=transparent; height:auto; width:100%; padding:10px 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  623.  
  624. ----* * * text starts here----
  625.  
  626. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  627. [/border]
  628. [comment]----event contents end----[/comment]
  629. [/border]
  630. [comment]----copy me too!----[/comment]
  631.  
  632. [comment]----copy this whole thing to make another event----[/comment]
  633. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2; margin-top:20px;]
  634. [comment]----event header----[/comment]
  635. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0;][border=transparent; height:11px; width:20px; padding:0; border:1px solid var(--color-1); position:relative; left:3px; flex-shrink:0; background: var(--bg-1); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; right:3px; display:flex; align-items:center;][border=transparent; height:0; width:22px; border-top:5px solid var(--color-2); padding:0;][/border][/border][/border][border=transparent; height:auto; flex:1; padding:4px 10px 4px 18px; box-sizing:border-box; background: var(--bg-1); color: var(--h2); font-size:13px; text-transform:uppercase; font-weight:bold; letter-spacing:3px; line-height:15px; font-family: var(--header);][comment]
  636.  
  637. ----* * * event title here----
  638.  
  639. [/comment]event title[/border]
  640. [/border]
  641.  
  642. [comment]----event contents----[/comment]
  643. [border=transparent; height:auto; width:100%; padding:10px 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  644.  
  645. ----* * * text starts here----
  646.  
  647. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  648. [/border]
  649. [comment]----event contents end----[/comment]
  650. [/border]
  651. [comment]----copy me too!----[/comment]
  652.  
  653. [comment]----copy this whole thing to make another event----[/comment]
  654. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2; margin-top:20px;]
  655. [comment]----event header----[/comment]
  656. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0;][border=transparent; height:11px; width:20px; padding:0; border:1px solid var(--color-1); position:relative; left:3px; flex-shrink:0; background: var(--bg-1); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; right:3px; display:flex; align-items:center;][border=transparent; height:0; width:22px; border-top:5px solid var(--color-2); padding:0;][/border][/border][/border][border=transparent; height:auto; flex:1; padding:4px 10px 4px 18px; box-sizing:border-box; background: var(--bg-1); color: var(--h2); font-size:13px; text-transform:uppercase; font-weight:bold; letter-spacing:3px; line-height:15px; font-family: var(--header);][comment]
  657.  
  658. ----* * * event title here----
  659.  
  660. [/comment]event title[/border]
  661. [/border]
  662.  
  663. [comment]----event contents----[/comment]
  664. [border=transparent; height:auto; width:100%; padding:10px 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  665.  
  666. ----* * * text starts here----
  667.  
  668. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  669. [/border]
  670. [comment]----event contents end----[/comment]
  671. [/border]
  672. [comment]----copy me too!----[/comment]
  673.  
  674. [comment]----copy this whole thing to make another event----[/comment]
  675. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; position:relative; z-index:2; margin-top:20px;]
  676. [comment]----event header----[/comment]
  677. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0;][border=transparent; height:11px; width:20px; padding:0; border:1px solid var(--color-1); position:relative; left:3px; flex-shrink:0; background: var(--bg-1); box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; right:3px; display:flex; align-items:center;][border=transparent; height:0; width:22px; border-top:5px solid var(--color-2); padding:0;][/border][/border][/border][border=transparent; height:auto; flex:1; padding:4px 10px 4px 18px; box-sizing:border-box; background: var(--bg-1); color: var(--h2); font-size:13px; text-transform:uppercase; font-weight:bold; letter-spacing:3px; line-height:15px; font-family: var(--header);][comment]
  678.  
  679. ----* * * event title here----
  680.  
  681. [/comment]event title[/border]
  682. [/border]
  683.  
  684. [comment]----event contents----[/comment]
  685. [border=transparent; height:auto; width:100%; padding:10px 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  686.  
  687. ----* * * text starts here----
  688.  
  689. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  690. [/border]
  691. [comment]----event contents end----[/comment]
  692. [/border]
  693. [comment]----copy me too!----[/comment]
  694.  
  695. [/border][/border][/border]
  696. [comment]----history contents----[/comment]
  697. [/border]
  698. [comment]----tab contents end----[/comment]
  699. [/border][/tab]
  700. [comment]----tab 3 end----[/comment]
  701.  
  702.  
  703. [comment]----tab 4----[/comment]
  704. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:5; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; letter-spacing:0;]
  705. [comment]-----button select----[/comment]
  706. [border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); max-width: var(--max-1); padding:clamp(18px, 2.5vw, 25px); padding-right:18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center;][border=transparent; height:30px; width:240px; padding:0 clamp(0px, 0.75vw, 7px) 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:25px 0 8px 0;]
  707. [comment]----filler button----[/comment]
  708. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  709. [comment]----filler button----[/comment]
  710. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  711. [comment]----filler button----[/comment]
  712. [border=transparent; height:auto; width:17px; padding:0; margin:0 21px;][/border]
  713.  
  714. [comment]----selected button----[/comment]
  715. [border=transparent; height:auto; width:17px; padding:0; color: var(--color-1); font-size:16px; margin:0 21px; text-align:center; background: var(--bg-1);][fa]fal fa-star-christmas[/fa][/border]
  716.  
  717. [/border][/border]
  718. [comment]----button select end----[/comment]
  719.  
  720. [comment]----tab contents----[/comment]
  721. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:50px 0 clamp(18px, 2.5vw, 25px) 0; box-sizing:border-box; letter-spacing:0; pointer-events:auto; position:relative;]
  722.  
  723. [comment]----tab title----[/comment]
  724. [border=transparent; height:50px; width:100%; padding:0 20px 5px 20px; position:absolute; top:0; right:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-start; font-family: var(--header); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; line-height:15px;][border=transparent; padding:0; height:0; width:25px; border-top:2px solid var(--color-2); box-sizing:border-box; margin:2px 0 0 10px;][/border][border=transparent; padding:0; width:fit-content; width:-moz-fit-content; color: var(--color-1);][comment]
  725.  
  726. ----* * * tab title here----
  727.  
  728. [/comment]extra[/border]
  729. [/border]
  730.  
  731. [comment]----extra contents----[/comment]
  732. [border=transparent; height:100%; width:100%; padding:5px 15px 10px 25px; box-sizing:border-box; display:flex; flex-flow:column nowrap; background: var(--bg-1);]
  733.  
  734. [comment]----header----[/comment]
  735. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center;]
  736.  
  737. [comment]----gallery----[/comment]
  738. [border=transparent; width:clamp(80px, 12vw, 115px); padding:0; flex-shrink:0;][border=transparent; height:0; padding:0; padding-top:100%; position:relative; --size: calc(100% - 10px);][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); position:absolute; top:0; left:0;][/border][border=transparent; height:var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); display:flex; flex-direction:row; overflow:hidden; position:absolute; bottom:0; right:0; background: var(--bg-1);][border=transparent; height:calc(100% + 17px); width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory;][border=transparent; height:calc(100% - 17px); width:auto; padding:0; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-2); font-size:13px; position:absolute; bottom:5px; right:5px; pointer-events:none;][fa]fas fa-chevron-right[/fa][/border]
  739.  
  740. [comment]----gallery image----[/comment]
  741. [border=transparent; width:clamp(70px, 12vw - 10px, 105px); padding:0; scroll-snap-align:start; flex-shrink:0;][border=transparent; height:0; padding:0; padding-top:100%;
  742.  
  743. /*replace the number in gimg-X to match the variables*/ background: var(--gimg-1);
  744.  
  745. background-size:cover;
  746.  
  747. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  748.  
  749. [comment]----gallery image----[/comment]
  750. [border=transparent; width:clamp(70px, 12vw - 10px, 105px); padding:0; scroll-snap-align:start; flex-shrink:0;][border=transparent; height:0; padding:0; padding-top:100%;
  751.  
  752. /*replace the number in gimg-X to match the variables*/ background: var(--gimg-2);
  753.  
  754. background-size:cover;
  755.  
  756. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  757.  
  758. [/border][/border][/border][/border][/border]
  759. [comment]----gallery end----[/comment]
  760.  
  761. [comment]----music player----[/comment]
  762. [border=transparent; height:100%; flex:1; padding:0; margin:0 10px 0 25px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  763.  
  764. [comment]----song title----[/comment]
  765. [border=transparent; height:auto; max-height:30px; overflow:hidden; width:100%; padding:0 5px; box-sizing:border-box; color: var(--h2); font-weight:bold; font-family: var(--header); letter-spacing:2px; font-size:15px; line-height:15px; text-align:center; text-transform:uppercase;][comment]
  766.  
  767. ----* * * song title here----
  768.  
  769. [/comment]bambi[/border]
  770.  
  771. [comment]----song title----[/comment]
  772. [border=transparent; height:auto; max-height:20px; overflow:hidden; width:100%; padding:0 8px; box-sizing:border-box; color: var(--h2); font-family: var(--header); letter-spacing:2px; font-size:9px; line-height:10px; text-align:center; text-transform:uppercase; margin-top:8px; opacity:0.8;][comment]
  773.  
  774. ----* * * song artist here----
  775.  
  776. [/comment]saay (orig. baekhyun)[/border]
  777.  
  778. [comment]----buttons----[/comment]
  779. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; margin-top:15px;]
  780. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--color-1); font-size:13.5px;][fa]fas fa-backward[/fa][/border]
  781. [comment]----play button----[/comment]
  782. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; position:relative; margin:0 13px;]
  783. [border=transparent; height:auto; width:auto; padding:2px 4px; box-sizing:border-box; background: var(--bg-1); color: var(--color-2); font-size:17px; position:relative; z-index:2; pointer-events:none;][fa]fas fa-play[/fa][/border]
  784.  
  785. [comment]----actual media player----[/comment]
  786. [border=transparent; height:calc(100% - 2px); width:calc(100% - 2px); padding:0; box-sizing:border-box; position:absolute; top:1px; left:1px; z-index:1; overflow:hidden;]
  787.  
  788. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  789. [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
  790. [media=soundcloud]https://soundcloud.com/mystrbl/bambi-saay[/media]
  791. [/border]
  792.  
  793. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  794. [border=transparent; height:500px; width:500px; margin-top:-177px; margin-left:-99px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  795. [media=googledrive]google file code here[/MEDIA]
  796. [/border]
  797.  
  798. [/border]
  799. [comment]----actual media player end----[/comment]
  800. [/border]
  801. [comment]----play button end----[/comment]
  802. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--color-1); font-size:13.5px;][fa]fas fa-forward[/fa][/border]
  803. [/border]
  804.  
  805. [comment]----music progress bar----[/comment]
  806. [border=transparent; height:8px; width:100%; padding:1.5px; border-radius:8px; box-sizing:border-box; border:1px solid var(--color-1); margin-top:15px;][border=transparent; height:100%; padding:0;
  807.  
  808. /*edit this to adjust the progress of the song*/ width:68%;
  809.  
  810. background: var(--color-2);][/border][/border]
  811. [/border]
  812. [comment]----music player end----[/comment]
  813. [/border]
  814. [comment]----header end----[/comment]
  815.  
  816. [comment]----extra tabs container----[/comment]
  817. [border=transparent; height:90%; max-height:calc(100% - 120px); padding:0; margin-top:20px; position:relative; display:flex; justify-content:flex-end;]
  818. [comment]----extra tabs cover----[/comment]
  819. [border=transparent; height:20px; width:220px; padding:0 10px 0 0; box-sizing:border-box; position:absolute; top:0; right:0; background: var(--bg-1); display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; pointer-events:none;]
  820. [comment]----button----[/comment]
  821. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:80px; padding:3px 5px 1px 5px; box-sizing:border-box; color: var(--h1); border:1px solid var(--color-1); border-radius:2px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--body); text-align:center; margin:0 5px;]connections[/border]
  822.  
  823. [comment]----button----[/comment]
  824. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:80px; padding:3px 5px 1px 5px; box-sizing:border-box; color: var(--h1); border:1px solid var(--color-1); border-radius:2px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--body); text-align:center; margin:0 5px;]misc.[/border]
  825. [/border]
  826. [comment]----extra tabs cover end----[/comment]
  827.  
  828. [comment]----extra tabs----[/comment]
  829. [border=transparent; height:20px; width:220px; padding:0 10px 0 0; box-sizing:border-box; overflow:hidden;][border=transparent; padding:0; margin:0 -60px 0 -15px;][tabs]
  830.  
  831. [comment]----connections tab----[/comment]
  832. [tab=aaaaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; display:flex; flex-flow:column nowrap; align-items:flex-end; pointer-events:none;]
  833.  
  834. [comment]----button select----[/comment]
  835. [border=transparent; height:20px; width:fit-content; padding:1px 10px 1px 1px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; margin:-0.5px 95px 0.5px 0; background: var(--bg-1);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:80px; padding:3px 5px 1px 5px; box-sizing:border-box; color: var(--color-1); background: var(--color-2); border-radius:2px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--body); text-align:center; margin:1px 0 0 0; border:1px solid var(--color-2);]connections[/border]
  836. [/border]
  837.  
  838. [comment]----extra tab contents----[/comment]
  839. [border=transparent; height:95%; max-height:calc(100% - 20px); width:100%; padding:0; margin-top:15px; pointer-events:auto; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-15px;][/border]
  840.  
  841. [comment]----copy this whole thing to add another relationship----[/comment]
  842. [border=transparent; height:100px; width:100%; padding:0; margin-top:25px; display:flex; flex-flow:row-reverse nowrap;]
  843.  
  844. [comment]----relationship icon----[/comment]
  845. [border=transparent; height:100%; width:clamp(80px, 10vw, 100px); padding:0; position:relative; --size: calc(100% - 10px); flex-shrink:0;][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); top:0; left:0; position:absolute;][/border][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); bottom:0; right:0; position:absolute;
  846.  
  847. /*edit the number in rX to match the variables*/ background: var(--r1), var(--bg-2);
  848.  
  849. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  850.  
  851. background-size:cover;][/border][/border]
  852.  
  853. [comment]----relationship info----[/comment]
  854. [border=transparent; height:100%; flex:1; padding:0; margin-right:15px; display:flex; flex-flow:column nowrap;]
  855. [comment]----relationship name----[/comment]
  856. [border=transparent; height:auto; width:100%; padding:0 5px 0 0; box-sizing:border-box; text-align:right; color: var(--h1); font-size:18px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); line-height:20px;][comment]
  857.  
  858. ----* * * relationship name here----
  859.  
  860. [/comment]name here[/border]
  861.  
  862. [comment]----relationship description----[/comment]
  863. [border=transparent; height:80%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  864.  
  865. ----* * * text starts here----
  866.  
  867. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  868. [/border][/border][/border]
  869. [comment]----relationship description end----[/comment]
  870. [/border]
  871. [comment]----relationship info end----[/comment]
  872. [/border]
  873. [comment]----copy me too!----[/comment]
  874.  
  875. [comment]----copy this whole thing to add another relationship----[/comment]
  876. [border=transparent; height:100px; width:100%; padding:0; margin-top:25px; display:flex; flex-flow:row-reverse nowrap;]
  877.  
  878. [comment]----relationship icon----[/comment]
  879. [border=transparent; height:100%; width:clamp(80px, 10vw, 100px); padding:0; position:relative; --size: calc(100% - 10px); flex-shrink:0;][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); top:0; left:0; position:absolute;][/border][border=transparent; height: var(--size); width: var(--size); padding:0; border:1px solid var(--color-1); bottom:0; right:0; position:absolute;
  880.  
  881. /*edit the number in rX to match the variables*/ background: var(--r2), var(--bg-2);
  882.  
  883. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  884.  
  885. background-size:cover;][/border][/border]
  886.  
  887. [comment]----relationship info----[/comment]
  888. [border=transparent; height:100%; flex:1; padding:0; margin-right:15px; display:flex; flex-flow:column nowrap;]
  889. [comment]----relationship name----[/comment]
  890. [border=transparent; height:auto; width:100%; padding:0 5px 0 0; box-sizing:border-box; text-align:right; color: var(--h1); font-size:18px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--header); line-height:20px;][comment]
  891.  
  892. ----* * * relationship name here----
  893.  
  894. [/comment]name here[/border]
  895.  
  896. [comment]----relationship description----[/comment]
  897. [border=transparent; height:80%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  898.  
  899. ----* * * text starts here----
  900.  
  901. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper erat purus, quis mollis metus auctor vel. Duis eget luctus justo. Donec aliquet fermentum porttitor. Morbi quis dapibus odio, at viverra leo. Integer ut dictum lacus, nec congue odio. Nullam sapien ante, interdum ut mattis eget, varius ac justo. Pellentesque eu ante nec nibh vulputate ullamcorper.
  902. [/border][/border][/border]
  903. [comment]----relationship description end----[/comment]
  904. [/border]
  905. [comment]----relationship info end----[/comment]
  906. [/border]
  907. [comment]----copy me too!----[/comment]
  908.  
  909. [/border][/border][/border]
  910. [comment]----extra tab contents end----[/comment]
  911. [/border][/tab]
  912. [comment]----connections tab end----[/comment]
  913.  
  914. [comment]----misc tab----[/comment]
  915. [tab=aaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; display:flex; flex-flow:column nowrap; align-items:flex-end; pointer-events:none;]
  916.  
  917. [comment]----button select----[/comment]
  918. [border=transparent; height:20px; width:fit-content; padding:1px 10px 1px 1px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end; margin:-0.5px 5px 0.5px 0; background: var(--bg-1);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:80px; padding:3px 5px 1px 5px; box-sizing:border-box; color: var(--color-1); background: var(--color-2); border-radius:2px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--body); text-align:center; margin:1px 0 0 0; border:1px solid var(--color-2);]misc.[/border]
  919. [/border]
  920.  
  921. [comment]----extra tab contents----[/comment]
  922. [border=transparent; height:95%; max-height:calc(100% - 20px); width:100%; padding:0; margin-top:15px; pointer-events:auto; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-15px;][/border]
  923.  
  924. [comment]----copy this whole thing to make another tag----[/comment]
  925. [border=transparent; height:auto; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:15px;]
  926. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:125px; margin-bottom:auto; padding:1px 6px 2px 6px; box-sizing:border-box; color: var(--color-1); background: var(--color-2); border-radius:2px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-size:10px; line-height:13px; flex-shrink:0; font-family: var(--header);][comment]
  927.  
  928. ----* * * info title here----
  929.  
  930. [/comment]title[/border]
  931. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); text-align:justify; margin:-1px 0 0 15px; font-size:11px; font-family: var(--body); line-height:16px;][comment]
  932.  
  933. ----* * * info contents here----
  934.  
  935. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt purus ac facilisis. Aliquam commodo dapibus auctor. Ut eget arcu ut enim euismod bibendum a quis risus. Nam sed egestas lectus.
  936. [/border]
  937. [/border]
  938. [comment]----copy me too!----[/comment]
  939.  
  940. [/border][/border][/border]
  941. [comment]----extra tab contents end----[/comment]
  942.  
  943. [/border][/tab]
  944. [comment]----misc tab end----[/comment]
  945.  
  946. [/tabs][/border][/border]
  947. [comment]----extra tabs end----[/comment]
  948. [/border]
  949. [comment]----extra tabs container end----[/comment]
  950.  
  951. [/border]
  952. [comment]----extra contents end----[/comment]
  953.  
  954. [/border]
  955. [comment]----tab contents end----[/comment]
  956. [/border][/tab]
  957. [comment]----tab 4 end----[/comment]
  958.  
  959.  
  960. [/tabs][/border][/border][/border]
  961. [comment]----left end----[/comment]
  962.  
  963. [comment]----filler----[/comment]
  964. [border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); padding:0; box-sizing:border-box;][/border]
  965.  
  966. [comment]----black lines----[/comment]
  967. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; pointer-events:none; display:flex; flex-flow:row wrap;][border=transparent; height:auto; min-height: var(--min-h-1); flex: var(--flex-1); min-width: var(--min-1); padding:0; display:flex; align-items:flex-end;][border=transparent; height:clamp(120px, 15vw, 135px); width:100%; padding:0; background: var(--bg-1);][/border][/border][border=transparent; height:480px; flex: var(--flex-2); min-width: var(--min-2); max-width: var(--max-2); flex-shrink:0; padding:0; display:flex; align-items:flex-end;][/border][/border]
  968.  
  969. [comment]
  970. ----signature! do not remove
  971. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--color-1); font-size:clamp(9px, 1.2vw, 10px); bottom:14px; left:17px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!