API tools faq
paste
ooksie

no attachment (cs)

ooksie
Oct 13th, 2024 (edited)
244
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 78.63 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Manrope]header[/font]
  4. [font=Figtree]body[/font]
  5.  
  6. 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 ( ‾́ ◡ ‾́ )
  7.  
  8. [/comment][div=
  9.  
  10. /*background colour*/
  11. --bg-color: #fcfcfc;
  12. /*container and boxes border colour*/
  13. --border: #383838;
  14.  
  15. /*main accent (colourful)*/
  16. --color-1: #db7285;
  17. /*second accent (similar to border)*/
  18. --color-2: #000;
  19. /*third accent (contrasts with both color-1 and color-2, goes well with color-1)*/
  20. --color-3: #fcfcfc;
  21.  
  22. /*text colour*/
  23. --t-color: #000;
  24.  
  25. /*fonts used*/
  26. --header: 'Manrope', sans-serif;
  27. --body: 'Figtree', sans-serif;
  28.  
  29. /*main left icon image*/
  30. --img-1: url('https://i.imgur.com/cYL3ow2.png');
  31. /*tab 2 psyche image*/
  32. --img-2: url('https://i.pinimg.com/564x/19/0c/24/190c240c7a2677524f5f867a3c4d2ef6.jpg');
  33.  
  34. height:auto; width:100%; margin:30px 0 40px 0; line-height:0; overflow-x:auto;][div=height:auto; min-height:520px; width:100%; min-width:350px; max-width:750px; position:relative; margin:0 auto; border:1px solid var(--border); background: var(--bg-color); display:flex; flex-flow:column nowrap; overflow:hidden;
  35.  
  36. --f1h: clamp(160px, -500px + 105vw, 480px); --f1: 37; --f1w: 180px;
  37. --f2h: 480px; --f2: 63; --f2w: 220px;]
  38.  
  39. [comment]----tabs----[/comment]
  40. [div=height:40px; width:100%; box-sizing:border-box; border-bottom:1px solid var(--border); overflow:hidden; display:flex; flex-flow:row nowrap;][div=height:30px; width:auto; margin:10px -50px 0 -12px;][tabs]
  41.  
  42. [comment]----tab 1----[/comment]
  43. [tab=111][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:column nowrap;]
  44. [comment]----button select----[/comment]
  45. [div=height:39px; width:100%; display:flex; flex-flow:row nowrap; flex-shrink:0;]
  46.  
  47. [comment]----selected button----[/comment]
  48. [div=height:100%; width:80px; border-right:1px solid var(--border); background: var(--color-1); color: var(--color-3); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  49.  
  50. ----button title here----
  51.  
  52. [/comment]basics[/div]
  53. [comment]----button end----[/comment]
  54.  
  55. [comment]----placeholder button----[/comment]
  56. [div=height:100%; width:80px; flex-shrink:0][/div]
  57. [comment]----placeholder button----[/comment]
  58. [div=height:100%; width:80px; flex-shrink:0][/div]
  59. [comment]----placeholder button----[/comment]
  60. [div=height:100%; width:80px; flex-shrink:0][/div]
  61.  
  62. [/div]
  63. [comment]----button select end----[/comment]
  64.  
  65. [comment]----tab container----[/comment]
  66. [div=height:auto; width:100%; display:flex; flex-flow:row wrap;]
  67.  
  68. [comment]----left/top----[/comment]
  69. [div=height: var(--f1h); flex: var(--f1); min-width: var(--f1w); overflow:hidden; pointer-events:auto;][div=height:160px; width:100%; flex-shrink:0;][/div]
  70.  
  71. [comment]----socmed feed (not visible on mobile)----[/comment]
  72. [div=height:320px; width:100%; position:relative; padding:1px 0 0 0; box-sizing:border-box;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width: none; padding:25px; box-sizing:border-box; --ms: 25px;][div=height:100%; width:0; border-left:1px solid var(--border); position:absolute; top:0; left:50%; pointer-events:none;][/div][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  73.  
  74. [comment]----copy this whole thing to add another socmed post----[/comment]
  75. [div=height:auto; width:100%; border:1px solid var(--border); box-sizing:border-box; position:relative; z-index:2; margin-top: var(--ms);]
  76. [comment]----post image----[/comment]
  77. [div=height:185px; width:100%; padding:15px; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; border-bottom:1px solid var(--border);][div=/*fake socmed post image link here!*/ background: URL('https://i.pinimg.com/564x/19/0c/24/190c240c7a2677524f5f867a3c4d2ef6.jpg');.
  78.  
  79. /*edit the following to adjust the cropping*/ background-position:50% 30%;
  80.  
  81. height:100%; width:100%; border:1px solid var(--border); background-size:cover;][/div][/div]
  82.  
  83. [comment]----caption----[/comment]
  84. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap;][div=height:auto; width:auto; flex-shrink:0; background: var(--color-1); color: var(--color-3); font-family: var(--body); text-transform:uppercase; letter-spacing:-0.5px; font-size:10px; line-height:100%; display:flex; align-items:center; padding:0 8px; box-sizing:border-box; border-right:1px solid var(--border);][comment]
  85.  
  86. ----* * * timestamp here----
  87.  
  88. [/comment]19:33[/div]
  89. [div=height:auto; flex:1; padding:5px 10px; box-sizing:border-box; color: var(--color-2); font-size:12px; font-family: var(--body); line-height:100%; background: var(--bg-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  90.  
  91. ----* * * caption here----
  92.  
  93. [/comment]guys i think she might like me[/div]
  94. [/div]
  95. [/div]
  96. [comment]----copy me too!----[/comment]
  97.  
  98. [comment]----copy this whole thing to add another socmed post----[/comment]
  99. [div=height:auto; width:100%; border:1px solid var(--border); box-sizing:border-box; position:relative; z-index:2; margin-top: var(--ms);]
  100. [comment]----post image----[/comment]
  101. [div=height:185px; width:100%; padding:15px; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; border-bottom:1px solid var(--border);][div=/*fake socmed post image link here!*/ background: URL('https://i.pinimg.com/564x/2b/f4/08/2bf40882fa72968082243f450a4f8a62.jpg');
  102.  
  103. /*edit the following to adjust the cropping*/ background-position:50% 50%;
  104.  
  105. height:100%; width:100%; border:1px solid var(--border); background-size:cover;][/div][/div]
  106.  
  107. [comment]----caption----[/comment]
  108. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap;][div=height:auto; width:auto; flex-shrink:0; background: var(--color-1); color: var(--color-3); font-family: var(--body); text-transform:uppercase; letter-spacing:-0.5px; font-size:10px; line-height:100%; display:flex; align-items:center; padding:0 8px; box-sizing:border-box; border-right:1px solid var(--border);][comment]
  109.  
  110. ----* * * timestamp here----
  111.  
  112. [/comment]18:48[/div]
  113. [div=height:auto; flex:1; padding:5px 10px; box-sizing:border-box; color: var(--color-2); font-size:12px; font-family: var(--body); line-height:100%; background: var(--bg-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  114.  
  115. ----* * * caption here----
  116.  
  117. [/comment]do u think she likes me[/div]
  118. [/div]
  119. [/div]
  120. [comment]----copy me too!----[/comment]
  121.  
  122. [/div][/div]
  123. [comment]----socmed feed end----[/comment]
  124.  
  125. [/div]
  126. [comment]----left/top end----[/comment]
  127.  
  128. [comment]----right/bottom----[/comment]
  129. [div=height: var(--f2h); flex: var(--f2); min-width: var(--f2w); display:flex; flex-flow:row wrap; overflow:hidden; pointer-events:auto;]
  130.  
  131. [comment]----tab contents----[/comment]
  132. [div=height:480px; flex:74; display:flex; flex-flow:column nowrap; padding:15px; box-sizing:border-box;]
  133.  
  134. [comment]----requisite section----[/comment]
  135. [div=height:auto; max-height:145px; width:100%; border:1px solid var(--border); box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:row nowrap;][div=height:100%; width:10px; flex-shrink:0; border-right:1px solid var(--border);][div=height:34%; width:100%; background: var(--color-1); border-bottom:1px solid var(--border);][/div][/div][div=height:100%; flex:1; padding:18px 20px 19px 20px; box-sizing:border-box; overflow:hidden; display:flex; flex-flow:column nowrap;]
  136. [comment]----title----[/comment]
  137. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; font-size:20px; font-weight:bold; font-family: var(--header); text-transform:uppercase; letter-spacing:-0.5px; word-spacing:4px;]
  138. [div=height:auto; width:auto; color: var(--color-2); line-height:100%; margin-right:8px; flex-shrink:0;]meet[/div]
  139. [div=height:auto; width:auto; padding-right:3px; color: var(--color-1); line-height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;][comment]
  140.  
  141. ----* * * name here----
  142.  
  143. [/comment][i]chill girl[/i][/div]
  144. [/div]
  145. [comment]----title end----[/comment]
  146.  
  147. [comment]----description----[/comment]
  148. [div=height:100%; width:100%; margin-top:15px; padding:0 8px 0 0; box-sizing:border-box; overflow-y:scroll; scrollbar-width: none; color: var(--t-color); font-size:12px; font-family: var(--body); line-height:14px; text-align:justify;][comment]
  149.  
  150. ----* * * text starts here----
  151.  
  152. [/comment]a [div=display:inline; color: var(--color-1);]whoknows-how-old[/div] girl with small dreams and big crushes. goes by [div=display:inline; color: var(--color-1);]she/her[/div] pronouns, and is most known for being [div=display:inline; color: var(--color-1);]super chill[/div]. never overreacts, never freaks out, and most definitely not [div=display:inline; color: var(--color-1);]losing her mind[/div] over her not-girlfriend, haha.
  153. [/div]
  154. [comment]----description end----[/comment]
  155.  
  156. [/div][/div]
  157. [comment]----requisite section end----[/comment]
  158.  
  159. [comment]----visage section----[/comment]
  160. [div=height:80%; max-height:290px; width:100%; border:1px solid var(--border); box-sizing:border-box; margin-top: 15px; display:flex; flex-flow:column nowrap;]
  161. [comment]----section title----[/comment]
  162. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; border-bottom:1px solid var(--border); box-sizing:border-box;][div=height:100%; width:48%; background: var(--color-1); border-right:1px solid var(--border);][/div][div=height:100%; flex:1; flex-shrink:0; padding:12px 15px; box-sizing:border-box; color: var(--color-2); font-size:18px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0; font-family: var(--header); text-align:right;][comment]
  163.  
  164. ----* * * section title here----
  165.  
  166. [/comment]visage[/div]
  167. [/div]
  168.  
  169. [comment]----section contents----[/comment]
  170. [div=height:90%; width:100%; overflow:hidden; padding:18px 0; box-sizing:border-box;][div=height:100%; width:100%; overflow-y:scroll; padding:0 18px; box-sizing:border-box; scrollbar-width:none; --ms: 12px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  171.  
  172. [comment]----copy this whole thing to add another tag----[/comment]
  173. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  174. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  175.  
  176. ----* * * info title here----
  177.  
  178. [/comment]build[/div]
  179. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  180.  
  181. ----* * * info title here----
  182.  
  183. [/comment]different, maybe, except not really at all.[/div]
  184. [/div]
  185. [comment]----copy me too!----[/comment]
  186.  
  187. [comment]----copy this whole thing to add another tag----[/comment]
  188. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  189. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  190.  
  191. ----* * * info title here----
  192.  
  193. [/comment]hair[/div]
  194. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  195.  
  196. ----* * * info title here----
  197.  
  198. [/comment]something she'd do her best to get out of. wouldn't want to be a bother haha[/div]
  199. [/div]
  200. [comment]----copy me too!----[/comment]
  201.  
  202. [comment]----copy this whole thing to add another tag----[/comment]
  203. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  204. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  205.  
  206. ----* * * info title here----
  207.  
  208. [/comment]question[/div]
  209. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  210.  
  211. ----* * * info title here----
  212.  
  213. [/comment]these are for whatever other tags you want to put in. this box scrolls, by the way.[/div]
  214. [/div]
  215. [comment]----copy me too!----[/comment]
  216.  
  217. [comment]----copy this whole thing to add another tag----[/comment]
  218. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  219. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  220.  
  221. ----* * * info title here----
  222.  
  223. [/comment]question[/div]
  224. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  225.  
  226. ----* * * info title here----
  227.  
  228. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div]
  229. [/div]
  230. [comment]----copy me too!----[/comment]
  231.  
  232. [/div][/div]
  233. [/div]
  234. [comment]----visage section end----[/comment]
  235.  
  236. [/div]
  237. [comment]----tab contents end----[/comment]
  238.  
  239. [comment]----style (not visible on mobile)----[/comment]
  240. [div=height:auto; max-height:480px; min-height:40px; flex:26; min-width:120px; display:flex; flex-flow:column nowrap; border-left:1px solid var(--border);][div=height:auto; width:100%; padding:8px 10px; box-sizing:border-box; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-shrink:0; background: var(--color-1); color: var(--color-3); font-family: var(--header); text-transform:uppercase; line-height:100%; font-size:13px; text-align:center;][comment]
  241.  
  242. ----* * * style title here----
  243.  
  244. [/comment]lookbook[/div]
  245. [div=height:95%; width:100%; padding:14px 0; box-sizing:border-box; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; padding:1px 15px; box-sizing:border-box; --ms: 15px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  246.  
  247. [comment]----copy this whole thing to add another style image----[/comment]
  248. [div=height:120px; width:100%; border:1px solid var(--border); box-sizing:border-box; margin-top: var(--ms);
  249.  
  250. /*replace link with the link to your outfit image*/ background: URL('https://i.imgur.com/WICTlIu.png');
  251.  
  252. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;
  253.  
  254. background-size:cover;][/div]
  255. [comment]----copy me too!----[/comment]
  256.  
  257. [comment]----copy this whole thing to add another style image----[/comment]
  258. [div=height:120px; width:100%; border:1px solid var(--border); box-sizing:border-box; margin-top: var(--ms);
  259.  
  260. /*replace link with the link to your outfit image*/ background: URL('https://i.imgur.com/mhU5EVM.png');
  261.  
  262. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;
  263.  
  264. background-size:cover;][/div]
  265. [comment]----copy me too!----[/comment]
  266.  
  267. [comment]----copy this whole thing to add another style image----[/comment]
  268. [div=height:120px; width:100%; border:1px solid var(--border); box-sizing:border-box; margin-top: var(--ms);
  269.  
  270. /*replace link with the link to your outfit image*/ background: URL('https://i.imgur.com/WICTlIu.png');
  271.  
  272. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;
  273.  
  274. background-size:cover;][/div]
  275. [comment]----copy me too!----[/comment]
  276.  
  277. [comment]----copy this whole thing to add another style image----[/comment]
  278. [div=height:120px; width:100%; border:1px solid var(--border); box-sizing:border-box; margin-top: var(--ms);
  279.  
  280. /*replace link with the link to your outfit image*/ background: URL('https://i.imgur.com/mhU5EVM.png');
  281.  
  282. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;
  283.  
  284. background-size:cover;][/div]
  285. [comment]----copy me too!----[/comment]
  286.  
  287. [/div][/div][/div]
  288. [comment]----style end----[/comment]
  289.  
  290. [/div]
  291. [comment]----right/bottom end----[/comment]
  292. [/div]
  293. [comment]----tab container end----[/comment]
  294.  
  295. [/div][/tab]
  296. [comment]----tab 1 end----[/comment]
  297.  
  298.  
  299. [comment]----tab 2----[/comment]
  300. [tab=111][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:column nowrap;]
  301. [comment]----button select----[/comment]
  302. [div=height:39px; width:100%; display:flex; flex-flow:row nowrap; flex-shrink:0;]
  303. [comment]----placeholder button----[/comment]
  304. [div=height:100%; width:80px; flex-shrink:0][/div]
  305.  
  306. [comment]----selected button----[/comment]
  307. [div=height:100%; width:80px; border-right:1px solid var(--border); background: var(--color-1); color: var(--color-3); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  308.  
  309. ----button title here----
  310.  
  311. [/comment]psyche[/div]
  312. [comment]----button end----[/comment]
  313.  
  314. [comment]----placeholder button----[/comment]
  315. [div=height:100%; width:80px; flex-shrink:0][/div]
  316. [comment]----placeholder button----[/comment]
  317. [div=height:100%; width:80px; flex-shrink:0][/div]
  318.  
  319. [/div]
  320. [comment]----button select end----[/comment]
  321.  
  322. [comment]----tab container----[/comment]
  323. [div=height:auto; width:100%; display:flex; flex-flow:row wrap;]
  324.  
  325. [comment]----left/top----[/comment]
  326. [div=height: var(--f1h); flex: var(--f1); min-width: var(--f1w); overflow:hidden; pointer-events:auto;][div=height:160px; width:100%; flex-shrink:0;][/div]
  327.  
  328. [comment]----search history (not visible on mobile)----[/comment]
  329. [div=height:320px; width:100%; position:relative; display:flex; flex-flow:column nowrap;]
  330. [comment]----search bar----[/comment]
  331. [div=height:auto; width:100%; flex-shrink:0; border-bottom:1px solid var(--border); padding:15px 18px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; cursor: text][div=height:auto; width:auto; color: var(--color-2); opacity:0.5; font-size:11px; line-height:100%;][fa]fas fa-magnifying-glass[/fa][/div][div=height:auto; flex:1; margin-left:12px; opacity:0.5; color: var(--color-2); font-size:11px; word-spacing:4px; font-family: var(--header); text-transform:uppercase; line-height:100%;]what are you looking for?[/div][/div]
  332.  
  333. [comment]----suggested keywords----[/comment]
  334. [div=height:auto; width:auto; flex-shrink:0; padding:15px 18px; box-sizing:border-box; border-bottom:1px solid var(--color-2); display:flex; flex-flow:column nowrap;][div=height:auto; width:auto; color: var(--color-2); opacity:0.5; font-size:9px; text-transform:uppercase; font-family: var(--body); line-height:100%; margin-bottom:12px;]you might like[/div][div=height:auto; width:100%; display:grid; grid-template-columns:1fr 1fr; grid-gap:8px; margin-bottom:-10px;]
  335.  
  336. [comment]----suggestion 1----[/comment]
  337. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; align-items:center; grid-column:1; grid-row:1;][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0; margin-right:6px;][comment]
  338.  
  339. ----* * * suggestion icon here----
  340.  
  341. [/comment][fa]fal fa-heart[/fa][/div]
  342. [div=height:auto; flex:1; font-size:11px; font-family: var(--body); line-height:100%; margin-top:1px; color: var(--t-color);][comment]
  343.  
  344. ----* * * suggestion title here----
  345.  
  346. [/comment]Romance[/div]
  347. [/div]
  348. [comment]----suggestion 1 end----[/comment]
  349.  
  350. [comment]----suggestion 2----[/comment]
  351. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; align-items:center; grid-column:2; grid-row:1;][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0; margin-right:6px;][comment]
  352.  
  353. ----* * * suggestion icon here----
  354.  
  355. [/comment][fa]fal fa-boot[/fa][/div]
  356. [div=height:auto; flex:1; font-size:11px; font-family: var(--body); line-height:100%; margin-top:1px; color: var(--t-color);][comment]
  357.  
  358. ----* * * suggestion title here----
  359.  
  360. [/comment]Comfortable Shoes[/div]
  361. [/div]
  362. [comment]----suggestion 2 end----[/comment]
  363.  
  364. [comment]----suggestion 3----[/comment]
  365. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; align-items:center; grid-column:1; grid-row:2;][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0; margin-right:6px;][comment]
  366.  
  367. ----* * * suggestion icon here----
  368.  
  369. [/comment][fa]fal fa-lips[/fa][/div]
  370. [div=height:auto; flex:1; font-size:11px; font-family: var(--body); line-height:100%; margin-top:1px; color: var(--t-color);][comment]
  371.  
  372. ----* * * suggestion title here----
  373.  
  374. [/comment]Lipstick[/div]
  375. [/div]
  376. [comment]----suggestion 3 end----[/comment]
  377. [/div][/div]
  378.  
  379. [comment]----past searches----[/comment]
  380. [div=height:80%; width:100%; padding:15px 24px 15px 18px; box-sizing:border-box; display:flex; flex-flow:column nowrap; --ms: 12px;][div=height:auto; width:auto; color: var(--color-2); opacity:0.5; font-size:9px; text-transform:uppercase; font-family: var(--body); line-height:100%; margin-bottom:16px; flex-shrink:0;]past searches[/div][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  381.  
  382. [comment]----past search----[/comment]
  383. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top: var(--ms);][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0;][fa]far fa-arrow-up-right-from-square[/fa][/div][div=height:auto; flex:1; margin-right:5px; color: var(--color-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:100%; font-family: var(--body);][comment]
  384.  
  385. ----* * * search contents here----
  386.  
  387. [/comment]bouquet meanings[/div]
  388. [/div]
  389. [comment]----past search end----[/comment]
  390.  
  391. [comment]----past search----[/comment]
  392. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top: var(--ms);][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0;][fa]far fa-arrow-up-right-from-square[/fa][/div][div=height:auto; flex:1; margin-right:5px; color: var(--color-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:100%; font-family: var(--body);][comment]
  393.  
  394. ----* * * search contents here----
  395.  
  396. [/comment]best way to confess[/div]
  397. [/div]
  398. [comment]----past search end----[/comment]
  399.  
  400. [comment]----past search----[/comment]
  401. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top: var(--ms);][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0;][fa]far fa-arrow-up-right-from-square[/fa][/div][div=height:auto; flex:1; margin-right:5px; color: var(--color-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:100%; font-family: var(--body);][comment]
  402.  
  403. ----* * * search contents here----
  404.  
  405. [/comment]how to know if someone likes you[/div]
  406. [/div]
  407. [comment]----past search end----[/comment]
  408.  
  409. [comment]----past search----[/comment]
  410. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top: var(--ms);][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0;][fa]far fa-arrow-up-right-from-square[/fa][/div][div=height:auto; flex:1; margin-right:5px; color: var(--color-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:100%; font-family: var(--body);][comment]
  411.  
  412. ----* * * search contents here----
  413.  
  414. [/comment]mac n cheese recipe[/div]
  415. [/div]
  416. [comment]----past search end----[/comment]
  417.  
  418. [comment]----past search----[/comment]
  419. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; align-items:center; margin-top: var(--ms);][div=height:auto; width:auto; color: var(--color-1); font-size:11px; line-height:100%; flex-shrink:0;][fa]far fa-arrow-up-right-from-square[/fa][/div][div=height:auto; flex:1; margin-right:5px; color: var(--color-2); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:100%; font-family: var(--body);][comment]
  420.  
  421. ----* * * search contents here----
  422.  
  423. [/comment]casual chappell roan tiktok[/div]
  424. [/div]
  425. [comment]----past search end----[/comment]
  426.  
  427. [/div]
  428. [/div]
  429. [comment]----search history end----[/comment]
  430.  
  431. [/div]
  432. [comment]----left/top end----[/comment]
  433.  
  434. [comment]----right/bottom----[/comment]
  435. [div=height: var(--f2h); flex: var(--f2); min-width: var(--f2w); display:flex; flex-flow:column nowrap; pointer-events:auto;]
  436.  
  437. [comment]----psyche content----[/comment]
  438. [div=height:90%; max-height: 350px; width:100%; padding:15px; box-sizing:border-box;][div=height:100%; width:100%; border:1px solid var(--border); padding:18px 0; box-sizing:border-box; position:relative;][div=height:100%; width:100%; overflow-y:scroll; padding:0 20px 0 18px; box-sizing:border-box; scrollbar-width:none; --ms: 7px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  439.  
  440.  
  441. [comment]----copy this whole thing to add another section----[/comment]
  442. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  443. [div=height:auto; width:100%; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0; flex-shrink:0; padding-bottom:4px; box-sizing:border-box;]
  444. [div=height:8px; width:8px; flex-shrink:0; background: var(--color-1); border:1px solid var(--border); box-sizing:border-box; margin-right:12px;][/div]
  445. [div=height:auto; flex:1; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  446.  
  447. ----* * * section title here----
  448.  
  449. [/comment]persona[/div]
  450. [/div]
  451. [div=height:100%; width:calc(100% - 3.4px); margin-left:3.4px; padding:4px 0 7px 15px; box-sizing:border-box; border-left:1px solid var(--border); color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  452.  
  453. ----* * * text starts here----
  454.  
  455. [/comment]lorem ipsum dolor sit amet, consectetur adipiscing elit. quisque turpis purus, fermentum sed efficitur nec, tristique vulputate erat. maecenas nulla sapien, varius ac auctor in, egestas at sapien. mauris cursus viverra odio, at finibus est posuere eu. aenean varius nunc et tristique venenatis. nullam dapibus pellentesque nibh ut venenatis. sed ac est iaculis, vehicula nisl nec, ultrices nisl. aliquam non laoreet quam.
  456.  
  457. suspendisse nec varius dui. nullam fermentum hendrerit felis, non finibus lectus scelerisque vitae. cras non iaculis orci. cras non nisl facilisis, cursus mauris vel, tristique augue. pellentesque ac massa at augue porta ullamcorper vitae efficitur nulla. cras consequat urna lacus, ac porta nisl tempor nec. aliquam et sem arcu. mauris sit amet erat ut tortor feugiat porttitor. vivamus sit amet quam eu libero tincidunt accumsan.
  458. [/div]
  459. [/div]
  460. [comment]----copy me too!----[/comment]
  461.  
  462. [comment]----copy this whole thing to add another section----[/comment]
  463. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  464. [div=height:auto; width:100%; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0; flex-shrink:0; padding-bottom:4px; box-sizing:border-box;]
  465. [div=height:8px; width:8px; flex-shrink:0; background: var(--color-1); border:1px solid var(--border); box-sizing:border-box; margin-right:12px;][/div]
  466. [div=height:auto; flex:1; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  467.  
  468. ----* * * section title here----
  469.  
  470. [/comment]likes[/div]
  471. [/div]
  472. [div=height:100%; width:calc(100% - 3.4px); margin-left:3.4px; padding:4px 0 7px 15px; box-sizing:border-box; border-left:1px solid var(--border); color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  473.  
  474. ----* * * text starts here----
  475.  
  476. [/comment]lorem, ipsum dolor, sit, amet, consectetur adipiscing elit, quisque, turpis purus.
  477. [/div]
  478. [/div]
  479. [comment]----copy me too!----[/comment]
  480.  
  481. [comment]----copy this whole thing to add another section----[/comment]
  482. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  483. [div=height:auto; width:100%; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0; flex-shrink:0; padding-bottom:4px; box-sizing:border-box;]
  484. [div=height:8px; width:8px; flex-shrink:0; background: var(--color-1); border:1px solid var(--border); box-sizing:border-box; margin-right:12px;][/div]
  485. [div=height:auto; flex:1; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  486.  
  487. ----* * * section title here----
  488.  
  489. [/comment]dislikes[/div]
  490. [/div]
  491. [div=height:100%; width:calc(100% - 3.4px); margin-left:3.4px; padding:4px 0 7px 15px; box-sizing:border-box; border-left:1px solid var(--border); color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  492.  
  493. ----* * * text starts here----
  494.  
  495. [/comment]lorem, ipsum dolor, sit, amet, consectetur adipiscing elit, quisque, turpis purus.
  496. [/div]
  497. [/div]
  498. [comment]----copy me too!----[/comment]
  499.  
  500. [comment]----copy this whole thing to add another section----[/comment]
  501. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  502. [div=height:auto; width:100%; background: var(--bg-color); display:flex; flex-flow:row nowrap; align-items:center; position:sticky; top:0; flex-shrink:0; padding-bottom:4px; box-sizing:border-box;]
  503. [div=height:8px; width:8px; flex-shrink:0; background: var(--color-1); border:1px solid var(--border); box-sizing:border-box; margin-right:12px;][/div]
  504. [div=height:auto; flex:1; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  505.  
  506. ----* * * section title here----
  507.  
  508. [/comment]skills[/div]
  509. [/div]
  510. [div=height:100%; width:calc(100% - 3.4px); margin-left:3.4px; padding:4px 0 7px 15px; box-sizing:border-box; border-left:1px solid var(--border); color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  511.  
  512. ----* * * text starts here----
  513.  
  514. [/comment]lorem, ipsum dolor, sit, amet, consectetur adipiscing elit
  515. [/div]
  516. [/div]
  517. [comment]----copy me too!----[/comment]
  518.  
  519. [/div][/div][/div]
  520. [comment]----psyche content end----[/comment]
  521.  
  522. [comment]----p footer----[/comment]
  523. [div=height:130px; width:100%; flex-shrink:0; border-top:1px solid var(--border); box-sizing:border-box; display:flex; flex-flow:row nowrap; position:relative; top:1px; left:1px;]
  524. [comment]----p image----[/comment]
  525. [div=height:100%; flex:1; position:relative; background: var(--img-2); background-size:cover; border-right:clamp(0px, -50px + 5vw, 1px) solid var(--border);
  526.  
  527. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  528.  
  529. ][div=height:100%; width:100%; background: var(--color-1); mix-blend-mode:hard-light; opacity:0.2;][/div][div=height:auto; width:-moz-fit-content; width:fit-content; padding:8px 12px; box-sizing:border-box; background: var(--color-1); color: var(--color-2); font-size:18px; font-family: var(--header); font-weight:bold; line-height:100%; transform:rotate(4deg); position:absolute; top:45%; right:-30px; text-transform:uppercase; border:1px solid var(--color-2);][comment]
  530.  
  531. ----* * * sticker label here----
  532.  
  533. [/comment]#sochill[/div][/div]
  534. [div=height:100%; width:clamp(0px, -200px + 20vw, 80px); flex-shrink:0;][/div]
  535. [/div]
  536. [comment]----p footer end----[/comment]
  537.  
  538. [/div]
  539. [comment]----right/bottom end----[/comment]
  540. [/div]
  541. [comment]----tab container end----[/comment]
  542.  
  543. [/div][/tab]
  544. [comment]----tab 2 end----[/comment]
  545.  
  546.  
  547. [comment]----tab 3----[/comment]
  548. [tab=111][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:column nowrap;]
  549. [comment]----button select----[/comment]
  550. [div=height:39px; width:100%; display:flex; flex-flow:row nowrap; flex-shrink:0;]
  551. [comment]----placeholder button----[/comment]
  552. [div=height:100%; width:80px; flex-shrink:0][/div]
  553. [comment]----placeholder button----[/comment]
  554. [div=height:100%; width:80px; flex-shrink:0][/div]
  555.  
  556. [comment]----selected button----[/comment]
  557. [div=height:100%; width:80px; border-right:1px solid var(--border); background: var(--color-1); color: var(--color-3); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  558.  
  559. ----button title here----
  560.  
  561. [/comment]history[/div]
  562. [comment]----button end----[/comment]
  563.  
  564. [comment]----placeholder button----[/comment]
  565. [div=height:100%; width:80px; flex-shrink:0][/div]
  566.  
  567. [/div]
  568. [comment]----button select end----[/comment]
  569.  
  570. [comment]----tab container----[/comment]
  571. [div=height:auto; width:100%; display:flex; flex-flow:row wrap;]
  572.  
  573. [comment]----left/top----[/comment]
  574. [div=height: var(--f1h); flex: var(--f1); min-width: var(--f1w); overflow:hidden; pointer-events:auto;][div=height:160px; width:100%; flex-shrink:0;][/div]
  575.  
  576. [comment]----chat convo (not visible on mobile)----[/comment]
  577. [div=height:320px; width:100%; position:relative; display:flex; flex-flow:column nowrap;]
  578. [comment]----contact header----[/comment]
  579. [div=height:auto; width:100%; flex-shrink:0; border-bottom:1px solid var(--border); padding:12px 15px; box-sizing:border-box; display:flex; flex-flow:row-reverse nowrap; align-items:center;][div=width:auto; height:auto; display:flex; opacity:0.6; color: var(--color-2); font-size:12px; line-height:13px;][div=margin-left:16px;][fa]far fa-magnifying-glass[/fa][/div][div=margin:0.5px 0 0 12px; font-size:12.5px;][fa]fas fa-phone[/fa][/div][div=margin-left:12px; font-size:14px;][fa]far fa-ellipsis-vertical[/fa][/div][/div][div=height:auto; flex:1; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-weight:bold; font-size:13px; text-transform:uppercase; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-spacing:6px;][comment]
  580.  
  581. ----* * * contact name here----
  582.  
  583. [/comment]your sister[/div]
  584. [/div]
  585. [comment]----contact header end----[/comment]
  586.  
  587. [comment]----chatbox----[/comment]
  588. [div=height:90%; width:100%; overflow-y:scroll; scrollbar-width:none; padding:10px 12px; box-sizing:border-box; --mm: 4px; --ms: 10px;][div=height:0; width:100%; margin-bottom: calc(var(--mm) * -1);][/div]
  589.  
  590. [comment]----copy this whole thing to add another received message----[/comment]
  591. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-2); border-radius:10px 10px 10px 0; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px;
  592.  
  593. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--mm);][comment]
  594.  
  595. ----* * * text contents here----
  596.  
  597. [/comment]i know i sound so crazy rn.[/div]
  598. [comment]----copy me too!----[/comment]
  599.  
  600. [comment]----copy this whole thing to add another received message----[/comment]
  601. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-2); border-radius:10px 10px 10px 0; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px;
  602.  
  603. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--mm);][comment]
  604.  
  605. ----* * * text contents here----
  606.  
  607. [/comment]BUT WHAT ELSE CAN I THINK[/div]
  608. [comment]----copy me too!----[/comment]
  609.  
  610. [comment]----copy this whole thing to add another received message----[/comment]
  611. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-2); border-radius:10px 10px 10px 0; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px;
  612.  
  613. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--mm);][comment]
  614.  
  615. ----* * * text contents here----
  616.  
  617. [/comment]like, idk. i just don't know what to do.[/div]
  618. [comment]----copy me too!----[/comment]
  619.  
  620. [comment]----copy this whole thing to add another sent message----[/comment]
  621. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-1); border-radius:10px 10px 0 10px; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px; margin-left:auto;
  622.  
  623. /*edit this to be ms when it's the first new message from the sender*/ margin-top: var(--ms);][comment]
  624.  
  625. ----* * * text contents here----
  626.  
  627. [/comment]no babe u are not crazy[/div]
  628. [comment]----copy me too!----[/comment]
  629.  
  630. [comment]----copy this whole thing to add another sent message----[/comment]
  631. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-1); border-radius:10px 10px 0 10px; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px; margin-left:auto;
  632.  
  633. /*edit this to be ms when it's the first new message from the sender*/ margin-top: var(--mm);][comment]
  634.  
  635. ----* * * text contents here----
  636.  
  637. [/comment]i get where ur coming from[/div]
  638. [comment]----copy me too!----[/comment]
  639.  
  640. [comment]----copy this whole thing to add another received message----[/comment]
  641. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-2); border-radius:10px 10px 10px 0; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px;
  642.  
  643. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--ms);][comment]
  644.  
  645. ----* * * text contents here----
  646.  
  647. [/comment]THANK YOU[/div]
  648. [comment]----copy me too!----[/comment]
  649.  
  650. [comment]----copy this whole thing to add another sent message----[/comment]
  651. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-1); border-radius:10px 10px 0 10px; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px; margin-left:auto;
  652.  
  653. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--ms);][comment]
  654.  
  655. ----* * * text contents here----
  656.  
  657. [/comment]have you tried talking to him about it[/div]
  658. [comment]----copy me too!----[/comment]
  659.  
  660. [comment]----copy this whole thing to add another sent message----[/comment]
  661. [div=height:auto; width:fit-content; width:-moz-fit-content; max-width:68%; background: var(--color-1); border-radius:10px 10px 0 10px; padding:6px 12px; box-sizing:border-box; color: var(--color-3); font-size:12px; font-family: var(--body); line-height:14px; margin-left:auto;
  662.  
  663. /*edit this to be ms when it's the first new message from the recipient*/ margin-top: var(--mm);][comment]
  664.  
  665. ----* * * text contents here----
  666.  
  667. [/comment]and does ur sister know?[/div]
  668. [comment]----copy me too!----[/comment]
  669.  
  670. [/div]
  671. [comment]----chatbox end----[/comment]
  672.  
  673. [comment]----message bar----[/comment]
  674. [div=height:auto; width:100%; flex-shrink:0; border-top:1px solid var(--border); padding:11px 14px 10px 14px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; cursor: text][div=height:auto; width:auto; color: var(--color-1); font-size:12.5px; line-height:100%;][fa]fas fa-circle-plus[/fa][/div][div=height:auto; flex:1; margin-left:16px; opacity:0.5; color: var(--color-2); font-size:11px; word-spacing:4px; font-family: var(--header); text-transform:uppercase; line-height:100%;]say something...[/div][/div]
  675. [/div]
  676. [comment]----chat convo end----[/comment]
  677.  
  678. [/div]
  679. [comment]----left/top end----[/comment]
  680.  
  681. [comment]----right/bottom----[/comment]
  682. [div=height: var(--f2h); flex: var(--f2); min-width: var(--f2w); padding:1px 0 22px 2px; box-sizing:border-box; overflow:hidden; pointer-events:auto; position:relative;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; --ms: 14px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div][div=height:100%; width:10px; border-left:1px solid var(--border); position:absolute; top:0; right:0; z-index: 5; pointer-events:none;][/div]
  683.  
  684. [comment]----copy this whole thing to add another history section----[/comment]
  685. [div=height:auto; width:100%; margin-top: var(--ms); display:flex; flex-flow:column nowrap;]
  686. [comment]----header----[/comment]
  687. [div=height:auto; width:100%; position:sticky; top:0; background: var(--bg-color); display:flex; flex-flow:row-reverse nowrap;][div=height:auto; min-height:100%; width:10px; flex-shrink:0; background: var(--color-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:-1px;][/div][div=height:auto; flex:1; padding:18px 18px 12px 18px; box-sizing:border-box; color: var(--color-2); font-family: var(--header); text-transform:uppercase; word-spacing:8px; font-size:18px; text-transform:uppercase; font-weight:bold; line-height:100%; text-align:right;][comment]
  688.  
  689. ----* * * history section title here----
  690.  
  691. [/comment]that time we fxxked in the bathroom[/div]
  692. [/div]
  693. [comment]----header end----[/comment]
  694.  
  695. [comment]---section contents----[/comment]
  696. [div=height:auto; width:100%; padding:5px 27px 5px 23px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  697.  
  698. ----* * * text starts here----
  699.  
  700. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio neque, tempor non malesuada non, mollis sed libero. Quisque fringilla mauris et velit iaculis commodo. Ut ultrices venenatis maximus. Vivamus eu sodales turpis. Duis mattis maximus venenatis. Ut venenatis iaculis ante sit amet accumsan. Morbi fringilla, ex sed convallis tempor, elit mauris iaculis sem, vel venenatis urna odio quis leo. In hac habitasse platea dictumst. Integer tempus fringilla erat. Pellentesque sit amet vestibulum mi. Nullam mollis pulvinar felis ut vehicula. Suspendisse et odio in magna cursus consequat. Praesent vitae congue eros.
  701.  
  702. Nam consequat, ex non dignissim malesuada, risus ex tincidunt nisi, eu varius nisl nunc ut lectus. Nulla ipsum mauris, ultrices quis porta lobortis, congue at augue. Nunc id libero nulla. Vivamus at ullamcorper mauris, sed hendrerit risus. Praesent bibendum iaculis eros ut gravida. Maecenas lacus libero, pellentesque ac elit a, placerat scelerisque turpis. Sed vel vehicula mauris. Aliquam vitae convallis neque. Maecenas lorem augue, malesuada a aliquam a.
  703.  
  704. Mauris maximus bibendum tellus, ac malesuada ligula. Praesent id vulputate libero. Pellentesque vehicula eros id velit tincidunt, id tempor mauris vehicula. Quisque dapibus nisi sed nisl gravida, eu ornare diam commodo. Etiam condimentum eros vel lacinia pretium. In vel urna et sem ornare lacinia. Maecenas pulvinar vehicula congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  705.  
  706. Cras massa urna, egestas rhoncus libero eu, commodo viverra ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut nec ligula at risus consectetur ullamcorper. Integer eget velit ac magna tristique tempus at nec felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sed erat auctor, finibus libero porttitor, cursus leo. Nulla vel turpis in est feugiat condimentum. Etiam gravida nulla at felis sollicitudin fringilla. Sed sit amet lacinia nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dolor in purus molestie egestas a et ligula. Duis pellentesque ac mauris sit amet iaculis. Duis pretium diam in egestas laoreet.
  707. [/div]
  708. [/div]
  709. [comment]----copy me too!----[/comment]
  710.  
  711. [/div][/div]
  712. [comment]----right/bottom end----[/comment]
  713. [/div]
  714. [comment]----tab container end----[/comment]
  715.  
  716. [/div][/tab]
  717. [comment]----tab 3 end----[/comment]
  718.  
  719.  
  720. [comment]----tab 4----[/comment]
  721. [tab=111][div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:4; pointer-events:none; display:flex; flex-flow:column nowrap;]
  722. [comment]----button select----[/comment]
  723. [div=height:39px; width:100%; display:flex; flex-flow:row nowrap; flex-shrink:0;]
  724. [comment]----placeholder button----[/comment]
  725. [div=height:100%; width:80px; flex-shrink:0][/div]
  726. [comment]----placeholder button----[/comment]
  727. [div=height:100%; width:80px; flex-shrink:0][/div]
  728. [comment]----placeholder button----[/comment]
  729. [div=height:100%; width:80px; flex-shrink:0][/div]
  730.  
  731. [comment]----selected button----[/comment]
  732. [div=height:100%; width:80px; border-right:1px solid var(--border); background: var(--color-1); color: var(--color-3); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  733.  
  734. ----button title here----
  735.  
  736. [/comment]extra[/div]
  737. [comment]----button end----[/comment]
  738.  
  739. [/div]
  740. [comment]----button select end----[/comment]
  741.  
  742. [comment]----tab container----[/comment]
  743. [div=height:auto; width:100%; display:flex; flex-flow:row wrap;]
  744.  
  745. [comment]----left/top----[/comment]
  746. [div=height: var(--f1h); flex: var(--f1); min-width: var(--f1w); overflow:hidden; pointer-events:auto;][div=height:160px; width:100%; flex-shrink:0;][/div]
  747.  
  748. [comment]----playlist (not visible on mobile)----[/comment]
  749. [div=height:320px; width:100%; position:relative; display:flex; flex-flow:column nowrap; padding:10px; box-sizing:border-box; --ph: 52px; --ms:10px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  750.  
  751. [comment]----copy this whole thing to add another playlist track----[/comment]
  752. [div=height: var(--ph); width:100%; flex-shrink:0; margin-top: var(--ms); border:1px solid var(--border); padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][div=flex-shrink:0; color: var(--color-2); font-size:21px;][fa]fas fa-circle-dot[/fa][/div][div=height:auto; flex:1; margin:0 0 0 18px; color: var(--color-2); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-weight:bold; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  753.  
  754. ----* * * song name here----
  755.  
  756. [/comment]one of your girls[/div]
  757. [/div]
  758. [comment]----copy me too!----[/comment]
  759.  
  760. [comment]----music player----[/comment]
  761. [div=height: var(--ph); width:100%; flex-shrink:0; margin-top: var(--ms); border:1px solid var(--border); padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; background: var(--color-1);]
  762. [comment]----play button----[/comment]
  763. [div=flex-shrink:0; position:relative; height:auto; width:auto;][div=height:auto; width:auto; position:relative; z-index:2; color: var(--color-3); font-size:21px; pointer-events:none;][fa]fas fa-circle-play[/fa][/div]
  764.  
  765. [comment]----actual media player----[/comment]
  766. [div=height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][div=height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  767.  
  768. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  769. [div=height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  770. [media=soundcloud]https://soundcloud.com/chappellroan/casual[/media]
  771. [/div]
  772.  
  773. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  774. [div=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  775. [media=googledrive]google file code here[/MEDIA]
  776. [/div]
  777.  
  778. [/div][/div]
  779. [comment]----actual media player end----[/comment]
  780. [/div]
  781. [comment]----play button end----[/comment]
  782.  
  783. [comment]----song info----[/comment]
  784. [div=height:auto; flex:1; margin:0 0 0 18px; display:flex; flex-flow:column nowrap;]
  785. [div=height:auto; color: var(--color-3); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-weight:bold; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  786.  
  787. ----* * * song name here----
  788.  
  789. [/comment]casual[/div]
  790. [div=height:auto; color: var(--color-3); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-size:9px; margin-top:2.5px; opacity:0.7; letter-spacing:0.5px; margin-left:0.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  791.  
  792. ----* * * artist name here----
  793.  
  794. [/comment]chappell roan[/div]
  795. [/div]
  796. [comment]----song info end----[/comment]
  797. [/div]
  798. [comment]----music player end----[/comment]
  799.  
  800. [comment]----copy this whole thing to add another playlist track----[/comment]
  801. [div=height: var(--ph); width:100%; flex-shrink:0; margin-top: var(--ms); border:1px solid var(--border); padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][div=flex-shrink:0; color: var(--color-2); font-size:21px;][fa]fas fa-circle-dot[/fa][/div][div=height:auto; flex:1; margin:0 0 0 18px; color: var(--color-2); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-weight:bold; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  802.  
  803. ----* * * song name here----
  804.  
  805. [/comment]hard feelings/loveless[/div]
  806. [/div]
  807. [comment]----copy me too!----[/comment]
  808.  
  809. [comment]----copy this whole thing to add another playlist track----[/comment]
  810. [div=height: var(--ph); width:100%; flex-shrink:0; margin-top: var(--ms); border:1px solid var(--border); padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][div=flex-shrink:0; color: var(--color-2); font-size:21px;][fa]fas fa-circle-dot[/fa][/div][div=height:auto; flex:1; margin:0 0 0 18px; color: var(--color-2); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-weight:bold; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  811.  
  812. ----* * * song name here----
  813.  
  814. [/comment]pretty girls[/div]
  815. [/div]
  816. [comment]----copy me too!----[/comment]
  817.  
  818. [comment]----copy this whole thing to add another playlist track----[/comment]
  819. [div=height: var(--ph); width:100%; flex-shrink:0; margin-top: var(--ms); border:1px solid var(--border); padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center;][div=flex-shrink:0; color: var(--color-2); font-size:21px;][fa]fas fa-circle-dot[/fa][/div][div=height:auto; flex:1; margin:0 0 0 18px; color: var(--color-2); font-family: var(--header); text-transform:uppercase; word-spacing:4px; line-height:100%; font-weight:bold; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  820.  
  821. ----* * * song name here----
  822.  
  823. [/comment]i wanna be your girlfriend[/div]
  824. [/div]
  825. [comment]----copy me too!----[/comment]
  826.  
  827. [/div]
  828. [comment]----playlist end----[/comment]
  829.  
  830. [/div]
  831. [comment]----left/top end----[/comment]
  832.  
  833. [comment]----right/bottom----[/comment]
  834. [div=height: var(--f2h); flex: var(--f2); min-width: var(--f2w); pointer-events:auto;][div=height:100%; width:100%; padding:15px; overflow:hidden; box-sizing:border-box;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; --ms: 15px;]
  835.  
  836. [comment]----gallery----[/comment]
  837. [div=height:120px; width:100%; border:1px solid var(--border); padding:10px; box-sizing:border-box; position:relative;][div=height:auto; width:auto; padding:3px 6px; box-sizing:border-box; position:absolute; bottom:-15.8px; right:-1px; background: var(--color-1); border:1px solid var(--border); color: var(--color-3); font-size:8px; text-transform:uppercase; font-family: var(--header); line-height:100%; word-spacing:4px;]scroll [fa]fas fa-arrow-right[/fa][/div][div=height:100%; width:100%; overflow-x:scroll; overflow-y:hidden; scrollbar-width:none; display:flex; flex-flow:row nowrap; --mg: 10px; --w: 98px;][div=height:100%; width:0; margin-right: calc(var(--mg) * -1);][/div]
  838.  
  839. [comment]----copy this whole thing to add another gallery image----[/comment]
  840. [div=height:100%; width:auto; display:flex; flex-flow:row nowrap; margin-left: var(--mg);][div=height:100%; width: 80px; border:1px solid var(--border); background: var(--color-1); margin-right:10px; box-sizing:border-box; flex-shrink:0;][/div][div=height:100%; width: var(--w);
  841.  
  842. /*put gallery image link here!*/ background: URL('https://i.pinimg.com/564x/94/71/46/9471462cefd2602ca481715f0a77d7be.jpg');
  843.  
  844. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  845.  
  846. background-size:cover; border:1px solid var(--border); flex-shrink:0;][/div][/div]
  847. [comment]----copy me too!----[/comment]
  848.  
  849. [comment]----copy this whole thing to add another gallery image----[/comment]
  850. [div=height:100%; width:auto; display:flex; flex-flow:row nowrap; margin-left: var(--mg);][div=height:100%; width: 80px; border:1px solid var(--border); background: var(--color-1); margin-right:10px; box-sizing:border-box; flex-shrink:0;][/div][div=height:100%; width: var(--w);
  851.  
  852. /*put gallery image link here!*/ background: URL('https://i.pinimg.com/564x/94/71/46/9471462cefd2602ca481715f0a77d7be.jpg');
  853.  
  854. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  855.  
  856. background-size:cover; border:1px solid var(--border); flex-shrink:0;][/div][/div]
  857. [comment]----copy me too!----[/comment]
  858.  
  859. [comment]----copy this whole thing to add another gallery image----[/comment]
  860. [div=height:100%; width:auto; display:flex; flex-flow:row nowrap; margin-left: var(--mg);][div=height:100%; width: 80px; border:1px solid var(--border); background: var(--color-1); margin-right:10px; box-sizing:border-box; flex-shrink:0;][/div][div=height:100%; width: var(--w);
  861.  
  862. /*put gallery image link here!*/ background: URL('https://i.pinimg.com/564x/94/71/46/9471462cefd2602ca481715f0a77d7be.jpg');
  863.  
  864. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  865.  
  866. background-size:cover; border:1px solid var(--border); flex-shrink:0;][/div][/div]
  867. [comment]----copy me too!----[/comment]
  868.  
  869. [div=height:100%; width: 80px; border:1px solid var(--border); background: var(--color-1); margin-left:10px; box-sizing:border-box; flex-shrink:0;][/div][/div][/div]
  870. [comment]----gallery end----[/comment]
  871.  
  872. [comment]----misc row----[/comment]
  873. [div=height:235px; width:100%; padding:0 0 1px 0; box-sizing:border-box; display:flex; flex-flow:row wrap; align-contents:flex-start; overflow:hidden;]
  874.  
  875. [comment]----misc container----[/comment]
  876. [div=height:220px; flex:80; min-width:220px; margin-top: var(--ms); border:1px solid var(--border); box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  877. [comment]----section title----[/comment]
  878. [div=height:auto; width:100%; display:flex; flex-flow:row-reverse nowrap; border-bottom:1px solid var(--border); box-sizing:border-box;][div=height:100%; width:28%; background: var(--color-1); border-left:1px solid var(--border);][/div][div=height:100%; flex:1; flex-shrink:0; padding:10px 13px; box-sizing:border-box; color: var(--color-2); font-size:16px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0; font-family: var(--header);][comment]
  879.  
  880. ----* * * section title here----
  881.  
  882. [/comment]miscellaneous[/div]
  883. [/div]
  884.  
  885. [comment]----section contents----[/comment]
  886. [div=height:90%; width:100%; overflow:hidden; padding:18px 0; box-sizing:border-box;][div=height:100%; width:100%; overflow-y:scroll; padding:0 18px; box-sizing:border-box; scrollbar-width:none; --ms: 12px;][div=height:0; width:100%; margin-bottom:calc(var(--ms) * -1);][/div]
  887.  
  888. [comment]----copy this whole thing to add another tag----[/comment]
  889. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  890. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  891.  
  892. ----* * * info title here----
  893.  
  894. [/comment]question[/div]
  895. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  896.  
  897. ----* * * info title here----
  898.  
  899. [/comment]these are for whatever other tags you want to put in. this box scrolls, by the way.[/div]
  900. [/div]
  901. [comment]----copy me too!----[/comment]
  902.  
  903. [comment]----copy this whole thing to add another tag----[/comment]
  904. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top:var(--ms);]
  905. [div=height:auto; width:auto; font-family: var(--header); word-spacing:4px; color: var(--color-1); font-size:13px; text-transform:uppercase; font-weight:bold; line-height:100%; flex-shrink:0;][comment]
  906.  
  907. ----* * * info title here----
  908.  
  909. [/comment]question[/div]
  910. [div=height:auto; width:100%; margin:6px 0 0 0; color: var(--t-color); font-family: var(--body); font-size:12px; line-height:14px; text-align:justify;][comment]
  911.  
  912. ----* * * info title here----
  913.  
  914. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut fringilla nisi, consequat dapibus felis. Aliquam aliquet purus ut orci fermentum, sit amet finibus ligula suscipit. Donec bibendum nulla ut leo venenatis sagittis. Donec augue mi, rhoncus non mauris quis, pharetra vestibulum mi. Maecenas imperdiet neque lorem, vel commodo sem auctor a. Nulla facilisi. Aliquam sit amet felis convallis, bibendum lacus egestas, finibus nisi.[/div]
  915. [/div]
  916. [comment]----copy me too!----[/comment]
  917.  
  918. [/div][/div]
  919. [comment]----section contents end----[/comment]
  920. [/div]
  921. [comment]----misc container end----[/comment]
  922.  
  923. [comment]----decoration----[/comment]
  924. [div=height:220px; flex:20; min-width:100px; margin-top: var(--ms); margin-left: var(--ms); box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:flex-end;]
  925. [div=height:40px; width:40px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--border); font-size:15px; margin-bottom:10px;][comment]
  926.  
  927. ----* * * fontawesome icon here----
  928.  
  929. [/comment][fa]fal fa-heart[/fa][/div]
  930. [div=height:40px; width:40px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--border); font-size:15px; margin-bottom:10px;][comment]
  931.  
  932. ----* * * fontawesome icon here----
  933.  
  934. [/comment][fa]fal fa-heart[/fa][/div]
  935.  
  936. [comment]----scroll instructions----[/comment]
  937. [div=height:40px; width:40px; border:1px solid var(--color-1); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--color-1); font-size:15px;][fa]far fa-arrow-down[/fa][/div]
  938. [/div]
  939. [comment]----decoration end----[/comment]
  940.  
  941. [/div]
  942. [comment]----misc row end----[/comment]
  943.  
  944. [comment]----relationships----[/comment]
  945. [div=height:auto; width:100%; display:flex; flex-flow: column nowrap; position:relative; margin-top: var(--ms);]
  946. [comment]----section title----[/comment]
  947. [div=height:auto; width:100%; border:1px solid var(--border); border-bottom:0; box-sizing:border-box;][div=height:100%; width:fit-content; width:-moz-fit-content; padding:10px 22px; border-left:1px solid var(--border); box-sizing:border-box; color: var(--color-2); font-size:15px; font-family: var(--header); line-height:100%; text-transform:uppercase; font-weight:bold; margin-left:auto;][comment]
  948.  
  949. ----* * * section title here----
  950.  
  951. [/comment]relationships[/div][/div]
  952.  
  953. [comment]----relationships contents----[/comment]
  954. [div=height:auto; width:100%; font-size:0; visibility:hidden;][div=height:0; width:100%; margin-bottom:-4px;][/div][accordion=100%]
  955.  
  956. [comment]----copy this whole thing to add another relationship----[/comment]
  957. {slide=[div=margin:-3px -7px -10px -6.5px; visibility:visible; height:auto; width:auto; padding:10px 15px 10px 30px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; border:1px solid var(--border); position:relative;][div=height:100%; width:10px; border-right:1px solid var(--border); position:absolute; top:0; left:0; background: var(--color-1);][/div][div=height:auto; width:auto; border:1px solid var(--color-1); border-top:0; border-right:0; position:absolute; top:0; right:0; font-size:8px; font-family: var(--header); line-height:100%; padding:2px 4px; box-sizing:border-box; text-transform:uppercase; letter-spacing:0.5px; opacity:0.7; color: var(--color-1);]click![/div]
  958.  
  959. [comment]----relationship image----[/comment]
  960. [div=height:58px; width:58px; border:1px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0;
  961.  
  962. /*add link to relationship image here*/ background: URL('https://i.imgur.com/UsrqXT3.png');
  963.  
  964. background-position:50% 50%; background-size:cover;][/div]
  965.  
  966. [comment]----relationship title----[/comment]
  967. [div=height:auto; max-height:58px; flex:1; margin-left:20px;]
  968. [comment]----relationship name----[/comment]
  969. [div=height:auto; width:auto; color: var(--color-2); font-weight:bold; font-family: var(--header); text-transform:uppercase; word-spacing:6px; font-size:16px; line-height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0 0 1px;][comment]
  970.  
  971. ----* * * relationship name here----
  972.  
  973. [/comment]cool girl[/div]
  974.  
  975. [comment]----relationship status----[/comment]
  976. [div=height:auto; width:auto; color: var(--color-1); font-weight:bold; font-style:oblique; font-family: var(--header); text-transform:uppercase; word-spacing:4px; font-size:11px; line-height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px;][comment]
  977.  
  978. ----* * * relationship status here----
  979.  
  980. [/comment]my not-girlfriend[/div]
  981. [/div]
  982. [comment]----relationship title end----[/comment]
  983. [/div]}
  984. [div=height:128px; width:auto; visibility:visible; margin:-10px -7px -9px -6.5px; position:relative; z-index:4; background: var(--bg-color); border:1px solid var(--border); border-top:0; padding:15px 18px 15px 30px; box-sizing:border-box; position:relative; display:flex; flex-flow:row nowrap;][div=height:100%; width:10px; border-right:1px solid var(--border); position:absolute; top:0; left:0; background: var(--color-1);][/div]
  985. [comment]----relationship description----[/comment]
  986. [div=height:100%; flex:1; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; font-size:12px; font-family: var(--body); text-align:justify; line-height:14px; color: var(--t-color);][comment]
  987.  
  988. ----* * * text starts here----
  989.  
  990. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus pellentesque enim. Sed maximus tellus odio, vitae posuere lacus aliquam sit amet. Morbi erat quam, accumsan vitae nisl eu, tincidunt interdum urna. Integer pellentesque enim et blandit vehicula. Praesent tristique lorem vel tellus eleifend, a venenatis erat eleifend. Suspendisse non pulvinar odio. Maecenas pretium, justo vel consectetur accumsan, leo odio tempor turpis, sed rhoncus ante felis id turpis. Mauris eros felis, dapibus non dapibus id, volutpat nec massa. Praesent vel sagittis purus. Nullam scelerisque nibh quam. Nunc ultrices iaculis mauris, a consectetur metus convallis vitae. Cras in sem ornare libero volutpat tristique. Phasellus nibh est, cursus sit amet aliquam at, rhoncus eu lacus. Morbi vel laoreet quam.
  991. [/div][/div]
  992. [comment]----relationship description end----[/comment]
  993.  
  994. [comment]----relationship icons----[/comment]
  995. [div=height:auto; width:30px; display:flex; flex-flow:column nowrap; justify-content:flex-end; margin:0 0 0 18px;]
  996. [comment]----icon 1----[/comment]
  997. [div=height:30px; width:30px; border:1px solid var(--color-2); display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--color-2); flex-shrink:0; margin:auto 0 8px 0; opacity:0.7;][comment]
  998.  
  999. ----* * * fontawesome icon here that describes the relationship----
  1000.  
  1001. [/comment][fa]fas fa-user-friends[/fa][/div]
  1002.  
  1003. [comment]----icon 2 (main descriptor -- highlighted)----[/comment]
  1004. [div=height:30px; width:30px; border:1px solid var(--color-1); display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--color-1); flex-shrink:0; margin:0 0 1px 0;][comment]
  1005.  
  1006. ----* * * fontawesome icon here that describes the relationship----
  1007.  
  1008. [/comment][fa]fas fa-heart-broken[/fa][/div]
  1009. [/div]
  1010. [comment]----relationship icons end----[/comment]
  1011. [/div]
  1012. {/slide}
  1013. [comment]----copy me too!----[/comment]
  1014.  
  1015. [comment]----copy this whole thing to add another relationship----[/comment]
  1016. {slide=[div=margin:-3px -7px -10px -6.5px; visibility:visible; height:auto; width:auto; padding:10px 15px 10px 30px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; border:1px solid var(--border); border-top:0; position:relative;][div=height:100%; width:10px; border-right:1px solid var(--border); position:absolute; top:0; left:0; background: var(--color-1);][/div][div=height:auto; width:auto; border:1px solid var(--color-1); border-top:0; border-right:0; position:absolute; top:0; right:0; font-size:8px; font-family: var(--header); line-height:100%; padding:2px 4px; box-sizing:border-box; text-transform:uppercase; letter-spacing:0.5px; opacity:0.7; color: var(--color-1);]click![/div]
  1017.  
  1018. [comment]----relationship image----[/comment]
  1019. [div=height:58px; width:58px; border:1px solid var(--border); box-sizing:border-box; border-radius:50%; flex-shrink:0;
  1020.  
  1021. /*add link to relationship image here*/ background: URL('https://i.pinimg.com/564x/23/8e/7a/238e7a616440b790adf0cdff3fa4c32a.jpg');
  1022.  
  1023. background-position:50% 50%; background-size:cover;][/div]
  1024.  
  1025. [comment]----relationship title----[/comment]
  1026. [div=height:auto; max-height:58px; flex:1; margin-left:20px;]
  1027. [comment]----relationship name----[/comment]
  1028. [div=height:auto; width:auto; color: var(--color-2); font-weight:bold; font-family: var(--header); text-transform:uppercase; word-spacing:6px; font-size:16px; line-height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 0 0 1px;][comment]
  1029.  
  1030. ----* * * relationship name here----
  1031.  
  1032. [/comment]happy girl[/div]
  1033.  
  1034. [comment]----relationship status----[/comment]
  1035. [div=height:auto; width:auto; color: var(--color-1); font-weight:bold; font-style:oblique; font-family: var(--header); text-transform:uppercase; word-spacing:4px; font-size:11px; line-height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px;][comment]
  1036.  
  1037. ----* * * relationship status here----
  1038.  
  1039. [/comment]my best friend[/div]
  1040. [/div]
  1041. [comment]----relationship title end----[/comment]
  1042. [/div]}
  1043. [div=height:128px; width:auto; visibility:visible; margin:-10px -7px -7px -6.5px; position:relative; z-index:4; background: var(--bg-color); border:1px solid var(--border); border-top:0; padding:15px 18px 15px 30px; box-sizing:border-box; position:relative; display:flex; flex-flow:row nowrap;][div=height:100%; width:10px; border-right:1px solid var(--border); position:absolute; top:0; left:0; background: var(--color-1);][/div]
  1044. [comment]----relationship description----[/comment]
  1045. [div=height:100%; flex:1; overflow:hidden;][div=height:100%; width:100%; overflow-y:scroll; scrollbar-width:none; font-size:12px; font-family: var(--body); text-align:justify; line-height:14px; color: var(--t-color);][comment]
  1046.  
  1047. ----* * * text starts here----
  1048.  
  1049. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus pellentesque enim. Sed maximus tellus odio, vitae posuere lacus aliquam sit amet. Morbi erat quam, accumsan vitae nisl eu, tincidunt interdum urna. Integer pellentesque enim et blandit vehicula. Praesent tristique lorem vel tellus eleifend, a venenatis erat eleifend. Suspendisse non pulvinar odio. Maecenas pretium, justo vel consectetur accumsan, leo odio tempor turpis, sed rhoncus ante felis id turpis. Mauris eros felis, dapibus non dapibus id, volutpat nec massa. Praesent vel sagittis purus. Nullam scelerisque nibh quam. Nunc ultrices iaculis mauris, a consectetur metus convallis vitae. Cras in sem ornare libero volutpat tristique. Phasellus nibh est, cursus sit amet aliquam at, rhoncus eu lacus. Morbi vel laoreet quam.
  1050. [/div][/div]
  1051. [comment]----relationship description end----[/comment]
  1052.  
  1053. [comment]----relationship icons----[/comment]
  1054. [div=height:auto; width:30px; display:flex; flex-flow:column nowrap; justify-content:flex-end; margin:0 0 0 18px;]
  1055. [comment]----icon 1----[/comment]
  1056. [div=height:30px; width:30px; border:1px solid var(--color-2); display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--color-2); flex-shrink:0; margin:auto 0 8px 0; opacity:0.7;
  1057.  
  1058. /*add display:none; after this to hide!*/ display:none;][comment]
  1059.  
  1060. ----* * * fontawesome icon here that describes the relationship----
  1061.  
  1062. [/comment][fa]fas fa-user-friends[/fa][/div]
  1063.  
  1064. [comment]----icon 2 (main descriptor -- highlighted)----[/comment]
  1065. [div=height:30px; width:30px; border:1px solid var(--color-1); display:flex; align-items:center; justify-content:center; font-size:13px; color: var(--color-1); flex-shrink:0; margin:0 0 1px 0;][comment]
  1066.  
  1067. ----* * * fontawesome icon here that describes the relationship----
  1068.  
  1069. [/comment][fa]fas fa-user-friends[/fa][/div]
  1070. [/div]
  1071. [comment]----relationship icons end----[/comment]
  1072. [/div]
  1073. {/slide}
  1074. [comment]----copy me too!----[/comment]
  1075.  
  1076.  
  1077. [/accordion][/div]
  1078. [comment]----relationships contents end----[/comment]
  1079. [/div]
  1080. [comment]----relationships end----[/comment]
  1081.  
  1082. [/div][/div][/div]
  1083. [comment]----right/bottom end----[/comment]
  1084. [/div]
  1085. [comment]----tab container end----[/comment]
  1086.  
  1087. [/div][/tab]
  1088. [comment]----tab 4 end----[/comment]
  1089.  
  1090.  
  1091. [/tabs][/div][/div]
  1092. [comment]----tabs end----[/comment]
  1093.  
  1094. [comment]----static sidebar----[/comment]
  1095. [div=height:auto; width:100%; display:flex; flex-flow:row wrap;][div=height: var(--f1h); flex: var(--f1); min-width: var(--f1w); border-right:clamp(0px, -50px + 5.5vw, 1px) solid var(--border); border-bottom:clamp(0px, 50px - 5.5vw, 1px) solid var(--border); box-sizing:border-box;]
  1096.  
  1097. [comment]----user intro----[/comment]
  1098. [div=height:160px; width:100%; border-bottom: 1px solid var(--border); padding:20px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  1099.  
  1100. [comment]----user details----[/comment]
  1101. [div=height:53px; width:100%; display:flex; flex-flow:row nowrap; align-items:center;]
  1102. [div=height:53px; width:53px; background: var(--img-1); background-size:cover; border-radius:50%; flex-shrink:0; border:1px solid var(--border); margin-right:10px;
  1103.  
  1104. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/div]
  1105.  
  1106. [div=height:auto; flex:1; margin-top:4px;][div=height:auto; width:auto; color: var(--color-2); font-family: var(--header); font-size:16px; text-transform:uppercase; font-weight:bold; line-height:100%; word-spacing:4px;][comment]
  1107.  
  1108. ----* * * display name here----
  1109.  
  1110. [/comment]the chill girl[/div]
  1111. [div=height:auto; width:auto; color: var(--color-1); font-family: var(--body); font-size:10px; letter-spacing:-0.5px; text-transform:uppercase; line-height:100%; margin-top:5px;][div=float:left; box-sizing:border-box; margin:-1px 2px 0 0;]@[/div][comment]
  1112.  
  1113. ----* * * username here----
  1114.  
  1115. [/comment]noyeahitscool[/div]
  1116. [/div]
  1117. [/div]
  1118. [comment]----user details end----[/comment]
  1119.  
  1120. [comment]----status update----[/comment]
  1121. [div=height:50px; width:calc(100% - 3px); margin:14px auto 0 auto; border:1px solid var(--border); display:flex; flex-flow:column nowrap;]
  1122. [div=height:auto; width:fit-content; width:-moz-fit-content; display:flex; flex-flow:row nowrap; border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-size:8px; text-transform:uppercase; font-family: var(--body); flex-shrink:0;]
  1123. [div=height:auto; width:auto; flex-shrink:0; border-right:1px solid var(--border); padding:3px 3px 2px 3px; box-sizing:border-box; color: var(--color-2); line-height:100%;][comment]
  1124.  
  1125. ----* * * time stamp here----
  1126.  
  1127. [/comment]20:01[/div]
  1128. [div=background: var(--color-1); display:flex; flex-flow:row-reverse nowrap; padding:3px 6px 2px 6px; box-sizing:border-box; color: var(--color-3); line-height:100%;][div=margin:-1px 0 0 3px; font-size:10px;]:[/div][comment]
  1129.  
  1130. ----* * * display name here----
  1131.  
  1132. [/comment]the chill girl[/div]
  1133. [/div]
  1134.  
  1135. [comment]----update contents----[/comment]
  1136. [div=height:26px; width:100%; margin-top:4px; overflow:hidden; padding:7px 10px; box-sizing:border-box; position:relative;][div=height:auto; width:auto; max-height:100%; overflow:hidden; text-overflow:ellipsis; color: var(--color-2); font-family: var(--body); font-size:12px; line-height:12px; white-space:nowrap;][comment]
  1137.  
  1138. ----* * * status here (one line only)----
  1139.  
  1140. [/comment]nvm she was kidding she's still straight[/div][/div]
  1141. [/div]
  1142. [comment]----status update end----[/comment]
  1143. [/div]
  1144. [comment]----user intro end----[/comment]
  1145.  
  1146. [/div][div=height: var(--f2h); flex: var(--f2); min-width: var(--f2w);][/div][/div]
  1147. [comment]----static sidebar end----[/comment]
  1148.  
  1149. [comment]----tabs cover----[/comment]
  1150. [div=height:100%; width:100%; position:absolute; top:0; left:0; z-index:2; pointer-events:none;][div=height:39px; width:100%; display:flex; flex-flow:row nowrap; background: var(--bg-color); overflow:hidden; position:relative;]
  1151.  
  1152. [comment]----button----[/comment]
  1153. [div=height:100%; width:80px; border-right:1px solid var(--border); color: var(--color-2); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  1154.  
  1155. ----button title here----
  1156.  
  1157. [/comment]basics[/div]
  1158. [comment]----button end----[/comment]
  1159.  
  1160. [comment]----button----[/comment]
  1161. [div=height:100%; width:80px; border-right:1px solid var(--border); color: var(--color-2); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  1162.  
  1163. ----button title here----
  1164.  
  1165. [/comment]psyche[/div]
  1166. [comment]----button end----[/comment]
  1167.  
  1168. [comment]----button----[/comment]
  1169. [div=height:100%; width:80px; border-right:1px solid var(--border); color: var(--color-2); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  1170.  
  1171. ----button title here----
  1172.  
  1173. [/comment]history[/div]
  1174. [comment]----button end----[/comment]
  1175.  
  1176. [comment]----button----[/comment]
  1177. [div=height:100%; width:80px; border-right:1px solid var(--border); color: var(--color-2); font-family: var(--header); text-transform:uppercase; letter-spacing:0px; line-height:100%; font-size:12px; display:flex; align-items:center; justify-content:center; padding:1px 0 0 0; box-sizing:border-box;][comment]
  1178.  
  1179. ----button title here----
  1180.  
  1181. [/comment]extra[/div]
  1182. [comment]----button end----[/comment]
  1183.  
  1184. [comment]----decoration----[/comment]
  1185. [div=height:100%; width:100px; position:absolute; top:0; left:650px; border-left:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; color: var(--color-1); font-size:14px; line-height:100%; padding:15px 14px 15px 18px; box-sizing:border-box;][comment]
  1186.  
  1187. ----* * * icons here----
  1188.  
  1189. [/comment][fa]fal fa-circle[/fa] [fa]fal fa-circle[/fa] [fa]fal fa-circle[/fa][/div]
  1190.  
  1191. [/div][/div]
  1192. [comment]----tabs cover end----[/comment]
  1193.  
  1194. [comment]----signature! *** do not remove!! ***----[/comment]
  1195. [div=height:auto;width:fit-content; position:absolute; z-index:6; opacity:0.15; top:40px; left:3px; color: var(--border); font-size:9px;text-align:center; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/div]
  1196.  
  1197. [/div][/div]
Advertisement
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!