Advertisement
hanthesunbeam1

cotton candy {cs}

Oct 28th, 2020
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 85.66 KB | None | 0 0
  1. [comment]
  2.  
  3. --okay! this is a loooong one. lots of colors. the details are the different app/main colors. the icons are the lighter versions of that color. the different pictures are labeled a-d for the 4 different tabs. there is a 12 picture gallery (or more if you really wanted to be extra, no shame here i would LOL).[/comment][border=0; box-sizing: border-box; height: auto; width: 100%; margin: auto; line-height: 0px; position: relative; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat993.cur), auto!important; color: #000;
  4.  
  5. --covertext: #fff;
  6. --topcolor: #EAEEF2;
  7. --detail: #c4cbf9;
  8. --detail2: #f1b4d5;
  9. --detail3: #9AEAEF;
  10. --detail4: #FAD195;
  11. --icon: #DFE2F8;
  12. --icon2: #F7D9E9;
  13. --icon3: #CFF5F7;
  14. --icon4: #FDE9CD;
  15. --border: #3E404D;
  16. --header: #fff;
  17. --text: #000;
  18. --contact: #DEDFDF;
  19. --historyheader: #D7D7D7;
  20. --tabbg: rgb( 255, 255, 255, 0.9);
  21. --notifbg: rgb( 255, 255, 255, 0.8);
  22. --homescreenpic: url(https://i.pinimg.com/564x/1c/44/37/1c4437ef1c7141e013eadee7f1b33163.jpg);
  23. --songcoverart: url(https://i.pinimg.com/600x315/f0/06/76/f0067697a8b9b3a3f574d32d2ec46ad6.jpg);
  24. --apic: url(https://i.pinimg.com/474x/9a/0d/ce/9a0dce92a3b066a84e020d267d1bb7e5.jpg);
  25. --apic2: url(https://i.pinimg.com/474x/a1/a3/9c/a1a39c961599a24e3e4348763e2e40db.jpg);
  26. --ameme: url(https://i.pinimg.com/474x/b2/06/81/b206816ad1f72a3bfb3001ceff35af50.jpg);
  27. --bpfp: url(https://i.pinimg.com/474x/99/9c/cb/999ccb00ef3ad5581c20d1cbb97046a7.jpg);
  28. --bpic: url(https://i.pinimg.com/474x/f7/02/fe/f702fe46b4e38c570a240ba0ce4da5e4.jpg);
  29. --bpfp2: url(https://i.pinimg.com/474x/60/23/82/602382b6086a9e026dfe8b04c8eb670d.jpg);
  30. --cpic: url(https://i.pinimg.com/564x/32/db/66/32db6648c8e26dced80406e703152a47.jpg);
  31. --dpic1: url(https://i.pinimg.com/474x/15/3c/44/153c4482645ba0c6d5d34fe9881c67d3.jpg);
  32. --dpic2: url(https://i.pinimg.com/564x/e0/95/a7/e095a7bc429f2b4a3f49b1b308449a95.jpg);
  33. --dpic3: url(https://i.pinimg.com/474x/18/07/90/1807902a2e492064b27035c448ba2374.jpg);
  34. --dpic4: url(https://pm1.narvii.com/7188/d57447c5c9f8c1f2baa4ea0c5d65771befc98505r1-750-605v2_uhq.jpg);
  35. --dpic5: url(https://i.pinimg.com/474x/53/9e/9b/539e9b5037f1fa55cf1e10c0b29bb727.jpg);
  36. --dpic6: url(https://i.pinimg.com/originals/e6/7d/17/e67d17f309a8e6bfa071f8e17fa1cc58.jpg);
  37. --dpic7: url(https://i.pinimg.com/474x/df/24/2b/df242bd8508d3ee651a467d4efcd6825.jpg);
  38. --dpic8: url(https://pm1.narvii.com/7666/e145a85eadb167173b801638989106b94b3acc4cr1-1009-1010v2_uhq.jpg);
  39. --dpic9: url(https://i.pinimg.com/474x/fd/b5/21/fdb5213af7a0d8881ffe880a6e42f719.jpg);
  40. --dpic10: url(https://i.pinimg.com/474x/7a/9f/19/7a9f19f829f91e9aefc792f2c8ad8fb6.jpg);
  41. --dpic11: url(https://i.pinimg.com/474x/71/ac/51/71ac517cacfe7466918fb5a7e8ca1210.jpg);
  42. --dpic12: url(https://i.pinimg.com/474x/b6/b8/d7/b6b8d7451a74138a6c10f1662b3a7138.jpg);]
  43. [border=0; box-sizing: border-box; flex: 0; height: 100%; width: 100%; padding: 0px;][/border][comment]
  44.  
  45. --code start[/comment][border=5px solid var(--border); position: relative; box-sizing: border-box; height: 475px; width: 265px; padding: 0px; background: var(--detail); border-radius: 20px;display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: left; overflow: hidden;][border=0; padding: 0px; margin-left: -8.5px; margin-top: 20px; width: 10px;][tabs][tab=.][comment]
  46.  
  47. -- home screen background, change the positions and size here[/comment][border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px 10px 10px 10px; background: var(--homescreenpic); background-size: cover; background-position: center; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;][border=0; box-sizing: border-box; height: 2%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;][border=0; box-sizing: border-box; height: 100%; width: 43%; padding: 0px; background: var(--border); border-radius: 0px 0px 10px 10px;][/border][/border][comment]
  48.  
  49. --the time[/comment][border=0; box-sizing: border-box; height: 30%; width: 100%; padding: 0px; display: flex; justify-content: center; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: auto;][border=0; box-sizing: border-box; padding: 10px; color: var(--covertext); font-size: 50px;][font= Open Sans][comment]
  50.  
  51. --change time here[/comment]7:43[/font][/border][/border][comment]
  52.  
  53.  
  54.  
  55. --music player and spotify notification [/comment][border=0; box-sizing: border-box; height: 20%; width: 100%; background: var(--notifbg); padding: 5px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; border-radius: 10px;][comment]
  56.  
  57. --song cover art[/comment][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 40%; background: var(--songcoverart); background-size: cover; background-position: center; border-radius: 10px; margin-right: 2%;][/border][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 60%; display: flex; justify-content: center; flex-flow: column nowrap; align-items: center; overflow: hidden; padding: 0px; position: relative; ]
  58.  
  59. [border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 8px; text-transform: uppercase; padding: 0px; line-height: 110%; margin-bottom: 2%;][font= Open Sans][comment]
  60.  
  61. --notif app[/comment]Spotify[/font][/border]
  62.  
  63. [border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 11px; padding: 0px; line-height: 110%; margin-bottom: 2%;][font= Karla]now playing:[/font][/border][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 14px; padding: 0px; line-height: 110%; font-weight: bold; ][font= Karla][comment]
  64.  
  65. --change your song title here[/comment]Dynasty[/font][/border][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 10px; padding: 0px; line-height: 110%; margin-bottom: 3%;][font= karla][comment]
  66.  
  67. --change the artists here[/comment]by MIIA[/font][/border][comment]
  68.  
  69. --the skip and play buttons[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-bottom: 3%;]
  70.  
  71. [border=0; box-sizing: border-box; font-size: 15px; padding: 0px; line-height: 110%; margin-right: 20%;][fa]fas fa-backward[/fa][/border]
  72.  
  73. [border=0; box-sizing: border-box; font-size: 15px; padding: 0px; line-height: 110%; margin-right: 18%;][fa]fas fa-play[/fa][/border]
  74.  
  75. [border=0; box-sizing: border-box; font-size: 15px; padding: 0px; line-height: 110%;][fa]fas fa-forward[/fa][/border][/border][comment]
  76.  
  77. --progress bar[/comment][border=0; box-sizing: border-box; padding: 0px; height: 2px; width: 98%; background: var(--detail); pointer-events: auto; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; height: 5px; width: 25%; background: var(--border); pointer-events: auto; margin: -1px;][/border][/border][comment]
  78.  
  79. --music player[/comment][border=0; position: absolute; top: 31px; left: 30px; width: 50px; height: 50px; overflow: hidden; opacity: .01; pointer-events: auto;][border=0; margin-top: -335px; margin-left: -240px;][comment]
  80.  
  81. --change google doc link here[/comment][gdoc]1OvZfkY45PPLrLQxzH8Tg7grs9VW46HyM/[/gdoc][/border][/border]
  82. [/border][/border][comment]
  83.  
  84.  
  85. --notification one[/comment][border=0; box-sizing: border-box; height: 3%; width: 100%; padding: 0px; pointer-events: auto; ][/border][border=0; box-sizing: border-box; height: 15%; width: 100%; background: var(--notifbg); padding: 5px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; border-radius: 10px;][comment]
  86.  
  87. --app color[/comment][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 30%; background: var(--detail2); border-radius: 10px; margin-right: 2%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon2)][comment]
  88.  
  89. --app icon-- change it here[/comment][fa]fas fa-calendar-day fa-3x[/fa][/border][/border][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 70%; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; padding: 0px;][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 8px; text-transform: uppercase; padding: 0px; line-height: 100%; margin-top: 2%; margin-bottom: 2%;][font= Open Sans][comment]
  90.  
  91. -- notif app name --change it here[/comment]calendar[/font][/border][border=0; box-sizing: border-box; width: 100%; font-size: 15px; padding: 0px; line-height: 110%; margin-bottom: 3%;][font= Open Sans][comment]
  92.  
  93. --notif title --change it here[/comment]plans w/ friends[/font][/border][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 10px; padding: 0px; line-height: 100%;][font= karla][comment]
  94.  
  95. --date/notif info --change it here[/comment]nov. 3rd 2020[/font][/border][/border][/border][border=0; box-sizing: border-box; height: 2%; width: 100%; padding: 0px; pointer-events: auto; ][/border][comment]
  96.  
  97. --second notif/message[/comment][border=0; box-sizing: border-box; height: 15%; width: 100%; background: var(--notifbg); padding: 5px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; border-radius: 10px;][comment]
  98.  
  99. --app color and bg[/comment][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 30%; background: var(--detail3); border-radius: 10px; margin-right: 2%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][comment]
  100.  
  101. --app icon --change it here[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon3)][fa]fas fa-comment fa-3x[/fa][/border]
  102.  
  103. [/border][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 70%; display: flex; justify-content: center; flex-flow: column nowrap; align-items: center; overflow: hidden; padding: 0px;][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 8px; text-transform: uppercase; padding: 0px; line-height: 110%; margin-bottom: 2%;][font= Open Sans][comment]
  104.  
  105. --app title --change it here[/comment]messages[/font][/border][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 15px; padding: 0px; line-height: 110%; margin-bottom: 3%;][font= Open Sans][comment]
  106.  
  107. --contact --change it here[/comment]Mom[/font][/border][border=0; box-sizing: border-box; height: fit-content; width: 100%; font-size: 10px; padding: 0px; line-height: 110%;][font= karla][comment]
  108.  
  109. --message priview --change it here[/comment]this is a text message from ur mother-- 2 lines only[/font][/border][/border][/border][border=0; box-sizing: border-box; height: 6%; width: 100%; padding: 0px; pointer-events: auto; ][/border][border=0; box-sizing: border-box; flex: 1; width: 100%; padding: 0px; display: flex; justify-content: top; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;][comment]
  110.  
  111. --swipe button [/comment][border=0; box-sizing: border-box; padding: 10px; color: var(--covertext); font-size: 12px; pointer-events: none;][font= Open Sans]swipe up[/font][/border][/border][/border][/tab][comment]
  112.  
  113. --all my place holder tabs LOL. please do not touch them. it'll break everything[/comment][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][tab=this one is a place holder].[/tab][comment]
  114.  
  115.  
  116. -- important tab, holds ALL the cs[/comment][tab=this one has all the stuff]v[border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px; background: var(--detail3); display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;][border=0; box-sizing: border-box; display: flex; justify-content: flex-end; flex-flow: column nowrap; align-items: center; overflow: hidden; padding: 0px;][border=0; padding: 0px; margin-top: 390px; width: 285px; height: 30px; pointer-events: auto;][/border][border=0; padding: 0px; margin-top: 0px; width: 285px; height: 30px; pointer-events: auto;][tabs]
  117.  
  118. [tab=1][comment]
  119.  
  120. -- tab one start[/comment][border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;][border=0; box-sizing: border-box; height: 3%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; height: 60%; width: 40%; padding: 0px; background: var(--border); border-radius: 0px 0px 10px 10px; pointer-events: none;][/border][/border][border=0; box-sizing: border-box; height: 85%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--detail3); pointer-events: none;][comment]
  121.  
  122.  
  123.  
  124. --header [/comment][border=0; box-sizing: border-box; height: 10%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--header); pointer-events: none;][border=0; box-sizing: border-box; padding: 10px; line-height: 110%; color: var(--detail3); flex: 1;][comment]
  125.  
  126. --back button [/comment][fa]fas fa-angle-left fa-lg[/fa][/border][border=0; box-sizing: border-box; padding: 0px; color: var(--detail3); font-size: 20px;][font= Open Sans][comment]
  127.  
  128. --contact --change here [/comment]contact name[/font][/border]
  129.  
  130. [border=0; box-sizing: border-box; flex: 1;][/border][/border][comment]
  131.  
  132. --hidden scroll[/comment][border=0; box-sizing: border-box; height: 90%; width: 100%; padding: 0px 5px 0px 10px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--tabbg);][border=0; box-sizing: border-box; width: 100%; height: 97%; display: flex; flex-direction: column; text-align: justify; padding: 0px 5px 0px 5px; margin-top: 0px;][border= 0; box-sizing: border-box; width: 200%; flex: 1; position: relative; overflow: auto; padding: 0px; pointer-events: auto;][border=0; box-sizing: border-box; padding: 0px; width: 53%; font-size: 12px; line-height: 0px; margin-bottom: 0; padding-right: 10px; pointer-events: auto; color: var(--text); display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; ][comment]
  133.  
  134.  
  135.  
  136. ---scroll content[/comment]
  137.  
  138. [comment]
  139.  
  140. --messages start
  141.  
  142. ----first sent message[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;]
  143.  
  144. [border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][comment]
  145.  
  146. -- picture one[/comment][border=0; box-sizing: border-box; padding: 10px; height: 200px; width: 100%; background: var(--apic); background-size: cover; background-position: center; border-radius: 5px;][/border][/border]
  147.  
  148. [/border][comment]
  149.  
  150. --first received message [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border]
  151.  
  152. [border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  153.  
  154. --edit content here [/comment]what about this one?[/font][/border]
  155.  
  156. [/border][comment]
  157.  
  158. --received message 2[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  159.  
  160. -- edit content here[/comment]oooo cute ![/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  161.  
  162. [/border][comment]
  163.  
  164. --message 3 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  165.  
  166. -- edit content here[/comment]ok but... this ???[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  167.  
  168. [/border][comment]
  169.  
  170. --message 4 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][comment]
  171.  
  172. --picture 2 [/comment][border=0; box-sizing: border-box; padding: 10px; height: 200px; width: 100%; background: var(--apic2); background-size: cover; background-position: center; border-radius: 5px;][/border][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  173.  
  174. [/border][comment]
  175.  
  176. --sent messages 3 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  177.  
  178. --edit content [/comment]loooool noooo[/font][/border]
  179.  
  180. [/border][comment]
  181.  
  182. --message 4 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  183.  
  184. --edit content [/comment]if you show that to anyone, our friendship is over[/font][/border]
  185.  
  186. [/border][comment]
  187.  
  188. --received message 5 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  189.  
  190. --edit content [/comment]....oooops O_O[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  191.  
  192. [/border][comment]
  193.  
  194. --sent message 5 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][comment]
  195.  
  196. --meme picture [/comment][border=0; box-sizing: border-box; padding: 10px; height: 100px; width: 100%; background: var(--ameme); background-size: cover; background-position: center; border-radius: 5px;][/border][/border]
  197.  
  198. [/border][comment]
  199.  
  200. --divider and sticky title title [/comment][border=0; box-sizing: border-box; padding: 0px; height: 2px; width: 104%; background: var(--detail3); pointer-events: auto; overflow: hidden; margin-top: 5%;][/border][border=0; position: sticky; top: 0; width: 95%; height: fin-content; line-height: 120%; border-bottom: 5px solid var(--detail3); font-size: 16px; padding: 5px 10px 5px 10px; color: var(--text); text-shadow: 2px 1px 0px var(--detail3); font-weight: bold; background: var(--icon3); margin-bottom: 5%; text-align: center;][font= Lato][comment]
  201.  
  202. --edit title here [/comment]basics [/font][/border][comment]
  203.  
  204. --message bundle (recieved and sent) start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  205.  
  206. --edit content [/comment]name[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  207.  
  208. [/border][comment]
  209.  
  210. --second message [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  211.  
  212. --edit here [/comment]info[/font][/border]
  213.  
  214. [/border][comment]
  215.  
  216. --messages end here[/comment]
  217.  
  218. [comment]
  219.  
  220. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  221.  
  222. --edit content [/comment]age[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  223.  
  224. [/border][comment]
  225.  
  226. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  227.  
  228. --edit content [/comment]info[/font][/border]
  229.  
  230. [/border][comment]
  231.  
  232. --message end here[/comment]
  233.  
  234. [comment]
  235.  
  236. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  237.  
  238. --edit content [/comment]gender[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  239.  
  240. [/border][comment]
  241.  
  242. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  243.  
  244. --edit content [/comment]info[/font][/border]
  245.  
  246. [/border][comment]
  247.  
  248. --message end here[/comment]
  249.  
  250. [comment]
  251.  
  252. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  253.  
  254. --edit content [/comment]sexuality[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  255.  
  256. [/border][comment]
  257.  
  258. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  259.  
  260. --edit content [/comment]info[/font][/border]
  261.  
  262. [/border][comment]
  263.  
  264. --message end here[/comment]
  265.  
  266. [comment]
  267.  
  268. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  269.  
  270. --edit content [/comment]birthday[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  271.  
  272. [/border][comment]
  273.  
  274. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  275.  
  276. --edit content [/comment]info[/font][/border]
  277.  
  278. [/border][comment]
  279.  
  280. --message end here[/comment]
  281.  
  282. [comment]
  283.  
  284. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  285.  
  286. --edit content [/comment]place of birth[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  287.  
  288. [/border][comment]
  289.  
  290. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  291.  
  292. --edit content [/comment]info[/font][/border]
  293.  
  294. [/border][comment]
  295.  
  296. --message end here[/comment]
  297.  
  298. [comment]---copy from this comment here***
  299.  
  300. --messages start here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; padding: 5px; height: fit-content; border-radius: 5px 5px 5px 0px; width: 70%; background: var(--contact); font-size: 12px; line-height: 16px;][font= Karla][comment]
  301.  
  302. --edit content [/comment]extra[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border]
  303.  
  304. [/border][comment]
  305.  
  306. --message two [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; margin-top: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 5px; height: fit-content; text-align: right; border-radius: 5px 5px 0px 5px; width: 70%; background: var(--detail3); font-size: 12px; line-height: 16px;][font= Karla][comment]
  307.  
  308. --edit content [/comment]info[/font][/border]
  309.  
  310. [/border][comment]
  311.  
  312. --message end here
  313.  
  314. ---to this comment here to add more messages***[/comment]
  315.  
  316. [comment]
  317.  
  318. --scroll box end here[/comment][/border][/border][/border]
  319.  
  320. [/border]
  321.  
  322. [/border][comment]
  323.  
  324. --tab covers[/comment][border=0; box-sizing: border-box; height: 12%; width: 100%; padding: 5px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail3); border-radius: 10px; margin-left: 2.5%; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;]
  325.  
  326. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon3)][comment]
  327.  
  328. --edit icon here[/comment][fa]fas fa-comment fa-2x[/fa][/border][/border]
  329.  
  330. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail2); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon2)][comment]
  331.  
  332. --edit icon here[/comment][fa]fas fa-heart fa-2x[/fa][/border][/border]
  333.  
  334. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon)][comment]
  335.  
  336. --edit icon here[/comment][fa]fas fa-sticky-note fa-2x[/fa][/border][/border]
  337.  
  338. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail4); border-radius: 10px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon4)][comment]
  339.  
  340. --edit icon here[/comment][fa]fas fa-image fa-2x[/fa][/border][comment]
  341.  
  342.  
  343.  
  344. --tab one end***[/comment][/border]
  345.  
  346. [/border]
  347.  
  348. [/border][/tab]
  349.  
  350. [tab=2][comment]
  351.  
  352.  
  353.  
  354. --tab two start ***[/comment][border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;]
  355.  
  356. [border=0; box-sizing: border-box; height: 3%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; height: 60%; width: 40%; padding: 0px; background: var(--border); border-radius: 0px 0px 10px 10px;][/border][/border][border=0; box-sizing: border-box; height: 85%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--detail2); pointer-events: none;][comment]
  357.  
  358.  
  359.  
  360. --header [/comment][border=0; box-sizing: border-box; height: 10%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--header); pointer-events: none;][border=0; box-sizing: border-box; padding: 10px; line-height: 110%; color: var(--detail2); flex: 1;][comment]
  361.  
  362. --back button [/comment][fa]fas fa-angle-left fa-lg[/fa][/border][border=0; box-sizing: border-box; padding: 0px; color: var(--detail2); font-size: 30px; margin-bottom: 3%;][font= Grand Hotel][comment]
  363.  
  364. --title --change here [/comment]instagram[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][border=0; box-sizing: border-box; height: 90%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--tabbg);][comment]
  365.  
  366.  
  367.  
  368. --***instagram handle and pfp start[/comment][border=0; box-sizing: border-box; height: 10%; width: 100%; padding: 0px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--tabbg);][comment]
  369.  
  370. --profile picture [/comment][border=0; box-sizing: border-box; padding: 0px; height: 98%; width: 13%; background: var(--bpfp); background-size: cover; background-position: center; border-radius: 50px; margin: 3%;][/border][border=0; box-sizing: border-box; padding: 0px; color: var(--text); font-size: 12px;][font= Open Sans][comment]
  371.  
  372. --edit username here [/comment]_user.name[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][comment]
  373.  
  374. --instagram handle and pfp end[/comment]
  375.  
  376. [comment]
  377.  
  378. --***accordion post start [/comment][border=0; box-sizing: border-box; height: 70%; width: 100%; overflow: hidden; padding:0px;][border=0; width: 100%; height: 300px; margin-top: -25px; padding: 0px; overflow: hidden;][accordion=100%]{slide=[border=0; background: var(--tabbg); width: 100%; height: 300px; margin-left: -9px; display: flex; flex-flow: column nowrap; overflow: hidden;][border=0; box-sizing: border-box; width: 200%; flex:1; overflow-x: auto; padding: 0px; margin-bottom: 0px;][border=0; width: 49%; font-size: 12px; line-height: 0px; color: var(--text); text-align: justify; border-radius: 10px; padding: 5px 0 5px 5px; font-weight: normal; font-variant: normal; margin-bottom: 70px;][comment]
  379.  
  380. --scroll content [/comment][comment]
  381.  
  382. --sticky title [/comment][border=0; position: sticky; top: 0; width: 95%; border-bottom: 5px solid var(--detail2); font-size: 16px; margin: 0px -5px -10px -5px; padding: 5px 10px 5px 10px; color: var(--text); text-shadow: 2px 1px 0px var(--detail2); font-weight: bold; background: var(--icon2); line-height: 16px;][font= Lato][comment]
  383.  
  384. --change title here [/comment]apperance [/font][/border][font= Roboto]
  385.  
  386. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  387.  
  388. --title --change here [/comment]height[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  389.  
  390. --edit content [/comment]info[/font][/border]
  391.  
  392. [/border][comment]
  393.  
  394. --tagg-y thing end*** [/comment]
  395.  
  396. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  397.  
  398. --title --change here [/comment]weight[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  399.  
  400. --edit content [/comment]info[/font][/border]
  401.  
  402. [/border][comment]
  403.  
  404. --tagg-y thing end*** [/comment]
  405.  
  406. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  407.  
  408. --title --change here [/comment]hair[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  409.  
  410. --edit content [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh.[/font][/border]
  411.  
  412. [/border][comment]
  413.  
  414. --tagg-y thing end*** [/comment]
  415.  
  416. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  417.  
  418. --title --change here [/comment]eyes[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  419.  
  420. --edit content [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh.[/font][/border]
  421.  
  422. [/border][comment]
  423.  
  424. --tagg-y thing end*** [/comment]
  425.  
  426. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  427.  
  428. --title --change here [/comment]body type[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  429.  
  430. --edit content [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh.[/font][/border]
  431.  
  432. [/border][comment]
  433.  
  434. --tagg-y thing end*** [/comment]
  435.  
  436. [comment]--***tagg-y thing start --to add more copy from this comment here [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  437.  
  438. --title --change here [/comment]hair[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  439.  
  440. --edit content [/comment] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh. Accumsan tortor posuere ac ut consequat semper viverra nam libero. In est ante in nibh. Justo eget magna fermentum iaculis eu non diam. Sed id semper risus in hendrerit gravida rutrum quisque non. [/font][/border]
  441.  
  442. [/border][comment]
  443.  
  444. --tagg-y thing end*** --to this comment here[/comment]
  445.  
  446. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail2); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  447.  
  448. --title --change here [/comment]face claim[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  449.  
  450. --edit content [/comment]info[/font][/border]
  451.  
  452. [/border][comment]
  453.  
  454. --tagg-y thing end*** [/comment]
  455.  
  456. [comment]---end of scroll and bottom accordion slide---[/comment]
  457.  
  458. [/font][/border][/border][/border]}
  459.  
  460. [border=0; box-sizing: border-box; height: 300px;][/border]{/slide}
  461.  
  462. [comment]---accordion cover---[/comment]
  463.  
  464. {slide=[border=0; box-sizing: border-box; height: 300px; width: calc(100% + 2px); background: var(--bpic); background-size: cover; background-position: center; position: absolute; top: -330px; left: -1px; pointer-events: none;][/border]}{/slide}[/accordion][/border]
  465.  
  466. [/border]
  467.  
  468. [comment]---accordion end***[/comment]
  469.  
  470. [comment]
  471.  
  472. --***instagram comment and details start[/comment][border=0; box-sizing: border-box; flex: 1; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: auto;][border=0; box-sizing: border-box; padding: 5px 10px 5px 10px; height: fit-content; width: 100%; margin-left: 5%; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;]
  473.  
  474. [comment]---details start---[/comment]
  475.  
  476. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%; margin-right: 2%;][fa]fal fa-comment fa-lg[/fa][/border]
  477.  
  478. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%;][fa]fal fa-heart fa-lg[/fa][/border]
  479.  
  480. [border=0; box-sizing: border-box; padding: 0px; flex: 1;][/border]
  481.  
  482. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%;][fa]fal fa-bookmark fa-lg[/fa][/border][/border]
  483.  
  484. [comment]---details end---[/comment]
  485.  
  486. [comment]
  487.  
  488. --***likes start[/comment][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; margin-left: 2%; margin-right: 2%; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: top; overflow: hidden;][comment]
  489.  
  490. --mutual pfp[/comment][border=0; box-sizing: border-box; padding: 0px; height: 20px; width: 20px; background: var(--bpfp2); background-size: cover; background-position: center; border-radius: 20px; margin-left: 2%;][/border][comment]
  491.  
  492. --like numbers[/comment][border=0; box-sizing: border-box; padding: 10px 10px 0px 10px; color: var(--text); font-size: 10px;][font= Open Sans]liked by [border=0; box-sizing: border-box; padding: 0px; display: inline-block; color: var(--detail2); font-weight: bold;][comment]
  493.  
  494. --change mutual's username here[/comment]some_mutual[/border] and [border=0; box-sizing: border-box; padding: 0px; display: inline-block; color: var(--detail2); font-weight: bold;][comment]
  495.  
  496. --change like count here[/comment]439[/border] others[/font][/border][comment]
  497.  
  498. --likes end***[/comment]
  499.  
  500. [/border][comment]
  501.  
  502. --***comment start[/comment][border=0; box-sizing: border-box; padding: 0px 10px 5px 10px; height: fit-content; width: 100%; flex: 1; font-size: 10px; line-height: 110%; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: top; overflow: hidden;][font= Karla][border=0; box-sizing: border-box; padding: 0px; display: inline-block; color: var(--detail2); font-weight: bold;][comment]
  503.  
  504. --edit user name here[/comment]_user.name[/border][comment]
  505.  
  506. --edit content here[/comment]your comment for your post goes in here --2 lines can fit in here[/font][/border][comment]
  507.  
  508. --comment end here***
  509.  
  510. ---instagram details end here***[/comment]
  511.  
  512. [/border][/border][/border][comment]
  513.  
  514.  
  515. --tab covers[/comment][border=0; box-sizing: border-box; height: 12%; width: 100%; padding: 5px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail3); border-radius: 10px; margin-left: 2.5%; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;]
  516.  
  517. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon3)][comment]
  518.  
  519. --edit icon here[/comment][fa]fas fa-comment fa-2x[/fa][/border][/border]
  520.  
  521. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail2); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon2)][comment]
  522.  
  523. --edit icon here[/comment][fa]fas fa-heart fa-2x[/fa][/border][/border]
  524.  
  525. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon)][comment]
  526.  
  527. --edit icon here[/comment][fa]fas fa-sticky-note fa-2x[/fa][/border][/border]
  528.  
  529. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail4); border-radius: 10px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon4)][comment]
  530.  
  531. --edit icon here[/comment][fa]fas fa-image fa-2x[/fa][/border][comment]
  532.  
  533.  
  534. --tab two end***[/comment][/border]
  535.  
  536. [/border]
  537. [/border][/tab]
  538. [tab=3][comment]
  539.  
  540.  
  541. --tab three start ***[/comment][border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;]
  542.  
  543. [border=0; box-sizing: border-box; height: 3%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);]
  544.  
  545. [border=0; box-sizing: border-box; height: 60%; width: 40%; padding: 0px; background: var(--border); border-radius: 0px 0px 10px 10px;][/border][/border]
  546.  
  547. [border=0; box-sizing: border-box; height: 85%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--detail); pointer-events: none;][comment]
  548.  
  549.  
  550.  
  551. --header [/comment][border=0; box-sizing: border-box; height: 10%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--header); pointer-events: none;][border=0; box-sizing: border-box; padding: 10px; line-height: 110%; color: var(--detail); flex: 1;][comment]
  552.  
  553. --back button [/comment][fa]fas fa-angle-left fa-lg[/fa][/border][border=0; box-sizing: border-box; padding: 0px; color: var(--detail); font-size: 20px;][font= Open Sans][comment]
  554.  
  555. --title --change here [/comment]note name[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][comment]
  556.  
  557. --hidden scroll[/comment][border=0; box-sizing: border-box; height: 90%; width: 100%; padding: 0px 5px 0px 10px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--tabbg);][border=0; box-sizing: border-box; width: 100%; height: 97%; display: flex; flex-direction: column; text-align: justify; padding: 0px 5px 0px 5px; margin-top: 0px;][border= 0; box-sizing: border-box; width: 200%; flex: 1; position: relative; overflow: auto; padding: 0px; pointer-events: auto;][border=0; box-sizing: border-box; padding: 0px; width: 53%; font-size: 12px; line-height: 0px; margin-bottom: 0; padding-right: 10px; pointer-events: auto; color: var(--text); display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; ][comment]
  558.  
  559.  
  560.  
  561. ---scroll content[/comment][comment]
  562.  
  563. --title[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px; margin-bottom: 2%;][font= Karla][comment]
  564.  
  565. --edit here[/comment]to-do list[/font][/border][border=0; box-sizing: border-box; width: 30%;][/border]
  566.  
  567. [comment]---***to-do list start[/comment]
  568.  
  569. [comment]--***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail)][comment]
  570.  
  571. --edit icon[/comment][fa]fas fa-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 90%; font-size: 12px; line-height: 16px; padding-right: 10px;][font= Karla][comment]
  572.  
  573. --edit content[/comment]take my cat to the vet[/font][/border][comment]
  574.  
  575. --list item end***[/comment]
  576.  
  577. [comment]--***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail)][comment]
  578.  
  579. --edit icon[/comment][fa]fas fa-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 90%; font-size: 12px; line-height: 16px; padding-right: 10px;][font= Karla][comment]
  580.  
  581. --edit content[/comment]make that one appointment[/font][/border][comment]
  582.  
  583. --list item end***[/comment]
  584.  
  585. [comment]--***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail)][comment]
  586.  
  587. --edit icon[/comment][fa]fas fa-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 90%; font-size: 12px; line-height: 16px; padding-right: 10px;][font= Karla][comment]
  588.  
  589. --edit content[/comment]take those clothes to the dry cleaners[/font][/border][comment]
  590.  
  591. --list item end***[/comment]
  592.  
  593. [comment]--***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail)][comment]
  594.  
  595. --edit icon[/comment][fa]fas fa-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 90%; font-size: 12px; line-height: 16px; padding-right: 10px;][font= Karla][comment]
  596.  
  597. --edit content[/comment]groceries[/font][/border][comment]
  598.  
  599. --list item end***[/comment]
  600.  
  601. [comment]---*small list start*---[/comment]
  602.  
  603. [comment]---***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; margin-left: 10%; width: 10%; color: var(--detail)][comment]
  604.  
  605. ---edit icon [/comment][fa]far fa-square[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 80%; font-size: 12px; padding-right: 10px; line-height: 16px;][font= Karla][comment]
  606.  
  607. ---edit content[/comment]milk[/font][/border][comment]
  608.  
  609. ---list item end***[/comment]
  610.  
  611. [comment]---***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; margin-left: 10%; width: 10%; color: var(--detail)][comment]
  612.  
  613. ---edit icon [/comment][fa]far fa-square[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 80%; font-size: 12px; padding-right: 10px; line-height: 16px;][font= Karla][comment]
  614.  
  615. ---edit content[/comment]eggs[/font][/border][comment]
  616.  
  617. ---list item end***[/comment]
  618.  
  619. [comment]---***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; margin-left: 10%; width: 10%; color: var(--detail)][comment]
  620.  
  621. ---edit icon [/comment][fa]far fa-square[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 80%; font-size: 12px; padding-right: 10px; line-height: 16px;][font= Karla][comment]
  622.  
  623. ---edit content[/comment]reeses peanut butter cups[/font][/border][comment]
  624.  
  625. ---list item end***[/comment]
  626.  
  627. [comment]---***list item start ---to add more copy from this comment[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; margin-left: 10%; width: 10%; color: var(--detail)][comment]
  628.  
  629. ---edit icon [/comment][fa]far fa-square[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 80%; font-size: 12px; padding-right: 10px; line-height: 16px;][font= Karla][comment]
  630.  
  631. ---edit content[/comment]those things in the green wrapper that smell like pears (i forget what they're called but you know what i mean)[/font][/border][comment]
  632.  
  633. ---list item end*** ---to this comment here[/comment]
  634.  
  635. [comment]---*small list end***---[/comment]
  636.  
  637. [comment]
  638.  
  639. --***list item start[/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail)][comment]
  640.  
  641. --edit icon[/comment][fa]fas fa-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 90%; font-size: 12px; line-height: 16px; padding-right: 10px;][font= Karla][comment]
  642.  
  643. --edit content[/comment]call mom about her grocery list[/font][/border][comment]
  644.  
  645. --list item end***[/comment]
  646.  
  647. [/border]
  648.  
  649. [comment]---to-do list end***[/comment][comment]
  650.  
  651. --bottom picture [/comment][border=0; box-sizing: border-box; padding: 10px; margin-top: 2%; height: 100px; width: 100%; background: var(--cpic); background-size: cover; background-position: center; border-radius: 5px;][/border][comment]
  652.  
  653. --sticky header[/comment][border=0; box-sizing: border-box; padding: 0px; height: 2px; width: 104%; background: var(--detail); pointer-events: auto; overflow: hidden; margin-top: 5%;][/border][border=0; position: sticky; top: 0; width: 95%; height: fin-content; line-height: 120%; border-bottom: 5px solid var(--detail); font-size: 16px; padding: 5px 10px 5px 10px; color: var(--text); text-shadow: 2px 1px 0px var(--detail); font-weight: bold; background: var(--icon); text-align: right; z-index: 3;][font= Lato][comment]
  654.  
  655. --edit title here[/comment]personality [/font][/border]
  656.  
  657. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  658.  
  659. --edit title [/comment]persona[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  660.  
  661. --edit content[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh. Accumsan tortor posuere ac ut consequat semper viverra nam libero. In est ante in nibh. Justo eget magna fermentum iaculis eu non diam. Sed id semper risus in hendrerit gravida rutrum quisque non. [/font][/border]
  662.  
  663. [/border][comment]
  664.  
  665. --tagg-y thing end***[/comment]
  666.  
  667. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  668.  
  669. --edit title[/comment]positive traits[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][border=0; box-sizing: border-box; padding: 0px; width: 100%; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; ][comment]
  670.  
  671. --***traits start [/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  672.  
  673. --edit icon[/comment][fa]fas fa-plus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  674.  
  675. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  676.  
  677. --edit icon[/comment][fa]fas fa-plus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  678.  
  679. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  680.  
  681. --edit icon[/comment][fa]fas fa-plus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  682.  
  683. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  684.  
  685. --edit icon[/comment][fa]fas fa-plus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  686.  
  687. --add content[/comment]trait[/font][/border]
  688.  
  689. [/border][comment]
  690.  
  691. ---traits end***
  692.  
  693. ---tagg-y thing ends---[/comment]
  694.  
  695. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  696.  
  697. --edit title[/comment]negative traits[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][border=0; box-sizing: border-box; padding: 0px; width: 100%; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; ][comment]
  698.  
  699. --***traits start [/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  700.  
  701. --edit icon[/comment][fa]fas fa-minus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  702.  
  703. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  704.  
  705. --edit icon[/comment][fa]fas fa-minus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  706.  
  707. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  708.  
  709. --edit icon[/comment][fa]fas fa-minus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  710.  
  711. --add content[/comment]trait[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  712.  
  713. --edit icon[/comment][fa]fas fa-minus-circle[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  714.  
  715. --add content[/comment]trait[/font][/border]
  716.  
  717. [/border][comment]
  718.  
  719. ---traits end***
  720.  
  721. ---tagg-y thing ends---[/comment]
  722.  
  723. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  724.  
  725. --edit title[/comment]likes[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][border=0; box-sizing: border-box; padding: 0px; width: 100%; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; ][comment]
  726.  
  727. --***traits start [/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  728.  
  729. --edit icon[/comment][fa]fas fa-thumbs-up[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  730.  
  731. --add content[/comment]like[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  732.  
  733. --edit icon[/comment][fa]fas fa-thumbs-up[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  734.  
  735. --add content[/comment]like[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  736.  
  737. --edit icon[/comment][fa]fas fa-thumbs-up[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  738.  
  739. --add content[/comment]like[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  740.  
  741. --edit icon[/comment][fa]fas fa-thumbs-up[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  742.  
  743. --add content[/comment]like[/font][/border]
  744.  
  745. [/border][comment]
  746.  
  747. ---traits end***
  748.  
  749. ---tagg-y thing ends---[/comment]
  750.  
  751. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  752.  
  753. --edit title[/comment]dislike[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][border=0; box-sizing: border-box; padding: 0px; width: 100%; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; ][comment]
  754.  
  755. --***traits start [/comment][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  756.  
  757. --edit icon[/comment][fa]fas fa-thumbs-down[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  758.  
  759. --add content[/comment]dislike[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  760.  
  761. --edit icon[/comment][fa]fas fa-thumbs-down[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  762.  
  763. --add content[/comment]dislike[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  764.  
  765. --edit icon[/comment][fa]fas fa-thumbs-down[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  766.  
  767. --add content[/comment]dislike[/font][/border][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; width: 10%; color: var(--detail); font-size: 12px;][comment]
  768.  
  769. --edit icon[/comment][fa]fas fa-thumbs-down[/fa][/border][border=0; box-sizing: border-box; padding: 0px; width: 90%; height: fit-content; font-size: 12px; line-height: 16px; ][font= Karla][comment]
  770.  
  771. --add content[/comment]dislike[/font][/border]
  772.  
  773. [/border][comment]
  774.  
  775. ---traits end***
  776.  
  777. ---tagg-y thing ends---[/comment]
  778.  
  779. [comment]--***tagg-y thing start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  780.  
  781. --edit title [/comment]personality type[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  782.  
  783. --edit content[/comment]info[/font][/border]
  784.  
  785. [/border][comment]
  786.  
  787. --tagg-y thing end***[/comment]
  788.  
  789. [comment]--***tagg-y thing start ---to add more copy from this comment[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  790.  
  791. --edit title [/comment]love language[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  792.  
  793. --edit content[/comment]info[/font][/border]
  794.  
  795. [/border][comment]
  796.  
  797. --tagg-y thing end*** ---to this comment here[/comment]
  798.  
  799. [comment]--***tagg-y thing start ---to add more copy from this comment[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%;][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: left; width: 70%; border-bottom: 3px solid var(--detail); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  800.  
  801. --edit title [/comment]extra[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 100%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  802.  
  803. --edit content[/comment]info[/font][/border]
  804.  
  805. [/border][comment]
  806.  
  807. --tagg-y thing end*** ---to this comment here[/comment]
  808.  
  809.  
  810. [comment]---scroll end---[/comment][/border][/border][/border][/border]
  811.  
  812.  
  813. [/border][comment]
  814.  
  815. --tab covers[/comment][border=0; box-sizing: border-box; height: 12%; width: 100%; padding: 5px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail3); border-radius: 10px; margin-left: 2.5%; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;]
  816.  
  817. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon3)][comment]
  818.  
  819. --edit icon here[/comment][fa]fas fa-comment fa-2x[/fa][/border][/border]
  820.  
  821. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail2); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon2)][comment]
  822.  
  823. --edit icon here[/comment][fa]fas fa-heart fa-2x[/fa][/border][/border]
  824.  
  825. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon)][comment]
  826.  
  827. --edit icon here[/comment][fa]fas fa-sticky-note fa-2x[/fa][/border][/border]
  828.  
  829. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail4); border-radius: 10px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon4)][comment]
  830.  
  831. --edit icon here[/comment][fa]fas fa-image fa-2x[/fa][/border][comment]
  832.  
  833.  
  834.  
  835. --tab three end***[/comment][/border]
  836.  
  837. [/border]
  838.  
  839. [/border][/tab]
  840.  
  841. [tab=4][comment]
  842.  
  843.  
  844.  
  845. --tab four start ***[/comment][border=0; position: absolute; box-sizing: border-box; height: 100%; width: 100%; top: 0; left: 0; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none;]
  846.  
  847. [border=0; box-sizing: border-box; height: 3%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; height: 60%; width: 40%; padding: 0px; background: var(--border); border-radius: 0px 0px 10px 10px;][/border][/border][border=0; box-sizing: border-box; height: 85%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--detail4); pointer-events: none;][comment]
  848.  
  849.  
  850.  
  851. --header [/comment][border=0; box-sizing: border-box; height: 10%; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--header); pointer-events: none;][border=0; box-sizing: border-box; padding: 10px; line-height: 110%; color: var(--detail4); flex: 1;][comment]
  852.  
  853. --back button [/comment][fa]fas fa-angle-left fa-lg[/fa][/border][border=0; box-sizing: border-box; padding: 0px; color: var(--detail4); font-size: 20px;][font= Open Sans][comment]
  854.  
  855. --title --change here [/comment]gallery[/font][/border][border=0; box-sizing: border-box; flex: 1;][/border][/border][comment]
  856.  
  857. --hidden scroll[/comment][border=0; box-sizing: border-box; height: 90%; width: 100%; padding: 0px 5px 0px 10px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: auto; background: var(--tabbg);][border=0; box-sizing: border-box; width: 100%; height: 97%; display: flex; flex-direction: column; text-align: justify; padding: 0px 5px 0px 5px; margin-top: 0px;][border= 0; box-sizing: border-box; width: 200%; flex: 1; position: relative; overflow: auto; padding: 0px; pointer-events: auto;][border=0; box-sizing: border-box; padding: 0px; width: 53%; font-size: 12px; line-height: 0px; margin-bottom: 0; padding-right: 10px; pointer-events: auto; color: var(--text); display: flex; justify-content: flex-start; flex-flow: column nowrap; align-items: center; ][comment]
  858.  
  859.  
  860. ---scroll content[/comment]
  861. [comment]
  862.  
  863. --sticky header w/date [/comment][border=0; box-sizing: border-box; position: sticky; top: 0; width: 100%; height: fit-content; padding: 5px; background: var(--header); color: var(--historyheader); font-weight: bold; text-align: right; z-index: 3; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; margin-right: 2%;][border=0; box-sizing: border-box; padding: 0px; height: 2px; flex: 1; background: var(--historyheader); overflow: hidden;][/border][border=0; box-sizing: border-box; padding: 0; line-height: 120%; font-size: 10px; margin-left: 2%;][font= Open Sans][comment]
  864.  
  865. --edit date here [/comment]april 7th, 2005[/font][/border][/border][comment]
  866.  
  867. --gallery part one pics 1-4 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; pointer-events: auto; pointer-events: none;]
  868.  
  869. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic1); background-size: cover; background-position: center; border-radius: 5px;][/border]
  870.  
  871. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic2); background-size: cover; background-position: center; border-radius: 5px;][/border]
  872.  
  873. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic3); background-size: cover; background-position: center; border-radius: 5px;][/border]
  874.  
  875. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic4); background-size: cover; background-position: center; border-radius: 5px;][/border]
  876.  
  877. [/border][comment]
  878.  
  879. --gallery 1 end [/comment]
  880.  
  881. [comment]
  882.  
  883. --background part 1 start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%; margin-right: 2%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail4); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  884.  
  885. --title (event, time period, date) --change here[/comment]childhood[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 98%; margin-left: 2%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  886.  
  887. --content here [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh. [/font][/border]
  888.  
  889. [/border][comment]
  890.  
  891. --background part 1 end[/comment]
  892.  
  893. [comment]
  894.  
  895. --sticky header at the bottom[/comment][border=0; position: sticky; margin-top: 5%; top: 311px; width: 95%; height: fin-content; line-height: 120%; border-top: 5px solid var(--detail4); font-size: 16px; padding: 5px 10px 5px 10px; color: var(--text); text-shadow: 2px 1px 0px var(--detail); font-weight: bold; background: var(--icon4); text-align: center; z-index: 4;][font= Lato][comment]
  896.  
  897. --edit title here [/comment]history[/font][/border]
  898.  
  899. [comment]
  900.  
  901. --sticky header w/date [/comment][border=0; box-sizing: border-box; position: sticky; top: 0; width: 100%; height: fit-content; padding: 5px; background: var(--header); color: var(--historyheader); font-weight: bold; text-align: right; z-index: 3; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; margin-right: 2%;][border=0; box-sizing: border-box; padding: 0px; height: 2px; flex: 1; background: var(--historyheader); overflow: hidden;][/border][border=0; box-sizing: border-box; padding: 0; line-height: 120%; font-size: 10px; margin-left: 2%;][font= Open Sans][comment]
  902.  
  903. --edit date here [/comment]july 23rd, 2016[/font][/border][/border][comment]
  904.  
  905. --***gallery 2 pics 5-8 [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; pointer-events: auto; pointer-events: none;]
  906.  
  907. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic5); background-size: cover; background-position: center; border-radius: 5px;][/border]
  908.  
  909. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic6); background-size: cover; background-position: center; border-radius: 5px;][/border]
  910.  
  911. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic7); background-size: cover; background-position: center; border-radius: 5px;][/border]
  912.  
  913. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic8); background-size: cover; background-position: center; border-radius: 5px;][/border]
  914.  
  915. [/border][comment]
  916.  
  917. --gallery 2 end*** [/comment]
  918.  
  919. [comment]
  920.  
  921. --***background part two start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%; margin-right: 2%; margin-bottom: 17%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail4); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  922.  
  923. --title --change here [/comment]adolescence[/font][/border]
  924.  
  925. [border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 98%; margin-left: 2%; font-size: 12px; line-height: 16px;][font= Karla]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh. [/font][/border][/border][comment]
  926.  
  927. --***background part two end [/comment]
  928.  
  929. [comment]
  930.  
  931. --sticky header w/ date [/comment][border=0; box-sizing: border-box; position: sticky; top: 0; width: 100%; height: fit-content; padding: 5px; background: var(--header); color: var(--historyheader); font-weight: bold; text-align: right; z-index: 3; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; margin-right: 2%;][border=0; box-sizing: border-box; padding: 0px; height: 2px; flex: 1; background: var(--historyheader); overflow: hidden;][/border][border=0; box-sizing: border-box; padding: 0; line-height: 120%; font-size: 10px; margin-left: 2%;][font= Open Sans][comment]
  932.  
  933. --edit date here [/comment]october 20th, 2020[/font][/border][/border]
  934.  
  935. [comment]
  936.  
  937. --***gallery 3 start pics 9-12[/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; pointer-events: auto; pointer-events: none;]
  938.  
  939. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic9); background-size: cover; background-position: center; border-radius: 5px;][/border]
  940.  
  941. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic10); background-size: cover; background-position: center; border-radius: 5px;][/border]
  942.  
  943. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic11); background-size: cover; background-position: center; border-radius: 5px;][/border]
  944.  
  945. [border=0; box-sizing: border-box; padding: 10px; margin: 2%; height: 150px; width: 45%; background: var(--dpic12); background-size: cover; background-position: center; border-radius: 5px;][/border]
  946.  
  947. [comment]
  948.  
  949. --***background part three start [/comment][border=0; box-sizing: border-box; height: fit-content; width: 100%; padding: 0px; display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center; overflow: hidden; margin-top: 5%; margin-right: 2%; margin-bottom: 17%;][border=0; box-sizing: border-box; flex: 1;][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; text-align: right; width: 70%; border-bottom: 3px solid var(--detail4); font-weight: bold; font-size: 12px; line-height: 16px;][font= Karla][comment]
  950.  
  951. --title --change here [/comment]adulthood[/font][/border][border=0; box-sizing: border-box; padding: 0px; height: fit-content; width: 98%; margin-left: 2%; font-size: 12px; line-height: 16px;][font= Karla][comment]
  952.  
  953. --edit content [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Suspendisse in est ante in nibh mauris. Magna etiam tempor orci eu lobortis elementum nibh. [/font][/border]
  954.  
  955. [/border][comment]
  956.  
  957. --***background part three end [/comment]
  958.  
  959. [/border][comment]
  960.  
  961. --***gallery and background end*** [/comment]
  962.  
  963.  
  964.  
  965. [/border][/border][/border]
  966.  
  967. [/border]
  968.  
  969.  
  970. [/border][comment]
  971.  
  972. --tab covers[/comment][border=0; box-sizing: border-box; height: 12%; width: 100%; padding: 5px; display: flex; justify-content: flex-start; flex-flow: row nowrap; align-items: center; overflow: hidden; pointer-events: none; background: var(--topcolor);][border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail3); border-radius: 10px; margin-left: 2.5%; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;]
  973.  
  974. [border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon3)][comment]
  975.  
  976. --edit icon here[/comment][fa]fas fa-comment fa-2x[/fa][/border][/border]
  977.  
  978. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail2); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon2)][comment]
  979.  
  980. --edit icon here[/comment][fa]fas fa-heart fa-2x[/fa][/border][/border]
  981.  
  982. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail); border-radius: 10px; margin-right: 5%; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon)][comment]
  983.  
  984. --edit icon here[/comment][fa]fas fa-sticky-note fa-2x[/fa][/border][/border]
  985.  
  986. [border=0; box-sizing: border-box; padding: 10px; height: 100%; width: 20%; background: var(--detail4); border-radius: 10px; display: flex; justify-content: center; flex-flow: row nowrap; align-items: center; overflow: hidden;][border=0; box-sizing: border-box; padding: 0px; line-height: 110%; color: var(--icon4)][comment]
  987.  
  988. --edit icon here[/comment][fa]fas fa-image fa-2x[/fa][/border][comment]
  989.  
  990.  
  991. --tab four end***[/comment][/border]
  992. [/border]
  993. [/border][/tab]
  994. [/tabs][/border][/border]
  995. [border=0; box-sizing: border-box; flex: 0; height: 100%; width: 100%; padding: 0px;][/border][/border][/tab][/tabs][/border][/border][/border][comment]
  996.  
  997. --credit, do not remove[/comment][border=0; position: relative; margin: auto; text-align: center; font-size: 10px; width: 100%; line-height: 12px;]coded by hanthesunbeam[/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement