API tools faq
paste
ooksie

idilliaco (uxie x erosful)

ooksie
Oct 17th, 2020 (edited)
496
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 53.11 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2. heavily inspired by https://khevinday.tumblr.com/henrietta.#
  3. [/comment][border=transparent;
  4. *the background image of the tab content area;
  5. --bg: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
  6.  
  7. *the background of the sidebar;
  8. --bg-color: #E8E8E8;
  9. *the off-white background of most of the lil tabs;
  10. --color-1: #f5f5f5;
  11. *the light gray;
  12. --color-2: #caccc3;
  13. *the color of the header texts;
  14. --color-3: #665A53;
  15. *the color of the buttons;
  16. --color-4: #C2C3B7;
  17. *the color of the text;
  18. --t-color: #000;
  19. *the color of the follow button;
  20. --follow: #6e9ed1;
  21.  
  22. *this is the main icon;
  23. --img-1: url('https://i.pinimg.com/originals/33/95/76/33957674e3c28000fd2289befc17b953.png');
  24. *this is the contact picture used for the text message on the first page;
  25. --img-2: url('https://64.media.tumblr.com/3d00af80e22b928a5825d411fec82974/tumblr_pj9yxbAyJX1wlgxm5o2_250.png');
  26. *these are the pictures used for the character posts at the bottom;
  27. --img-3: url('https://64.media.tumblr.com/52256407e9b6e4ba82a49a29654043f4/tumblr_oxh5il9VdN1w6f1yao5_250.png');
  28. --img-4: url('https://64.media.tumblr.com/199077759741e669cc72d70b05ab59f5/tumblr_pc11o5xVwx1wmlo63o9_250.png');
  29. *this is the icon of the instagram page;
  30. --img-5: url('https://i.pinimg.com/564x/7f/47/ba/7f47baad8457eabe144992b7ecf2dc93.jpg');
  31.  
  32. *gallery pics on the instagram page;
  33. --img-6: url('https://data.whicdn.com/images/342004801/original.jpg');
  34. --img-7: url('https://64.media.tumblr.com/38422eb1dbeccb37ebf63eb4b7a33c25/tumblr_pdgnwfCInY1vzztm0o9_r1_250.png');
  35. --img-8: url('https://64.media.tumblr.com/b2187efb57df4bf4e183b1402beb3391/tumblr_pg2bhdQzKv1xc7mggo2_250.png');
  36. --img-9: url('https://64.media.tumblr.com/c4b2edeb94756ff7177bc11764e43680/tumblr_pdj5t8z5Rd1wlgxz9o3_250.png');
  37. --img-10: url('https://64.media.tumblr.com/5fa1c1aea414129d080de5459ec1c564/tumblr_pd1tkyPQrC1xtzds5o1_250.jpg');
  38. --img-11: url('https://64.media.tumblr.com/25a32d1126d9eded0f4d68fe6afc2251/tumblr_pdj5t8z5Rd1wlgxz9o6_250.png');
  39. --img-12: url('https://64.media.tumblr.com/1e03ba22947f96adfb6fb340dfe1c438/7209393c6a2bd96d-42/s640x960/83dc3e0c2421af6119ae1fd98d03eb23b14edd55.png');
  40. --img-13: url('https://64.media.tumblr.com/66221fba3b0b941f459fed8fdf6ad477/7209393c6a2bd96d-b9/s640x960/accdac5126f4604992cd58e5b2e97b19f2b925bd.png');
  41. --img-14: url('https://64.media.tumblr.com/1138298993d36cd8cedb1c6c19d50872/7209393c6a2bd96d-81/s640x960/f2c809047467c8b87103bc5c5b76c9dc2e7000ef.png');
  42.  
  43. --img-post: url('https://pbs.twimg.com/media/EkT7QFbXsAIe7Wi?format=jpg&name=medium');
  44.  
  45. *only add to this one if you want to put an image in one of the sidebar posts;
  46. --more-img: url('xx');
  47.  
  48. height:600px; width:800px; margin:auto; padding:0; padding-bottom:25px; line-height:0; position:relative;]
  49.  
  50. [comment]----main container----[/comment]
  51. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow: row nowrap; position:relative; overflow:hidden;]
  52. [comment]----content image----[/comment]
  53. [border=transparent; height:100%; width:67%; padding:0; background: var(--bg) 60% 50%; background-blend-mode:overlay; background-size:cover; /*remove this if you're changing the colours!*/ -webkit-filter: grayscale(1);][border=transparent; height:100%; width:100%; background-color: var(--color-4); padding:0; opacity:0.25;][/border][/border]
  54.  
  55. [comment]----sidebar cover----[/comment]
  56. [border=transparent; height:100%; width:33%; padding:0; background-color: var(--bg-color); position:absolute; top:0; right:0; pointer-events:none;][border=transparent; height:100%; width:100%; padding:30px 25px 10px 25px; box-sizing:border-box; position:relative; display:flex; flex-flow: row wrap; align-content:space-between; justify-content:center;]
  57.  
  58. [comment]----blob----[/comment]
  59. [border=transparent; height:300px; width:300px; padding:0; position:absolute; top:-170px; right:-120px; background-color: var(--color-4); border-radius:40% 0 60% 70%;][/border]
  60.  
  61. [comment]----pointer null----[/comment]
  62. [border=transparent; height:3%; width:90%; position:absolute; top:0; left:0; padding:0; pointer-events:auto; z-index:2;][/border]
  63. [border=transparent; height:38%; width:100%; position:absolute; top:3%; left:0; padding:0; pointer-events:auto; z-index:2;][/border]
  64.  
  65. [comment]----home button----[/comment]
  66. [border=transparent; height:fit-content; width:fit-content; padding:5px; font-weight:bold; position:absolute; top:0; right:0; color: var(--color-3); font-size:8px; text-transform:uppercase; line-height:130%;][font=Montserrat]home[/font][/border]
  67.  
  68. [comment]----user info----[/comment]
  69. [border=transparent; height:27%; width:100%; padding:0; position:relative; display:flex; flex-flow: row wrap; justify-content:center;]
  70.  
  71. [border=transparent; height:68%; width:100%; background-color:var(--color-1); border-radius:15px; align-self:flex-end; padding:28px 0 0 0; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:center; align-content:center; justify-content:center;]
  72. [border=transparent; height:fit-content; width:100%; color: var(--color-2); padding:0; font-size:7px; text-transform:uppercase; letter-spacing:1px; text-align:center; line-height:130%; margin:8px 0 -3px 0;][font=Montserrat]currently logged in as[/font][/border]
  73. [border=transparent; height:fit-content; width:100%; color: var(--color-3); padding:0; text-shadow:0 0 4px var(--color-3); text-align:center; letter-spacing:0.3px; text-transform:uppercase; line-height:160%; font-size:24px;][font=Montserrat][comment]
  74.  
  75. ---- * * *your character's first name here ----
  76.  
  77. [/comment]first name[/font][/border]
  78. [/border]
  79.  
  80. [comment]---icon----[/comment]
  81. [border=transparent; height:75px; width:75px; border:8px solid var(--color-1); border-radius:50%; background: var(--img-1); background-size:cover; padding:0; position:absolute; top:0;][/border]
  82.  
  83. [/border]
  84. [comment]----user info end----[/comment]
  85.  
  86. [comment]----tabs cover----[/comment]
  87. [border=transparent; height:42%; width:100%; background-color: var(--color-1); padding:8px 18px 15px 18px; box-sizing:border-box; border-radius:15px; display:flex; flex-flow: column nowrap; justify-content:space-between; align-items:center;]
  88.  
  89. [comment]----tabs header----[/comment]
  90. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row wrap; margin-bottom:5px;]
  91. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-3); text-shadow:0 0 3px var(--color-3); font-size:19px; line-height:130%;][font=Montserrat]jump back in[i]![/i][/font][/border]
  92. [border=transparent; height:fit-content; width:100%; padding:0 3px 0 0; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:8px; text-align:right; line-height:130%; font-weight:bold;][font=Montserrat]your opened apps[/font][/border]
  93. [/border]
  94.  
  95. [comment]----tab button----[/comment]
  96. [border=transparent; height:fit-content; width:100%; background-color: var(--color-4); border-radius:6px; padding:8px 0; color: var(--t-color); text-shadow:0px 0px 3px var(--color-3); text-transform:uppercase; font-weight:bold; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:1.5px;][font=Montserrat]requisite[/font][/border]
  97.  
  98. [comment]----tab button----[/comment]
  99. [border=transparent; height:fit-content; width:100%; background-color: var(--color-4); border-radius:6px; padding:8px 0; color: var(--t-color); text-shadow:0px 0px 3px var(--color-3); text-transform:uppercase; font-weight:bold; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:1.5px;][font=Montserrat]personality[/font][/border]
  100.  
  101. [comment]----tab button----[/comment]
  102. [border=transparent; height:fit-content; width:100%; background-color: var(--color-4); border-radius:6px; padding:8px 0; color: var(--t-color); text-shadow:0px 0px 3px var(--color-3); text-transform:uppercase; font-weight:bold; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:1.5px;][font=Montserrat]backstory[/font][/border]
  103.  
  104. [comment]----tab button----[/comment]
  105. [border=transparent; height:fit-content; width:100%; background-color: var(--color-4); border-radius:6px; padding:8px 0; color: var(--t-color); text-shadow:0px 0px 3px var(--color-3); text-transform:uppercase; font-weight:bold; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:1.5px;][font=Montserrat]miscellaneous[/font][/border]
  106.  
  107. [/border]
  108. [comment]----tabs cover end----[/comment]
  109.  
  110. [comment]----filler box----[/comment]
  111. [border=transparent; height:25%; width:100%; padding:0;][/border]
  112.  
  113. [/border][/border]
  114. [comment]----sidebar cover end----[/comment]
  115.  
  116. [comment]----recent posts----[/comment]
  117. [border=transparent; height:27%; width:65%; padding:0; position:absolute; bottom:0; right:0;][border=transparent; height:100%; width:100%; padding:0 0 12px 45px; box-sizing:border-box; position:relative; display:flex; flex-flow: row wrap; align-items:center; justify-content:space-around;]
  118.  
  119. [comment]----header----[/comment]
  120. [border=transparent; height:fit-content; width:100%; padding:0 10px 5px 0; box-sizing:border-box; color: var(--color-3); font-size:12px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; line-height:130%; text-align:right;][font=Montserrat]recent posts :[/font][/border]
  121.  
  122. [comment]----post seat----[/comment]
  123. [border=transparent; height:80%; width:100%; position:absolute; bottom:-35px; left:0; z-index:1; background: var(--color-4); border-radius:100px 0 0 100px; padding:0;][/border]
  124.  
  125. [comment]----post----[/comment]
  126. [border=transparent; height:73%; width:46%; background-color:var(--color-1); border-radius:15px; padding:12px 15px 8px 15px; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow: column nowrap;]
  127.  
  128. [comment]----user info----[/comment]
  129. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap;]
  130. [comment]----icon----[/comment]
  131. [border=transparent; height:40px; width:40px; background: var(--img-3); background-size:cover; padding:0; border-radius:50%; flex-shrink:0;][/border]
  132.  
  133. [comment]----details----[/comment]
  134. [border=transparent; height:fit-content; flex-grow:1; padding:5px 0 0 0; box-sizing:border-box; display:flex; flex-flow: row wrap; margin-left:5px;]
  135.  
  136. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  137. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:130%; font-size:12px; color: var(--color-3); text-shadow:0 0 2px var(--color-3); letter-spacing:0.5px;][font=Montserrat][comment]
  138. ----you can put another character's name here, or your own character's name
  139. [/comment]character name[/font][/border]
  140.  
  141. [comment]---post time----[/comment]
  142. [border=transparent; height:fit-content; width:fit-content; padding:3px 0 0 0; font-size:8px; color: var(--color-2); display:flex; align-items:center; margin-left:8px;]
  143. [border=transparent; height:3px; width:3px; border-radius:50%; padding:0; background-color: var(--color-2); margin-right:5px; flex-shrink:0;][/border]
  144. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-weight:normal; letter-spacing:.5px;][font=Helvetica] #hr[/font][/border]
  145. [/border]
  146. [/border]
  147.  
  148. [border=transparent; height:fit-content; width:100%; padding:0; line-height:120%; color: var(--t-color); text-transform:uppercase; letter-spacing:0.5px; font-size:7.5px; font-weight:bold;][font=Montserrat][fa]fas fa-map-marker-alt[/fa] location[/font][/border]
  149. [/border]
  150. [comment]----details end----[/comment]
  151. [/border]
  152. [comment]----user info end----[/comment]
  153.  
  154. [comment]----post content----[/comment]
  155. [border=transparent; flex-grow:1; width:73%; margin-top:5px; padding:0 0 0 2px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:flex-start; justify-content:flex-end;]
  156. [border=transparent; flex-grow:1; width:100%; padding:0; color: var(--t-color); font-size:10px; line-height:110%; overflow:hidden;][font=Helvetica][comment]
  157. ---- * * *you can write a short post here, 2 lines max ----
  158. [/comment] short short post
  159. short post
  160. [/font][/border]
  161. [border=transparent; flex-shrink:0; height:fit-content; width:90px; padding:0; color: var(--color-3); margin:auto 0 0 -4px; display:flex; flex-flow: row nowrap; justify-content:space-between;]
  162. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:110%; font-size:8px;][font=Helvetica][fa]fal fa-heart[/fa] 4.20k[/font][/border]
  163. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:110%; font-size:8px;][font=Helvetica][fa]fal fa-comments-alt[/fa] 666k[/font][/border]
  164. [/border]
  165. [/border]
  166.  
  167. [comment]----more pictures----[/comment]
  168. [border=transparent; height:40px; width:40px; padding:0; border-radius:3px; background: var(--color-3) var(--more-img); background-size:cover; background-blend-mode: overlay; position:absolute; bottom:25px; right:18px; display:flex; align-items:center; justify-content:center; line-height:120%; color: var(--color-1); font-size:10px;][font=Helvetica]+2[/font][/border]
  169.  
  170. [/border]
  171. [comment]----post end----[/comment]
  172.  
  173. [comment]----post----[/comment]
  174. [border=transparent; height:73%; width:46%; background-color:var(--color-1); border-radius:15px; padding:12px 15px 8px 15px; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow: column nowrap;]
  175.  
  176. [comment]----user info----[/comment]
  177. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap;]
  178. [comment]----icon----[/comment]
  179. [border=transparent; height:40px; width:40px; background: var(--img-4); background-size:cover; padding:0; border-radius:50%; flex-shrink:0;][/border]
  180.  
  181. [comment]----details----[/comment]
  182. [border=transparent; height:fit-content; flex-grow:1; padding:5px 0 0 0; box-sizing:border-box; display:flex; flex-flow: row wrap; margin-left:5px;]
  183.  
  184. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  185. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:130%; font-size:12px; color: var(--color-3); text-shadow:0 0 2px var(--color-3); letter-spacing:0.5px;][font=Montserrat][comment]
  186. ----you can put another character's name here, or your own character's name
  187. [/comment]character name[/font][/border]
  188.  
  189. [comment]---post time----[/comment]
  190. [border=transparent; height:fit-content; width:fit-content; padding:3px 0 0 0; font-size:8px; color: var(--color-2); display:flex; align-items:center; margin-left:8px;]
  191. [border=transparent; height:3px; width:3px; border-radius:50%; padding:0; background-color: var(--color-2); margin-right:5px; flex-shrink:0;][/border]
  192. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-weight:normal; letter-spacing:.5px;][font=Helvetica] #hr[/font][/border]
  193. [/border]
  194. [/border]
  195.  
  196. [border=transparent; height:fit-content; width:100%; padding:0; line-height:120%; color: var(--t-color); text-transform:uppercase; letter-spacing:0.5px; font-size:7.5px; font-weight:bold;][font=Montserrat][fa]fas fa-map-marker-alt[/fa] location[/font][/border]
  197. [/border]
  198. [comment]----details end----[/comment]
  199. [/border]
  200. [comment]----user info end----[/comment]
  201.  
  202. [comment]----post content----[/comment]
  203. [border=transparent; flex-grow:1; width:100%; margin-top:4px; padding:0 0 0 2px; box-sizing:border-box; display:flex; flex-flow: column nowrap; align-items:flex-start; justify-content:flex-end;]
  204. [border=transparent; flex-grow:1; width:100%; padding:0; color: var(--t-color); font-size:9px; line-height:110%; overflow:hidden;][font=Helvetica][comment]
  205. ---- * * *you can write a longer post here, 3 lines max ----
  206. [/comment] long post
  207. long long post
  208. post so long
  209. [/font][/border]
  210. [border=transparent; flex-shrink:0; height:fit-content; width:90px; padding:0; color: var(--color-3); margin:auto 0 0 -4px; display:flex; flex-flow: row nowrap; justify-content:space-between;]
  211. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:110%; font-size:8px;][font=Helvetica][fa]fal fa-heart[/fa] 4.20k[/font][/border]
  212. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:110%; font-size:8px;][font=Helvetica][fa]fal fa-comments-alt[/fa] 666k[/font][/border]
  213. [/border]
  214. [/border]
  215.  
  216. [/border]
  217. [comment]----post end----[/comment]
  218.  
  219. [/border][/border]
  220. [comment]----recent posts end----[/comment]
  221.  
  222. [comment]----sidebar tabs----[/comment]
  223. [border=transparent; height:100%; width:33%; padding:0; overflow:hidden;][border=transparent; padding:0; margin-left:25px; margin-top:0px; line-height:252%;][tabs]
  224.  
  225. [tab=homeaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:67%; padding:15px; box-sizing:border-box; position:absolute; top:0; left:0; line-height:0; display:flex; justify-content: flex-end; align-items:flex-start;]
  226.  
  227. [comment]----text message----[/comment]
  228. [border=transparent; height:12%; width:42%; background-color: var(--color-1); padding:5px 15px 3px 15px; box-sizing:border-box; position:relative; display:flex; flex-flow: row nowrap; border-radius:8px; align-items:center;]
  229. [border=transparent; height:fit-content; width:fit-content; color: var(--color-2); padding:0; text-transform:uppercase; font-size:7px; line-height:110%; position:absolute; top:5px; right:5px; letter-spacing:0.8px; font-weight:bold;][font=Montserrat]new message![/font][/border]
  230. [border=transparent; height:42px; width:42px; padding:0; border-radius:50%; background: var(--img-2); background-size:cover; flex-shrink:0;][/border]
  231. [border=transparent; height:fit-content; flex-grow:1; padding:0; margin-left:8px; display:flex; flex-flow: row wrap; align-content:center;]
  232. [border=transparent; height:fit-content; width:100%; color: var(--color-3); font-size:12px; padding:0; line-height:110%; font-weight:bold;][font=Montserrat]contact name[/font][/border]
  233. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:10px; line-height:130%;][font=Helvetica]short text message[/font][/border]
  234. [/border]
  235. [/border]
  236. [/border][/tab]
  237.  
  238. [comment]----filler tab zone (ignore!)----[/comment]
  239. [tab=aaaaaaaaaaaaaaaaaaaaaaa][border=0; font-size:0;]filler tab[/border][/tab]
  240. [tab=aaaaaaaaaaaaaaaaaaaaaaa][border=0; font-size:0;]filler tab[/border][/tab]
  241. [tab=aaaaaaaaaaaaaaaaaaaaaaa][border=0; font-size:0;]filler tab[/border][/tab]
  242. [tab=aaaaaaaaaaaaaaaaaaaaaaa][border=0; font-size:0;]filler tab[/border][/tab]
  243. [tab=aaaaaaaaaaaaaaaaaaaaaaa][border=0; font-size:0;]filler tab[/border][/tab]
  244. [comment]----filler tab zone end (ignore!)----[/comment]
  245.  
  246. [comment]----requisite tab----[/comment]
  247. [tab=aaaaaaarequisite][border=transparent; height:85%; width:67%; padding:45px 45px 55px 45px; box-sizing:border-box; position:absolute; top:0; left:0; line-height:0; display:flex;]
  248. [comment]----tab container----[/comment]
  249. [border=transparent; height:100%; width:100%; background-color: var(--bg-color); border-radius:5px; padding:50px 25px 25px 25px; box-sizing:border-box; position:relative;]
  250.  
  251. [comment]----title----[/comment]
  252. [border=transparent; height:fit-content; width:fit-content; padding:11px 18px; box-sizing:border-box; border-radius:23px; position:absolute; top:-16px; left:25px; background-color: var(--bg-color); border:1px solid var(--color-4); font-size:16px; color: var(--color-3); text-transform:uppercase; text-shadow: 1px 1px 3px var(--color-3); display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
  253. [border=transparent; padding:0; line-height:90%;][font=Montserrat]requisite[/font][/border]
  254. [/border]
  255.  
  256. [comment]----tab content (this scrolls!)----[/comment]
  257. [border=transparent; height:100%; width:100%; background-color: var(--color-1); border-radius:15px; padding:11px 0px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;]
  258. [comment]----basics area----[/comment]
  259. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  260.  
  261. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  262. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  263. [comment]----tag----[/comment]
  264. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  265. [/comment]full name[/font][/border]
  266.  
  267. [comment]----tag content----[/comment]
  268. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  269. ----* * *put in the info itself here!----
  270. [/comment]answer[/font][/border]
  271. [/border]
  272. [comment]----up until this comment!----[/comment]
  273.  
  274. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  275. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  276. [comment]----tag----[/comment]
  277. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  278. [/comment]nickname[/font][/border]
  279.  
  280. [comment]----tag content----[/comment]
  281. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  282. ----* * *put in the info itself here!----
  283. [/comment]answer[/font][/border]
  284. [/border]
  285. [comment]----up until this comment!----[/comment]
  286.  
  287. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  288. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  289. [comment]----tag----[/comment]
  290. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  291. [/comment]birthplace[/font][/border]
  292.  
  293. [comment]----tag content----[/comment]
  294. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  295. ----* * *put in the info itself here!----
  296. [/comment]answer[/font][/border]
  297. [/border]
  298. [comment]----up until this comment!----[/comment]
  299.  
  300. [/border]
  301. [comment]----basics area end----[/comment]
  302.  
  303. [comment]----appearance area----[/comment]
  304. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; margin-top:15px;]
  305.  
  306. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  307. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  308. [comment]----tag----[/comment]
  309. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  310. [/comment]faceclaim[/font][/border]
  311.  
  312. [comment]----tag content----[/comment]
  313. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  314. ----* * *put in the info itself here!----
  315. [/comment]answer[/font][/border]
  316. [/border]
  317. [comment]----up until this comment!----[/comment]
  318.  
  319. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  320. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  321. [comment]----tag----[/comment]
  322. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  323. [/comment]height[/font][/border]
  324.  
  325. [comment]----tag content----[/comment]
  326. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  327. ----* * *put in the info itself here!----
  328. [/comment]answer[/font][/border]
  329. [/border]
  330. [comment]----up until this comment!----[/comment]
  331.  
  332. [/border]
  333. [comment]----appearance area end----[/comment]
  334. [/border][/border]
  335. [comment]----tab content end----[/comment]
  336.  
  337. [/border]
  338. [comment]----tab container end----[/comment]
  339. [/border][/tab]
  340. [comment]----requisite tab end----[/comment]
  341.  
  342. [comment]----personality tab----[/comment]
  343. [tab=aaaaapersonality][border=transparent; height:85%; width:67%; padding:45px 45px 55px 45px; box-sizing:border-box; position:absolute; top:0; left:0; line-height:0; display:flex;]
  344. [comment]----tab container----[/comment]
  345. [border=transparent; height:100%; width:100%; background-color: var(--bg-color); border-radius:5px; padding:50px 25px 25px 25px; box-sizing:border-box; position:relative;]
  346.  
  347. [comment]----title----[/comment]
  348. [border=transparent; height:fit-content; width:fit-content; padding:11px 18px; box-sizing:border-box; border-radius:23px; position:absolute; top:-16px; left:25px; background-color: var(--bg-color); border:1px solid var(--color-4); font-size:16px; color: var(--color-3); text-transform:uppercase; text-shadow: 1px 1px 3px var(--color-3); display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
  349. [border=transparent; padding:0; line-height:90%;][font=Montserrat]personality[/font][/border]
  350. [/border]
  351.  
  352. [comment]----tab content (this scrolls!)----[/comment]
  353. [border=transparent; height:100%; width:100%; background-color: var(--color-1); border-radius:15px; padding:11px 0px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;]
  354. [comment]----personality area----[/comment]
  355. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  356.  
  357. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  358. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  359. [comment]----tag----[/comment]
  360. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  361. [/comment]vices[/font][/border]
  362.  
  363. [comment]----tag content----[/comment]
  364. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  365. ----* * *put in the info itself here!----
  366. [/comment]answer[/font][/border]
  367. [/border]
  368. [comment]----up until this comment!----[/comment]
  369.  
  370. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  371. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  372. [comment]----tag----[/comment]
  373. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  374. [/comment]virtues[/font][/border]
  375.  
  376. [comment]----tag content----[/comment]
  377. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  378. ----* * *put in the info itself here!----
  379. [/comment]answer[/font][/border]
  380. [/border]
  381. [comment]----up until this comment!----[/comment]
  382.  
  383. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  384. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  385. [comment]----tag----[/comment]
  386. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  387. [/comment]likes[/font][/border]
  388.  
  389. [comment]----tag content----[/comment]
  390. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  391. ----* * *put in the info itself here!----
  392. [/comment]answer[/font][/border]
  393. [/border]
  394. [comment]----up until this comment!----[/comment]
  395.  
  396. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  397. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  398. [comment]----tag----[/comment]
  399. [border=transparent; height:fit-content; min-width:27%; max-width:40%; flex-shrink:0; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  400. [/comment]dislikes[/font][/border]
  401.  
  402. [comment]----tag content----[/comment]
  403. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  404. ----* * *put in the info itself here!----
  405. [/comment]answer[/font][/border]
  406. [/border]
  407. [comment]----up until this comment!----[/comment]
  408.  
  409. [/border]
  410. [comment]----personality area end----[/comment]
  411. [/border][/border]
  412. [comment]----tab content end----[/comment]
  413.  
  414. [/border]
  415. [comment]----tab container end----[/comment]
  416. [/border][/tab]
  417. [comment]----personality tab end----[/comment]
  418.  
  419. [comment]----backstory tab----[/comment]
  420. [tab=aaaaaabackstory][border=transparent; height:85%; width:67%; padding:45px 45px 55px 45px; box-sizing:border-box; position:absolute; top:0; left:0; line-height:0; display:flex;]
  421. [comment]----tab container----[/comment]
  422. [border=transparent; height:100%; width:100%; background-color: var(--bg-color); border-radius:5px; padding:50px 25px 25px 25px; box-sizing:border-box; position:relative;]
  423.  
  424. [comment]----title----[/comment]
  425. [border=transparent; height:fit-content; width:fit-content; padding:11px 18px; box-sizing:border-box; border-radius:23px; position:absolute; top:-16px; left:25px; background-color: var(--bg-color); border:1px solid var(--color-4); font-size:16px; color: var(--color-3); text-transform:uppercase; text-shadow: 1px 1px 3px var(--color-3); display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
  426. [border=transparent; padding:0; line-height:90%;][font=Montserrat]backstory[/font][/border]
  427. [/border]
  428.  
  429. [comment]----tab content (this scrolls!)----[/comment]
  430. [border=transparent; height:100%; width:100%; background-color: var(--color-1); border-radius:15px; padding:11px 0px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:auto;]
  431. [comment]----backstory area----[/comment]
  432. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  433.  
  434. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  435. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  436. [comment]----tag----[/comment]
  437. [border=transparent; height:fit-content; min-width:27%; max-width:40%; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  438. [/comment]history[/font][/border]
  439.  
  440. [comment]----tag content----[/comment]
  441. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  442. ----* * *put in the info itself here!----
  443. [/comment]answer[/font][/border]
  444. [/border]
  445. [comment]----up until this comment!----[/comment]
  446.  
  447. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  448. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  449. [comment]----tag----[/comment]
  450. [border=transparent; height:fit-content; min-width:27%; max-width:40%; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  451. [/comment]family[/font][/border]
  452.  
  453. [comment]----tag content----[/comment]
  454. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  455. ----* * *put in the info itself here!----
  456. [/comment]answer[/font][/border]
  457. [/border]
  458. [comment]----up until this comment!----[/comment]
  459.  
  460. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  461. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  462. [comment]----tag----[/comment]
  463. [border=transparent; height:fit-content; min-width:27%; max-width:40%; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  464. [/comment]relations[/font][/border]
  465.  
  466. [comment]----tag content----[/comment]
  467. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  468. ----* * *put in the info itself here!----
  469. [/comment]answer[/font][/border]
  470. [/border]
  471. [comment]----up until this comment!----[/comment]
  472.  
  473. [comment]----copy this entire thing if you want to add another tag!!!----[/comment]
  474. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:4px 0;]
  475. [comment]----tag----[/comment]
  476. [border=transparent; height:fit-content; min-width:27%; max-width:40%; padding:0; font-size:13px; color: var(--color-3); text-transform:uppercase; line-height:120%; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]---* * *put in the title of ur info here!----
  477. [/comment]extra[/font][/border]
  478.  
  479. [comment]----tag content----[/comment]
  480. [border=transparent; height:fit-content; flex-grow:1; margin:1px 0 0 10px; font-size:11px; color: var(--t-color); padding:0; line-height:120%;][font=Helvetica][comment]
  481. ----* * *put in the info itself here!----
  482. [/comment]answer[/font][/border]
  483. [/border]
  484. [comment]----up until this comment!----[/comment]
  485.  
  486. [/border]
  487. [comment]----backstory area end----[/comment]
  488. [/border][/border]
  489. [comment]----tab content end----[/comment]
  490.  
  491. [/border]
  492. [comment]----tab container end----[/comment]
  493. [/border][/tab]
  494. [comment]----backstory tab end----[/comment]
  495.  
  496. [comment]----misc tab----[/comment]
  497. [tab=aaamiscellaneous][border=transparent; height:85%; width:67%; padding:0; position:absolute; top:0; left:0; line-height:0;][border=transparent; height:100%; width:100%; padding:40px 40px 5px 35px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:space-between;]
  498.  
  499. [comment]----instagram page----[/comment]
  500. [border=transparent; height:69%; width:65%; background-color: var(--bg-color); border-radius:5px; padding:35px 20px 10px 20px; box-sizing:border-box; position:relative; display:flex; flex-flow: column nowrap;]
  501.  
  502. [comment]----title----[/comment]
  503. [border=transparent; height:fit-content; width:fit-content; padding:11px 25px; box-sizing:border-box; border-radius:23px; position:absolute; top:-16px; left:25px; background-color: var(--bg-color); border:1px solid var(--color-4); font-size:16px; color: var(--color-3); text-transform:uppercase; text-shadow: 1px 1px 3px var(--color-3); display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;]
  504. [border=transparent; padding:0; line-height:90%;][font=Montserrat]misc[/font][/border]
  505. [/border]
  506.  
  507. [comment]----ig user info----[/comment]
  508. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  509. [comment]----icon----[/comment]
  510. [border=transparent; height:75px; width:75px; padding:0; background: var(--img-5); padding:0; background-size:cover; border-radius:50%; flex-shrink:0;][/border]
  511.  
  512. [comment]----ig details----[/comment]
  513. [border=transparent; height:66%; flex-grow:1; padding:0; margin:0 12px; display:flex; flex-flow: column nowrap;]
  514. [border=transparent; flex-grow:1; width:100%; padding:0 0 5px 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center;]
  515.  
  516. [comment]----posts----[/comment]
  517. [border=transparent; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  518. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); text-shadow:0 0 3px var(--color-4); font-size:11px; line-height:150%; text-shadow:0 0 3px var(--color-4); font-weight:bold;][font=Helvetica]13[/font][/border]
  519. [border=transparent; height:fit-content; width:100%; text-align:center; padding:0; color: var(--t-color); text-transform:uppercase; font-size:6px; line-height:100%;][font=Montserrat]posts[/font][/border]
  520. [/border]
  521.  
  522. [comment]----followers----[/comment]
  523. [border=transparent; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  524. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); text-shadow:0 0 3px var(--color-4); font-size:11px; line-height:150%; text-shadow:0 0 3px var(--color-4); font-weight:bold;][font=Helvetica]6.9m[/font][/border]
  525. [border=transparent; height:fit-content; width:100%; text-align:center; padding:0; color: var(--t-color); text-transform:uppercase; font-size:6px; line-height:100%;][font=Montserrat]followers[/font][/border]
  526. [/border]
  527.  
  528. [comment]----following----[/comment]
  529. [border=transparent; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  530. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); text-shadow:0 0 3px var(--color-4); font-size:11px; line-height:150%; text-shadow:0 0 3px var(--color-4); font-weight:bold;][font=Helvetica]420[/font][/border]
  531. [border=transparent; height:fit-content; width:100%; text-align:center; padding:0; color: var(--t-color); text-transform:uppercase; font-size:6px; line-height:100%;][font=Montserrat]following[/font][/border]
  532. [/border]
  533.  
  534. [/border]
  535.  
  536. [comment]----ig buttons----[/comment]
  537. [border=transparent; height:25%; max-height:16px; width:100%; max-width:160px; padding:0; box-sizing:border-box; display:flex; position:relative; flex-shrink:0;]
  538. [comment]----button cover----[/comment]
  539. [border=transparent; height:100%; width:100%; background: var(--bg-color); position:absolute; top:0; left:0; padding:0 0 0 5px; box-sizing:border-box; display:flex; flex-flow: row nowrap; justify-content:flex-start; align-items:flex-start; pointer-events:none;]
  540. [border=transparent; height:16px; width:55%; padding:3px 0px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:3px; text-align:center; color: var(--t-color); font-weight:bold; letter-spacing:2px; text-transform:uppercase; line-height:120%; font-size:6px; pointer-events:auto; cursor:pointer;][font=Montserrat]message[/font][/border]
  541.  
  542. [border=transparent; height:15px; width:16%; padding:3px 0px 3px 3px; box-sizing:border-box; border:1px solid var(--color-3); border-radius:3px; text-align:center; color: var(--t-color); font-weight:bold; letter-spacing:3px; text-transform:uppercase; line-height:100%; font-size:6px; margin:auto;][fa]fas fa-user-check[/fa][/border]
  543. [/border]
  544.  
  545. [comment]----just for fun lol----[/comment]
  546. [border=transparent; height:100%; width160px; margin-left:auto; padding:0; overflow:hidden; display:flex; flex-flow:nowrap; justify-content:flex-end;][border=transparent; padding:0; margin-left:8px;][tabs]
  547. [tab=.][border=transparent; height:16px; width:35%; padding:3px 0px 0px 2px; position:absolute; top:0; right:5px; border:1px solid var(--follow); box-sizing:border-box; background-color:var(--follow); border-radius:3px; text-align:center; color: var(--color-1); font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:120%; font-size:6px; pointer-events:none;][font=Montserrat]follow[/font][/border][/tab]
  548. [tab=.][border=transparent; width:180px; height:0px; padding:0;]h[/border][/tab]
  549. [tab=.][border=transparent; height:16px; width:35%; padding:3px 0px 0px 2px; position:absolute; top:0; right:5px; border:1px solid var(--follow); box-sizing:border-box; background-color:var(--follow); border-radius:3px; text-align:center; color: var(--color-1); font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:120%; font-size:6px; pointer-events:none;][font=Montserrat]follow[/font][/border][/tab]
  550. [/tabs][/border][/border]
  551. [/border]
  552.  
  553. [/border]
  554. [comment]----ig details end----[/comment]
  555. [/border]
  556. [comment]----ig user info end----[/comment]
  557.  
  558. [comment]----ig bio----[/comment]
  559. [border=transparent; flex-shrink:0; height:fit-content; width:100%; padding:0; line-height:150%; color: var(--color-3); font-size:12px; font-weight:bold; margin-top:3px;][font=Montserrat][comment]
  560. ----* * *put your character's display name here----
  561. [/comment]display name[/font][/border]
  562. [border=transparent; flex-shrink:0; height:fit-content; max-height:10px; width:100%; padding:0; line-height:120%; color: var(--t-color); font-size:8px; overflow:hidden; margin-bottom:3px;][font=Helvetica][comment]
  563. ----* * *put your character's bio here----
  564. [/comment]short little bio one line only go crazy!!![/font][/border]
  565.  
  566. [comment]----ig pics (this scrolls!)----[/comment]
  567. [border=transparent; flex-grow:1; width:95%; padding:5px 0 0 0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; flex:1;]
  568. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  569.  
  570. [comment]----row of pics (3 per row)----
  571. copy this entire section to add a new row! edit the numbers next to the img- and add in images with the variables at the top ----[/comment]
  572. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:space-between; margin:5px 0 5px -3px;]
  573. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-6); background-size:cover;][/border]
  574. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-7); background-size:cover;][/border]
  575. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-8); background-size:cover;][/border]
  576. [/border]
  577. [comment]----copy me too!---[/comment]
  578.  
  579. [comment]----row of pics (3 per row)----
  580. copy this entire section to add a new row! edit the numbers next to the img- and add in images with the variables at the top ----[/comment]
  581. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:space-between; margin:5px 0 5px -3px;]
  582. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-9); background-size:cover;][/border]
  583. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-10); background-size:cover;][/border]
  584. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-11); background-size:cover;][/border]
  585. [/border]
  586. [comment]----copy me too!---[/comment]
  587.  
  588. [comment]----row of pics (3 per row)----
  589. copy this entire section to add a new row! edit the numbers next to the img- and add in images with the variables at the top ----[/comment]
  590. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:space-between; margin:5px 0 5px -3px;]
  591. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-12); background-size:cover;][/border]
  592. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-13); background-size:cover;][/border]
  593. [border=transparent; height:70px; width:70px; padding:0; background: var(--img-14); background-size:cover;][/border]
  594. [/border]
  595. [comment]----copy me too!---[/comment]
  596.  
  597. [/border]
  598. [/border][/border]
  599.  
  600. [/border]
  601. [comment]----instagram page end----[/comment]
  602.  
  603. [comment]----instagram post----[/comment]
  604. [border=transparent; height:65%; width:41%; background-color: var(--color-1); padding:0; border-radius:15px; position:absolute; right:30px; top:70px; display:flex; flex-flow: column nowrap; overflow:hidden; box-shadow:-1.5px 1px var(--color-4);]
  605. [comment]----user info----[/comment]
  606. [border=transparent; height:13%; width:100%; padding:3px 15px 3px 10px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center;]
  607. [comment]----post icon----[/comment]
  608. [border=transparent; flex-shrink:0; height:28px; width:28px; padding:0; border-radius:50%; background: var(--img-5); background-size:cover; image-rendering:crisp-edges;][/border]
  609.  
  610. [comment]----username & location----[/comment]
  611. [border=transparent; flex-grow:1; height:fit-content; padding:0; margin:0 8px; display:flex; flex-flow: column nowrap;]
  612. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-3); font-size:11.5px; font-weight:bold; line-height:130%;][font=Montserrat]username[/font][/border]
  613. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:6px; font-weight:bold; text-transform:uppercase; line-height:120%; letter-spacing:0.5px;][font=Montserrat]location[/font][/border]
  614. [/border]
  615.  
  616. [comment]----3 dots lol----[/comment]
  617. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:14px; color: var(--color-3);][fa]fal fa-ellipsis-h[/fa][/border]
  618.  
  619. [/border]
  620. [comment]----user info end----[/comment]
  621.  
  622. [comment]----post image----[/comment]
  623. [border=transparent; height:69%; width:100%; padding:0; background: var(--img-post); /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; background-size:cover; image-rendering:auto;][/border]
  624.  
  625. [comment]----post interactions----[/comment]
  626. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; font-size:12px; color: var(--color-4); letter-spacing:4px; line-height:130%;][fa]fal fa-heart[/fa] [fa]fal fa-comments-alt[/fa] [fa]fal fa-paper-plane[/fa][/border]
  627.  
  628. [comment]----post caption----[/comment]
  629. [border=transparent; height:fit-content; width:100%; display:flex; flex-flow: row nowrap; align-items:center; padding:0px 10px; box-sizing:border-box;]
  630. [border=transparent; height:fit-content; width:fit-content; color: var(--color-3); font-weight:bold; font-size:9px; padding:0; line-height:100%;][font=Montserrat]username[/font][/border]
  631. [border=transparent; height:fit-content; flex-grow:1; margin-left:5px; padding:0; font-size:9px; color: var(--t-color); line-height:110%;][font=Helvetica]short caption one line only![/font][/border]
  632. [/border]
  633.  
  634. [comment]----more comments----[/comment]
  635. [border=transparent; height:fit-content; width:100%; margin-top:auto; padding:0 10px 12px 10px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:6px; font-weight:bold; line-height:150%;][font=Montserrat]view all 420 comments[/font][/border]
  636.  
  637. [/border]
  638. [comment]----instagram post end----[/comment]
  639.  
  640. [comment]----music player----[/comment]
  641. [border=transparent; height:23%; width:52%; background-color: var(--bg-color); padding:15px 10px; box-sizing:border-box; border-radius:15px; position:relative; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center; line-height:0;]
  642. [comment]----music player cover----[/comment]
  643. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:8px; font-weight:bold; text-transform:uppercase; line-height:120%;][font=Montserrat]currently playing[/font][/border]
  644. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-3); text-shadow:0 0 2px var(--color-3); font-size:15px; line-height:110%; text-align:center; margin:3px 0;][font=Montserrat][comment]
  645.  
  646. ----* * * put the name of the song here!----
  647.  
  648. [/comment]made me this way[/font][/border]
  649. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--color-4); text-align:center; letter-spacing:0.2px; font-size:7px; font-weight:bold; text-transform:uppercase; line-height:120%; margin:0 0 8px 0;][font=Montserrat][comment]
  650.  
  651. ---* * * put the artist name here----
  652. [/comment]seraphine[/font][/border]
  653.  
  654. [comment]----play button----[/comment]
  655. [border=transparent; height:46%; width:70%; padding:0; display:flex; flex-flow: row nowrap; justify-content:space-between; align-items:center; pointer-events:none; position:relative; z-index:4; background-color: var(--bg-color);]
  656. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:12px; color: var(--t-color); line-height:100%;][fa]fas fa-step-backward[/fa][/border]
  657. [border=transparent; height:30px; width:31px; padding:0; font-size:10px; color: var(--bg-color); background-color: var(--color-4); display:flex; justify-content:center; align-items:center; border-radius:50%; line-height:90%; flex-shrink:0;][fa]fas fa-play[/fa][/border]
  658. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:12px; color: var(--t-color); line-height:100%;][fa]fas fa-step-forward[/fa][/border]
  659. [/border]
  660.  
  661. [comment]----actual player (note this is soundcloud only! youtube links will not work!)----[/comment]
  662. [border=transparent; height:20px; width:65px; overflow:hidden; padding:0; position:absolute; z-index:3; bottom:20px; left:100px;][border=transparent; padding:0; margin-top:-10px;]
  663. [media=soundcloud]https://soundcloud.com/seradotwav/made-me-this-way[/media]
  664. [/border][/border]
  665.  
  666. [/border]
  667.  
  668. [/border][/border][/tab]
  669. [comment]----misc tab end----[/comment]
  670.  
  671. [/tabs][/border][/border]
  672.  
  673. [/border]
  674. [comment]----main container end----[/comment]
  675. [comment]----signature! do not remove!----[/comment][bg=transparent; height:fit-content; padding:0; width:100%; margin:auto; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px; color: var(--color-3); position:absolute; bottom:6px; left:0;][font=Open Sans]♡design by erosful, coded by uxie♡[/font][/bg]
  676. [/border]
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!