API tools faq
paste
ooksie

candyfloss

ooksie
Sep 16th, 2021 (edited)
365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.73 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Inter]buttons[/font]
  5. [font=Inter]headers[/font]
  6. [font=Karla]body text[/font]
  7.  
  8. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11. /*top header background colour*/
  12. --bg-color-1: #dd92a2;
  13. /*bottom section background colour*/
  14. --bg-color-2: #eadee2;
  15. /*text container background colour*/
  16. --bg-color-3: #f7f2f4;
  17.  
  18. /*first accent colour -- make it contrast w color-2 and bg-color-1*/
  19. --color-1: #fff;
  20. /*second accent colour -- main splash of colour. contrast w color-1 and bg-color-2/3*/
  21. --color-2: #BD507D;
  22. /*third accent colour -- not used for much, currently slightly darker variation of bg-color-2*/
  23. --color-3: #dbbcc6;
  24. /*fourth accent colour -- advise to keep as bg-color-1 unless it looks weird due to other colours used*/
  25. --color-4: var(--bg-color-1);
  26.  
  27. /*header colour 1 -- contrast w color-2 and bg-color-1*/
  28. --h1: #fff;
  29. /*header colour 2*/
  30. --h2: var(--color-2);
  31. /*text colour -- contrast w bg-color-3*/
  32. --t-color: #000;
  33.  
  34. /*fonts used*/
  35. --button: 'Inter', sans-serif;
  36. --header: 'Inter', sans-serif;
  37. --body: 'Karla', sans-serif;
  38.  
  39. /*images/icons on each tab! img-1 is in the header, img-2 is on psyche page, img-3 is on history page*/
  40. --img-1: url('https://64.media.tumblr.com/b3a1a28f990d5545c93ee8956c310671/5a716c8092c130b2-10/s2048x3072/afaff8b925fdbebd912ad7fab031998750fe46af.jpg');
  41. --img-2: url('https://64.media.tumblr.com/442055c758a57aaddcd0e63b0ad257fe/1ef9190191928129-f2/s2048x3072/86a5b29328186dc54d7587a1e74998397ae65ee9.jpg');
  42. --img-3: url('https://64.media.tumblr.com/882087b1f9e07dec2a3621dc65bdd810/9ac566b59c16fbfe-e3/s500x750/f6553fe2fc4e4ba88b70a5ef7788985a4b3aded6.jpg');
  43.  
  44. /*instagram gallery images -- to make a new one, just follow the format and change the numbers*/
  45. --icon: url('https://64.media.tumblr.com/ecb1cc15f57083b5d1f03afa4cef05ec/01e652f39f5dd424-e6/s1280x1920/ecb6ec8fc21bd2d5691faecff05db5de7ff0d36f.jpg');
  46. --gimg-1: url('https://i.imgur.com/0HI4d2P.png');
  47. --gimg-2: url('https://i.imgur.com/Za5sdnS.png');
  48. --gimg-3: url('https://i.imgur.com/8dBd9YR.png');
  49.  
  50. /*music player image*/
  51. --music: url('https://64.media.tumblr.com/ba1d1519d04fa8c5460cc69519296410/653812674c697189-e7/s1280x1920/92e4575d1f9e5f4bdb05d2822c13723f7b369e81.jpg');
  52.  
  53. /*relationship images -- to make a new one, just follow the format and change the numbers*/
  54. --r1: url('https://64.media.tumblr.com/9de682d610c6dcae4df69bd9142d6d85/61ef9326b14da408-e8/s250x400/05977cce66940a1a0cf2b3d06d0d0858b8a08662.png');
  55. --r2: url('https://64.media.tumblr.com/1e426cb247274cd31866a185f25a164d/61ef9326b14da408-71/s250x400/f7b0f5f7015a83655ac424156252a85364445702.png');
  56.  
  57.  
  58. height:auto; width:100%; padding:0; line-height:0; overflow-x:auto; background-size:cover;][border=transparent; height:auto; width:100%; max-width:430px; padding:0; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:relative; margin:20px auto; border-radius:5px; overflow:hidden;
  59.  
  60. --f1: 28; --f2: 72; --f1m: 120px; --f2m: 230px; --f1mw: 260px;]
  61.  
  62. [comment]----row one----[/comment]
  63. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; background: var(--bg-color-1);]
  64. [comment]----image (basics)----[/comment]
  65. [border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); max-width:clamp(180px, 100vw, 268px); padding:0; border-radius:5px; margin:8px;
  66.  
  67. position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-1); background-size:cover; pointer-events:none;
  68.  
  69. /*edit the following to adjust the cropping of the image*/ background-position:50% 40%;
  70.  
  71. position:absolute; top:0; left:0; z-index:2;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border][border=transparent; height:calc(100% + 130px); width:100%; padding:0; box-sizing:border-box; margin:15px -7px 0 -7px; display:flex; flex-flow:column nowrap; justify-content:flex-end;][accordion=100%;]
  72.  
  73. {slide=[border=transparent; height:245px; width:100%; padding:10px; box-sizing:border-box; font-weight:normal; font-variant:none; margin:20px 0 0 0; pointer-events:auto; display:flex; flex-flow:column nowrap; align-items:center;]
  74.  
  75. [comment]----slide one----[/comment]
  76. [border=transparent; height:120px; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start; position:relative;][border=transparent; height:auto; width:fit-content; max-width:140px; padding:0; position:relative; z-index:3; margin:4px 0 120px 0;][border=transparent; height:auto; width:auto; display:inline; padding:3px 7px 3px 7px; box-sizing:border-box; background: var(--color-2); color: var(--color-1); font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:150%; font-size:11px; font-weight:bold; border-radius:3px; -webkit-box-decoration-break: clone;][comment]
  77.  
  78. ----* * * name/role here----
  79.  
  80. [/comment]when the weekend comes[/border]
  81. [/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-1); font-size:8px; font-weight:bold; text-transform:uppercase; position:absolute; top:100px; left:0; z-index:3; letter-spacing:2px; opacity:0.8;]click![/border][/border]
  82.  
  83. [comment]----slide two (basics)----[/comment]
  84. [border=transparent; height:120px; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; margin-top:auto;]
  85. [border=transparent; height:95px; width:clamp(180px, 100vw - 20px, 241px); padding:6px 7px; box-sizing:border-box; position:relative; z-index:3; border-radius:3px; overflow:hidden; display:flex; flex-flow:row nowrap;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-3); opacity:0.7; position:absolute; top:0; left:0; z-index:1;][/border]
  86.  
  87. [comment]----content----[/comment]
  88. [border=transparent; height:100%; flex:1; padding:0; margin-right:3px; position:relative; z-index:3; 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:row wrap;]
  89.  
  90. [comment]----copy this whole thing to get another tag----[/comment]
  91. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  92. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  93.  
  94. ----* * * info title here----
  95.  
  96. [/comment]given name[/border]
  97. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  98.  
  99. ----* * * info contents here----
  100.  
  101. [/comment]answer here[/border]
  102. [/border]
  103. [comment]----copy me too!----[/comment]
  104.  
  105. [comment]----copy this whole thing to get another tag----[/comment]
  106. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  107. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  108.  
  109. ----* * * info title here----
  110.  
  111. [/comment]s. name[/border]
  112. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  113.  
  114. ----* * * info contents here----
  115.  
  116. [/comment]answer here[/border]
  117. [/border]
  118. [comment]----copy me too!----[/comment]
  119.  
  120. [comment]----copy this whole thing to get another tag----[/comment]
  121. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  122. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  123.  
  124. ----* * * info title here----
  125.  
  126. [/comment]age[/border]
  127. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  128.  
  129. ----* * * info contents here----
  130.  
  131. [/comment]answer here[/border]
  132. [/border]
  133. [comment]----copy me too!----[/comment]
  134.  
  135. [comment]----copy this whole thing to get another tag----[/comment]
  136. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  137. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  138.  
  139. ----* * * info title here----
  140.  
  141. [/comment]p.o.b.[/border]
  142. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  143.  
  144. ----* * * info contents here----
  145.  
  146. [/comment]answer here[/border]
  147. [/border]
  148. [comment]----copy me too!----[/comment]
  149.  
  150. [comment]----copy this whole thing to get another tag----[/comment]
  151. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  152. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  153.  
  154. ----* * * info title here----
  155.  
  156. [/comment]d.o.b.[/border]
  157. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  158.  
  159. ----* * * info contents here----
  160.  
  161. [/comment]answer here[/border]
  162. [/border]
  163. [comment]----copy me too!----[/comment]
  164.  
  165. [comment]----copy this whole thing to get another tag----[/comment]
  166. [border=transparent; height:auto; flex:1 0; min-width:45%; padding:0; display:flex; flex-flow:column nowrap; margin:4px 3px;]
  167. [border=transparent; height:fit-content; width:auto; max-width:86px; padding:1px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:14px; margin-right:auto; font-family: var(--body);][comment]
  168.  
  169. ----* * * info title here----
  170.  
  171. [/comment]gender[/border]
  172. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:12px; line-height:14px; margin:4px 0 0 2px; font-family: var(--body); text-transform:uppercase;][comment]
  173.  
  174. ----* * * info contents here----
  175.  
  176. [/comment]answer here[/border]
  177. [/border]
  178. [comment]----copy me too!----[/comment]
  179.  
  180. [/border][/border][/border]
  181. [comment]----content end----[/comment]
  182. [/border]
  183. [/border]
  184. [comment]----slide two end----[/comment]
  185. [/border]}[border=transparent; height:107px; width:100%; padding:0; pointer-events:none; position:relative; z-index:3;][/border]{/slide}
  186.  
  187. [/accordion][/border][/border]
  188. [comment]----image end----[/comment]
  189.  
  190. [comment]----tabs----[/comment]
  191. [border=transparent; height:clamp(40px, 15vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:clamp(7px, 2vw, 12px) 8px 8px 8px;][border=transparent; height:100%; width:100%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:7px -40px 0 -15px; letter-spacing:2px; line-height:46px;][tabs]
  192.  
  193. [comment]----tab one----[/comment]
  194. [tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  195.  
  196. [comment]----button select----[/comment]
  197. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
  198.  
  199. [comment]----selected button----[/comment]
  200. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]a.[/border][/border]
  201.  
  202. [comment]----filler button----[/comment]
  203. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  204. [comment]----filler button----[/comment]
  205. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  206. [comment]----filler button----[/comment]
  207. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  208.  
  209. [/border][/border]
  210. [comment]----button select end----[/comment]
  211.  
  212. [comment]----tab contents----[/comment]
  213. [border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
  214.  
  215. [comment]----appearance container----[/comment]
  216. [border=transparent; height:clamp(190px, 38vw, 280px); flex:55; min-width:200px; padding:0; display:flex; flex-flow:column-reverse nowrap; margin:8px; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
  217. [comment]----container title----[/comment]
  218. [border=transparent; height:28px; width:100%; padding:2px 8px 10px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  219.  
  220. ----* * * container title here----
  221.  
  222. [/comment]visage[/border][/border]
  223.  
  224. [comment]----appearance contents----[/comment]
  225. [border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; 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 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-7px;][/border]
  226.  
  227. [comment]----copy this whole thing to make another tag----[/comment]
  228. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  229. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  230.  
  231. ----* * * info title here----
  232.  
  233. [/comment]hair[/border][/border]
  234. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  235.  
  236. ----* * * info contents here----
  237.  
  238. [/comment]answer[/border]
  239. [/border]
  240. [comment]---copy me too!----[/comment]
  241.  
  242. [comment]----copy this whole thing to make another tag----[/comment]
  243. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  244. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  245.  
  246. ----* * * info title here----
  247.  
  248. [/comment]eyes[/border][/border]
  249. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  250.  
  251. ----* * * info contents here----
  252.  
  253. [/comment]answer[/border]
  254. [/border]
  255. [comment]---copy me too!----[/comment]
  256.  
  257. [comment]----copy this whole thing to make another tag----[/comment]
  258. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  259. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  260.  
  261. ----* * * info title here----
  262.  
  263. [/comment]height[/border][/border]
  264. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  265.  
  266. ----* * * info contents here----
  267.  
  268. [/comment]answer[/border]
  269. [/border]
  270. [comment]---copy me too!----[/comment]
  271.  
  272. [comment]----copy this whole thing to make another tag----[/comment]
  273. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  274. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  275.  
  276. ----* * * info title here----
  277.  
  278. [/comment]weight[/border][/border]
  279. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  280.  
  281. ----* * * info contents here----
  282.  
  283. [/comment]answer[/border]
  284. [/border]
  285. [comment]---copy me too!----[/comment]
  286.  
  287. [/border][/border][/border]
  288. [comment]----appearance contents end----[/comment]
  289. [/border]
  290. [comment]----appearance container end----[/comment]
  291.  
  292. [comment]----instagram gallery----[/comment]
  293. [border=transparent; min-height:230px; max-height:280px; flex:45; min-width:150px; max-width:250px; padding:5px 0; box-sizing:border-box; margin:8px; background: var(--bg-color-3); border-radius:4px; 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:0; width:100%; padding:0; margin-bottom:-10px;][/border]
  294.  
  295. [comment]----copy this whole thing to make another post----[/comment]
  296. [border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
  297. [comment]----username----[/comment]
  298. [border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
  299.  
  300. ----* * * username here----
  301.  
  302. [/comment]username[/border][/border]
  303.  
  304. [comment]----post image----[/comment]
  305. [border=transparent; flex:1; min-height:50px; width:100%; padding:0;
  306.  
  307. /*edit the following to match the image in the variables*/ background: var(--gimg-1);
  308.  
  309. background-size:cover;
  310.  
  311. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  312.  
  313. [comment]----post contents----[/comment]
  314. [border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  315. [comment]----icons----[/comment]
  316. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
  317. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
  318. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
  319. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
  320. [border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
  321. [/border]
  322.  
  323. [comment]----caption----[/comment]
  324. [border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  325. [comment]----username----[/comment]
  326. [border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
  327.  
  328. ----* * * username here----
  329.  
  330. [/comment]username[/border]
  331. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
  332.  
  333. ----* * * caption here----
  334.  
  335. [/comment]caption![/border]
  336. [/border]
  337. [comment]----caption end----[/comment]
  338. [/border]
  339. [comment]----post contents end----[/comment]
  340. [/border]
  341. [comment]----copy me too!----[/comment]
  342.  
  343. [comment]----copy this whole thing to make another post----[/comment]
  344. [border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
  345. [comment]----username----[/comment]
  346. [border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
  347.  
  348. ----* * * username here----
  349.  
  350. [/comment]username[/border][/border]
  351.  
  352. [comment]----post image----[/comment]
  353. [border=transparent; flex:1; min-height:50px; width:100%; padding:0;
  354.  
  355. /*edit the following to match the image in the variables*/ background: var(--gimg-2);
  356.  
  357. background-size:cover;
  358.  
  359. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  360.  
  361. [comment]----post contents----[/comment]
  362. [border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  363. [comment]----icons----[/comment]
  364. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
  365. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
  366. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
  367. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
  368. [border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
  369. [/border]
  370.  
  371. [comment]----caption----[/comment]
  372. [border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  373. [comment]----username----[/comment]
  374. [border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
  375.  
  376. ----* * * username here----
  377.  
  378. [/comment]username[/border]
  379. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
  380.  
  381. ----* * * caption here----
  382.  
  383. [/comment]caption![/border]
  384. [/border]
  385. [comment]----caption end----[/comment]
  386. [/border]
  387. [comment]----post contents end----[/comment]
  388. [/border]
  389. [comment]----copy me too!----[/comment]
  390.  
  391. [comment]----copy this whole thing to make another post----[/comment]
  392. [border=transparent; height:100%; width:clamp(165px, 50% + 8px, 250px); padding:0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; scroll-snap-align:start; margin-top:10px;]
  393. [comment]----username----[/comment]
  394. [border=transparent; height:auto; width:100%; padding:2px 3px 7px 3px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:25px; padding:1px; box-sizing:border-box; border:1px solid var(--color-2); border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--icon); background-size:cover; background-position:50% 50%; flex-shrink:0; border-radius:50%;][/border][/border][border=transparent; height:auto; flex:1; margin-left:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:1px; line-height:100%; font-family: var(--header); display:flex; align-items:flex-end;][comment]
  395.  
  396. ----* * * username here----
  397.  
  398. [/comment]username[/border][/border]
  399.  
  400. [comment]----post image----[/comment]
  401. [border=transparent; flex:1; min-height:50px; width:100%; padding:0;
  402.  
  403. /*edit the following to match the image in the variables*/ background: var(--gimg-3);
  404.  
  405. background-size:cover;
  406.  
  407. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  408.  
  409. [comment]----post contents----[/comment]
  410. [border=transparent; height:auto; min-height:30px; padding:8px 3px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  411. [comment]----icons----[/comment]
  412. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; font-size:13px;]
  413. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-2);][fa]fas fa-heart[/fa][/border]
  414. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-comment[/fa][/border]
  415. [border=transparent; height:auto; width:auto; padding:0; margin-right:8px; color: var(--color-3);][fa]far fa-paper-plane[/fa][/border]
  416. [border=transparent; height:auto; width:auto; padding:0; margin-left:auto; color: var(--color-3);][fa]far fa-bookmark[/fa][/border]
  417. [/border]
  418.  
  419. [comment]----caption----[/comment]
  420. [border=transparent; height:auto; width:100%; padding:10px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;]
  421. [comment]----username----[/comment]
  422. [border=transparent; height:auto; width:auto; margin-right:8px; padding:0; flex-shrink:0; color: var(--t-color); font-size:10px; font-weight:bold; letter-spacing:0.5px; line-height:12px; font-family: var(--header); flex-shrink:0;][comment]
  423.  
  424. ----* * * username here----
  425.  
  426. [/comment]username[/border]
  427. [border=transparent; height:auto; flex:1; padding:0; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0;][comment]
  428.  
  429. ----* * * caption here----
  430.  
  431. [/comment]caption![/border]
  432. [/border]
  433. [comment]----caption end----[/comment]
  434. [/border]
  435. [comment]----post contents end----[/comment]
  436. [/border]
  437. [comment]----copy me too!----[/comment]
  438.  
  439. [/border][/border]
  440. [comment]----instagram gallery end----[/comment]
  441. [/border]
  442. [comment]----tab contents end----[/comment]
  443.  
  444. [/border][/tab]
  445. [comment]----tab one end----[/comment]
  446.  
  447.  
  448. [comment]----tab two----[/comment]
  449. [tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  450.  
  451. [comment]----button select----[/comment]
  452. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
  453. [comment]----filler button----[/comment]
  454. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  455.  
  456. [comment]----selected button----[/comment]
  457. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]b.[/border][/border]
  458.  
  459. [comment]----filler button----[/comment]
  460. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  461. [comment]----filler button----[/comment]
  462. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  463.  
  464. [/border][/border]
  465. [comment]----button select end----[/comment]
  466.  
  467.  
  468. [comment]----tab contents----[/comment]
  469. [border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
  470.  
  471. [comment]----left----[/comment]
  472. [border=transparent; min-height:200px; max-height:270px; flex:32; min-width:150px; max-width:240px; padding:0; margin:8px clamp(0px, 25px - 3.2vw, 8px) 8px 8px; display:flex; flex-flow:column nowrap; align-items:center;]
  473.  
  474. [comment]----text message container----[/comment]
  475. [border=transparent; height:70%; max-height:clamp(130px, 35vw, 270px); max-width:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]
  476. [border=transparent; height:auto; width:calc(100% - 8px); padding:7px 8px; box-sizing:border-box; background: var(--bg-color-3); border-radius:3px; font-family: var(--header); color: var(--h2); font-size:11px; text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; text-align:center; margin-right:8px; white-space:nowrap; overflow:hidden;][comment]
  477.  
  478. ----* * * contact name here----
  479.  
  480. [/comment][plain]@username[/plain][/border]
  481. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:8px;][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:-6px;][/border]
  482.  
  483. [comment]----copy this whole thing to get another sent text----[/comment]
  484. [border=transparent; height:auto; width:auto; max-width:clamp(130px, 85%, 185px); padding:4px 6px; box-sizing:border-box; background: var(--color-2); color: var(--h1); font-size:11px; line-height:14px; border-radius:6px 6px 0 6px; margin:6px 0 0 auto; font-family: var(--body);][comment]
  485.  
  486. ----* * * text contents here----
  487.  
  488. [/comment]sent text here[/border]
  489. [comment]----copy me too!----[/comment]
  490.  
  491. [comment]----copy this whole thing to get another received text----[/comment]
  492. [border=transparent; height:auto; width:auto; max-width:clamp(130px, 85%, 185px); padding:4px 6px; box-sizing:border-box; background: var(--color-3); color: var(--t-color); font-size:11px; line-height:14px; border-radius:6px 6px 6px 0; margin:6px auto 0 0; font-family: var(--body);][comment]
  493.  
  494. ----* * * text contents here----
  495.  
  496. [/comment]received text here[/border]
  497. [comment]----copy me too!----[/comment]
  498.  
  499. [/border][/border][/border]
  500. [/border]
  501. [comment]----text message container end----[/comment]
  502.  
  503. [comment]----persona image----[/comment]
  504. [border=transparent; height:clamp(45px, 30%, 80px); width:calc(100% - 8px); padding:0; background: var(--img-2); background-size:cover; margin:12px 8px 0 0;
  505.  
  506. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  507.  
  508. flex-shrink:0; border-radius:3px;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border]
  509. [/border]
  510. [comment]----left end----[/comment]
  511.  
  512. [comment]----right (personality container)----[/comment]
  513. [border=transparent; height:clamp(265px, 38vw, 280px); flex:68; min-width:200px; padding:0; margin:8px clamp(0px, 25px - 3.2vw, 8px) 8px 8px; display:flex; flex-direction:column; overflow:hidden; border-radius:3px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
  514.  
  515. [comment]----personality contents container----[/comment]
  516. [border=transparent; max-height:100%; width:50%; padding:2px 0; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden; background: var(--bg-color-3); margin-top:12px;]
  517. [comment]----container title----[/comment]
  518. [border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  519.  
  520. ----* * * container title here----
  521.  
  522. [/comment]psyche[/border][/border]
  523.  
  524. [comment]----personality contents----[/comment]
  525. [border=transparent; height:90%; width:100%; padding:9px 0; box-sizing:border-box; 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 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; color: var(--t-color); line-height:15px; text-align:justify; font-family: var(--body); font-size:11px;][comment]
  526.  
  527. ----* * * text starts here----
  528.  
  529. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor. Donec vitae nunc ac urna vestibulum ultrices. Nulla quis finibus ante. Nullam malesuada eros a accumsan molestie. Donec vehicula erat iaculis erat faucibus tempus. Fusce ligula leo, aliquet et posuere ut, consectetur nec sapien. Suspendisse cursus massa ac urna tempor venenatis. Nulla facilisi. Nullam cursus interdum risus quis rutrum. Ut a felis facilisis, ultrices mauris a, imperdiet turpis.
  530.  
  531. Quisque eget euismod purus. Morbi at scelerisque nunc. Sed pulvinar libero risus, sed lacinia risus imperdiet eu. In eu urna pulvinar, vehicula tortor vel, consequat nisi. Integer orci leo, fermentum ac metus a, mattis scelerisque erat. Fusce ac euismod ante, in placerat ex. Suspendisse vel faucibus ligula.
  532.  
  533. In mattis ullamcorper porttitor. Mauris consectetur placerat enim vel eleifend. Praesent consectetur orci eros, id semper orci faucibus sed. Nam tincidunt euismod augue ac commodo. Nam orci velit, interdum sed faucibus eu, volutpat vitae elit. Fusce volutpat eu odio non pellentesque. Nulla at libero quis magna laoreet tempor.
  534. [/border][/border][/border]
  535. [/border]
  536. [comment]----personality contents container end----[/comment]
  537.  
  538. [comment]----copy this whole thing to make another small container----[/comment]
  539. [border=transparent; height:auto; width:50%; padding:0; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px;]
  540. [comment]----container title----[/comment]
  541. [border=transparent; height:23px; width:100%; padding:10px 0 2px 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; color: var(--color-4); font-size:12px; font-family: var(--header); text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  542.  
  543. ----* * * container title here----
  544.  
  545. [/comment]virtues[/border][/border]
  546.  
  547. [comment]----container contents----[/comment]
  548. [border=transparent; height:auto; max-height:54px; width:100%; padding:5px 0 7px 0; box-sizing:border-box; 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 0 0 6px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start;]
  549.  
  550. [comment]----copy this whole thing to make another item----[/comment]
  551. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  552.  
  553. ----* * * trait here----
  554.  
  555. [/comment]virtue[/border]
  556. [comment]----copy me too!----[/comment]
  557.  
  558. [comment]----copy this whole thing to make another item----[/comment]
  559. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  560.  
  561. ----* * * trait here----
  562.  
  563. [/comment]virtue[/border]
  564. [comment]----copy me too!----[/comment]
  565.  
  566. [comment]----copy this whole thing to make another item----[/comment]
  567. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  568.  
  569. ----* * * trait here----
  570.  
  571. [/comment]virtue[/border]
  572. [comment]----copy me too!----[/comment]
  573.  
  574. [/border][/border][/border]
  575. [comment]----container contents end----[/comment]
  576. [/border]
  577. [comment]----copy me too!----[/comment]
  578.  
  579. [comment]----copy this whole thing to make another small container----[/comment]
  580. [border=transparent; height:auto; width:50%; padding:0; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px;]
  581. [comment]----container title----[/comment]
  582. [border=transparent; height:23px; width:100%; padding:10px 0 2px 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; color: var(--color-4); font-size:12px; font-family: var(--header); text-transform:uppercase; letter-spacing:1px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  583.  
  584. ----* * * container title here----
  585.  
  586. [/comment]vices[/border][/border]
  587.  
  588. [comment]----container contents----[/comment]
  589. [border=transparent; height:auto; max-height:54px; width:100%; padding:5px 0 7px 0; box-sizing:border-box; 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 0 0 6px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start;]
  590.  
  591. [comment]----copy this whole thing to make another item----[/comment]
  592. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  593.  
  594. ----* * * trait here----
  595.  
  596. [/comment]vice[/border]
  597. [comment]----copy me too!----[/comment]
  598.  
  599. [comment]----copy this whole thing to make another item----[/comment]
  600. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  601.  
  602. ----* * * trait here----
  603.  
  604. [/comment]vice[/border]
  605. [comment]----copy me too!----[/comment]
  606.  
  607. [comment]----copy this whole thing to make another item----[/comment]
  608. [border=transparent; height:auto; width:auto; flex-shrink:0; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); margin:2px 3px; text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; line-height:15px; font-family: var(--body);][comment]
  609.  
  610. ----* * * trait here----
  611.  
  612. [/comment]vice[/border]
  613. [comment]----copy me too!----[/comment]
  614.  
  615. [/border][/border][/border]
  616. [comment]----container contents end----[/comment]
  617. [/border]
  618. [comment]----copy me too!----[/comment]
  619.  
  620. [comment]----copy this whole thing to make another medium container----[/comment]
  621. [border=transparent; height:auto; width:50%; padding:9px 0; box-sizing:border-box; background: var(--bg-color-3); margin-top:12px; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-7px;][/border]
  622.  
  623. [comment]----copy this whole thing to make another tag----[/comment]
  624. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  625. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  626.  
  627. ----* * * info title here----
  628.  
  629. [/comment]likes[/border][/border]
  630. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  631.  
  632. ----* * * info contents here----
  633.  
  634. [/comment]answer here[/border]
  635. [/border]
  636. [comment]---copy me too!----[/comment]
  637.  
  638. [comment]----copy this whole thing to make another tag----[/comment]
  639. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  640. [border=transparent; height:fit-content; width:auto; max-width:80px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  641.  
  642. ----* * * info title here----
  643.  
  644. [/comment]dislikes[/border][/border]
  645. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  646.  
  647. ----* * * info contents here----
  648.  
  649. [/comment]answer here[/border]
  650. [/border]
  651. [comment]---copy me too!----[/comment]
  652.  
  653. [comment]----copy this whole thing to make another tag----[/comment]
  654. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  655. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  656.  
  657. ----* * * info title here----
  658.  
  659. [/comment]quirks[/border][/border]
  660. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  661.  
  662. ----* * * info contents here----
  663.  
  664. [/comment]answer here[/border]
  665. [/border]
  666. [comment]---copy me too!----[/comment]
  667.  
  668. [comment]----copy this whole thing to make another tag----[/comment]
  669. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:7px;]
  670. [border=transparent; height:fit-content; width:auto; max-width:84px; padding:1px 0; box-sizing:border-box; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  671.  
  672. ----* * * info title here----
  673.  
  674. [/comment]fears[/border][/border]
  675. [border=transparent; height:auto; flex:1; padding:0; margin:1px 0 0 10px; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  676.  
  677. ----* * * info contents here----
  678.  
  679. [/comment]answer here[/border]
  680. [/border]
  681. [comment]---copy me too!----[/comment]
  682.  
  683. [/border][/border][/border]
  684. [comment]----copy me too!----[/comment]
  685.  
  686.  
  687. [/border][/border]
  688. [comment]----right end----[/comment]
  689.  
  690. [/border]
  691. [comment]----tab contents end----[/comment]
  692. [/border][/tab]
  693. [comment]----tab two end----[/comment]
  694.  
  695.  
  696. [comment]----tab three----[/comment]
  697. [tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  698.  
  699. [comment]----button select----[/comment]
  700. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
  701. [comment]----filler button----[/comment]
  702. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  703. [comment]----filler button----[/comment]
  704. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  705.  
  706. [comment]----selected button----[/comment]
  707. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]c.[/border][/border]
  708.  
  709. [comment]----filler button----[/comment]
  710. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  711. [/border][/border]
  712. [comment]----button select end----[/comment]
  713.  
  714.  
  715. [comment]----tab contents----[/comment]
  716. [border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; pointer-events:auto;]
  717. [comment]----right----[/comment]
  718. [border=transparent; height:clamp(280px, 800px - 90vw, 355px); flex:76; padding:0; min-width:250px; display:flex; flex-flow:column nowrap; margin:8px;]
  719. [comment]----history container----[/comment]
  720. [border=transparent; height:90%; width:100%; padding:0; display:flex; flex-flow:column nowrap; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
  721. [comment]----container title----[/comment]
  722. [border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  723.  
  724. ----* * * container title here----
  725.  
  726. [/comment]history[/border][/border]
  727.  
  728. [comment]----history contents----[/comment]
  729. [border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; 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 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
  730.  
  731. [comment]----copy this whole thing to make another section----[/comment]
  732. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:10px;][border=transparent; height:auto; width:90%; padding:0; text-align:right; color: var(--color-2); margin:5px 0 5px 0; font-family: var(--header); letter-spacing:1.5px; text-transform:uppercase; font-size:11px; line-height:15px; font-weight:bold; margin-left:auto;][comment]
  733.  
  734. ----* * * section title here----
  735.  
  736. [/comment]section title[/border]
  737. [border=transparent; height:auto; width:100%; padding:0; line-height:15px; font-size:11px; text-align:justify; color: var(--t-color); font-family: var(--body);][comment]
  738.  
  739. ----* * * text starts here----
  740.  
  741. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor. Donec vitae nunc ac urna vestibulum ultrices. Nulla quis finibus ante. Nullam malesuada eros a accumsan molestie. Donec vehicula erat iaculis erat faucibus tempus. Fusce ligula leo, aliquet et posuere ut, consectetur nec sapien. Suspendisse cursus massa ac urna tempor venenatis. Nulla facilisi. Nullam cursus interdum risus quis rutrum. Ut a felis facilisis, ultrices mauris a, imperdiet turpis.
  742.  
  743. Quisque eget euismod purus. Morbi at scelerisque nunc. Sed pulvinar libero risus, sed lacinia risus imperdiet eu. In eu urna pulvinar, vehicula tortor vel, consequat nisi. Integer orci leo, fermentum ac metus a, mattis scelerisque erat. Fusce ac euismod ante, in placerat ex. Suspendisse vel faucibus ligula.
  744.  
  745. In mattis ullamcorper porttitor. Mauris consectetur placerat enim vel eleifend. Praesent consectetur orci eros, id semper orci faucibus sed. Nam tincidunt euismod augue ac commodo. Nam orci velit, interdum sed faucibus eu, volutpat vitae elit. Fusce volutpat eu odio non pellentesque. Nulla at libero quis magna laoreet tempor.
  746. [/border]
  747. [/border]
  748. [comment]----copy me too!----[/comment]
  749.  
  750. [/border][/border][/border]
  751. [comment]----history contents end----[/comment]
  752. [/border]
  753. [comment]----history container end----[/comment]
  754.  
  755. [comment]----quote----[/comment]
  756. [border=transparent; height:53px; width:100%; padding:6px; box-sizing:border-box; background: var(--bg-color-3); display:flex; flex-flow:row nowrap; align-items:center; margin-top:12px; border-radius:3px; flex-shrink:0;][border=transparent; height:35px; width:35px; padding:5px; box-sizing:border-box; color: var(--h1); font-size:21px; display:flex; align-items:flex-end; justify-content:center; flex-shrink:0; position:relative;][border=transparent; height:28px; width:28px; padding:0; background: var(--color-4); position:absolute; top:1px; left:1px; z-index:1;border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; position:relative; z-index:2; left:3px; text-shadow:2px 2px var(--color-4);][fa]far fa-quote-left[/fa][/border][/border][border=transparent; height:auto; max-height:28px; overflow:hidden; flex:1; padding:0; margin-left:12px; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:14px;][comment]
  757.  
  758. ----* * * quote here----
  759.  
  760. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris.
  761. [/border][/border]
  762. [comment]----quote end----[/comment]
  763. [/border]
  764. [comment]----right end----[/comment]
  765.  
  766. [comment]----history image----[/comment]
  767. [border=transparent; min-height:110px; max-height:280px; flex:24; padding:0; min-width:100px; background: var(--img-3); background-size:cover; margin:8px; border-radius:3px; overflow:hidden;
  768.  
  769. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  770.  
  771. flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border]
  772. [/border]
  773. [comment]----tab contents end----[/comment]
  774. [/border][/tab]
  775. [comment]----tab three end----[/comment]
  776.  
  777.  
  778. [comment]----tab four----[/comment]
  779. [tab=.][border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none; line-height:0; letter-spacing:0;]
  780.  
  781. [comment]----button select----[/comment]
  782. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center; margin-bottom:auto;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center;]
  783. [comment]----filler button----[/comment]
  784. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  785. [comment]----filler button----[/comment]
  786. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  787. [comment]----filler button----[/comment]
  788. [border=transparent; height:44px; width:44px; padding:0; margin:3px 4px;][/border]
  789.  
  790. [comment]----selected button----[/comment]
  791. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; margin:3px 4px; position:relative; display:flex; justify-content:center; background: var(--bg-color-1);][border=transparent; height:37px; width:37px; padding:0; background: var(--color-2); opacity:1; position:absolute; top:-4px; left:-6px; z-index:1; border-radius:50%;][/border][border=transparent; height:auto; width:auto; padding:0; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; letter-spacing:3px; position:relative; z-index:2;]d.[/border][/border]
  792.  
  793. [/border][/border]
  794. [comment]----button select end----[/comment]
  795.  
  796.  
  797. [comment]----tab contents----[/comment]
  798. [border=transparent; min-height:306px; max-height:500px; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:auto;]
  799.  
  800. [comment]----left-----[/comment]
  801. [border=transparent; height:clamp(240px, 38vw, 280px); max-height:280px; flex:30; min-width:160px; padding:0; display:flex; flex-flow:column nowrap; align-items:center; margin:8px;]
  802.  
  803. [comment]----music player----[/comment]
  804. [border=transparent; height:97px; width:100%; max-width:180px; padding:10px; box-sizing:border-box; border-radius:3px; background: var(--bg-color-3); display:flex; flex-flow:column nowrap;]
  805. [comment]----music info container----[/comment]
  806. [border=transparent; height:50px; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
  807. [comment]----music image----[/comment]
  808. [border=transparent; height:50px; width:50px; padding:3px; box-sizing:border-box; border:3px solid transparent; border-top:3px solid var(--color-3); animation:fa-spin 5s linear infinite; border-radius:50%; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--music); background-size:cover; background-position:50% 50%; animation:fa-spin 5s linear infinite reverse; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-color-2); opacity:0.2;][/border][/border][/border]
  809.  
  810. [comment]----music info----[/comment]
  811. [border=transparent; height:auto; max-height:50px; flex:1; padding:0 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  812. [border=transparent; height:auto; max-height:26px; overflow:hidden; width:100%; padding:0; color: var(--t-color); font-size:13px; font-weight:bold; letter-spacing:0.5px; font-family: var(--header); line-height:100%; text-align:center;][comment]
  813.  
  814. ----* * * song title here----
  815.  
  816. [/comment]song[/border]
  817. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-size:9px; text-transform:uppercase; font-family: var(--body); line-height:100%; margin-top:3px; letter-spacing:1px; text-align:center; opacity:0.7;][comment]
  818.  
  819.  
  820. ----* * * song artist here----
  821.  
  822. [/comment]artist[/border]
  823. [/border]
  824. [comment]----music info end----[/comment]
  825. [/border]
  826. [comment]----music info container end----[/comment]
  827.  
  828. [comment]----play button----[/comment]
  829. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; color: var(--color-2); pointer-events:none; margin-top:3px;]
  830. [border=transparent; height:auto; width:auto; padding:0; font-size:13px;][fa]fas fa-backward[/fa][/border]
  831. [border=transparent; height:25px; width:25px; padding:0; overflow:hidden; position:relative; margin:0 10px 0 12px]
  832. [border=transparent; height:100%; width:100%; padding:0; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; font-size:17px; background: var(--bg-color-3);][fa]fas fa-play[/fa][/border]
  833.  
  834. [comment]----actual media player----[/comment]
  835. [border=transparent; height:100%; width:100%; padding:0; pointer-events:auto; position:absolute; top:0; left:0; z-index:1; opacity:0.1%;]
  836. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  837. [border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
  838. [media=soundcloud]replace with soundcloud link[/media]
  839. [/border]
  840.  
  841. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  842. [border=transparent; height:500px; width:500px; margin-top:-175px; margin-left:-99px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  843. [media=googledrive]replace with google file code[/MEDIA]
  844. [/border]
  845. [/border]
  846. [comment]----actual media player end----[/comment]
  847. [/border]
  848. [border=transparent; height:auto; width:auto; padding:0; font-size:13px;][fa]fas fa-forward[/fa][/border]
  849. [/border]
  850. [comment]----play button end----[/comment]
  851. [/border]
  852. [comment]----music player end----[/comment]
  853.  
  854. [comment]----misc container----[/comment]
  855. [border=transparent; height:calc(100% - 97px); width:100%; max-width:230px; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px; border-radius:3px; overflow:hidden; background: var(--bg-color-3);]
  856. [comment]----container title----[/comment]
  857. [border=transparent; height:28px; width:100%; padding:10px 8px 2px 8px; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 7px; box-sizing:border-box; background: var(--bg-color-1); color: var(--h1); font-size:13px; font-family: var(--header); text-transform:uppercase; letter-spacing:2px; line-height:100%; font-weight:bold; border-radius:2px;][comment]
  858.  
  859. ----* * * container title here----
  860.  
  861. [/comment]extra[/border][/border]
  862.  
  863. [comment]----misc contents----[/comment]
  864. [border=transparent; height:calc(100% - 28px); width:100%; padding:9px 0; box-sizing:border-box; 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 clamp(1px, 20px - 3.5vw, 9px) 0 9px; box-sizing:border-box; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
  865.  
  866. [comment]----copy this whole thing to make another tag----[/comment]
  867. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; margin-top:7px;]
  868. [border=transparent; height:fit-content; width:auto; max-width:80px; padding:1px 0; box-sizing:border-box; flex-shrink:0; margin:1px 10px 1px 0;][border=transparent; height:auto; width:auto; padding:1px 4px 2px 4px; box-sizing:border-box; background: var(--color-2); border-radius:2px; color: var(--h1); text-transform:uppercase; font-weight:bold; font-size:11px; letter-spacing:1px; line-height:15px; font-family: var(--body); display:inline; -webkit-box-decoration-break:clone;][comment]
  869.  
  870. ----* * * info title here----
  871.  
  872. [/comment]hello[/border][/border]
  873. [border=transparent; height:auto; flex:1; min-width:fit-content; padding:0; margin:2px 0 0 0; color: var(--t-color); font-size:11px; line-height:14px; font-family: var(--body); text-align:justify;][comment]
  874.  
  875. ----* * * info contents here----
  876.  
  877. [/comment]goodbye too loonng what happens when it gets to long[/border]
  878. [/border]
  879. [comment]---copy me too!----[/comment]
  880.  
  881. [/border][/border][/border]
  882. [comment]----misc contents end----[/comment]
  883. [/border]
  884. [comment]----misc container end----[/comment]
  885.  
  886. [/border]
  887. [comment]----left end----[/comment]
  888.  
  889. [comment]----right----[/comment]
  890. [border=transparent; min-height:227px; max-height:clamp(227px, 35vw, 280px); flex:70; min-width:200px; padding:0; display:flex; flex-direction:column; overflow:hidden; margin:8px clamp(0px, 30px - 4.5vw, 8px) 8px 8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y mandatory; scroll-padding:38.5px; scroll-behavior: smooth;][border=transparent; height:auto; width:50%; padding:0; position:relative; font-size:0; visibility:hidden;][accordion=100%]
  891.  
  892. [comment]----copy this whole thing to make another relationship----[/comment]
  893. {slide=[border=transparent; height:auto; max-height:30px; width:auto; padding:9px 12px; background: var(--color-2); border-radius:4px; font-family: var(--header); font-weight:bold; font-variant: normal; line-height:100%; text-transform:uppercase; margin:-7px -7px 0px -7px; visibility:visible; color: var(--h1); font-size:13px; letter-spacing:2px; white-space:nowrap; overflow:hidden; position:relative; z-index:10;][comment]
  894.  
  895. ---* * * relationship title here---
  896.  
  897. [/comment]relationship title[/border]
  898.  
  899. }[border=transparent; height:auto; width:auto; padding:0; background: var(--bg-color-3); visibility:visible; margin:-5px -7px 4px -7px; position:relative; overflow:hidden; border-radius:4px; scroll-snap-align:start;][border=transparent; max-height:clamp(190px, 29vw, 242px); width:100%; padding:8px 0 8px 8px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  900.  
  901. [comment]----top----[/comment]
  902. [border=transparent; height:71px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; flex-shrink:0; align-items:center;]
  903. [comment]----icon----[/comment]
  904. [border=transparent; height:71px; width:71px; padding:0; border-radius:3px; flex-shrink:0;
  905.  
  906. /*edit the number in rX to match the variables*/ background: var(--r1);
  907.  
  908. background-size:cover;
  909.  
  910. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  911. [comment]----details----[/comment]
  912. [border=transparent; height:auto; max-height:71px; flex:1; max-width:190px; padding:0; margin-left:12px; display:flex; flex-flow:column nowrap;]
  913. [border=transparent; height:auto; max-height:28px; width:100%; padding:0; color: var(--h2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; line-height:14px; font-family: var(--header); overflow:hidden;][comment]
  914.  
  915. ----* * * character name here----
  916.  
  917. [/comment]character name[/border]
  918. [border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; color: var(--color-4); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:14px; font-family: var(--header); letter-spacing:1px; margin-top:3px; white-space:nowrap; overflow:hidden;][comment]
  919.  
  920. ----* * * character relationship here----
  921.  
  922. [/comment]relationship[/border]
  923.  
  924. [border=transparent; height:14px; width:100%; padding:0 3px 0 0; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:5px;][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; color: var(--color-3); font-size:13px;][fa]fas fa-heart[/fa][/border][border=transparent; height:14px; flex:1; margin-right:8px; padding:2px 2px 2px 2px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:2px;][border=transparent; height:100%; padding:0; border-radius:1px;
  925.  
  926. /*edit the following to adjust the relationship bar*/ width:30%;
  927.  
  928. background: var(--color-4);][/border][/border][/border]
  929. [/border]
  930. [comment]----details end----[/comment]
  931. [/border]
  932. [comment]----top end----[/comment]
  933.  
  934. [comment]----bottom (character description)----[/comment]
  935. [border=transparent; height:70%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:12px;][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; font-family: var(--body); line-height:15px;][comment]
  936.  
  937. ----* * * text starts here----
  938.  
  939. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor.
  940. [/border][/border][/border]
  941. [comment]----bottom end----[/comment]
  942. [/border][/border]
  943. {/slide}
  944. [comment]----copy me too!----[/comment]
  945.  
  946. [comment]----copy this whole thing to make another relationship----[/comment]
  947. {slide=[border=transparent; height:auto; max-height:30px; width:auto; padding:9px 12px; background: var(--color-2); border-radius:4px; font-family: var(--header); font-weight:bold; font-variant: normal; line-height:100%; text-transform:uppercase; margin:-7px -7px 0px -7px; visibility:visible; color: var(--h1); font-size:13px; letter-spacing:2px; white-space:nowrap; overflow:hidden; position:relative; z-index:10;][comment]
  948.  
  949. ---* * * relationship title here---
  950.  
  951. [/comment]relationship title[/border]
  952.  
  953. }[border=transparent; height:auto; width:auto; padding:0; background: var(--bg-color-3); visibility:visible; margin:-5px -7px 4px -7px; position:relative; overflow:hidden; border-radius:4px; scroll-snap-align:start;][border=transparent; height:clamp(190px, 29vw, 243px); width:100%; padding:8px 0 8px 8px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  954.  
  955. [comment]----top----[/comment]
  956. [border=transparent; height:71px; width:100%; padding:0 8px 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; flex-shrink:0; align-items:center;]
  957. [comment]----icon----[/comment]
  958. [border=transparent; height:71px; width:71px; padding:0; border-radius:3px; flex-shrink:0;
  959.  
  960. /*edit the number in rX to match the variables*/ background: var(--r2);
  961.  
  962. background-size:cover;
  963.  
  964. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  965. [comment]----details----[/comment]
  966. [border=transparent; height:auto; max-height:71px; flex:1; max-width:190px; padding:0; margin-left:12px; display:flex; flex-flow:column nowrap;]
  967. [border=transparent; height:auto; max-height:28px; width:100%; padding:0; color: var(--h2); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; line-height:14px; font-family: var(--header); overflow:hidden;][comment]
  968.  
  969. ----* * * character name here----
  970.  
  971. [/comment]character name[/border]
  972. [border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; color: var(--color-4); font-size:10px; text-transform:uppercase; font-weight:bold; line-height:14px; font-family: var(--header); letter-spacing:1px; margin-top:3px; white-space:nowrap; overflow:hidden;][comment]
  973.  
  974. ----* * * character relationship here----
  975.  
  976. [/comment]relationship[/border]
  977.  
  978. [border=transparent; height:14px; width:100%; padding:0 3px 0 0; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top:5px;][border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; color: var(--color-3); font-size:13px;][fa]fas fa-heart[/fa][/border][border=transparent; height:14px; flex:1; margin-right:8px; padding:2px 2px 2px 2px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:2px;][border=transparent; height:100%; padding:0; border-radius:1px;
  979.  
  980. /*edit the following to adjust the relationship bar*/ width:30%;
  981.  
  982. background: var(--color-4);][/border][/border][/border]
  983. [/border]
  984. [comment]----details end----[/comment]
  985. [/border]
  986. [comment]----top end----[/comment]
  987.  
  988. [comment]----bottom (character description)----[/comment]
  989. [border=transparent; height:70%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; margin-top:12px;][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; font-family: var(--body); line-height:15px;][comment]
  990.  
  991. ----* * * text starts here----
  992.  
  993. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat ex nibh, id accumsan lacus varius ac. Duis vel lacinia elit. Aliquam sodales, augue nec maximus interdum, urna purus interdum massa, a accumsan erat quam id mauris. Integer gravida est sit amet erat lobortis pharetra. Mauris sapien tortor, fermentum vel auctor in, eleifend ut enim. Nam dui nibh, suscipit vitae neque eu, imperdiet convallis dolor. Donec vitae nunc ac urna vestibulum ultrices. Nulla quis finibus ante. Nullam malesuada eros a accumsan molestie. Donec vehicula erat iaculis erat faucibus tempus. Fusce ligula leo, aliquet et posuere ut, consectetur nec sapien. Suspendisse cursus massa ac urna tempor venenatis. Nulla facilisi. Nullam cursus interdum risus quis rutrum. Ut a felis facilisis, ultrices mauris a, imperdiet turpis.
  994.  
  995. Quisque eget euismod purus. Morbi at scelerisque nunc. Sed pulvinar libero risus, sed lacinia risus imperdiet eu. In eu urna pulvinar, vehicula tortor vel, consequat nisi. Integer orci leo, fermentum ac metus a, mattis scelerisque erat. Fusce ac euismod ante, in placerat ex. Suspendisse vel faucibus ligula.
  996. [/border][/border][/border]
  997. [comment]----bottom end----[/comment]
  998. [/border][/border]
  999. {/slide}
  1000. [comment]----copy me too!----[/comment]
  1001.  
  1002. [/accordion][/border][/border][/border]
  1003. [comment]----right end----[/comment]
  1004.  
  1005. [/border]
  1006. [comment]----tab contents end----[/comment]
  1007. [/border][/tab]
  1008. [comment]----tab four end----[/comment]
  1009.  
  1010.  
  1011. [/tabs][/border][/border][/border]
  1012. [comment]----tabs end----[/comment]
  1013. [/border]
  1014. [comment]----row one end----[/comment]
  1015.  
  1016. [comment]----tab cover----[/comment]
  1017. [border=transparent; height:100%; width:100%; padding:0; box-sizing:border-box; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow:row wrap; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; justify-content:center;][border=transparent; height:120px; flex: var(--f2); min-width: var(--f2m); padding:0; margin:8px;][/border][border=transparent; height:clamp(40px, 16vw, 115px); flex: var(--f1); min-width: var(--f1m); max-width: var(--f1mw); padding:0; box-sizing:border-box; margin:12px 8px 8px 8px; display:flex; flex-flow:row wrap; align-items:flex-end; align-content:center; border-radius:4px; justify-content:center; background: var(--bg-color-1);]
  1018.  
  1019. [comment]----button----[/comment]
  1020. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; letter-spacing:3px; display:flex; justify-content:center;]a.[/border]
  1021.  
  1022. [comment]----button----[/comment]
  1023. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; letter-spacing:3px; display:flex; justify-content:center;]b.[/border]
  1024.  
  1025. [comment]----button----[/comment]
  1026. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; background:transparent; letter-spacing:3px; display:flex; justify-content:center;]c.[/border]
  1027.  
  1028. [comment]----button----[/comment]
  1029. [border=transparent; height:44px; width:44px; padding:3px 0 3px 3px; box-sizing:border-box; font-family: var(--button); color: var(--color-1); font-size:32px; font-weight:bold; -webkit-text-stroke:0.5px var(--color-1); white-space:nowrap; text-transform:uppercase; line-height:100%; margin:3px 4px; border-radius:50%; position:relative; background:transparent; letter-spacing:3px; display:flex; justify-content:center;]d.[/border]
  1030.  
  1031. [/border][/border]
  1032. [comment]----filler/row two----[/comment]
  1033. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap;]
  1034. [border=transparent; height:280px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
  1035. [border=transparent; min-height:200px; flex:1; min-width:180px; padding:0;margin:8px;][/border]
  1036. [/border][/border]
  1037. [comment]----tab cover end----[/comment]
  1038.  
  1039. [comment]----filler/row two----[/comment]
  1040. [border=transparent; height:auto; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:row wrap; background: var(--bg-color-2);]
  1041. [border=transparent; height:280px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
  1042. [border=transparent; min-height:200px; flex:1; min-width:180px; padding:0; margin:8px;][/border]
  1043. [/border]
  1044.  
  1045. [comment]
  1046. ----signature! do not remove
  1047. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.2;color: var(--color-1); font-size:clamp(9px, 1.2vw, 10px); top:14px; left:15px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border]
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!