API tools faq
paste
Advertisement
ooksie

smitten (day ver.)

ooksie
May 6th, 2022 (edited)
143
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.33 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Lato]header[/font]
  5. [font=Poppins]body[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10.  
  11. /*background colour*/
  12. --bg-1: #f9f9f9;
  13. /*textbox colour*/
  14. --bg-2: #fff;
  15.  
  16. /*main accent colour*/
  17. --color-1: #ef6b6e;
  18. /*secondary accent colour -- slightly lighter/darker?*/
  19. --color-2: #d3474a;
  20.  
  21. /*text colour*/
  22. --t-color: #301717;
  23.  
  24. /*fonts used*/
  25. --header:'Lato', sans-serif;
  26. --body:'Poppins', sans-serif;
  27.  
  28. /*sidebar icon*/
  29. --img-1: url('https://i.imgur.com/SujT8Z7.png');
  30. /*tab 1 image*/
  31. --img-2: url('https://i.imgur.com/YL760bu.png');
  32. /*tab 2 image*/
  33. --img-3: url('https://i.imgur.com/h2dDhv6.png');
  34. /*tab 3 messages contact image*/
  35. --contact: URL('https://data.whicdn.com/images/345576056/original.jpg');
  36.  
  37. /*gallery images*/
  38. --gimg-1: URL('https://64.media.tumblr.com/639425521ffbbb06855604856b5094f7/6992f480f4723e96-e2/s2048x3072/d5132b4342bb96d496a0f594481a3ddb2d8540d0.pnj');
  39. --gimg-2: URL('https://64.media.tumblr.com/b271e167e9d0e80417f44d4c5de27686/6992f480f4723e96-39/s2048x3072/d6a4b68d2765e6124f44a2deb45c4885e3587762.pnj');
  40. --gimg-3: URL('https://64.media.tumblr.com/73d53e2638fd9f2c01c447e4ddda9e4f/6992f480f4723e96-1b/s2048x3072/eafd6a8f77af1f8ee88517f00d36bc04731c65c3.pnj');
  41. --gimg-4: URL('https://64.media.tumblr.com/bdf729e78bccff5dad02c7692ba0ad11/6992f480f4723e96-e9/s2048x3072/d8741b95dd1e33971ba2a7bc2f41b3dd4c2be4a5.pnj');
  42.  
  43. /*music image*/
  44. --music: url('https://i.imgur.com/VLaaZqU.png');
  45.  
  46.  
  47. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden; position:relative; margin:20px 0 30px 0;][border=transparent; height:auto; min-height:440px; width:100%; min-width:340px; max-width:740px; background-color: var(--bg-1); padding:clamp(2px, -80px + 16vw, 10px); padding-bottom:10px; box-sizing:border-box; border-radius:5px; line-height:0; margin:0 auto; display:flex; flex-flow: row wrap; justify-content:center; position:relative; --m: clamp(8px, -50px + 11vw, 10px);]
  48.  
  49. [comment]----left sidebar----[/comment]
  50. [border=transparent; height:100%; width:100%; padding:clamp(5px, -80px + 16vw, 10px); box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:absolute; top:0; left:0; pointer-events:none;][border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:280px; padding:0; display:flex; flex-flow: column nowrap; pointer-events:none; margin: var(--m); background: var(--bg-1);]
  51.  
  52. [comment]----header----[/comment]
  53. [border=transparent; height:132px; width:100%; padding:0; border:1px solid var(--color-1); border-radius:5px; padding:10px 10px 20px 10px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; position:relative; flex-shrink:0;]
  54.  
  55. [comment]----header image----[/comment]
  56. [border=transparent; width:clamp(90px, -90px + 22vw, 105px); flex-shrink:0; padding:0;][border=transparent; padding:0; padding-top:100%; border-radius:5px; background: var(--img-1); background-size:cover;
  57.  
  58. /*edit the following to adjust the cropping of the image*/ background-position:50% 70%;][/border][/border]
  59.  
  60. [comment]----name container----[/comment]
  61. [border=transparent; height:100%; flex:1; min-width:0; padding:0; margin-left:10px; display:flex; flex-flow:column nowrap; justify-content:center; pointer-events:auto;]
  62. [border=transparent; height:auto; max-height:64px; width:auto; padding:0; color: var(--color-1);
  63.  
  64. /*adjust this if the name is too big/small */ font-size:28px;
  65.  
  66. line-height:32px; font-family: var(--header); font-weight:bold; text-transform:uppercase; letter-spacing:1px; text-align:right; overflow:hidden;][comment]
  67.  
  68. ----* * *(nick)name here (max two lines, but looks nicer with one!)----
  69.  
  70. [/comment]name[/border]
  71. [border=transparent; height:auto; width:100%; padding:0 1px 0 0; box-sizing:border-box; color: var(--color-2); font-size:11px; font-family: var(--body); text-align:right; line-height:120%; margin:5px 0 0 0;][comment]
  72.  
  73. ----* * * role here----
  74.  
  75. [/comment]role over here[/border]
  76. [/border]
  77. [comment]----name container end----[/comment]
  78.  
  79. [comment]----tabs cover (if you change any of the button icons, remember to change it in the ---button select---'s as well)----[/comment]
  80. [border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:absolute; bottom:-16px; right:0px; align-items:center; justify-content:center;]
  81.  
  82. [comment]----button----[/comment]
  83. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  84.  
  85. ----* * * button icon here----
  86.  
  87. [/comment][fa]fal fa-sparkles[/fa][/border]
  88.  
  89. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  90.  
  91. [comment]----button----[/comment]
  92. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  93.  
  94. ----* * * button icon here----
  95.  
  96. [/comment][fa]fal fa-moon[/fa][/border]
  97.  
  98. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  99.  
  100. [comment]----button----[/comment]
  101. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  102.  
  103. ----* * * button icon here----
  104.  
  105. [/comment][fa]fal fa-flower-tulip[/fa][/border]
  106.  
  107. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  108.  
  109. [comment]----button----[/comment]
  110. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  111.  
  112. ----* * * button icon here----
  113.  
  114. [/comment][fa]fal fa-heart[/fa][/border]
  115.  
  116. [/border]
  117. [comment]----tabs cover end----[/comment]
  118. [/border]
  119. [comment]----header end----[/comment]
  120.  
  121. [comment]----basics----[/comment]
  122. [border=transparent; height:68%; width:100%; padding:clamp(12px, -30px + 8vw, 18px) 0; box-sizing:border-box; margin-top:22px; border-radius:5px; overflow:hidden; position:relative; pointer-events:auto; background: var(--bg-2);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 2px 0 10px; box-sizing:border-box; --m-b: 12px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-9px;][/border]
  123.  
  124. [comment]----copy this whole thing to get another piece of info----[/comment]
  125. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  126. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  127. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  128. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  129.  
  130. ----* * * info title here----
  131.  
  132. [/comment]full name[/border]
  133.  
  134. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  135.  
  136. ----* * * info contents here----
  137.  
  138. [/comment]answer[/border]
  139. [/border]
  140. [/border]
  141. [comment]----copy me too!----[/comment]
  142.  
  143. [comment]----copy this whole thing to get another piece of info----[/comment]
  144. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  145. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  146. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  147. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  148.  
  149. ----* * * info title here----
  150.  
  151. [/comment]nickname(s)[/border]
  152.  
  153. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  154.  
  155. ----* * * info contents here----
  156.  
  157. [/comment]answer[/border]
  158. [/border]
  159. [/border]
  160. [comment]----copy me too!----[/comment]
  161.  
  162. [comment]----copy this whole thing to get another piece of info----[/comment]
  163. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  164. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  165. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  166. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  167.  
  168. ----* * * info title here----
  169.  
  170. [/comment]age[/border]
  171.  
  172. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  173.  
  174. ----* * * info contents here----
  175.  
  176. [/comment]answer[/border]
  177. [/border]
  178. [/border]
  179. [comment]----copy me too!----[/comment]
  180.  
  181. [comment]----copy this whole thing to get another piece of info----[/comment]
  182. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  183. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  184. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  185. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  186.  
  187. ----* * * info title here----
  188.  
  189. [/comment]gender[/border]
  190.  
  191. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  192.  
  193. ----* * * info contents here----
  194.  
  195. [/comment]answer[/border]
  196. [/border]
  197. [/border]
  198. [comment]----copy me too!----[/comment]
  199.  
  200. [comment]----copy this whole thing to get another piece of info----[/comment]
  201. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  202. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  203. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  204. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  205.  
  206. ----* * * info title here----
  207.  
  208. [/comment]p.o.b.[/border]
  209.  
  210. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  211.  
  212. ----* * * info contents here----
  213.  
  214. [/comment]answer[/border]
  215. [/border]
  216. [/border]
  217. [comment]----copy me too!----[/comment]
  218.  
  219. [comment]----copy this whole thing to get another piece of info----[/comment]
  220. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  221. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  222. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  223. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  224.  
  225. ----* * * info title here----
  226.  
  227. [/comment]d.o.b.[/border]
  228.  
  229. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  230.  
  231. ----* * * info contents here----
  232.  
  233. [/comment]answer[/border]
  234. [/border]
  235. [/border]
  236. [comment]----copy me too!----[/comment]
  237.  
  238. [comment]----copy this whole thing to get another piece of info----[/comment]
  239. [border=transparent; height:auto; width:100%; padding:3px; box-sizing:border-box; display:flex; flex-flow: row nowrap; margin-top: var(--m-b);]
  240. [border=transparent; flex-shrink:0; height:auto; width:35px; color: var(--color-1); padding:0px; font-size:25px; text-align:center; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  241. [border=transparent; height:fit-content; flex-grow:1; margin-left:20px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  242. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  243.  
  244. ----* * * info title here----
  245.  
  246. [/comment]ethnicity[/border]
  247.  
  248. [border=transparent; height:auto; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px;][comment]
  249.  
  250. ----* * * info contents here----
  251.  
  252. [/comment]answer[/border]
  253. [/border]
  254. [/border]
  255. [comment]----copy me too!----[/comment]
  256.  
  257. [/border][/border][/border]
  258. [comment]----basics end----[/comment]
  259. [/border]
  260. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; margin: var(--m);][/border]
  261. [/border]
  262. [comment]----left sidebar end----[/comment]
  263.  
  264.  
  265. [comment]----left tabs----[/comment]
  266. [border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:280px; padding:0; display:flex; flex-flow: column nowrap; align-items:center; margin: var(--m);][border=transparent; height:30px; width:205px; padding:0; overflow:hidden; margin-top:120px;][border=transparent; padding:0; margin:0 -40px 0 -25px; letter-spacing:-30px;][tabs]
  267.  
  268. [comment]----tab 1----[/comment]
  269. [tab=.][border=transparent; height:100%; width:100%; padding:clamp(5px, -80px + 16vw, 10px); box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:absolute; top:0; left:0; pointer-events:none; letter-spacing:0;]
  270. [comment]----button select (change to match button fa icons)----[/comment]
  271. [border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:300px; padding:0; display:flex; flex-flow: column nowrap; pointer-events:none; margin: var(--m);][border=transparent; height:132px; width:100%; padding:10px 10px 20px 10px; border:1px solid transparent; box-sizing:border-box; position:relative; flex-shrink:0;][border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:absolute; bottom:-16.5px; right:0px; align-items:center; justify-content:center;]
  272.  
  273. [comment]----selected button----[/comment]
  274. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  275.  
  276. ----* * * button icon here (change fal to far)----
  277.  
  278. [/comment][fa]far fa-sparkles[/fa][/border]
  279.  
  280. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  281.  
  282. [comment]----filler button----[/comment]
  283. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  284. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  285. [comment]----filler button----[/comment]
  286. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  287. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  288. [comment]----filler button----[/comment]
  289. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  290. [/border][/border][/border]
  291. [comment]----button select end----[/comment]
  292.  
  293.  
  294. [comment]----tab contents----[/comment]
  295. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; margin: var(--m); display:flex; flex-flow:row wrap; pointer-events:auto;]
  296.  
  297. [comment]----left image----[/comment]
  298. [border=transparent; height:auto; min-height:117px; flex:32 0; min-width:90px; background: var(--img-2); border-radius:5px; padding:0px; background-size:cover; margin-right:clamp(0px, -40px + 10vw, 13px);
  299.  
  300. /*edit the following to adjust the cropping of the image*/ background-position:50% 35%;][/border]
  301.  
  302. [comment]----appearance----[/comment]
  303. [border=transparent; height:clamp(300px, -700px + 240vw, 440px); flex:65; min-width:clamp(200px, 800px - 130vw, 320px); max-width:400px; background-color: var(--bg-2); border-radius:5px; padding:14px 0; box-sizing:border-box; overflow:hidden; margin-top:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 4px 0 10px; box-sizing:border-box; --m-a: 11px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-a) * -1);][/border]
  304.  
  305. [comment]----copy this whole thing to get another bit of info----[/comment]
  306. [border=transparent; height:fit-content; width:100%; padding:3px; box-sizing:border-box; margin-top:0px; display:flex; flex-flow: row nowrap; align-items:flex-start; margin-top: var(--m-a);]
  307. [border=transparent; flex-shrink:0; height:auto; width:30px; color: var(--color-1); padding:0px; font-size:20px; text-align:center; line-height:30%; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  308. [border=transparent; height:fit-content; flex-grow:1; margin-left:15px; margin-top:2px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  309. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  310.  
  311. ----* * * info title here----
  312.  
  313. [/comment]hair[/border]
  314. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px; text-align:justify;][comment]
  315.  
  316. ----* * * info contents here----
  317.  
  318. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius, mauris quis vulputate mollis, orci diam consectetur est, at tempor velit ipsum eu justo. In ut suscipit lectus.[/border]
  319. [/border]
  320. [/border]
  321. [comment]----copy me too!----[/comment]
  322.  
  323. [comment]----copy this whole thing to get another bit of info----[/comment]
  324. [border=transparent; height:fit-content; width:100%; padding:3px; box-sizing:border-box; margin-top:0px; display:flex; flex-flow: row nowrap; align-items:flex-start; margin-top: var(--m-a);]
  325. [border=transparent; flex-shrink:0; height:auto; width:30px; color: var(--color-1); padding:0px; font-size:20px; text-align:center; line-height:30%; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  326. [border=transparent; height:fit-content; flex-grow:1; margin-left:15px; margin-top:2px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  327. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  328.  
  329. ----* * * info title here----
  330.  
  331. [/comment]eyes[/border]
  332. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px; text-align:justify;][comment]
  333.  
  334. ----* * * info contents here----
  335.  
  336. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius, mauris quis vulputate mollis, orci diam consectetur est, at tempor velit ipsum eu justo. In ut suscipit lectus, at blandit erat.[/border]
  337. [/border]
  338. [/border]
  339. [comment]----copy me too!----[/comment]
  340.  
  341. [comment]----copy this whole thing to get another bit of info----[/comment]
  342. [border=transparent; height:fit-content; width:100%; padding:3px; box-sizing:border-box; margin-top:0px; display:flex; flex-flow: row nowrap; align-items:flex-start; margin-top: var(--m-a);]
  343. [border=transparent; flex-shrink:0; height:auto; width:30px; color: var(--color-1); padding:0px; font-size:20px; text-align:center; line-height:30%; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  344. [border=transparent; height:fit-content; flex-grow:1; margin-left:15px; margin-top:2px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  345. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  346.  
  347. ----* * * info title here----
  348.  
  349. [/comment]height[/border]
  350. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px; text-align:justify;][comment]
  351.  
  352. ----* * * info contents here----
  353.  
  354. [/comment]Lorem ipsum[/border]
  355. [/border]
  356. [/border]
  357. [comment]----copy me too!----[/comment]
  358.  
  359. [comment]----copy this whole thing to get another bit of info----[/comment]
  360. [border=transparent; height:fit-content; width:100%; padding:3px; box-sizing:border-box; margin-top:0px; display:flex; flex-flow: row nowrap; align-items:flex-start; margin-top: var(--m-a);]
  361. [border=transparent; flex-shrink:0; height:auto; width:30px; color: var(--color-1); padding:0px; font-size:20px; text-align:center; line-height:30%; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  362. [border=transparent; height:fit-content; flex-grow:1; margin-left:15px; margin-top:2px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  363. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  364.  
  365. ----* * * info title here----
  366.  
  367. [/comment]body mods.[/border]
  368. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px; text-align:justify;][comment]
  369.  
  370. ----* * * info contents here----
  371.  
  372. [/comment]Lorem ipsum[/border]
  373. [/border]
  374. [/border]
  375. [comment]----copy me too!----[/comment]
  376.  
  377.  
  378. [comment]----copy this whole thing to get another bit of info----[/comment]
  379. [border=transparent; height:fit-content; width:100%; padding:3px; box-sizing:border-box; margin-top:0px; display:flex; flex-flow: row nowrap; align-items:flex-start; margin-top: var(--m-a);]
  380. [border=transparent; flex-shrink:0; height:auto; width:30px; color: var(--color-1); padding:0px; font-size:20px; text-align:center; line-height:30%; margin-top:3px;][fa]fas fa-angle-right[/fa][/border]
  381. [border=transparent; height:fit-content; flex-grow:1; margin-left:15px; margin-top:2px; padding:0px; display:flex; flex-flow: row wrap; font-size:12px; font-family: var(--body);]
  382. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold;][comment]
  383.  
  384. ----* * * info title here----
  385.  
  386. [/comment]faceclaim[/border]
  387. [border=transparent; height:fit-content; width:100%; color: var(--t-color); padding:0px; line-height:15px; margin-top:3px; text-align:justify;][comment]
  388.  
  389. ----* * * info contents here----
  390.  
  391. [/comment]Lorem ipsum[/border]
  392. [/border]
  393. [/border]
  394. [comment]----copy me too!----[/comment]
  395.  
  396. [/border][/border][/border]
  397. [comment]----appearance end----[/comment]
  398. [/border]
  399. [comment]----tab contents end----[/comment]
  400. [/border][/tab]
  401. [comment]----tab 1 end----[/comment]
  402.  
  403.  
  404. [comment]----tab 2----[/comment]
  405. [tab=.][border=transparent; height:100%; width:100%; padding:clamp(5px, -80px + 16vw, 10px); box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:absolute; top:0; left:0; pointer-events:none; letter-spacing:0;]
  406. [comment]----button select (change to match button fa icons)----[/comment]
  407. [border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:300px; padding:0; display:flex; flex-flow: column nowrap; pointer-events:none; margin: var(--m);][border=transparent; height:132px; width:100%; padding:10px 10px 20px 10px; border:1px solid transparent; box-sizing:border-box; position:relative; flex-shrink:0;][border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:absolute; bottom:-16.5px; right:0px; align-items:center; justify-content:center;]
  408. [comment]----filler button----[/comment]
  409. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  410. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  411.  
  412. [comment]----selected button----[/comment]
  413. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  414.  
  415. ----* * * button icon here (change fal to far)----
  416.  
  417. [/comment][fa]far fa-moon[/fa][/border]
  418.  
  419. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  420.  
  421. [comment]----filler button----[/comment]
  422. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  423. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  424. [comment]----filler button----[/comment]
  425. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  426. [/border][/border][/border]
  427. [comment]----button select end----[/comment]
  428.  
  429.  
  430. [comment]----tab contents----[/comment]
  431. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; margin: var(--m); pointer-events:auto; display:flex; flex-flow:column nowrap;]
  432. [comment]----personality----[/comment]
  433. [border=transparent; height:67%; width:100%; background: var(--bg-2); border-radius:5px; padding:15px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 7px 0 16px; box-sizing:border-box; --m-p: 5px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-p) * -1);][/border]
  434.  
  435. [comment]----copy this whole thing to make another personality section----[/comment]
  436. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  437. [comment]----section title----[/comment]
  438. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  439. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  440.  
  441. ----* * * personality section title here----
  442.  
  443. [/comment]virtues[/border]
  444. [/border]
  445. [comment]----section title end----[/comment]
  446.  
  447. [comment]----section contents----[/comment]
  448. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;][comment]
  449.  
  450. ----* * * text starts here----
  451.  
  452. [/comment]virtue, virtue, virtue.
  453. [/border]
  454. [/border]
  455. [comment]----copy me too!----[/comment]
  456.  
  457. [comment]----copy this whole thing to make another personality section----[/comment]
  458. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  459. [comment]----section title----[/comment]
  460. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  461. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  462.  
  463. ----* * * personality section title here----
  464.  
  465. [/comment]vices[/border]
  466. [/border]
  467. [comment]----section title end----[/comment]
  468.  
  469. [comment]----section contents----[/comment]
  470. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;][comment]
  471.  
  472. ----* * * text starts here----
  473.  
  474. [/comment]vice, vice, vice.
  475. [/border]
  476. [/border]
  477. [comment]----copy me too!----[/comment]
  478.  
  479. [comment]----copy this whole thing to make another personality section----[/comment]
  480. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  481. [comment]----section title----[/comment]
  482. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  483. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  484.  
  485. ----* * * personality section title here----
  486.  
  487. [/comment]personality[/border]
  488. [/border]
  489. [comment]----section title end----[/comment]
  490.  
  491. [comment]----section contents----[/comment]
  492. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;][comment]
  493.  
  494. ----* * * text starts here----
  495.  
  496. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius, mauris quis vulputate mollis, orci diam consectetur est, at tempor velit ipsum eu justo. In ut suscipit lectus, at blandit erat. Donec id egestas enim. Nunc in justo at nisl sagittis efficitur sed non erat. Praesent vel orci ut turpis pharetra vestibulum. Sed pretium elementum neque, sed egestas nibh convallis at. Aliquam accumsan mauris arcu, sit amet posuere arcu malesuada vel. Cras fringilla congue convallis. Mauris et dui rhoncus, molestie dui eu, eleifend tortor. Maecenas ultricies diam quis tortor sollicitudin, eu semper lacus posuere. Duis feugiat sodales mi. Maecenas ut metus pellentesque, sollicitudin est et, semper lorem. Aenean justo lacus, tempus nec efficitur at, auctor in libero. Nulla efficitur sem sit amet dapibus vulputate.
  497. [/border]
  498. [/border]
  499. [comment]----copy me too!----[/comment]
  500.  
  501. [comment]----copy this whole thing to make another personality section (long list)----[/comment]
  502. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  503. [comment]----section title----[/comment]
  504. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  505. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  506.  
  507. ----* * * personality section title here----
  508.  
  509. [/comment]interests[/border]
  510. [/border]
  511. [comment]----section title end----[/comment]
  512.  
  513. [comment]----section contents----[/comment]
  514. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; font-size:11px; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]
  515.  
  516. [comment]----copy this whole thing to get a list item----[/comment]
  517. [border=transparent; height:auto; width:100%; padding:0px; display:flex; flex-flow: row nowrap; margin-top:8px;]
  518. [border=transparent; height:auto; width:auto; padding:0px; font-weight:bold; line-height:14px; flex-shrink:0; color: var(--color-2);][comment]
  519.  
  520. ----* * * item title here----
  521.  
  522. [/comment]interest 1[/border]
  523. [border=transparent; height:auto; flex-grow:1; margin-left:15px; padding:0px; line-height:15px;][comment]
  524.  
  525. ----* * * item contents here----
  526.  
  527. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/border]
  528. [/border]
  529. [comment]----copy me too!----[/comment]
  530.  
  531. [comment]----copy this whole thing to get a list item----[/comment]
  532. [border=transparent; height:auto; width:100%; padding:0px; display:flex; flex-flow: row nowrap; margin-top:8px;]
  533. [border=transparent; height:auto; width:auto; padding:0px; font-weight:bold; line-height:14px; flex-shrink:0; color: var(--color-2);][comment]
  534.  
  535. ----* * * item title here----
  536.  
  537. [/comment]interest 2[/border]
  538. [border=transparent; height:auto; flex-grow:1; margin-left:15px; padding:0px; line-height:15px;][comment]
  539.  
  540. ----* * * item contents here----
  541.  
  542. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius, mauris quis vulputate mollis, orci diam consectetur est, at tempor velit ipsum eu justo.[/border]
  543. [/border]
  544. [comment]----copy me too!----[/comment]
  545.  
  546. [comment]----copy this whole thing to get a list item----[/comment]
  547. [border=transparent; height:auto; width:100%; padding:0px; display:flex; flex-flow: row nowrap; margin-top:8px;]
  548. [border=transparent; height:auto; width:auto; padding:0px; font-weight:bold; line-height:14px; flex-shrink:0; color: var(--color-2);][comment]
  549.  
  550. ----* * * item title here----
  551.  
  552. [/comment]interest 3[/border]
  553. [border=transparent; height:auto; flex-grow:1; margin-left:15px; padding:0px; line-height:15px;][comment]
  554.  
  555. ----* * * item contents here----
  556.  
  557. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius, mauris quis vulputate mollis, orci diam consectetur est, at tempor velit ipsum eu justo. In ut suscipit lectus, at blandit erat.[/border]
  558. [/border]
  559. [comment]----copy me too!----[/comment]
  560.  
  561. [/border]
  562. [/border]
  563. [comment]----copy me too!----[/comment]
  564.  
  565.  
  566. [comment]----copy this whole thing to make another personality section----[/comment]
  567. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  568. [comment]----section title----[/comment]
  569. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  570. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  571.  
  572. ----* * * personality section title here----
  573.  
  574. [/comment]likes[/border]
  575. [/border]
  576. [comment]----section title end----[/comment]
  577.  
  578. [comment]----section contents----[/comment]
  579. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;][comment]
  580.  
  581. ----* * * text starts here----
  582.  
  583. [/comment]like, like, like, like.
  584. [/border]
  585. [/border]
  586. [comment]----copy me too!----[/comment]
  587.  
  588. [comment]----copy this whole thing to make another personality section----[/comment]
  589. [border=transparent; height:auto; width:100%; padding:0; color: var(--t-color); font-family: var(--body); margin-top: var(--m-p);]
  590. [comment]----section title----[/comment]
  591. [border=transparent; height:auto; width:100%; padding:2px 0px; background: var(--bg-2); display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:-0.3px;][border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px; flex-shrink:0;][fa]fas fa-angle-right[/fa][/border]
  592. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:16px;][comment]
  593.  
  594. ----* * * personality section title here----
  595.  
  596. [/comment]dislikes[/border]
  597. [/border]
  598. [comment]----section title end----[/comment]
  599.  
  600. [comment]----section contents----[/comment]
  601. [border=transparent; height:fit-content; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:1px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;][comment]
  602.  
  603. ----* * * text starts here----
  604.  
  605. [/comment]dislike, dislike, dislike, dislike.
  606. [/border]
  607. [/border]
  608. [comment]----copy me too!----[/comment]
  609.  
  610. [/border][/border][/border]
  611. [comment]----personality end----[/comment]
  612.  
  613.  
  614. [comment]----personality image----[/comment]
  615. [border=transparent; flex:1; margin-top:13px; width:100%; padding:0; background: var(--img-3); background-size:cover; border-radius:5px;
  616.  
  617. /*edit the following to adjust the cropping of the image*/ background-position:50% 25%;][/border]
  618. [/border]
  619. [comment]----tab contents end----[/comment]
  620. [/border][/tab]
  621. [comment]----tab 2 end----[/comment]
  622.  
  623.  
  624. [comment]----tab 3----[/comment]
  625. [tab=.][border=transparent; height:100%; width:100%; padding:clamp(5px, -80px + 16vw, 10px); box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:absolute; top:0; left:0; pointer-events:none; letter-spacing:0;]
  626. [comment]----button select (change to match button fa icons)----[/comment]
  627. [border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:300px; padding:0; display:flex; flex-flow: column nowrap; pointer-events:none; margin: var(--m);][border=transparent; height:132px; width:100%; padding:10px 10px 20px 10px; border:1px solid transparent; box-sizing:border-box; position:relative; flex-shrink:0;][border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:absolute; bottom:-16.5px; right:0px; align-items:center; justify-content:center;]
  628. [comment]----filler button----[/comment]
  629. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  630. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  631. [comment]----filler button----[/comment]
  632. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  633. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  634.  
  635. [comment]----selected button----[/comment]
  636. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  637.  
  638. ----* * * button icon here (change fal to far)----
  639.  
  640. [/comment][fa]far fa-flower-tulip[/fa][/border]
  641.  
  642. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  643.  
  644. [comment]----filler button----[/comment]
  645. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  646. [/border][/border][/border]
  647. [comment]----button select end----[/comment]
  648.  
  649.  
  650. [comment]----tab contents----[/comment]
  651. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; box-sizing:border-box; margin: var(--m);][border=transparent; height:100%; width:100%; padding:10px; background:var(--bg-2); box-sizing:border-box; z-index:7; display:flex; flex-flow: column nowrap; align-items:center; border-radius:5px; pointer-events:auto;]
  652.  
  653. [comment]----messages----[/comment]
  654. [border=transparent; height:32%; width:100%; padding:5px 10px; box-sizing:border-box; display:flex; flex-flow:row-reverse nowrap; flex-shrink:0;]
  655.  
  656. [comment]----contact----[/comment]
  657. [border=transparent; height:100%; flex:30; min-width:90px; padding:5px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  658.  
  659. [comment]----contact image----[/comment]
  660. [border=transparent; height:58px; width:58px; padding:3px; border:1px solid var(--color-1); box-sizing:border-box; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--contact) 50% 50%; background-size:cover; border-radius:50%;][/border][/border]
  661.  
  662. [comment]----contact name----[/comment]
  663. [border=transparent; height:auto; max-height:15px; width:auto; max-width:90%; padding:0; margin-top:10px; color: var(--color-1); font-weight:bold; font-family: var(--body); font-size:14px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:0.5px;][comment]
  664.  
  665. ----* * * contact name here----
  666.  
  667. [/comment]contact[/border]
  668.  
  669. [comment]----contact status----[/comment]
  670. [border=transparent; height:auto; max-height:30px; width:auto; max-width:92%; padding:0; margin-top:4px; color: var(--color-2); font-family: var(--body); font-size:9px; line-height:11px; overflow:hidden; text-align:center;][comment]
  671.  
  672. ----* * * status here----
  673.  
  674. [/comment]this is my status[/border]
  675.  
  676. [/border]
  677. [comment]----contact end----[/comment]
  678.  
  679. [comment]----messages contents----[/comment]
  680. [border=transparent; height:100%; flex:70; padding:0; margin-right:3px; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; --m-m:10px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:calc(var(--m-m) * -1);][/border]
  681.  
  682. [comment]----copy this whole thing for another sent message----[/comment]
  683. [border=transparent; height:auto; width:auto; max-width:65%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-end; justify-content:flex-end; margin: var(--m-m) 0 0 auto;][border=transparent; height:auto; width:auto; padding:7px 10px; box-sizing:border-box; background: var(--color-2); border-radius:5px; color: var(--t-color); font-family: var(--body); font-size:11px; line-height:13px; margin][comment]
  684.  
  685. ----* * * text here----
  686.  
  687. [/comment]sent message here[/border]
  688. [border=transparent; height:0; width:0; padding:0; border-left:10px solid var(--color-2); border-top:6px solid transparent; border-bottom:6px solid transparent; flex-shrink:0; margin-bottom:8px; border-radius:0 5px 5px 0; margin-left:-1px;][/border]
  689. [/border]
  690. [comment]----copy me too!----[/comment]
  691.  
  692. [comment]----copy this whole thing for another received message----[/comment]
  693. [border=transparent; height:auto; width:auto; max-width:65%; padding:0; display:flex; flex-flow:row-reverse nowrap; align-items:flex-end; justify-content:flex-end; margin: var(--m-m) auto 0 0;][border=transparent; height:auto; width:auto; padding:7px 10px; box-sizing:border-box; background: var(--color-1); border-radius:5px; color: var(--bg-2); font-family: var(--body); font-size:11px; line-height:13px;][comment]
  694.  
  695. ----* * * text here----
  696.  
  697. [/comment]received message here[/border]
  698. [border=transparent; height:0; width:0; padding:0; border-right:10px solid var(--color-1); border-top:6px solid transparent; border-bottom:6px solid transparent; flex-shrink:0; margin-bottom:8px; border-radius:5px 0 0 5px; margin-right:-1px;][/border]
  699. [/border]
  700. [comment]----copy me too!----[/comment]
  701.  
  702. [comment]----copy this whole thing for another sent image----[/comment]
  703. [border=transparent; height:auto; width:auto; max-width:65%; padding:0; display:flex; flex-flow:row nowrap; align-items:flex-end; justify-content:flex-end; margin: var(--m-m) 0 0 auto;][border=transparent; height:auto; width:auto; padding:8px 10px; box-sizing:border-box; background: var(--color-2); border-radius:5px;][border=transparent; height:53px; width:53px; padding:0;
  704.  
  705. /*put in image url here*/ background: URL('xx');
  706.  
  707. background-size:contain; background-repeat:no-repeat;][/border][/border]
  708. [border=transparent; height:0; width:0; padding:0; border-left:10px solid var(--color-2); border-top:6px solid transparent; border-bottom:6px solid transparent; flex-shrink:0; margin-bottom:8px; border-radius:0 5px 5px 0; margin-left:-1px;][/border]
  709. [/border]
  710. [comment]----copy me too!----[/comment]
  711.  
  712. [comment]----copy this for a call notification----[/comment]
  713. [border=transparent; height:auto; max-height:15px; width:85%; padding:3px 3px 2px 3px; box-sizing:border-box; border-top:1px solid var(--color-1); border-bottom:1px solid var(--color-1); margin:12px auto 2px auto; color: var(--color-1); font-size:9px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: var(--body); text-align:center; opacity:0.5;][comment]
  714.  
  715. ----* * * call notification----
  716.  
  717. [/comment]Call lasted x:xx.[/border]
  718. [comment]----copy me too!----[/comment]
  719.  
  720. [/border][/border][/border]
  721. [comment]----messages contents end----[/comment]
  722. [/border]
  723. [comment]----messages end----[/comment]
  724.  
  725. [comment]----history----[/comment]
  726. [border=transparent; height:78%; width:100%; margin-top:13px; padding:2px 0 5px 0; box-sizing:border-box; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0px; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 2px 0 10px; box-sizing:border-box; color: var(--t-color); font-family: var(--body);]
  727.  
  728. [comment]----title----[/comment]
  729. [border=transparent; background-color: var(--bg-2); height:auto; width:100%; padding:0 0px 4px 0px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; align-content:center; position:sticky; top:-0.3px;]
  730. [border=transparent; height:auto; width:auto; font-size:17px; color: var(--color-1); padding:0px;][fa]fas fa-angle-right[/fa][/border]
  731. [border=transparent; height:auto; flex-grow:1; padding:0px; margin-left:15px; color: var(--t-color); font-weight:bold; font-size:13px; line-height:15px;]history[/border]
  732. [/border]
  733. [comment]----title end----[/comment]
  734.  
  735. [comment]----contents----[/comment]
  736. [border=transparent; height:auto; width: calc(100% - 3px); margin:4px 0 0 3px; border-left:1px dotted var(--color-2); padding:0px 5px 5px 15px; box-sizing:border-box; line-height:15px; font-size:11px; text-align:justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin ante nec justo elementum, at hendrerit diam aliquet. Nunc a bibendum lorem. Vivamus in erat non arcu imperdiet tristique. Sed iaculis rutrum molestie. Pellentesque et turpis ac enim dignissim malesuada. Nam ut purus dictum, ornare orci id, maximus neque. Donec eget ante commodo turpis cursus dignissim. Aliquam erat volutpat. Integer accumsan urna sed orci pulvinar efficitur. Ut et odio venenatis, ultrices ligula efficitur, molestie diam. Proin et suscipit nisl. Praesent egestas augue purus, eu tristique nisl finibus sit amet. In a finibus tortor, eu congue tellus. Suspendisse potenti. Proin faucibus pellentesque vestibulum. Morbi convallis sollicitudin ante vel congue.
  737.  
  738. Integer sem dolor, efficitur a quam id, semper egestas est. Integer eget pretium libero, eget tincidunt eros. Nam in felis sit amet orci porta pellentesque a vitae ligula. Praesent nec velit sed tellus semper maximus. Aenean felis erat, faucibus id viverra rhoncus, dapibus sed mi. Praesent vehicula vel lorem id tristique. Ut quis quam nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor est ut dolor efficitur tincidunt. Cras finibus purus ultricies imperdiet vestibulum.
  739. [/border]
  740. [comment]----contents end----[/comment]
  741. [/border]
  742. [/border][/border]
  743. [comment]----history end----[/comment]
  744.  
  745.  
  746. [/border][/border]
  747. [comment]----tab contents end----[/comment]
  748. [/border][/tab]
  749. [comment]----tab 3 end----[/comment]
  750.  
  751.  
  752. [comment]----tab 4----[/comment]
  753. [tab=.][border=transparent; height:100%; width:100%; padding:clamp(5px, -80px + 16vw, 10px); box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; position:absolute; top:0; left:0; pointer-events:none; letter-spacing:0;]
  754. [comment]----button select (change to match button fa icons)----[/comment]
  755. [border=transparent; height:clamp(320px, -200px + 80vw, 440px); flex:39; min-width:220px; max-width:300px; padding:0; display:flex; flex-flow: column nowrap; pointer-events:none; margin: var(--m);][border=transparent; height:132px; width:100%; padding:10px 10px 20px 10px; border:1px solid transparent; box-sizing:border-box; position:relative; flex-shrink:0;][border=transparent; height:30px; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:absolute; bottom:-16.5px; right:0px; align-items:center; justify-content:center;]
  756. [comment]----filler button----[/comment]
  757. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  758. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  759. [comment]----filler button----[/comment]
  760. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  761. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  762. [comment]----filler button----[/comment]
  763. [border=transparent; height:15px; width:30px; padding:0; flex-shrink:0;][/border]
  764. [border=transparent; align-self: flex-end; height:13px; width:31px; background-color: var(--bg-color); pointer-events:auto; padding:0px;][/border]
  765.  
  766. [comment]----selected button----[/comment]
  767. [border=transparent; height:auto; width:30px; padding:3px 7px; box-sizing:border-box; color: var(--color-1); font-size:15px; line-height:100%; background: var(--bg-1); text-align:center;][comment]
  768.  
  769. ----* * * button icon here (change fal to far)----
  770.  
  771. [/comment][fa]far fa-heart[/fa][/border]
  772. [/border][/border][/border]
  773. [comment]----button select end----[/comment]
  774.  
  775.  
  776. [comment]----tab contents----[/comment]
  777. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; margin: var(--m); pointer-events:auto;][border=transparent; height:100%; width:100%; padding:12px 10px 12px 12px; box-sizing:border-box; background: var(--bg-2); border-radius:5px; display:flex; flex-flow:column nowrap;]
  778.  
  779. [comment]----gallery----[/comment]
  780. [border=transparent; height:136px; width:100%; padding:0; position:relative; flex-shrink:0;][border=transparent; height:126px; width:100%; padding:0 5px 0 3px; box-sizing:border-box; overflow:hidden;][border=transparent; height:143px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden;][border=transparent; height:126px; width:auto; padding:3px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; --m-g: 10px;][border=transparent; height:100%; width:0; padding:0; margin-right: calc(var(--m-g) * -1);][/border]
  781.  
  782. [comment]----copy this whole thing to get another gallery image----[/comment]
  783. [border=transparent; height:120px; width:120px; padding:0px; flex-shrink:0; border-radius:5px; background: var(--gimg-1); background-size:cover; margin-left: var(--m-g);
  784.  
  785. /*edit the following to adjust the cropping of the image*/ background-position:50% 15%;][/border]
  786. [comment]----copy me too!----[/comment]
  787.  
  788. [comment]----copy this whole thing to get another gallery image----[/comment]
  789. [border=transparent; height:120px; width:120px; padding:0px; flex-shrink:0; border-radius:5px; background: var(--gimg-2); background-size:cover; margin-left: var(--m-g);
  790.  
  791. /*edit the following to adjust the cropping of the image*/ background-position:50% 25%;][/border]
  792. [comment]----copy me too!----[/comment]
  793.  
  794. [comment]----copy this whole thing to get another gallery image----[/comment]
  795. [border=transparent; height:120px; width:120px; padding:0px; flex-shrink:0; border-radius:5px; background: var(--gimg-3); background-size:cover; margin-left: var(--m-g);
  796.  
  797. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;][/border]
  798. [comment]----copy me too!----[/comment]
  799.  
  800. [comment]----copy this whole thing to get another gallery image----[/comment]
  801. [border=transparent; height:120px; width:120px; padding:0px; flex-shrink:0; border-radius:5px; background: var(--gimg-4); background-size:cover; margin-left: var(--m-g);
  802.  
  803. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  804. [comment]----copy me too!----[/comment]
  805.  
  806. [/border][/border][/border]
  807. [border=transparent; height:10px; width:auto; padding:0; position:absolute; bottom:0; right:0px; color: var(--color-1); font-size:9px; display:flex; flex-flow:row nowrap; align-items:flex-end; line-height:9px; opacity:0.8;][border=transparent; height:8px; width:auto; padding:0; font-size:10px;][fa]fas fa-angle-right[/fa][/border][border=transparent; height:auto; width:auto; padding:0; margin:-2px 0 0 6px; text-transform:uppercase; font-family: var(--header); color: var(--color-2);]scroll[/border][/border]
  808. [/border]
  809. [comment]----gallery end----[/comment]
  810.  
  811.  
  812. [comment]----misc----[/comment]
  813. [border=transparent; height:47%; width:100%; padding:0; margin:10px 0 11px 0; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 3px; box-sizing:border-box; --m-e: 13px;][border=transparent; height:0; width:100%; padding:0; margin-bottom: calc(var(--m-e) * -1);][/border]
  814.  
  815. [comment]----copy this whole thing to get another misc info----[/comment]
  816. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-e); display:flex; flex-flow:row nowrap;]
  817. [border=transparent; flex-shrink:0; height:auto; width:25px; color: var(--color-1); padding:0px; font-size:16px; text-align:center; line-height:13px;][fa]fas fa-angle-right[/fa][/border]
  818. [border=transparent; height:auto; flex:1; padding:0; margin:2px 0 0 5px; box-sizing:border-box; font-size:11px; font-family: var(--body); display:flex; flex-flow:row nowrap;]
  819. [border=transparent; height:auto; width:auto; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold; flex-shrink:0;][comment]
  820.  
  821. ----* * * info title here----
  822.  
  823. [/comment]family[/border]
  824.  
  825. [border=transparent; height:auto; flex-grow:1; margin-left:15px; color: var(--t-color); padding:0px; line-height:15px; text-align:justify;][comment]
  826.  
  827. ----* * * info contents here----
  828.  
  829. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  830. [/border]
  831. [/border]
  832. [/border]
  833. [comment]----copy me too!----[/comment]
  834.  
  835. [comment]----copy this whole thing to get another misc info----[/comment]
  836. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-e); display:flex; flex-flow:row nowrap;]
  837. [border=transparent; flex-shrink:0; height:auto; width:25px; color: var(--color-1); padding:0px; font-size:16px; text-align:center; line-height:13px;][fa]fas fa-angle-right[/fa][/border]
  838. [border=transparent; height:auto; flex:1; padding:0; margin:2px 0 0 5px; box-sizing:border-box; font-size:11px; font-family: var(--body); display:flex; flex-flow:row nowrap;]
  839. [border=transparent; height:auto; width:auto; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold; flex-shrink:0;][comment]
  840.  
  841. ----* * * info title here----
  842.  
  843. [/comment]residence[/border]
  844.  
  845. [border=transparent; height:auto; flex-grow:1; margin-left:15px; color: var(--t-color); padding:0px; line-height:15px; text-align:justify;][comment]
  846.  
  847. ----* * * info contents here----
  848.  
  849. [/comment]Lorem ipsum
  850. [/border]
  851. [/border]
  852. [/border]
  853. [comment]----copy me too!----[/comment]
  854.  
  855. [comment]----copy this whole thing to get another misc info----[/comment]
  856. [border=transparent; height:auto; width:100%; padding:0; margin-top: var(--m-e); display:flex; flex-flow:row nowrap;]
  857. [border=transparent; flex-shrink:0; height:auto; width:25px; color: var(--color-1); padding:0px; font-size:16px; text-align:center; line-height:13px;][fa]fas fa-angle-right[/fa][/border]
  858. [border=transparent; height:auto; flex:1; padding:0; margin:2px 0 0 5px; box-sizing:border-box; font-size:11px; font-family: var(--body); display:flex; flex-flow:row nowrap;]
  859. [border=transparent; height:auto; width:auto; color: var(--t-color); padding:0px; line-height:15px; font-weight:bold; flex-shrink:0;][comment]
  860.  
  861. ----* * * info title here----
  862.  
  863. [/comment]extra facts[/border]
  864.  
  865. [border=transparent; height:auto; flex-grow:1; margin-left:15px; color: var(--t-color); padding:0px; line-height:15px; text-align:justify;][comment]
  866.  
  867. ----* * * info contents here----
  868.  
  869. [/comment]✿ fact 1
  870. ✿ fact 2
  871. [/border]
  872. [/border]
  873. [/border]
  874. [comment]----copy me too!----[/comment]
  875.  
  876. [/border][/border][/border]
  877. [comment]----misc end----[/comment]
  878.  
  879.  
  880. [comment]----music player----[/comment]
  881. [border=transparent; height:90px; width:100%; padding:0 clamp(15px, -40px + 8vw, 30px); box-sizing:border-box; position:relative; display:flex; flex-flow:row nowrap; margin-top:3px; flex-shrink:0; display:flex; flex-flow:row nowrap;][border=transparent; height:75px; width:100%; border-top:1.3px solid var(--color-1); padding:0; box-sizing:border-box; position:absolute; bottom:0; left:0;][/border]
  882.  
  883. [comment]----play button----[/comment]
  884. [border=transparent; width:clamp(80px, -50px + 16vw, 90px); flex-shrink:0; padding:0;][border=transparent; padding:0; padding-top:calc(100% - 2px); border-radius:50%; border:1px solid var(--color-1); position:relative; box-sizing:border-box; background: var(--bg-2);]
  885. [comment]----music image----[/comment]
  886. [border=transparent; height:100%; width:100%; padding:0; border:4px solid var(--bg-2); box-sizing:border-box; border-radius:50%; position:absolute; top:0; left:0; z-index:2; display:flex; align-items:center; justify-content:center; background: var(--music) 50% 50%; background-color: var(--bg-2); background-size:cover; animation:fa-spin 20s linear infinite; backface-visibility: hidden; pointer-events:none;][border=transparent; animation:fa-spin 20s linear infinite reverse; height:33px; width:33px; background-color: var(--bg-2); opacity:0.7; padding:1px 0 0 0; box-sizing:border-box; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--t-color); font-size:14px;][fa]fas fa-play[/fa][/border][/border]
  887.  
  888. [comment]----actual media player----[/comment]
  889. [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;][border=transparent; height:32px; width:32px; padding:0; overflow:hidden; position:relative;]
  890.  
  891. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  892. [border=transparent; height:80px; width:180px; padding:0; margin-top:-16px; margin-left:-14px; position:absolute; top:0; left:0;]
  893. [media=soundcloud]soundcloud link here[/media]
  894. [/border]
  895.  
  896. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  897. [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;]
  898. [media=googledrive]google file code here[/MEDIA]
  899. [/border]
  900.  
  901. [/border][/border]
  902. [comment]----actual media player end----[/comment]
  903. [/border][/border]
  904. [comment]----play button end----[/comment]
  905.  
  906. [comment]----music info----[/comment]
  907. [border=transparent; height:75px; flex:1; padding:11px 0 9px 0; box-sizing:border-box; margin-left:15px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; margin-top:auto;]
  908. [border=transparent; height:auto; max-height:15px; width:100%; color: var(--t-color); font-weight:bold; text-transform:uppercase; letter-spacing:0.5px; font-size:15px; text-align:center; padding:0px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: var(--header);][comment]
  909.  
  910. ----* * * song title here----
  911.  
  912. [/comment]title[/border]
  913. [border=transparent; height:auto; width:85%; color: var(--color-2); font-family: var(--body); text-transform:uppercase; text-align:center; margin-top:6px; font-size:9px; letter-spacing:1px; padding:0px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  914.  
  915. ----* * * song artist here----
  916.  
  917. [/comment]artist[/border]
  918.  
  919. [comment]----music progress bar----[/comment]
  920. [border=transparent; height:6px; width:clamp(140px, 80%, 220px); padding:0; background: var(--bg-1); border-radius:8px; overflow:hidden; flex-shrink:0; margin-top:12px; display:flex;][border=transparent; height:100%; padding:0; background: var(--color-1);
  921.  
  922. /*adjust this value to change progress of song!*/ width:70%;
  923.  
  924. ][/border][border=transparent; flex:1; padding:0; border:1px solid var(--color-2); border-radius:0 8px 8px 0; box-sizing:border-box; opacity:0.15;][/border][/border]
  925. [/border]
  926. [comment]----music info end----[/comment]
  927. [/border]
  928. [comment]----music player end----[/comment]
  929. [/border][/border]
  930. [comment]----tab contents end----[/comment]
  931. [/border][/tab]
  932. [comment]----tab 4 end----[/comment]
  933.  
  934.  
  935. [/tabs][/border][/border][/border]
  936. [comment]----left tabs end----[/comment]
  937.  
  938.  
  939. [comment]----right filler (ignore)----[/comment]
  940. [border=transparent; height:440px; flex:61; min-width:300px; padding:0; margin: var(--m);][/border]
  941.  
  942. [comment]----signature! do not remove----[/comment]
  943. [bg=transparent; height:10px;width:fit-content; position:absolute ;z-index:6;opacity:0.5;color: var(--color-1); font-size:10px;text-align:center; top:9px; right:5px;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  944. [/border][/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!