API tools faq
paste
Advertisement
ooksie

moonlit

ooksie
Oct 19th, 2023 (edited)
406
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.76 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. [font=Chonburi]title, buttons[/font]
  4. [font=Lexend Deca]headers[/font]
  5. [font=Outfit]body[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][div=
  10.  
  11. --bg-color: #1c1c1c;
  12. --border: #fefefe;
  13.  
  14. --color-1: #ededed;
  15. --color-2: #d1d1d1;
  16. --t-color: #ededed;
  17.  
  18. --title: 'Chonburi', serif;
  19. --header: 'Lexend Deca', sans-serif;
  20. --body: 'Outfit', sans-serif;
  21.  
  22. --img-1: url('https://i.imgur.com/LfsWK45.png');
  23. --img-2: URL('https://i.imgur.com/QxhJA4G.png');
  24. --img-3: URL('https://i.imgur.com/ODFgFXh.png');
  25.  
  26. /*relationship images*/
  27. --r1: url('https://i.imgur.com/O7lekQV.png');
  28. --r2: url('https://i.imgur.com/O7lekQV.png');
  29. --r3: url('https://i.imgur.com/O7lekQV.png');
  30.  
  31. height:auto; width:100%; overflow-x:auto; margin:30px 0 40px 0;][div=height:460px; width:100%; max-width:660px; min-width:370px; padding:30px 0; box-sizing:border-box; margin:auto; background: var(--bg-color); border:1px solid var(--border); position:relative; line-height:0; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;]
  32.  
  33. [comment]----slide 1----[/comment]
  34. [div=height:auto; min-height:100%; width:50%; padding:0 clamp(22px, 100px - 12vw, 30px) 0 30px; box-sizing:border-box; pointer-events:none; display:flex; flex-flow:row-reverse wrap; justify-content:center; position:relative;][div=height:0; width:calc(100% - 52px); position:absolute; bottom:0; left:30px; border-bottom:1px solid var(--color-1);][/div]
  35.  
  36. [comment]----s1 right (image + role)----[/comment]
  37. [div=height:auto; min-height:200px; flex:43; min-width:180px; border-left:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); border-bottom:clamp(0px, 50px - 5vw, 1px) solid var(--color-1); display:flex; flex-flow:column nowrap;]
  38. [comment]----image----[/comment]
  39. [div=flex:1; width:auto; border-right:clamp(0px, 50px - 5vw, 1px) solid var(--color-1); border-bottom:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--img-1); background-size:cover;
  40.  
  41. /*edit the following to adjust the crop of the image*/ background-position: 50% 50%;
  42.  
  43. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);
  44. ][/div][/div]
  45.  
  46. [comment]----role/subtitle----[/comment]
  47. [div=height:auto; flex-shrink:0; width:auto; padding:18px 20px 20px 20px; box-sizing:border-box;][div=--fs: clamp(var(--fm), -100px + 14vw, var(--fd));, height:auto; max-height:clamp(var(--fm), -150px + 21vw, var(--fd) *2); width:auto; color: var(--color-2); font-family: var(--header); text-transform:uppercase; letter-spacing:1px; font-size: var(--fs); font-weight:bold; text-align:left; line-height:100%; overflow:hidden;
  48.  
  49. /*edit font size here*/ --fd: 32px; --fm:25px;][comment]
  50.  
  51. ----* * * role/subtitle here----
  52.  
  53. [/comment]short phrase.[/div][/div]
  54.  
  55. [/div]
  56. [comment]----s1 right end----[/comment]
  57.  
  58. [comment]----s1 left----[/comment]
  59. [div=height:400px; flex:57; min-width:220px; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  60.  
  61. [comment]----requisite----[/comment]
  62. [div=height:140px; width:100%; flex-shrink:0; display:flex; flex-flow:row-reverse nowrap;]
  63. [comment]----req contents----[/comment]
  64. [div=height:100%; flex:65; border-left:1px solid var(--color-1); padding:14px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 6px 0 14px; box-sizing:border-box; --m:10px;][div=height:0; width:100%; margin-bottom: calc(var(--m) * -1);][/div]
  65.  
  66. [comment]----copy this whole thing to add another item----[/comment]
  67. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  68. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  69.  
  70. ----* * * item title here----
  71.  
  72. [/comment]full name[/div][/div]
  73. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  74.  
  75. ----* * * item contents here----
  76.  
  77. [/comment]Answer[/div]
  78. [/div]
  79. [comment]----copy me too!----[/comment]
  80.  
  81. [comment]----copy this whole thing to add another item----[/comment]
  82. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  83. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  84.  
  85. ----* * * item title here----
  86.  
  87. [/comment]alias[/div][/div]
  88. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  89.  
  90. ----* * * item contents here----
  91.  
  92. [/comment]Answer[/div]
  93. [/div]
  94. [comment]----copy me too!----[/comment]
  95.  
  96. [comment]----copy this whole thing to add another item----[/comment]
  97. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  98. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  99.  
  100. ----* * * item title here----
  101.  
  102. [/comment]ethnicity[/div][/div]
  103. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  104.  
  105. ----* * * item contents here----
  106.  
  107. [/comment]Answer[/div]
  108. [/div]
  109. [comment]----copy me too!----[/comment]
  110.  
  111. [comment]----copy this whole thing to add another item----[/comment]
  112. [div=height:auto; width:auto; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  113. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  114.  
  115. ----* * * item title here----
  116.  
  117. [/comment]d.o.b.[/div][/div]
  118. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  119.  
  120. ----* * * item contents here----
  121.  
  122. [/comment]Answer[/div]
  123. [/div]
  124. [comment]----copy me too!----[/comment]
  125.  
  126. [/div][/div][/div]
  127. [comment]----req contents end----[/comment]
  128.  
  129. [comment]----image----[/comment]
  130. [div=height:100%; flex:35; padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--img-2); background-size:cover;
  131.  
  132. /*edit the following to adjust the cropping of the image*/ background-position: 50% 0%;
  133.  
  134. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);][/div][/div]
  135. [/div]
  136. [comment]----requisite end----[/comment]
  137.  
  138. [comment]----visage----[/comment]
  139. [div=flex:1; max-height:220px; width:100%; display:flex; flex-flow:row-reverse nowrap; border-top:1px solid var(--color-1);]
  140.  
  141. [comment]----style----[/comment]
  142. [div=height:100%; width:53px; flex-shrink:0; display:flex; flex-flow:column nowrap; border-left:1px solid var(--color-1);]
  143. [comment]----title----[/comment]
  144. [div=height:30px; width:100%; flex-shrink:0; padding:5px 3px; box-sizing:border-box; border-bottom:1px solid var(--color-1); text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--header); line-height:12px; font-weight:bold; color: var(--color-2); display:flex; align-items:center; justify-content:center;][comment]
  145.  
  146. ----* * * title here----
  147.  
  148. [/comment]style[/div]
  149.  
  150. [comment]----style contents----[/comment]
  151. [div=flex:1; width:100%; padding:5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:space-between;]
  152.  
  153. [comment]----copy this whole thing to add another style link----[/comment]
  154. [div=height:auto; width:auto; margin:8px auto; font-size:16px;][comment]
  155.  
  156. ---- * * * replace xx w. link----
  157.  
  158. [/comment][url='xx'][comment]
  159. [/comment][div=height:auto; line-height:100%; color: var(--color-1);][comment]
  160.  
  161. ----* * * icon here----
  162.  
  163. [/comment][fa]fas fa-heart[/fa][/div][/url]
  164. [/div]
  165. [comment]----copy me too!----[/comment]
  166.  
  167. [comment]----copy this whole thing to add another style link----[/comment]
  168. [div=height:auto; width:auto; margin:8px auto; font-size:16px;][comment]
  169.  
  170. ---- * * * replace xx w. link----
  171.  
  172. [/comment][url='xx'][comment]
  173. [/comment][div=height:auto; line-height:100%; color: var(--color-2);][comment]
  174.  
  175. ----* * * icon here----
  176.  
  177. [/comment][fa]fas fa-heart[/fa][/div][/url]
  178. [/div]
  179. [comment]----copy me too!----[/comment]
  180.  
  181. [comment]----copy this whole thing to add another style link----[/comment]
  182. [div=height:auto; width:auto; margin:8px auto; font-size:16px;][comment]
  183.  
  184. ---- * * * replace xx w. link----
  185.  
  186. [/comment][url='xx'][comment]
  187. [/comment][div=height:auto; line-height:100%; color: var(--color-1);][comment]
  188.  
  189. ----* * * icon here----
  190.  
  191. [/comment][fa]fas fa-heart[/fa][/div][/url]
  192. [/div]
  193. [comment]----copy me too!----[/comment]
  194.  
  195. [comment]----copy this whole thing to add another style link----[/comment]
  196. [div=height:auto; width:auto; margin:8px auto; font-size:16px;][comment]
  197.  
  198. ---- * * * replace xx w. link----
  199.  
  200. [/comment][url='xx'][comment]
  201. [/comment][div=height:auto; line-height:100%; color: var(--color-2);][comment]
  202.  
  203. ----* * * icon here----
  204.  
  205. [/comment][fa]fas fa-heart[/fa][/div][/url]
  206. [/div]
  207. [comment]----copy me too!----[/comment]
  208.  
  209. [comment]----copy this whole thing to add another style link----[/comment]
  210. [div=height:auto; width:auto; margin:8px auto; font-size:16px;][comment]
  211.  
  212. ---- * * * replace xx w. link----
  213.  
  214. [/comment][url='xx'][comment]
  215. [/comment][div=height:auto; line-height:100%; color: var(--color-1);][comment]
  216.  
  217. ----* * * icon here----
  218.  
  219. [/comment][fa]fas fa-heart[/fa][/div][/url]
  220. [/div]
  221. [comment]----copy me too!----[/comment]
  222.  
  223. [/div]
  224. [comment]----style contents end----[/comment]
  225. [/div]
  226. [comment]----style end----[/comment]
  227.  
  228. [comment]----visage contents----[/comment]
  229. [div=height:100%; flex:1; padding:17px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 7px 0 18px; box-sizing:border-box; --m:10px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  230.  
  231. [comment]----copy this whole thing to add another item----[/comment]
  232. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  233. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  234.  
  235. ----* * * item title here----
  236.  
  237. [/comment]height[/div][/div]
  238. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  239.  
  240. ----* * * item contents here----
  241.  
  242. [/comment]Answer[/div]
  243. [/div]
  244. [comment]----copy me too!----[/comment]
  245.  
  246. [comment]----copy this whole thing to add another item----[/comment]
  247. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  248. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  249.  
  250. ----* * * item title here----
  251.  
  252. [/comment]hair[/div][/div]
  253. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px;][comment]
  254.  
  255. ----* * * item contents here----
  256.  
  257. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.n[/div]
  258. [/div]
  259. [comment]----copy me too!----[/comment]
  260.  
  261. [comment]----copy this whole thing to add another item----[/comment]
  262. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  263. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  264.  
  265. ----* * * item title here----
  266.  
  267. [/comment]eyes[/div][/div]
  268. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:15px; margin:5px 0 0 0.5px;][comment]
  269.  
  270. ----* * * item contents here----
  271.  
  272. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  273. [/div]
  274. [comment]----copy me too!----[/comment]
  275.  
  276. [comment]----copy this whole thing to add another item----[/comment]
  277. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  278. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  279.  
  280. ----* * * item title here----
  281.  
  282. [/comment]Build[/div][/div]
  283. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px; text-align:justify;][comment]
  284.  
  285. ----* * * item contents here----
  286.  
  287. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla felis id sem consectetur, a pretium diam ornare. Integer accumsan bibendum enim sed tristique. Vestibulum egestas ornare condimentum.[/div]
  288. [/div]
  289. [comment]----copy me too!----[/comment]
  290.  
  291. [comment]----copy this whole thing to add another item----[/comment]
  292. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  293. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  294.  
  295. ----* * * item title here----
  296.  
  297. [/comment]dist. features[/div][/div]
  298. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px; text-align:justify;][comment]
  299.  
  300. ----* * * item contents here----
  301.  
  302. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  303. [/div]
  304. [comment]----copy me too!----[/comment]
  305.  
  306. [comment]----copy this whole thing to add another item----[/comment]
  307. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  308. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  309.  
  310. ----* * * item title here----
  311.  
  312. [/comment]body modifications[/div][/div]
  313. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px; text-align:justify;][comment]
  314.  
  315. ----* * * item contents here----
  316.  
  317. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  318. [/div]
  319. [comment]----copy me too!----[/comment]
  320.  
  321.  
  322. [/div][/div][/div]
  323. [comment]----visage contents end----[/comment]
  324. [/div]
  325. [comment]----visage end----[/comment]
  326.  
  327. [comment]----music player----[/comment]
  328. [div=height:40px; width:100%; flex-shrink:0; padding:5px 18px; box-sizing:border-box; border-top:1px solid var(--color-1); display:flex; flex-flow:row nowrap; align-items:center;]
  329. [comment]----play button----[/comment]
  330. [div=height:13px; width:13px; position:relative; flex-shrink:0; margin-bottom:1px;][div=height:100%; width:100%; background: URL('https://i.imgur.com/GxBUSrK.gif') 50% 0%; background-size:cover; position:relative; z-index:2; pointer-events:none;][/div]
  331. [comment]----actual media player----[/comment]
  332. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.01%;][border=transparent; height:32px; width:32px; padding:0; position:relative; pointer-events:auto;]
  333.  
  334. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  335. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  336. [media=soundcloud]https://soundcloud.com/yrlocation/61c87a10-0dee-11ee-ae60-b94ac8743ba7[/media]
  337. [/border]
  338.  
  339. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  340. [border=transparent; height:500px; width:500px; margin-top:-170px; margin-left:-93px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  341. [media=googledrive]1s4iq_X7GbAExJWZ1IR3ri2OQ33fvj6Ps[/MEDIA]
  342. [/border]
  343.  
  344. [/border][/border]
  345. [comment]----actual media player end----[/comment]
  346. [/div]
  347. [comment]----play button end----[/comment]
  348.  
  349. [comment]----music info----[/comment]
  350. [div=height:auto; flex:1; max-width:87%; margin-left:auto; padding:0 0 2px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; justify-content:flex-end; font-family: var(--header); text-transform:uppercase; font-size:11.5px; letter-spacing:1px; align-items:center;]
  351. [comment]----song title----[/comment]
  352. [div=height:auto; width:auto; max-width:49%; color: var(--color-1); line-height:100%; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  353.  
  354. ----* * * song title here----
  355.  
  356. [/comment]title[/div]
  357. [div=height:0; width:18px; border-top:1px solid var(--color-1); margin:0 12px; flex-shrink:0;][/div]
  358.  
  359. [comment]----song artist----[/comment]
  360. [div=height:auto; width:auto; max-width:49%; color: var(--color-1); line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  361.  
  362. ----* * * song artist here----
  363.  
  364. [/comment]artist[/div]
  365. [/div]
  366. [comment]----music info end----[/comment]
  367. [/div]
  368. [comment]----music player end----[/comment]
  369.  
  370. [/div]
  371. [comment]----s1 left end----[/comment]
  372.  
  373. [comment]----slide titles (remember to edit left+right)----[/comment]
  374. [div=height:100%; width:100%; position:absolute; top:0; left:0; padding:0 11px 0 19px; box-sizing:border-box; pointer-events:none;][div=height:80px; width:100%; position:sticky; top:calc(50% - 40px); display:flex; align-items:center; z-index:5;]
  375. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box;border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; transform:rotate(-180deg); text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-right:auto;][comment]
  376.  
  377. ----* * * left section title here----
  378.  
  379. [/comment]req.[/div]
  380. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box;border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-left:auto;][comment]
  381.  
  382. ----* * * right section title here----
  383.  
  384. [/comment]req.[/div]
  385. [/div][/div]
  386. [comment]----slide titles (remember to edit both)----[/comment]
  387. [/div]
  388. [comment]----slide 1 end----[/comment]
  389.  
  390.  
  391. [comment]----slide 2----[/comment]
  392. [div=height:auto; min-height:100%; width:50%; padding:0 clamp(22px, 100px - 12vw, 30px) 0 30px; box-sizing:border-box; display:flex; flex-flow:row wrap; position:relative;][div=height:0; width:calc(100% - 52px); position:absolute; bottom:0; left:30px; border-bottom:1px solid var(--color-1);][/div]
  393.  
  394. [comment]----s2 left----[/comment]
  395. [div=height:398px; flex:68; min-width:300px; display:flex; flex-flow:column-reverse nowrap;]
  396.  
  397. [comment]----quote----[/comment]
  398. [div=height:auto; width:100%; flex-shrink:0; padding:14px 25px; box-sizing:border-box; border-top:1px solid var(--color-1); position:relative; display:flex; align-items:center; overflow:hidden;][div=height:auto; width:auto; position:absolute; top:-6px; left:10px; line-height:100%; font-size:30px; font-family: var(--header); color: var(--color-2); opacity:0.3;][fa]fas fa-quote-left[/fa][/div][div=height:auto; max-height:47px; overflow:hidden; width:100%; color: var(--t-color); font-family: var(--body); font-size:11px; font-style:oblique; line-height:15px; text-transform:uppercase; letter-spacing:1px; position:relative; z-index:2; text-align:right;][comment]
  399.  
  400. ----* * * quote here----
  401.  
  402. [/comment]a little quote here![/div][/div]
  403.  
  404. [comment]----pers contents----[/comment]
  405. [div=height:95%; width:100%; padding:26px 0 25px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 17px 0 32px; box-sizing:border-box; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:17px; text-align:justify;][comment]
  406.  
  407. ----* * * text starts here----
  408.  
  409. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [div=display:inline; color: var(--color-2); font-weight:bold; font-style:oblique; font-size:12px; letter-spacing:0.5px;]Donec[/div] vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  410.  
  411. Ut iaculis, est sit amet laoreet fringilla, leo neque pharetra tellus, vel hendrerit lorem neque eget diam. Vivamus varius libero vitae nisl consequat egestas. Ut viverra lorem purus, egestas sagittis nulla dapibus et. Aenean ornare nulla non mattis luctus. Quisque accumsan nec mi in semper. Curabitur dignissim pellentesque dolor, ut malesuada urna interdum iaculis. Integer vulputate risus justo, nec volutpat turpis accumsan a. Nunc at aliquam leo. In vel sem et felis aliquet rutrum. Aenean eget maximus ipsum, fringilla semper velit. Donec tempus porta mauris at rutrum. Phasellus tincidunt, mauris id commodo varius, lorem nisi tincidunt dolor, sed tincidunt quam nulla eu enim. Ut fermentum elit vitae magna dignissim bibendum sed eu mi. Integer non semper mauris. Cras egestas orci quis rhoncus vulputate. Integer vestibulum congue justo vel eleifend.
  412. [/div][/div][/div]
  413. [comment]----pers contents end----[/comment]
  414. [/div]
  415. [comment]----s2 left end----[/comment]
  416.  
  417. [comment]----s2 right----[/comment]
  418. [div=height:auto; max-height:clamp(150px, -400px + 80vw, 400px); flex:32; min-width:160px; border-left:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); border-top:clamp(0px, 60px - 6.1vw, 1px) solid var(--color-1); display:flex; flex-flow:column wrap;]
  419. [comment]----pers details----[/comment]
  420. [div=flex:45; min-height:150px; width:clamp(192px, 60%, 230px); border-bottom:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); border-right:clamp(0px, 50px - 5vw, 1px) solid var(--color-1); box-sizing:border-box; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:calc(50% + 8px);][div=height:0; width:100%; margin-bottom:-0.8px;][/div]
  421.  
  422. [comment]----copy this whole thing to add another details section----[/comment]
  423. [div=height:auto; width:100%; border-top:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  424. [comment]----section title----[/comment]
  425. [div=height:35px; width:100%; padding:4px 10px 3px 10px; box-sizing:border-box; background: var(--bg-color); border-bottom:1px solid var(--color-1); position:sticky; top:0; display:flex; align-items:center; color: var(--color-2);][div=height:auto; width:auto; font-size:8px; line-height:14px; margin-right:6px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:2px; font-size:12.5px; font-family:var(--body); line-height:14px; font-weight:bold; margin-right:auto;][comment]
  426.  
  427. ----* * * section title here----
  428.  
  429. [/comment]likes[/div][/div]
  430. [comment]----section contents----[/comment]
  431. [div=height:auto; width:100%; padding:10px 18px; box-sizing:border-box; line-height:15px; font-size:12px; font-family: var(--body); text-align:justify; color:var(--t-color);][comment]
  432.  
  433. ----* * * text starts here----
  434.  
  435. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel.
  436. [/div]
  437. [comment]----section contents end----[/comment]
  438. [/div]
  439. [comment]----copy me too!----[/comment]
  440.  
  441. [comment]----copy this whole thing to add another details section----[/comment]
  442. [div=height:auto; width:100%; border-top:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  443. [comment]----section title----[/comment]
  444. [div=height:35px; width:100%; padding:4px 10px 3px 10px; box-sizing:border-box; background: var(--bg-color); border-bottom:1px solid var(--color-1); position:sticky; top:0; display:flex; align-items:center; color: var(--color-2);][div=height:auto; width:auto; font-size:8px; line-height:14px; margin-right:6px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:2px; font-size:12.5px; font-family:var(--body); line-height:14px; font-weight:bold; margin-right:auto;][comment]
  445.  
  446. ----* * * section title here----
  447.  
  448. [/comment]dislikes[/div][/div]
  449. [comment]----section contents----[/comment]
  450. [div=height:auto; width:100%; padding:10px 18px; box-sizing:border-box; line-height:15px; font-size:12px; font-family: var(--body); text-align:justify; color:var(--t-color);][comment]
  451.  
  452. ----* * * text starts here----
  453.  
  454. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros.
  455. [/div]
  456. [comment]----section contents end----[/comment]
  457. [/div]
  458. [comment]----copy me too!----[/comment]
  459.  
  460. [comment]----copy this whole thing to add another details section----[/comment]
  461. [div=height:auto; width:100%; border-top:1px solid var(--color-1); display:flex; flex-flow:column nowrap;]
  462. [comment]----section title----[/comment]
  463. [div=height:35px; width:100%; padding:4px 10px 3px 10px; box-sizing:border-box; background: var(--bg-color); border-bottom:1px solid var(--color-1); position:sticky; top:0; display:flex; align-items:center; color: var(--color-2);][div=height:auto; width:auto; font-size:8px; line-height:14px; margin-right:6px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:2px; font-size:12.5px; font-family:var(--body); line-height:14px; font-weight:bold; margin-right:auto;][comment]
  464.  
  465. ----* * * section title here----
  466.  
  467. [/comment]quirks[/div][/div]
  468. [comment]----section contents----[/comment]
  469. [div=height:auto; width:100%; padding:10px 18px; box-sizing:border-box; line-height:15px; font-size:12px; font-family: var(--body); text-align:justify; color:var(--t-color);][comment]
  470.  
  471. ----* * * text starts here----
  472.  
  473. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis.
  474. [/div]
  475. [comment]----section contents end----[/comment]
  476. [/div]
  477. [comment]----copy me too!----[/comment]
  478.  
  479. [/div][/div][/div]
  480. [comment]----pers details end----[/comment]
  481.  
  482. [comment]----pers image----[/comment]
  483. [div=flex:55; flex-shrink:0; min-height:150px; width:auto; min-width:35%; padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--img-3); background-size:cover;
  484.  
  485. /*edit the following to adjust the cropping of the image*/ background-position: 50% 0%;
  486.  
  487. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);][/div][/div]
  488.  
  489. [/div]
  490. [comment]----s2 right end----[/comment]
  491.  
  492. [comment]----slide titles (remember to edit left+right)----[/comment]
  493. [div=height:100%; width:100%; position:absolute; top:0; left:0; padding:0 11px 0 19px; box-sizing:border-box; pointer-events:none; display:flex; align-items:center;][div=height:80px; width:100%; position:sticky; top:calc(50% - 40px); display:flex; align-items:center; z-index:5;]
  494. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box;border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; transform:rotate(-180deg); text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-right:auto;][comment]
  495.  
  496. ----* * * left section title here----
  497.  
  498. [/comment]pers.[/div]
  499. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box;border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-left:auto;][comment]
  500.  
  501. ----* * * right section title here----
  502.  
  503. [/comment]pers.[/div]
  504. [/div][/div]
  505. [comment]----slide titles (remember to edit both)----[/comment]
  506. [/div]
  507. [comment]----slide 2 end----[/comment]
  508.  
  509.  
  510. [comment]----slide 3----[/comment]
  511. [div=height:auto; min-height:100%; width:50%; padding:0 clamp(22px, 100px - 12vw, 30px) 0 30px; box-sizing:border-box; display:flex; flex-flow:row-reverse wrap; position:relative;]
  512.  
  513. [comment]----s3 right----[/comment]
  514. [div=height:400px; flex:55; min-width:220px; border-left:clamp(0px, -50px + 5vw, 1px) solid var(--color-1); border-bottom:clamp(0px, 60px - 6.1vw, 1px) solid var(--color-1);][div=height:100%; width:calc(100% + 4.1px); margin-left:-4.1px; padding:23px 0; box-sizing:border-box; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 12px 0 0; box-sizing:border-box; --m:20px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  515.  
  516. [comment]----copy this whole thing to add another section----[/comment]
  517. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  518. [comment]----section title----[/comment]
  519. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; position:sticky; top:0;][div=height:8px; width:8px; margin-top:2px; border-radius:50%; background: var(--color-2); flex-shrink:0;][/div][div=height:auto; flex:1; background: var(--bg-color); margin-left:5px; padding:0 0 10px 10px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:13.5px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:100%;][comment]
  520.  
  521. ----* * * section title here----
  522.  
  523. [/comment]birth[/div][/div]
  524.  
  525. [comment]----section contents----[/comment]
  526. [div=height:auto; width:100%; padding:0 10px 0 24px; box-sizing:border-box; line-height:15px; font-family: var(--body); text-align:justify; font-size:12px; color: var(--t-color);][comment]
  527.  
  528. ----* * * text starts here----
  529.  
  530. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  531.  
  532. Ut iaculis, est sit amet laoreet fringilla, leo neque pharetra tellus, vel hendrerit lorem neque eget diam. Vivamus varius libero vitae nisl consequat egestas. Ut viverra lorem purus, egestas sagittis nulla dapibus et. Aenean ornare nulla non mattis luctus. Quisque accumsan nec mi in semper. Curabitur dignissim pellentesque dolor, ut malesuada urna interdum iaculis. Integer vulputate risus justo, nec volutpat turpis accumsan a. Nunc at aliquam leo. In vel sem et felis aliquet rutrum. Aenean eget maximus ipsum, fringilla semper velit. Donec tempus porta mauris at rutrum. Phasellus tincidunt, mauris id commodo varius, lorem nisi tincidunt dolor, sed tincidunt quam nulla eu enim. Ut fermentum elit vitae magna dignissim bibendum sed eu mi. Integer non semper mauris. Cras egestas orci quis rhoncus vulputate. Integer vestibulum congue justo vel eleifend.
  533. [/div]
  534. [comment]----section contents end----[/comment]
  535. [/div]
  536. [comment]----copy me too!----[/comment]
  537.  
  538. [comment]----copy this whole thing to add another section----[/comment]
  539. [div=height:auto; width:100%; display:flex; flex-flow:column nowrap; margin-top: var(--m);]
  540. [comment]----section title----[/comment]
  541. [div=height:auto; width:100%; display:flex; flex-flow:row nowrap; position:sticky; top:0;][div=height:8px; width:8px; margin-top:2px; border-radius:50%; background: var(--color-2); flex-shrink:0;][/div][div=height:auto; flex:1; background: var(--bg-color); margin-left:5px; padding:0 0 10px 10px; box-sizing:border-box; color: var(--color-1); font-family: var(--header); font-size:13.5px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:100%;][comment]
  542.  
  543. ----* * * section title here----
  544.  
  545. [/comment]part. 2[/div][/div]
  546.  
  547. [comment]----section contents----[/comment]
  548. [div=height:auto; width:100%; padding:0 10px 0 24px; box-sizing:border-box; line-height:15px; font-family: var(--body); text-align:justify; font-size:12px; color: var(--t-color);][comment]
  549.  
  550. ----* * * text starts here----
  551.  
  552. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  553.  
  554. Ut iaculis, est sit amet laoreet fringilla, leo neque pharetra tellus, vel hendrerit lorem neque eget diam. Vivamus varius libero vitae nisl consequat egestas. Ut viverra lorem purus, egestas sagittis nulla dapibus et. Aenean ornare nulla non mattis luctus. Quisque accumsan nec mi in semper. Curabitur dignissim pellentesque dolor, ut malesuada urna interdum iaculis. Integer vulputate risus justo, nec volutpat turpis accumsan a. Nunc at aliquam leo. In vel sem et felis aliquet rutrum. Aenean eget maximus ipsum, fringilla semper velit. Donec tempus porta mauris at rutrum. Phasellus tincidunt, mauris id commodo varius, lorem nisi tincidunt dolor, sed tincidunt quam nulla eu enim. Ut fermentum elit vitae magna dignissim bibendum sed eu mi. Integer non semper mauris. Cras egestas orci quis rhoncus vulputate. Integer vestibulum congue justo vel eleifend.
  555. [/div]
  556. [comment]----section contents end----[/comment]
  557. [/div]
  558. [comment]----copy me too!----[/comment]
  559.  
  560. [/div][/div][/div][/div]
  561. [comment]----s3 right end----[/comment]
  562.  
  563. [comment]----s3 left----[/comment]
  564. [div=height:auto; min-height:290px; max-height:400px; flex:45; min-width:180px; display:flex; flex-flow:column nowrap;]
  565.  
  566. [comment]----relationships section----[/comment]
  567. [div=flex:1; min-height:120px; width:100%; padding:15px 0; box-sizing:border-box; border-bottom:1px solid var(--color-1); overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 0 0 15px; box-sizing:border-box; --m:15px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  568.  
  569. [comment]----copy this whole thing to add another relationship----[/comment]
  570. [div=height:97px; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--m);]
  571. [comment]----relationship left----[/comment]
  572. [div=height:auto; width:75px; flex-shrink:0; display:flex; flex-flow:column nowrap;][div=height:75px; width:75px; border:1px solid var(--color-1); padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--r1); background-size:cover;
  573.  
  574. /*edit the following to adjust the cropping of the image*/ background-position: 50% 0%;
  575.  
  576. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);][/div][/div]
  577. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2); margin-top:3px;][div=height:auto; width:auto; font-size:5.5px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:8px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  578.  
  579. ----* * * relationship status here----
  580.  
  581. [/comment]best friend[/div][/div]
  582. [/div]
  583.  
  584. [comment]----relationship right----[/comment]
  585. [div=height:auto; flex:1; display:flex; flex-flow:column nowrap; margin:1px 0 0 15px;]
  586. [div=height:auto; max-height:15px; width:auto; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--color-1); font-family: var(--header); letter-spacing:1px; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:15px;][comment]
  587.  
  588. ----* * * rs name here----
  589.  
  590. [/comment]name here[/div]
  591. [div=height:90%; width:100%; overflow:hidden; margin-top:7px;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:15px;][comment]
  592.  
  593. ----* * * rs contents here----
  594.  
  595. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  596. [/div][/div][/div]
  597. [/div]
  598. [/div]
  599. [comment]----copy me too!----[/comment]
  600.  
  601. [comment]----copy this whole thing to add another relationship----[/comment]
  602. [div=height:97px; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--m);]
  603. [comment]----relationship left----[/comment]
  604. [div=height:auto; width:75px; flex-shrink:0; display:flex; flex-flow:column nowrap;][div=height:75px; width:75px; border:1px solid var(--color-1); padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--r2); background-size:cover;
  605.  
  606. /*edit the following to adjust the cropping of the image*/ background-position: 50% 0%;
  607.  
  608. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);][/div][/div]
  609. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2); margin-top:3px;][div=height:auto; width:auto; font-size:5.5px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:8px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  610.  
  611. ----* * * relationship status here----
  612.  
  613. [/comment]best friend[/div][/div]
  614. [/div]
  615.  
  616. [comment]----relationship right----[/comment]
  617. [div=height:auto; flex:1; display:flex; flex-flow:column nowrap; margin:1px 0 0 15px;]
  618. [div=height:auto; max-height:15px; width:auto; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--color-1); font-family: var(--header); letter-spacing:1px; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:15px;][comment]
  619.  
  620. ----* * * rs name here----
  621.  
  622. [/comment]name here[/div]
  623. [div=height:90%; width:100%; overflow:hidden; margin-top:7px;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:15px;][comment]
  624.  
  625. ----* * * rs contents here----
  626.  
  627. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  628. [/div][/div][/div]
  629. [/div]
  630. [/div]
  631. [comment]----copy me too!----[/comment]
  632.  
  633. [comment]----copy this whole thing to add another relationship----[/comment]
  634. [div=height:97px; width:100%; display:flex; flex-flow:row nowrap; margin-top: var(--m);]
  635. [comment]----relationship left----[/comment]
  636. [div=height:auto; width:75px; flex-shrink:0; display:flex; flex-flow:column nowrap;][div=height:75px; width:75px; border:1px solid var(--color-1); padding:5px; box-sizing:border-box;][div=height:100%; width:100%; background: var(--r3); background-size:cover;
  637.  
  638. /*edit the following to adjust the cropping of the image*/ background-position: 50% 0%;
  639.  
  640. /*change value to 0 to remove editing*/ -webkit-filter:grayscale(1) contrast(0.8);][/div][/div]
  641. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2); margin-top:3px;][div=height:auto; width:auto; font-size:5.5px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:8px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  642.  
  643. ----* * * relationship status here----
  644.  
  645. [/comment]best friend[/div][/div]
  646. [/div]
  647.  
  648. [comment]----relationship right----[/comment]
  649. [div=height:auto; flex:1; display:flex; flex-flow:column nowrap; margin:1px 0 0 15px;]
  650. [div=height:auto; max-height:15px; width:auto; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--color-1); font-family: var(--header); letter-spacing:1px; font-weight:bold; text-transform:uppercase; line-height:100%; font-size:15px;][comment]
  651.  
  652. ----* * * rs name here----
  653.  
  654. [/comment]name here[/div]
  655. [div=height:90%; width:100%; overflow:hidden; margin-top:7px;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; color: var(--t-color); font-size:11px; font-family: var(--body); text-align:justify; line-height:15px;][comment]
  656.  
  657. ----* * * rs contents here----
  658.  
  659. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum dui eget diam sodales lobortis. Nulla fermentum purus fringilla hendrerit tincidunt. Quisque ullamcorper fringilla augue, a laoreet ligula vehicula vel. Vestibulum laoreet tristique sem, vel malesuada nunc congue quis. Nulla aliquet massa a felis viverra iaculis. Praesent ac tortor quis diam efficitur consequat non id eros. Nullam malesuada quis nisl vitae consequat.
  660. [/div][/div][/div]
  661. [/div]
  662. [/div]
  663. [comment]----copy me too!----[/comment]
  664.  
  665. [/div][/div][/div]
  666. [comment]----relationships section end----[/comment]
  667.  
  668. [comment]----misc section----[/comment]
  669. [div=height:160px; width:100%; padding:17px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; overflow:hidden;][div=height:100%; width:200%; overflow-y:scroll;][div=height:auto; width:50%; padding:0 7px 0 12px; box-sizing:border-box; --m:13px;][div=height:0; width:100%; margin-bottom:calc(var(--m) * -1);][/div]
  670.  
  671. [comment]----copy this whole thing to add another item----[/comment]
  672. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  673. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  674.  
  675. ----* * * item title here----
  676.  
  677. [/comment]question here[/div][/div]
  678. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px; text-align:justify;][comment]
  679.  
  680. ----* * * item contents here----
  681.  
  682. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  683. [/div]
  684. [comment]----copy me too!----[/comment]
  685.  
  686. [comment]----copy this whole thing to add another item----[/comment]
  687. [div=height:auto; flex:1 0; min-width:fit-content; display:flex; flex-flow:column nowrap; margin: var(--m) var(--m) 0 var(--m);]
  688. [div=height:auto; width:auto; display:flex; flex-flow:row nowrap; color: var(--color-2);][div=height:auto; width:auto; font-size:7px; line-height:12px; margin-right:4px;][fa]fas fa-chevrons-right[/fa][/div][div=height:auto; width:auto; text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; font-family:var(--body); line-height:12px; font-weight:bold; margin-right:auto;][comment]
  689.  
  690. ----* * * item title here----
  691.  
  692. [/comment]question here[/div][/div]
  693. [div=height:auto; width:auto; color: var(--t-color); font-size:12.5px; font-family: var(--body); line-height:14px; margin:5px 0 0 0.5px; text-align:justify;][comment]
  694.  
  695. ----* * * item contents here----
  696.  
  697. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
  698. [/div]
  699. [comment]----copy me too!----[/comment]
  700.  
  701. [/div][/div][/div]
  702. [comment]----visage contents end----[/comment]
  703.  
  704. [/div]
  705. [comment]----s3 left end----[/comment]
  706.  
  707.  
  708. [comment]----slide titles (remember to edit left+right)----[/comment]
  709. [div=height:100%; width:100%; position:absolute; top:0; left:0; padding:0 11px 0 19px; box-sizing:border-box; pointer-events:none; display:flex; align-items:center;][div=height:80px; width:100%; position:sticky; top:calc(50% - 40px); display:flex; align-items:center; z-index:5;]
  710. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; transform:rotate(-180deg); text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-right:auto;][comment]
  711.  
  712. ----* * * left section title here----
  713.  
  714. [/comment]hist.[/div]
  715. [div=height:80px; width:auto; padding:5px 4px 5px 6px; box-sizing:border-box; border:1px solid var(--color-1); border-radius:20px; color: var(--color-1); writing-mode:vertical-rl; font-family:var(--title); line-height:100%; font-size:12px; text-align:center; background: var(--bg-color); font-style:oblique; letter-spacing:1px; margin-left:auto;][comment]
  716.  
  717. ----* * * right section title here----
  718.  
  719. [/comment]hist.[/div]
  720. [/div][/div]
  721. [comment]----slide titles (remember to edit both)----[/comment]
  722. [/div]
  723. [comment]----slide 3 end----[/comment]
  724.  
  725.  
  726. [comment]----notification----[/comment]
  727. [div=height:auto; width:auto; padding:2px 4px; box-sizing:border-box; position:absolute; top:31px; right:33px; z-index:4; color: var(--t-color); font-family: var(--header); font-size:8px; display:flex; align-items:center; text-transform:uppercase; letter-spacing:0.5px; line-height:100%; opacity:0.4; background:var(--bg-color);][div=display:inline; font-size:8.5px; margin:1px 4px 0 0;][fa]far fa-angle-down[/fa][/div]scroll[/div]
  728.  
  729. [comment]----decorative border----[/comment]
  730. [div=height:calc(100% - 60px); width:calc(100% - 60px); position:absolute; top:30px; left:30px; border:1px solid var(--color-1); pointer-events:none; box-sizing:border-box;][/div]
  731. [div=height:90px; width:110px; position:absolute; top:23px; left:23px; box-sizing:border-box; border-top:1px solid var(--color-1); border-left:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  732. [div=height:90px; width:110px; position:absolute; top:23px; right:23px; box-sizing:border-box; border-top:1px solid var(--color-1); border-right:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  733. [div=height:90px; width:110px; position:absolute; bottom:23px; left:23px; box-sizing:border-box; border-bottom:1px solid var(--color-1); border-left:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  734. [div=height:90px; width:110px; position:absolute; bottom:23px; right:23px; box-sizing:border-box; border-bottom:1px solid var(--color-1); border-right:1px solid var(--color-1); pointer-events:none; z-index:6;][/div]
  735. [div=height:90px; width:30px; position:absolute; top:23px; right:0; background: var(--bg-color); z-index:5;][/div]
  736. [div=height:90px; width:30px; position:absolute; bottom:23px; right:0; background: var(--bg-color); z-index:5;][/div]
  737. [div=height:90px; width:30px; position:absolute; top:23px; left:0; background: var(--bg-color); z-index:5;][/div]
  738. [div=height:90px; width:30px; position:absolute; bottom:23px; left:0; background: var(--bg-color); z-index:5;][/div]
  739.  
  740. [comment]----signature! do not remove----[/comment]
  741. [bg=transparent; height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute ;z-index:6;opacity:0.3;color: var(--color-1); font-size:9px;text-align:center; top:2px; left:0px; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  742. [/div][/div][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!