API tools faq
paste
Advertisement
ooksie

parallels

ooksie
Jun 10th, 2021 (edited)
1,308
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 69.84 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Padauk]header[/font]
  4. [font=Gothic A1]name[/font]
  5. [font=Inter]body[/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. /*border + accent colour*/
  11. --border:#e1e1e1;
  12. /*background colour*/
  13. --bg-1: #FEFEFE;
  14.  
  15. /*accent colour 1*/
  16. --color-1: #8C0D00;
  17. /*accent colour 2*/
  18. --color-2: #082148;
  19.  
  20. /*button colour -- i'd recommend making it slightly darker than border*/
  21. --button: #cccccc;
  22. /*header colour -- contrast w/ color-1*/
  23. --h1: #fff;
  24. /*text colour -- contrast w/ background*/
  25. --t-color: #000;
  26.  
  27. /*fonts used*/
  28. --header: 'Padauk', sans-serif;
  29. --name: 'Gothic A1', sans-serif;
  30. --body: 'Inter', sans-serif;
  31.  
  32. /*static images on top/left and sidebar*/
  33. --img-1: url('https://pbs.twimg.com/media/E3AI79tUUAAFtav.jpg');
  34. --img-2: url('https://pbs.twimg.com/media/ExLcMvIVkAMyDYy.jpg');
  35.  
  36. /*images in tabs are categorised based on which tab they're in: a for tab 1, b for tab 2 and so on*/
  37. --aimg-1: URL('https://pbs.twimg.com/media/E3CX_h0VcAcJTRE.jpg');
  38. --bimg-1: url('https://pbs.twimg.com/media/E3A7UP8VoAU-X7N.jpg');
  39. --cimg-1: url('https://pbs.twimg.com/media/E3C54bcVkAMTzDk.jpg');
  40.  
  41. /*music player image*/
  42. --music:url('https://pbs.twimg.com/media/E1Gd-YNVcAEcnaG.jpg');
  43.  
  44. /*role images -- to add more, copy paste and edit the number in rX + the link*/
  45. --r1: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  46. --r2: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  47. --r3: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  48. --r4: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  49. --r5: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  50. --r6: url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png');
  51.  
  52.  
  53. height:auto; min-height:400px; width:100%; max-width:700px; padding:clamp(2px, 1.5vw, 8px); box-sizing:border-box; background: var(--bg-1); border:1px solid var(--border); border-radius:4px; overflow:hidden; overflow-x:auto; position:relative; line-height:0; margin:15px auto;][border=transparent; height:auto; width:100%; min-width:300px; max-width:680px; padding:0; box-sizing:border-box; position:relative; display:flex; flex-flow:row wrap; justify-content:center;]
  54.  
  55. [comment]----left/top image----[/comment]
  56. [border=transparent; min-height:150px; flex:30; min-width:200px; padding:0; background: var(--img-1); background-size:cover; margin:8px;
  57.  
  58. /*edit the following to adjust the cropping of the image*/ background-position:20% 40%;
  59.  
  60. border-radius:1px;][/border]
  61.  
  62. [comment]----content container----[/comment]
  63. [border=transparent; height:auto; min-width:250px; flex:71; padding:0; position:relative; display:flex; flex-flow:row wrap;]
  64.  
  65. [comment]----sidebar----[/comment]
  66. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none;]
  67. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; max-width:290px; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-content:flex-start; flex-shrink:0;]
  68.  
  69. [comment]----buttons container (tabs cover)----[/comment]
  70. [border=transparent; --margin: clamp(6px, 15px - 1.5vw, 8px); height:fit-content; min-width:100px; padding:0; display:flex; flex-flow:row wrap; align-content:center; margin:3px; justify-content:center; background: var(--bg-1);]
  71. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--button); font-size:20px;][fa]fas fa-user[/fa][/border]
  72. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--button); font-size:20px;][fa]fas fa-comment[/fa][/border]
  73. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--button); font-size:20px;][fa]fas fa-book[/fa][/border]
  74. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--button); font-size:20px;][fa]fas fa-heart[/fa][/border]
  75. [/border]
  76. [comment]----buttons container end----[/comment]
  77.  
  78. [border=transparent; height:8px; width:100%; padding:0; flex-shrink:0;][/border]
  79.  
  80. [comment]----icon----[/comment]
  81. [border=transparent; height:auto; min-height:clamp(80px, 12vw, 116px); min-width:100px; flex:1 0; padding:0; margin:8px; background: var(--img-2); border-radius:2px; background-size:cover;
  82.  
  83. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  84.  
  85. [comment]----name container----[/comment]
  86. [border=transparent; height:auto; min-height:clamp(80px, 37%, 136px); flex:3; min-width:120px; padding:0; margin:8px; display:flex; flex-flow:row wrap; align-items:flex-end; pointer-events:auto;]
  87. [comment]----name----[/comment]
  88. [border=transparent; height:auto; width:clamp(58px, 320px - 32vw, 280px); max-width:100%; padding:0; color: var(--color-1); font-size:clamp(32px, 5vw, 45px); text-transform:uppercase; font-weight:bold; line-height:clamp(36px, 4.5vw, 46px); letter-spacing:2px; font-family: var(--name); -webkit-text-stroke:0.5px var(--color-1); position:relative; z-index:3; margin-right:-28px; text-transform:uppercase; text-align:center;
  89.  
  90. /*add/remove display:none here*/][comment]
  91.  
  92. ----* * * initials here (3 letters max)----
  93.  
  94. [/comment]h.j.h.[/border]
  95.  
  96. [comment]----special character name----[/comment]
  97. [border=transparent; height:auto; width:clamp(50px, 320px - 32vw, 280px); max-width:100%; padding:0; color: var(--color-1); font-size:clamp(32px, 4vw, 38px); text-transform:uppercase; font-weight:bold; line-height:clamp(36px, 4.5vw, 42px); letter-spacing:2px; font-family: var(--name); -webkit-text-stroke:0.5px var(--color-1); position:relative; z-index:3; margin-right:-28px;
  98.  
  99. /*add/remove display:none here*/ display:none;][comment]
  100.  
  101. ----* * * name here----
  102.  
  103. [/comment]서예슬[/border]
  104.  
  105. [border=transparent; height:auto; flex:1; padding:0; margin:auto 0 auto auto; display:flex; flex-flow:column nowrap;]
  106. [border=transparent; height:5px; width:100%; padding:0; flex-shrink:0;][/border]
  107. [border=transparent; height:fit-content; width:auto; max-width:calc(100% - 15px); margin-left:auto; padding:0; text-align:right;][border=transparent; display:inline; padding:2px 4px 3px 6px; box-sizing:border-box; background: var(--color-2); box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:2px; font-size:7.5px; text-transform:uppercase; line-height:13px; color: var(--h1); font-family: var(--body); letter-spacing:2px;][comment]
  108.  
  109. ----* * * role here----
  110.  
  111. [/comment]role.[/border][/border]
  112. [border=transparent; height:auto; max-height:clamp(24px, 3.5vw, 32px); width:100%; padding:0; overflow:hidden; color: var(--t-color); font-size:7px; letter-spacing:0.5px; font-family: var(--body); line-height:8px; text-align:justify; margin-top:6px;][comment]
  113.  
  114. ----* * * quote here----
  115.  
  116. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet, libero nec finibus gravida, leo justo mollis risus, et porta dolor ligula vitae turpis.[/border]
  117.  
  118. [/border]
  119. [/border]
  120. [/border]
  121. [comment]----filler area----[/comment]
  122. [border=transparent; height:auto; min-height:400px; flex:71; min-width:250px; padding:0; margin:8px;][/border]
  123. [/border]
  124. [comment]----sidebar end----[/comment]
  125.  
  126. [comment]----tabs----[/comment]
  127. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; padding:0; flex-shrink:0; display:flex; justify-content:center;][border=transparent; height:fit-content; max-height:clamp(60px, 14vw, 130px); flex:2; max-width:269px; min-width:80px; padding:0; margin:3px; overflow:hidden;][border=transparent; padding:0; margin:5px -20px 0 clamp(-14px, -2vw, -12px); line-height:53px; letter-spacing:clamp(2px, 15px - 1.5vw, 6px);][tabs]
  128.  
  129. [comment]----tab one----[/comment]
  130. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  131. [comment]----button select----[/comment]
  132. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; max-width:290px; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-content:flex-start; flex-shrink:0;]
  133.  
  134. [comment]----buttons container (tabs cover)----[/comment]
  135. [border=transparent; --margin: clamp(6px, 15px - 1.5vw, 8px); height:fit-content; min-width:100px; padding:0; display:flex; flex-flow:row wrap; align-content:center; margin:3px; justify-content:center;]
  136. [comment]----selected button----[/comment]
  137. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--bg-1); font-size:20px; background: var(--color-1);][fa]fas fa-user[/fa][/border]
  138.  
  139. [comment]----filler button----[/comment]
  140. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  141. [comment]----filler button----[/comment]
  142. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  143. [comment]----filler button----[/comment]
  144. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  145. [/border]
  146. [comment]----buttons container end----[/comment]
  147.  
  148. [/border]
  149. [comment]----button select end----[/comment]
  150.  
  151. [comment]----tab contents----[/comment]
  152. [border=transparent; height:400px; flex:71; min-width:250px; padding:0; margin:8px; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  153.  
  154. [comment]----requisite----[/comment]
  155. [border=transparent; height:46%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]
  156.  
  157. [comment]----section title----[/comment]
  158. [border=transparent; height:auto; width:auto; padding:7px 9px 3px 11px; box-sizing:border-box; margin-left:auto; z-index:3; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px; flex-shrink:0;][comment]
  159.  
  160. ----* * * title here----
  161.  
  162. [/comment]requisite.[/border]
  163.  
  164. [comment]----section contents----[/comment]
  165. [border=transparent; height:90%; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:7px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:row wrap;]
  166.  
  167. [comment]----copy this whole thing to get another bit of info----[/comment]
  168. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  169. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  170.  
  171. ----* * * info title----
  172.  
  173. [/comment]full name[/border]
  174. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  175.  
  176. ----* * * info contents----
  177.  
  178. [/comment]answer[/border]
  179. [/border]
  180. [comment]----copy me too!----[/comment]
  181.  
  182. [comment]----copy this whole thing to get another bit of info----[/comment]
  183. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  184. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  185.  
  186. ----* * * info title----
  187.  
  188. [/comment]age[/border]
  189. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  190.  
  191. ----* * * info contents----
  192.  
  193. [/comment]answer[/border]
  194. [/border]
  195. [comment]----copy me too!----[/comment]
  196.  
  197. [comment]----copy this whole thing to get another bit of info----[/comment]
  198. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  199. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  200.  
  201. ----* * * info title----
  202.  
  203. [/comment]gender[/border]
  204. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  205.  
  206. ----* * * info contents----
  207.  
  208. [/comment]answer[/border]
  209. [/border]
  210. [comment]----copy me too!----[/comment]
  211.  
  212. [comment]----copy this whole thing to get another bit of info----[/comment]
  213. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  214. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  215.  
  216. ----* * * info title----
  217.  
  218. [/comment]sexuality[/border]
  219. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  220.  
  221. ----* * * info contents----
  222.  
  223. [/comment]answer[/border]
  224. [/border]
  225. [comment]----copy me too!----[/comment]
  226.  
  227. [comment]----copy this whole thing to get another bit of info----[/comment]
  228. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  229. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  230.  
  231. ----* * * info title----
  232.  
  233. [/comment]occupation[/border]
  234. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  235.  
  236. ----* * * info contents----
  237.  
  238. [/comment]answer[/border]
  239. [/border]
  240. [comment]----copy me too!----[/comment]
  241.  
  242. [comment]----copy this whole thing to get another bit of info----[/comment]
  243. [border=transparent; height:auto; flex:1; min-width:clamp(80px, 50% - 14px, 180px); padding:0 5px 9px 5px; box-sizing:border-box; margin:7px; display:flex; flex-flow:column nowrap; border-bottom:2px solid var(--color-2);]
  244. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-family: var(--body); font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:11px;][comment]
  245.  
  246. ----* * * info title----
  247.  
  248. [/comment]role[/border]
  249. [border=transparent; height:auto; width:auto; padding:0; color: var(--t-color); font-family: var(--body); font-size:10px; text-transform:uppercase; line-height:13px; letter-spacing:0.5px; margin-top:3px;][comment]
  250.  
  251. ----* * * info contents----
  252.  
  253. [/comment]answer[/border]
  254. [/border]
  255. [comment]----copy me too!----[/comment]
  256.  
  257. [/border][/border][/border]
  258. [comment]----section contents end----[/comment]
  259. [/border]
  260. [comment]----requisite end----[/comment]
  261.  
  262. [comment]----appearance----[/comment]
  263. [border=transparent; height:calc(54% - 16px); max-height:200px; width:100%; padding:0; position:relative; margin-top:auto; border-left:2px solid var(--bg-1);]
  264. [comment]----image background----[/comment]
  265. [border=transparent; height:100%; width:100%; padding:0; background: var(--aimg-1); background-size:cover; border-radius:1px;
  266.  
  267. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  268.  
  269. position:absolute; top:0; left:0;][border=transparent; height:0; width:70%; padding:0; position:absolute; right:0; bottom:30%; z-index:1; border-top:7px solid var(--bg-1);][/border][border=transparent; height:100%; width:0; padding:0; border-right:7px solid var(--bg-1); position:absolute; top:0; left:calc(30% - 7px);][/border][/border]
  270.  
  271. [comment]----section title----[/comment]
  272. [border=transparent; height:auto; width:auto; padding:7px 7px 3px 9.5px; box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:3; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px;][comment]
  273.  
  274. ----* * * title here----
  275.  
  276. [/comment]visage.[/border]
  277.  
  278. [comment]----section contents----[/comment]
  279. [border=transparent; height:100%; width:70%; padding:0; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:2; pointer-events:auto; margin-left:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0 0 7px 0; box-sizing:border-box; margin-bottom:5px; display:flex; align-items:flex-end; justify-content:flex-end; color: var(--bg-1); font-size:9px; font-family: var(--body); text-transform:uppercase; letter-spacing:2px; line-height:9px; font-weight:bold;]scroll[/border][border=transparent; height:auto; width:100%; padding:0; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1); opacity:0.85; position:absolute; top:0; left:0;][/border][border=transparent; height:auto; width:50%; padding:7px 0 7px 7px; box-sizing:border-box; display:flex; flex-flow:column nowrap; position:relative; z-index:2;]
  280.  
  281. [comment]----copy this whole thing to make another set of info----[/comment]
  282. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center;]
  283. [border=transparent; height:fit-content; width:fit-content; padding:3px 6px; box-sizing:border-box; background: var(--color-1); font-size:10px; font-family: var(--body); border-radius:2px; line-height:11px; flex-shrink:0; margin:3px 7px 0 0; color: var(--h1); text-transform:uppercase; font-weight:bold; letter-spacing:2px;][comment]
  284.  
  285. ----* * *info title here----
  286.  
  287. [/comment]height[/border]
  288. [border=transparent; height:auto; min-width:fit-content; flex:1; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; margin:3px 0 0 0; line-height:15px;][comment]
  289.  
  290. ----* * * info contents here----
  291.  
  292. [/comment]answer[/border]
  293. [/border]
  294. [comment]----copy me too!----[/comment]
  295.  
  296. [comment]----copy this whole thing to make another set of info----[/comment]
  297. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:2px;]
  298. [border=transparent; height:fit-content; width:fit-content; padding:3px 6px; box-sizing:border-box; background: var(--color-1); font-size:10px; font-family: var(--body); border-radius:2px; line-height:11px; flex-shrink:0; margin:3px 7px 0 0; color: var(--h1); text-transform:uppercase; font-weight:bold; letter-spacing:2px;][comment]
  299.  
  300. ----* * *info title here----
  301.  
  302. [/comment]hair colour[/border]
  303. [border=transparent; height:auto; min-width:fit-content; flex:1; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; margin:3px 0 0 0; line-height:15px;][comment]
  304.  
  305. ----* * * info contents here----
  306.  
  307. [/comment]answer[/border]
  308. [/border]
  309. [comment]----copy me too!----[/comment]
  310.  
  311. [comment]----copy this whole thing to make another set of info----[/comment]
  312. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center; margin-top:2px;]
  313. [border=transparent; height:fit-content; width:fit-content; padding:3px 6px; box-sizing:border-box; background: var(--color-1); font-size:10px; font-family: var(--body); border-radius:2px; line-height:11px; flex-shrink:0; margin:3px 7px 0 0; color: var(--h1); text-transform:uppercase; font-weight:bold; letter-spacing:2px;][comment]
  314.  
  315. ----* * *info title here----
  316.  
  317. [/comment]eye colour[/border]
  318. [border=transparent; height:auto; min-width:fit-content; flex:1; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; margin:3px 0 0 0; line-height:15px;][comment]
  319.  
  320. ----* * * info contents here----
  321.  
  322. [/comment]answer[/border]
  323. [/border]
  324. [comment]----copy me too!----[/comment]
  325.  
  326. [/border][/border][/border][/border]
  327. [comment]----section contents end----[/comment]
  328.  
  329. [/border]
  330. [comment]----appearance end----[/comment]
  331.  
  332. [/border]
  333. [comment]----tab contents end----[/comment]
  334.  
  335. [/border][/tab]
  336. [comment]----tab one end----[/comment]
  337.  
  338.  
  339. [comment]----tab two----[/comment]
  340. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  341. [comment]----button select----[/comment]
  342. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; max-width:290px; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-content:flex-start; flex-shrink:0;]
  343.  
  344. [comment]----buttons container (tabs cover)----[/comment]
  345. [border=transparent; --margin: clamp(6px, 15px - 1.5vw, 8px); height:fit-content; min-width:100px; padding:0; display:flex; flex-flow:row wrap; align-content:center; margin:3px; justify-content:center;]
  346. [comment]----filler button----[/comment]
  347. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  348.  
  349. [comment]----selected button----[/comment]
  350. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--bg-1); font-size:20px; background: var(--color-1);][fa]fas fa-comment[/fa][/border]
  351.  
  352. [comment]----filler button----[/comment]
  353. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  354. [comment]----filler button----[/comment]
  355. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  356. [/border]
  357. [comment]----buttons container end----[/comment]
  358.  
  359. [/border]
  360. [comment]----button select end----[/comment]
  361.  
  362. [comment]----tab contents----[/comment]
  363. [border=transparent; height:400px; flex:71; min-width:250px; padding:0; margin:8px; display:flex; flex-flow:column nowrap; pointer-events:auto; justify-content:center;]
  364. [comment]----header + traits----[/comment]
  365. [border=transparent; height:29%; width:100%; padding:10px; box-sizing:border-box; background: var(--bimg-1); background-size:cover; border-radius:1px;
  366.  
  367. /*edit the following to adjust the cropping of the image*/ background-position:50% 15%;
  368.  
  369. position:relative; display:flex; flex-flow:row nowrap; flex-shrink:0;]
  370.  
  371. [comment]----section title----[/comment]
  372. [border=transparent; height:auto; width:auto; padding:7px 8px 3px 10px; box-sizing:border-box; position:absolute; top:0; right:0; z-index:3; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px;][comment]
  373.  
  374. ----* * * title here----
  375.  
  376. [/comment]persona.[/border]
  377.  
  378. [comment]----traits----[/comment]
  379. [border=transparent; height:30px; width:clamp(150px, 80%, 220px); padding:0; margin-top:auto; overflow:hidden; opacity:0.95;][border=transparent; height:47px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:30px; width:fit-content; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-end;][border=transparent; padding:0; width:0; height:100%; margin-right:-5px;][/border]
  380.  
  381. [comment]----copy this whole thing to add another trait----[/comment]
  382. [border=transparent; height:auto; width:auto; min-width:fit-content; padding:4px 8px; box-sizing:border-box; border-left:7px solid var(--color-1); background: var(--color-2); color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:9px; margin:0 5px;][comment]
  383.  
  384. ----* * * trait here----
  385.  
  386. [/comment]self-critical[/border]
  387. [comment]----copy me too!----[/comment]
  388.  
  389. [comment]----copy this whole thing to add another trait----[/comment]
  390. [border=transparent; height:auto; width:auto; min-width:fit-content; padding:4px 8px; box-sizing:border-box; border-left:7px solid var(--color-1); background: var(--color-2); color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:9px; margin:0 5px;][comment]
  391.  
  392. ----* * * trait here----
  393.  
  394. [/comment]trait[/border]
  395. [comment]----copy me too!----[/comment]
  396.  
  397. [comment]----copy this whole thing to add another trait----[/comment]
  398. [border=transparent; height:auto; width:auto; min-width:fit-content; padding:4px 8px; box-sizing:border-box; border-left:7px solid var(--color-1); background: var(--color-2); color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:9px; margin:0 5px;][comment]
  399.  
  400. ----* * * trait here----
  401.  
  402. [/comment]trait[/border]
  403. [comment]----copy me too!----[/comment]
  404.  
  405. [comment]----copy this whole thing to add another trait----[/comment]
  406. [border=transparent; height:auto; width:auto; min-width:fit-content; padding:4px 8px; box-sizing:border-box; border-left:7px solid var(--color-1); background: var(--color-2); color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:9px; margin:0 5px;][comment]
  407.  
  408. ----* * * trait here----
  409.  
  410. [/comment]trait[/border]
  411. [comment]----copy me too!----[/comment]
  412.  
  413. [/border][/border][/border]
  414. [comment]----traits end----[/comment]
  415. [/border]
  416. [comment]----header end----[/comment]
  417.  
  418. [comment]----section contents----[/comment]
  419. [border=transparent; height:220px; width:100%; padding:0; margin:16px 0; 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; color: var(--t-color); font-size:11px; text-align:justify; line-height:15px; font-family: var(--body);][comment]
  420.  
  421. ----* * * text starts here----
  422.  
  423. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan odio justo, sit amet pellentesque velit vulputate at. Phasellus non rhoncus leo. Nullam consectetur, libero nec luctus ultrices, leo risus posuere nulla, a pharetra nulla quam quis ligula. Cras eros tellus, mollis non massa a, lacinia pretium felis. Integer et lectus eget est pellentesque consectetur in et nulla. Fusce elit erat, facilisis et augue sit amet, fringilla aliquet neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac leo ornare, dignissim libero ac, ullamcorper mauris. Aenean congue venenatis lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sollicitudin lorem ut metus commodo accumsan. Phasellus ut feugiat metus. Morbi dictum, velit quis finibus pharetra, diam elit lobortis ante, commodo maximus massa arcu nec diam. Sed nec ex rhoncus, dignissim nulla in, pretium dolor. Etiam pellentesque, purus dignissim dictum viverra, eros nibh finibus quam, vitae cursus mauris ex vel massa. Nulla congue orci et ipsum suscipit bibendum vitae eget nunc. Sed felis nulla, dignissim eu augue vitae, fermentum finibus velit. Morbi tempor nisi orci, eu scelerisque nulla hendrerit vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam aliquet dolor quam, sit amet accumsan sapien ullamcorper quis. Ut ligula urna, ultricies eu vehicula nec, elementum sit amet leo.
  424. [/border][/border][/border]
  425. [comment]----section contents end----[/comment]
  426.  
  427. [comment]----persona box container----[/comment]
  428. [border=transparent; height:80px; width:calc(90% + 10px); padding:0; flex-shrink:0; overflow:hidden; display:flex; flex-flow:column nowrap; margin:0 0 0 10px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-10px;][/border]
  429.  
  430. [comment]----copy this whole thing to make another box (1 -- alternate 1 & 2)----[/comment]
  431. [border=transparent; height:100%; width:50%; padding:0; border:1px solid var(--border); box-sizing:border-box; display:flex; flex-flow:column nowrap; margin-top:10px; scroll-snap-align:end;]
  432. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;][border=transparent; height:auto; min-height:100%; flex:1; padding:0; border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border][border=transparent; height:auto; width:auto; padding:6px 6px 4px 8px; box-sizing:border-box; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; background: var(--color-1); font-family: var(--header);][comment]
  433.  
  434. ----* * * box title here----
  435.  
  436. [/comment]interests[/border]
  437. [/border]
  438. [border=transparent; height:60px; flex:1; padding:8px 0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0 8px 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); text-align:justify; line-height:14px; font-size:10px;][comment]
  439.  
  440. ----* * * box contents here----
  441.  
  442. [/comment]interests here[/border]
  443. [/border][/border]
  444. [/border]
  445. [comment]----copy me too!----[/comment]
  446.  
  447. [comment]----copy this whole thing to make another box (2 -- alternate 1 & 2)----[/comment]
  448. [border=transparent; height:100%; width:50%; padding:0; border:1px solid var(--border); box-sizing:border-box; display:flex; flex-flow:column nowrap; margin-top:10px; scroll-snap-align:end;]
  449. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;][border=transparent; height:auto; min-height:100%; flex:1; padding:0; border-bottom:3px solid var(--color-1); box-sizing:border-box;][/border][border=transparent; height:auto; width:auto; padding:6px 6px 4px 8px; box-sizing:border-box; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:11px; background: var(--color-2); font-family: var(--header);][comment]
  450.  
  451. ----* * * box title here----
  452.  
  453. [/comment]hobbies[/border]
  454. [/border]
  455. [border=transparent; height:60px; flex:1; padding:8px 0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0 8px 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); text-align:justify; line-height:14px; font-size:10px;][comment]
  456.  
  457. ----* * * box contents here----
  458.  
  459. [/comment]hobbies here[/border]
  460. [/border][/border]
  461. [/border]
  462. [comment]----copy me too!----[/comment]
  463.  
  464.  
  465. [/border][/border]
  466. [comment]----persona box container end----[/comment]
  467.  
  468. [/border]
  469. [comment]----tab contents end----[/comment]
  470.  
  471. [/border][/tab]
  472. [comment]----tab two end----[/comment]
  473.  
  474.  
  475. [comment]----tab three----[/comment]
  476. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  477. [comment]----button select----[/comment]
  478. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; max-width:290px; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-content:flex-start; flex-shrink:0;]
  479.  
  480. [comment]----buttons container (tabs cover)----[/comment]
  481. [border=transparent; --margin: clamp(6px, 15px - 1.5vw, 8px); height:fit-content; min-width:100px; padding:0; display:flex; flex-flow:row wrap; align-content:center; margin:3px; justify-content:center;]
  482. [comment]----filler button----[/comment]
  483. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  484. [comment]----filler button----[/comment]
  485. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  486.  
  487. [comment]----selected button----[/comment]
  488. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--bg-1); font-size:20px; background: var(--color-1);][fa]fas fa-book[/fa][/border]
  489.  
  490. [comment]----filler button----[/comment]
  491. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  492. [/border]
  493. [comment]----buttons container end----[/comment]
  494.  
  495. [/border]
  496. [comment]----button select end----[/comment]
  497.  
  498. [comment]----tab contents----[/comment]
  499. [border=transparent; height:400px; flex:71; min-width:250px; padding:0; margin:8px; display:flex; flex-flow:column nowrap; align-items:center;pointer-events:auto;]
  500.  
  501. [comment]----section title----[/comment]
  502. [border=transparent; height:auto; width:auto; padding:7px 8px 3px 10px; box-sizing:border-box; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px; margin-right:auto;][comment]
  503.  
  504. ----* * * title here----
  505.  
  506. [/comment]history.[/border]
  507.  
  508. [comment]----section contents----[/comment]
  509. [border=transparent; height:75%; width:100%; padding:1px 0 3px 0; box-sizing:border-box; margin:10px 0 8px 0; display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:8px; padding:0; border-right:1px solid var(--border); box-sizing:border-box; position:absolute; top:0; left:0;][/border][border=transparent; height:0; width:100%; padding:0; margin-bottom:-14px;][/border]
  510.  
  511. [comment]----copy this whole thing to make another hsection----[/comment]
  512. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-top:14px;]
  513. [comment]----hsection title----[/comment]
  514. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:sticky; top:0; align-items:center;][border=transparent; height:16px; width:16px; padding:3px; border:1px solid var(--border); box-sizing:border-box; background: var(--bg-1); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1);][/border][/border][border=transparent; height:auto; flex:1; padding:4px 8px 4px 14px; box-sizing:border-box; display:flex; background: var(--bg-1); font-size:12px; color: var(--t-color); text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--body); line-height:16px;][comment]
  515.  
  516. ----* * * event title here----
  517.  
  518. [/comment]date here[/border]
  519. [/border]
  520.  
  521. [comment]----hsection contents----[/comment]
  522. [border=transparent; height:auto; width:100%; padding:0 0 0 24px; box-sizing:border-box; margin-top:7px; color: var(--t-color); font-size:11px; text-align:justify; font-family: var(--body); line-height:15px;][comment]
  523.  
  524. ----* * * text starts here----
  525.  
  526. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.
  527.  
  528. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas consectetur eu libero quis ultrices. Aliquam pharetra volutpat diam ultricies varius. Nullam accumsan nec dui in euismod. Suspendisse porta odio in pharetra tincidunt. Curabitur quis urna vitae turpis tincidunt ultricies non a erat. Duis bibendum quam et tellus varius efficitur id quis arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget mattis ante, et sodales ex. Proin sed leo aliquam lorem vulputate tristique in feugiat dolor. Curabitur id malesuada neque. Curabitur aliquet facilisis commodo. Praesent purus eros, suscipit a pellentesque a, venenatis id dolor. Donec commodo nunc facilisis metus sodales sollicitudin. Nam a odio sit amet augue mollis tincidunt.
  529.  
  530. Curabitur nulla sem, accumsan sed tincidunt vel, suscipit et dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin euismod euismod commodo. Cras iaculis arcu nec felis mattis semper. Praesent non dui lorem. Maecenas rutrum, purus quis varius iaculis, turpis quam auctor nisi, sed hendrerit massa lectus nec mauris. Maecenas fermentum, ligula at dignissim placerat, libero lectus imperdiet diam, sed fermentum nulla ligula porttitor nisi. Curabitur sit amet venenatis justo, id bibendum orci. Donec convallis quam ut urna facilisis, quis laoreet ante molestie.
  531. [/border]
  532. [comment]----hsection contents end----[/comment]
  533. [/border]
  534. [comment]----copy me too!----[/comment]
  535.  
  536. [comment]----copy this whole thing to make another hsection----[/comment]
  537. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-top:14px;]
  538. [comment]----hsection title----[/comment]
  539. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; position:sticky; top:0; align-items:center;][border=transparent; height:16px; width:16px; padding:3px; border:1px solid var(--border); box-sizing:border-box; background: var(--bg-1); flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1);][/border][/border][border=transparent; height:auto; flex:1; padding:4px 8px 4px 14px; box-sizing:border-box; display:flex; background: var(--bg-1); font-size:12px; color: var(--t-color); text-transform:uppercase; letter-spacing:2px; font-weight:bold; font-family: var(--body); line-height:16px;][comment]
  540.  
  541. ----* * * event title here----
  542.  
  543. [/comment]date here[/border]
  544. [/border]
  545.  
  546. [comment]----hsection contents----[/comment]
  547. [border=transparent; height:auto; width:100%; padding:0 0 0 24px; box-sizing:border-box; margin-top:7px; color: var(--t-color); font-size:11px; text-align:justify; font-family: var(--body); line-height:15px;][comment]
  548.  
  549. ----* * * text starts here----
  550.  
  551. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.
  552.  
  553. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas consectetur eu libero quis ultrices. Aliquam pharetra volutpat diam ultricies varius. Nullam accumsan nec dui in euismod. Suspendisse porta odio in pharetra tincidunt. Curabitur quis urna vitae turpis tincidunt ultricies non a erat. Duis bibendum quam et tellus varius efficitur id quis arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque eget mattis ante, et sodales ex. Proin sed leo aliquam lorem vulputate tristique in feugiat dolor. Curabitur id malesuada neque. Curabitur aliquet facilisis commodo. Praesent purus eros, suscipit a pellentesque a, venenatis id dolor. Donec commodo nunc facilisis metus sodales sollicitudin. Nam a odio sit amet augue mollis tincidunt.
  554.  
  555. Curabitur nulla sem, accumsan sed tincidunt vel, suscipit et dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin euismod euismod commodo. Cras iaculis arcu nec felis mattis semper. Praesent non dui lorem. Maecenas rutrum, purus quis varius iaculis, turpis quam auctor nisi, sed hendrerit massa lectus nec mauris. Maecenas fermentum, ligula at dignissim placerat, libero lectus imperdiet diam, sed fermentum nulla ligula porttitor nisi. Curabitur sit amet venenatis justo, id bibendum orci. Donec convallis quam ut urna facilisis, quis laoreet ante molestie.
  556. [/border]
  557. [comment]----hsection contents end----[/comment]
  558. [/border]
  559. [comment]----copy me too!----[/comment]
  560.  
  561. [/border][/border]
  562. [comment]----section contents end----[/comment]
  563.  
  564. [comment]----quote/message container----[/comment]
  565. [border=transparent; height:90px; width:96%; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center;]
  566. [comment]----message contents----[/comment]
  567. [border=transparent; height:100%; flex:1; padding:0; margin-right:4px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  568.  
  569. [comment]----main quote/first message----[/comment]
  570. [border=transparent; height:100%; width:50%; padding:0; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:auto; margin-left:auto; padding:8px; box-sizing:border-box;background: var(--color-2); border-radius:5px 5px 0 5px; color: var(--h1); font-family: var(--body); text-transform:uppercase; letter-spacing:1px; line-height:13px; font-size:9px; text-align:right;][comment]
  571.  
  572. ----* * * quote here----
  573.  
  574. [/comment]quote. make it a nice quote[/border]
  575. [/border]
  576. [border=transparent; padding:0; height:0; width:100%; margin-bottom:-3px;][/border]
  577.  
  578. [comment]----messages container -- add display:none to leave it as just the quote----[/comment]
  579. [border=transparent; height:auto; min-height:100%; width:50%; padding:0; display:flex; flex-flow:column nowrap; justify-content:center;]
  580. [comment]----copy this to add a message received----[/comment]
  581. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:175px; padding:8px; box-sizing:border-box; margin:5px auto 0 0; background: var(--color-1); border-radius:5px 5px 5px 0; color: var(--h1); font-family: var(--body); text-transform:uppercase; letter-spacing:1px; line-height:12px; font-size:9px; text-align:left;][comment]
  582.  
  583. ----* * * message here----
  584.  
  585. [/comment]an extra text[/border]
  586. [comment]----copy me too!----[/comment]
  587.  
  588. [comment]----copy this to add a message received----[/comment]
  589. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:175px; padding:8px; box-sizing:border-box; margin:5px 0 0 auto; background: var(--color-2); border-radius:5px 5px 0 5px; color: var(--h1); font-family: var(--body); text-transform:uppercase; letter-spacing:1px; line-height:12px; font-size:9px; text-align:right;][comment]
  590.  
  591. ----* * * message here----
  592.  
  593. [/comment]an extra reply[/border]
  594. [comment]----copy me too!----[/comment]
  595.  
  596. [/border]
  597. [comment]----messages container end----[/comment]
  598. [/border][/border]
  599. [comment]----message contents end----[/comment]
  600. [border=transparent; height:78px; width:78px; padding:0; background: var(--cimg-1); border-radius:2px; background-size:cover; flex-shrink:0;
  601.  
  602. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  603.  
  604. [/border]
  605. [comment]----quote container end----[/comment]
  606.  
  607. [/border]
  608. [comment]----tab contents end----[/comment]
  609.  
  610. [/border][/tab]
  611. [comment]----tab three end----[/comment]
  612.  
  613.  
  614. [comment]----tab four----[/comment]
  615. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  616. [comment]----button select----[/comment]
  617. [border=transparent; height:auto; min-height:172px; flex:29; min-width:120px; max-width:290px; padding:0; display:flex; flex-flow:row-reverse wrap; justify-content:center; align-content:flex-start; flex-shrink:0;]
  618.  
  619. [comment]----buttons container (tabs cover)----[/comment]
  620. [border=transparent; --margin: clamp(6px, 15px - 1.5vw, 8px); height:fit-content; min-width:100px; padding:0; display:flex; flex-flow:row wrap; align-content:center; margin:3px; justify-content:center;]
  621. [comment]----filler button----[/comment]
  622. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  623. [comment]----filler button----[/comment]
  624. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  625. [comment]----filler button----[/comment]
  626. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); box-sizing:border-box; margin:6px var(--margin);][/border]
  627.  
  628. [comment]----selected button----[/comment]
  629. [border=transparent; height:49px; width:49px; padding:0; border:1px solid var(--border); margin:6px var(--margin); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--bg-1); font-size:20px; background: var(--color-1);][fa]fas fa-heart[/fa][/border]
  630. [/border]
  631. [comment]----buttons container end----[/comment]
  632.  
  633. [/border]
  634. [comment]----button select end----[/comment]
  635.  
  636. [comment]----tab contents----[/comment]
  637. [border=transparent; height:400px; flex:71; min-width:250px; padding:0; margin:8px; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  638.  
  639. [comment]----relationships----[/comment]
  640. [border=transparent; height:40%; height:80%; min-height:135px; width:100%; padding:0; display:flex; flex-flow:column nowrap;]
  641.  
  642. [comment]----section title----[/comment]
  643. [border=transparent; height:auto; width:auto; padding:7px 8px 3px 10px; box-sizing:border-box; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px; margin-left:auto;][comment]
  644.  
  645. ----* * * title here----
  646.  
  647. [/comment]connections.[/border]
  648.  
  649. [comment]----section contents----[/comment]
  650. [border=transparent; height:115px; flex:1; padding:0; display:flex; flex-flow:column nowrap; overflow:hidden; margin-top:14px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-18px;][/border]
  651.  
  652. [comment]----copy this to make another relationship----[/comment]
  653. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  654. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  655.  
  656. /*edit the number in rX to match the one in the variables*/ background: var(--r1);
  657.  
  658. background-size:cover; flex-shrink:0;
  659.  
  660. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  661.  
  662. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  663. [comment]----character name----[/comment]
  664. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  665.  
  666. ----* * * character name here----
  667.  
  668. [/comment]name here[/border]
  669.  
  670. [comment]----character role/status----[/comment]
  671. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  672.  
  673. ----* * * role/status here----
  674.  
  675. [/comment]role/status[/border]
  676.  
  677. [comment]----character description----[/comment]
  678. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  679.  
  680. ----* * * text starts here----
  681.  
  682. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  683. [/border][/border]
  684. [/border]
  685. [/border]
  686. [comment]----copy me too!----[/comment]
  687.  
  688. [comment]----copy this to make another relationship----[/comment]
  689. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  690. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  691.  
  692. /*edit the number in rX to match the one in the variables*/ background: var(--r2);
  693.  
  694. background-size:cover; flex-shrink:0;
  695.  
  696. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  697.  
  698. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  699. [comment]----character name----[/comment]
  700. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  701.  
  702. ----* * * character name here----
  703.  
  704. [/comment]name here[/border]
  705.  
  706. [comment]----character role/status----[/comment]
  707. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  708.  
  709. ----* * * role/status here----
  710.  
  711. [/comment]role/status[/border]
  712.  
  713. [comment]----character description----[/comment]
  714. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  715.  
  716. ----* * * text starts here----
  717.  
  718. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  719. [/border][/border]
  720. [/border]
  721. [/border]
  722. [comment]----copy me too!----[/comment]
  723.  
  724. [comment]----copy this to make another relationship----[/comment]
  725. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  726. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  727.  
  728. /*edit the number in rX to match the one in the variables*/ background: var(--r3);
  729.  
  730. background-size:cover; flex-shrink:0;
  731.  
  732. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  733.  
  734. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  735. [comment]----character name----[/comment]
  736. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  737.  
  738. ----* * * character name here----
  739.  
  740. [/comment]name here[/border]
  741.  
  742. [comment]----character role/status----[/comment]
  743. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  744.  
  745. ----* * * role/status here----
  746.  
  747. [/comment]role/status[/border]
  748.  
  749. [comment]----character description----[/comment]
  750. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  751.  
  752. ----* * * text starts here----
  753.  
  754. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  755. [/border][/border]
  756. [/border]
  757. [/border]
  758. [comment]----copy me too!----[/comment]
  759.  
  760. [comment]----copy this to make another relationship----[/comment]
  761. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  762. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  763.  
  764. /*edit the number in rX to match the one in the variables*/ background: var(--r4);
  765.  
  766. background-size:cover; flex-shrink:0;
  767.  
  768. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  769.  
  770. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  771. [comment]----character name----[/comment]
  772. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  773.  
  774. ----* * * character name here----
  775.  
  776. [/comment]name here[/border]
  777.  
  778. [comment]----character role/status----[/comment]
  779. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  780.  
  781. ----* * * role/status here----
  782.  
  783. [/comment]role/status[/border]
  784.  
  785. [comment]----character description----[/comment]
  786. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  787.  
  788. ----* * * text starts here----
  789.  
  790. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  791. [/border][/border]
  792. [/border]
  793. [/border]
  794. [comment]----copy me too!----[/comment]
  795.  
  796. [comment]----copy this to make another relationship----[/comment]
  797. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  798. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  799.  
  800. /*edit the number in rX to match the one in the variables*/ background: var(--r5);
  801.  
  802. background-size:cover; flex-shrink:0;
  803.  
  804. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  805.  
  806. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  807. [comment]----character name----[/comment]
  808. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  809.  
  810. ----* * * character name here----
  811.  
  812. [/comment]name here[/border]
  813.  
  814. [comment]----character role/status----[/comment]
  815. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  816.  
  817. ----* * * role/status here----
  818.  
  819. [/comment]role/status[/border]
  820.  
  821. [comment]----character description----[/comment]
  822. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  823.  
  824. ----* * * text starts here----
  825.  
  826. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  827. [/border][/border]
  828. [/border]
  829. [/border]
  830. [comment]----copy me too!----[/comment]
  831.  
  832. [comment]----copy this to make another relationship----[/comment]
  833. [border=transparent; height:115px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px; scroll-snap-align:end;]
  834. [border=transparent; height:115px; width:100px; padding:0; border-radius:2px;
  835.  
  836. /*edit the number in rX to match the one in the variables*/ background: var(--r6);
  837.  
  838. background-size:cover; flex-shrink:0;
  839.  
  840. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  841.  
  842. [border=transparent; height:100%; flex:1; padding:0; margin-left:14px; display:flex; flex-flow:column nowrap;]
  843. [comment]----character name----[/comment]
  844. [border=transparent; height:auto; width: auto; padding:0; color: var(--t-color); font-size:14px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:14px; font-family: var(--body);][comment]
  845.  
  846. ----* * * character name here----
  847.  
  848. [/comment]name here[/border]
  849.  
  850. [comment]----character role/status----[/comment]
  851. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 6px 3px 6px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); font-size:9px; text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:9px; margin:7px 0 9px 0;][comment]
  852.  
  853. ----* * * role/status here----
  854.  
  855. [/comment]role/status[/border]
  856.  
  857. [comment]----character description----[/comment]
  858. [border=transparent; height:80%; width:100%; padding:0; 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; color: var(--t-color); font-size:10px; line-height:15px; text-align:justify; font-family: var(--body);][comment]
  859.  
  860. ----* * * text starts here----
  861.  
  862. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum nunc nec risus porta iaculis quis sit amet ante. Quisque eget est mauris. Curabitur posuere nibh nibh, ac maximus dolor vestibulum sed. Nullam ut nulla tincidunt, tincidunt mi ac, ullamcorper mi. In ultricies euismod fermentum. Nulla convallis nec sem sit amet porta. Morbi convallis ornare arcu quis commodo. Sed in luctus libero. Sed pretium malesuada nisl at laoreet.[/border]
  863. [/border][/border]
  864. [/border]
  865. [/border]
  866. [comment]----copy me too!----[/comment]
  867.  
  868. [/border][/border][/border]
  869. [comment]----section contents end----[/comment]
  870. [/border]
  871. [comment]----relationships end---[/comment]
  872.  
  873. [comment]----misc----[/comment]
  874. [border=transparent; height:30%; width:100%; padding:0; margin:14px 0 0 0; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-end; flex-shrink:0;
  875.  
  876. /*to hide or use, add/remove display:none; respectively here!*/ display:none;]
  877.  
  878. [comment]----section title----[/comment]
  879. [border=transparent; height:auto; width:auto; padding:10px 7px 8px 3px; box-sizing:border-box; background: var(--color-1); color: var(--h1); font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:bold; font-family: var(--header); line-height:15px; writing-mode:vertical-rl; text-orientation:mixed;][comment]
  880.  
  881. ----* * * title here----
  882.  
  883. [/comment]extra.[/border]
  884.  
  885. [comment]----section contents----[/comment]
  886. [border=transparent; height:100%; flex:1; padding:0; margin-right:8px; 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;]
  887.  
  888. [comment]----copy this whole thing to make another set of info----[/comment]
  889. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; align-items:center;]
  890. [border=transparent; height:fit-content; width:fit-content; padding:3px 6px; box-sizing:border-box; background: var(--color-1); font-size:10px; font-family: var(--body); border-radius:2px; line-height:11px; flex-shrink:0; margin:3px 7px 0 0; color: var(--h1); text-transform:uppercase; font-weight:bold; letter-spacing:2px;][comment]
  891.  
  892. ----* * *info title here----
  893.  
  894. [/comment]question[/border]
  895. [border=transparent; height:auto; min-width:fit-content; flex:1; padding:0; color: var(--t-color); font-family: var(--body); font-size:11px; margin:3px 0 0 0; line-height:15px;][comment]
  896.  
  897. ----* * * info contents here----
  898.  
  899. [/comment]answer[/border]
  900. [/border]
  901. [comment]----copy me too!----[/comment]
  902.  
  903. [/border][/border][/border]
  904. [comment]----section contents end----[/comment]
  905. [/border]
  906. [comment]----misc end----[/comment]
  907.  
  908. [comment]----music player----[/comment]
  909. [border=transparent; height:auto; width:100%; padding:8px; box-sizing:border-box; border:1px solid var(--border); display:flex; flex-flow:row nowrap; margin-top:14px;]
  910. [comment]----album image----[/comment]
  911. [border=transparent; height:80px; width:80px; padding:0; position:relative; display:flex; justify-content:center; align-items:center; pointer-events:none; flex-shrink:0;]
  912. [border=transparent; height:100%; width:100%; padding:0; border-radius:1px; background: var(--music); background-size:cover; flex-shrink:0; position:absolute; top:0; left:0; z-index:2; overflow:hidden;
  913.  
  914. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-2); opacity:0.2; mix-blend-mode:multiply;][/border][/border]
  915. [border=transparent; height:0; width:0; padding:0; border-left:18px solid var(--bg-1); border-top:11px solid transparent; border-bottom:11px solid transparent; border-radius:1.5px; position:relative; z-index:3; opacity:0.9;][/border]
  916.  
  917. [comment]----actual media player----[/comment]
  918. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; justify-content:center; align-items:center; pointer-events:auto;][border=transparent; height:20px; width:20px; padding:0; position:relative; overflow:hidden;]
  919.  
  920. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  921. [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
  922. [media=soundcloud]https://soundcloud.com/l2share132/heize-feat-ahn-ye-eun[/media]
  923. [/border]
  924.  
  925. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  926. [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;]
  927. [media=googledrive]1MY4K759jSmjBxpqpSnJVErhAa41KU0pP[/MEDIA]
  928. [/border]
  929.  
  930. [/border][/border]
  931. [comment]----actual media player end----[/comment]
  932. [/border]
  933. [comment]----album image end----[/comment]
  934.  
  935. [comment]----music info----[/comment]
  936. [border=transparent; height:80px; flex:1; padding:0 8px; box-sizing:border-box; margin-left:4px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center;]
  937. [border=transparent; height:auto; width:100%; padding:0; text-align:center; color: var(--color-1); font-size:clamp(12px, 1.8vw, 14px); text-transform:uppercase; letter-spacing:1.5px; font-family: var(--header); line-height:clamp(13px, 1.8vw, 15px); font-weight:bold;][comment]
  938.  
  939. ----* * * song name here----
  940.  
  941. [/comment]from the rain[/border]
  942. [border=transparent; height:auto; width:100%; padding:0; text-align:center; color: var(--t-color); font-size:clamp(8px, 1.2vw, 9px); text-transform:uppercase; letter-spacing:1px; font-family: var(--body); line-height:clamp(9px, 1.3vw, 11px); margin:3px 0 12px 0;][comment]
  943.  
  944. ----* * * song artist here----
  945.  
  946. [/comment]heize (ft. ahn ye-eun)[/border]
  947.  
  948. [border=transparent; height:4px; width:clamp(120px, 90%, 220px); padding:0; background: var(--border);][border=transparent; height:100%; padding:0; background: var(--color-1);
  949.  
  950. /*edit this to adjust music bar progress*/ width:70%;][/border][/border]
  951. [/border]
  952. [comment]----music info end----[/comment]
  953. [/border]
  954. [comment]----music player end----[/comment]
  955.  
  956. [/border]
  957. [comment]----tab contents end----[/comment]
  958.  
  959. [/border][/tab]
  960. [comment]----tab four end----[/comment]
  961.  
  962.  
  963. [/tabs][/border][/border][/border]
  964. [comment]----tabs end----[/comment]
  965.  
  966. [comment]----content filler area----[/comment]
  967. [border=transparent; height:auto; min-height:400px; flex:71; min-width:250px; padding:0; margin:8px; pointer-events:none;][/border]
  968.  
  969. [/border]
  970. [comment]----content container end----[/comment]
  971. [/border][comment]
  972. ----signature! do not remove/edit
  973. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.5;color: var(--color-2); font-size:10px;text-align:center; top:clamp(12px, 1.5vw, 13px); left:15px; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/bg][/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!