API tools faq
paste
ooksie

chartreuse (uxie x natasha.)

ooksie
Nov 21st, 2020 (edited)
431
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 88.83 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *biiig background colour;
  3. --bg-1: #f4f4f4;
  4. *text box colours;
  5. --bg-2: #ffffff;
  6. *borders + timeline + secondary accent colour;
  7. --color-1:#dddddd;
  8. *main accent colour;
  9. --color-2: #b9cc83;
  10. *header, subheaders text colour;
  11. --header: #fff;
  12. *body text colour;
  13. --t-color: #000;
  14.  
  15. *images are categorised based on the tab theyre in. images in tab 1 are labelled as aimg-x, tab 2 as bimg and so on;
  16. --aimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  17. --aimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  18. --bimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  19. --bimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  20. --dimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  21. --cimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  22. --cimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  23. --eimg-1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  24. --eimg-2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  25. --eimg-3: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  26. --eimg-4: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  27.  
  28. *relationship images;
  29. --r1: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  30. --r2: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  31. --r3: url('https://shahpourpouyan.com/wp-content/uploads/2018/10/orionthemes-placeholder-image-1.png');
  32.  
  33. height:fit-content; width:100%; padding:50px 0 70px 0; background: var(--bg-1); margin:auto; line-height:0; display:flex; align-items:center; justify-content:center; position:relative;][border=transparent; height:530px; width:880px; padding:0; display:flex; align-items:flex-start; justify-content:flex-start; position:relative;]
  34.  
  35. [comment]----tabs cover (buttons! whatever icons you change her must match the icons you change in the ----button select---- of each tab!)----[/comment]
  36. [border=transparent; height:100%; width:8%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow:column nowrap; align-items:flex-start; justify-content:flex-start; pointer-events:none; background: var(--bg-1);]
  37.  
  38. [comment]----button----[/comment]
  39. [border=transparent; height:52px; width:52px; padding:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  40. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-1); line-height:100%; margin-top:-2px;][comment]
  41. ----* * * button icon here (replace the icon in fa-icon with your own)!----
  42. [/comment][fa]fal fa-star[/fa][/border]
  43. [/border]
  44.  
  45. [border=transparent; height:20px; width:100%; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  46.  
  47. [comment]----button----[/comment]
  48. [border=transparent; height:52px; width:52px; padding:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  49. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-1); line-height:100%; margin-top:-2px;][comment]
  50. ----* * * button icon here (replace the icon in fa-icon with your own)!----
  51. [/comment][fa]fal fa-star[/fa][/border]
  52. [/border]
  53.  
  54. [border=transparent; height:20px; width:100%; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  55.  
  56. [comment]----button----[/comment]
  57. [border=transparent; height:52px; width:52px; padding:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  58. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-1); line-height:100%; margin-top:-2px;][comment]
  59. ----* * * button icon here (replace the icon in fa-icon with your own)!----
  60. [/comment][fa]fal fa-star[/fa][/border]
  61. [/border]
  62.  
  63. [border=transparent; height:20px; width:100%; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  64.  
  65. [comment]----button----[/comment]
  66. [border=transparent; height:52px; width:52px; padding:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  67. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-1); line-height:100%; margin-top:-2px;][comment]
  68. ----* * * button icon here (replace the icon in fa-icon with your own)!----
  69. [/comment][fa]fal fa-star[/fa][/border]
  70. [/border]
  71.  
  72. [border=transparent; height:20px; width:100%; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  73.  
  74. [comment]----button----[/comment]
  75. [border=transparent; height:52px; width:52px; padding:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  76. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-1); line-height:100%; margin-top:-2px;][comment]
  77. ----* * * button icon here (replace the icon in fa-icon with your own)!----
  78. [/comment][fa]fal fa-star[/fa][/border]
  79. [/border]
  80.  
  81. [/border]
  82. [comment]----tabs cover end----[/comment]
  83.  
  84. [comment]----tabs----[/comment]
  85. [border=transparent; height:70%; width:7%; padding:0; overflow:hidden; display:flex; justify-content:center;][border=transparent; padding:0; line-height:470%; margin-top:-10px;][tabs]
  86.  
  87. [comment]----tab one (basics)-----[/comment]
  88. [tab=aaaa1][comment]----* *button select----[/comment]
  89. [border=transparent; height:52px; width:52px; padding:0; position:absolute; top:0; left:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-2); line-height:100%; margin-top:-2px;][comment]
  90. ----* * * button icon here (replace the icon in fa-icon with your own. make sure it matches the button in tabs cover)!----
  91. [/comment][fa]fas fa-star[/fa][/border]
  92. [/border]
  93.  
  94. [comment]----tab contents----[/comment]
  95. [border=transparent; height:100%; width:90.7%; padding:0; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row nowrap;]
  96.  
  97. [comment]----column one----[/comment]
  98. [border=transparent; height:100%; width:28%; padding:0; flex-shrink:0; display:flex; flex-flow: column nowrap;]
  99. [comment]----image----[/comment]
  100. [border=transparent; height:38%; width:100%; padding:0; background: var(--aimg-1); background-size:cover; flex-shrink:0;
  101. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  102.  
  103. [comment]----* * long quote box * *-----[/comment]
  104. [border=transparent; height:43%; width:100%; padding:30px 20px 20px 20px; box-sizing:border-box; background: var(--bg-2); position:relative; border:1px solid var(--color-1);]
  105. [comment]----lil icon----[/comment]
  106. [border=transparent; height:40px; width:100%; padding:0; position:absolute; top:-20px; left:0; display:flex; justify-content:center;][border=transparent; height:40px; width:40px; padding:0; border-radius:50%; background: var(--color-2); color: var(--header); font-size:20px; display:flex; align-items:center; justify-content:center;][comment]
  107. ----* * * role icon here? (replace the icon in fa-icon with your own)!----
  108. [/comment][fa]fas fa-star[/fa][/border][/border]
  109.  
  110. [comment]----long quote text (this doesn't scroll!)----[/comment]
  111. [border=transparent; height:100%; width:100%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; line-height:140%; overflow:hidden;][font=Karla][comment]
  112. ----* * * long quote here!----
  113. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies. Suspendisse vehicula vehicula massa vitae viverra. Etiam venenatis libero non mattis tincidunt. Quisque tempor, libero dapibus porttitor cursus, dolor
  114. [/font][/border]
  115. [/border]
  116. [comment]----long quote box end-----[/comment]
  117.  
  118. [comment]----* * short quote * *----[/comment]
  119. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; background:blue; margin-top:auto;]
  120. [comment]----quote icon----[/comment]
  121. [border=transparent; height:72px; width:72px; padding:0; background: var(--color-2); border:1px solid var(--color-2); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--header); font-size:28px; line-height:100%; flex-shrink:0;][comment]
  122. ----* * * quote icon here----
  123. [/comment][fa]fal fa-quote-left[/fa][/border]
  124.  
  125. [comment]----short quote text----[/comment]
  126. [border=transparent; height:72px; flex-grow:1; padding:5px 15px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; overflow:hidden;][border=transparent; height:fit-content; width:100%; padding:0; box-sizing:border-box; font-size:13px; text-transform:uppercase; color: var(--t-color); line-height:120%; text-align:center; overflow:hidden;][font=Karla][comment]
  127. ----* * * short quote here (four lines max)----
  128. [/comment]a quote would possibly come here[/font][/border][/border]
  129.  
  130. [/border]
  131. [comment]----short quote end----[/comment]
  132.  
  133. [/border]
  134. [comment]----column one end-----[/comment]
  135.  
  136. [comment]----column two (tab contents)----[/comment]
  137. [border=transparent; height:100%; flex-grow:1; padding:0; margin:0 25px; display:flex; flex-flow: column nowrap;]
  138. [comment]----tab title----[/comment]
  139. [border=transparent; height:28%; width:100%; padding:15px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  140. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; -webkit-text-stroke:0.1px var(--header); font-size:48px; text-transform:uppercase; font-weight:bold; letter-spacing:2px;][font=Oswald][comment]
  141. ----* * * title here----
  142. [/comment]requisite[/font][/border]
  143. [/border]
  144.  
  145. [comment]----* *music player* *----[/comment]
  146. [border=transparent; height:13.5%; width:100%; padding:0; background:red; display:flex; flex-flow: row nowrap; position:relative; margin:25px 0; flex-shrink:0;]
  147. [comment]----play button----[/comment]
  148. [border=transparent; height:72px; width:72px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:25px; line-height:100%; pointer-events:none; position:relative; z-index:3; flex-shrink:0;][fa]fas fa-play[/fa][/border]
  149.  
  150. [comment]----* * song info * *----[/comment]
  151. [border=transparent; height:100%; flex-grow:1; padding:8px 15px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; flex-flow: row wrap; align-content:center; justify-content:flex-start;]
  152. [comment]----song name----[/comment]
  153. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; line-height:100%; margin-right:auto;][font=Montserrat][comment]
  154. ----* * * name of song here!----
  155. [/comment]name of the song[/font][/border]
  156.  
  157. [comment]----song progress bar----[/comment]
  158. [border=transparent; height:6px; width:100%; padding:0; background: var(--color-1); border-radius:6px; overflow:hidden; margin:8px 0;][border=transparent; height:100%; background: var(--color-2); padding:0; border-radius:6px; /*edit here to adjust progress of song!*/ width:65%;][/border][/border]
  159.  
  160. [comment]----artist name----[/comment]
  161. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:8px; letter-spacing:1px; text-transform:uppercase; line-height:100%; margin-left:auto;][font=Karla][comment]
  162. ----* * * name of artist here!----
  163. [/comment]name of the artist[/font][/border]
  164. [/border]
  165. [comment]----song info end----[/comment]
  166.  
  167. [comment]----* * actual media player * *----[/comment]
  168. [border=transparent; height:60px; width:60px; padding:0; overflow:hidden; position:absolute; top:5px; left:5px; z-index:2;]
  169. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  170. [border=transparent; height:80px; width:180px; padding:0; margin-top:-2px; margin-left:-2px;]
  171. [media=soundcloud]https://soundcloud.com/leagueoflegends/kda-villain[/media]
  172. [/border]
  173.  
  174. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  175. [border=transparent; height:500px; width:500px; margin-top:-292px; margin-left:-81px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  176. [media=googledrive]file code here[/MEDIA]
  177. [/border]
  178. [/border]
  179. [comment]----media player end----[/comment]
  180. [/border]
  181.  
  182. [comment]----* * * requisite contents * * *----[/comment]
  183. [border=transparent; height:49.5%; width:100%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: column nowrap;]
  184.  
  185. [comment]* * * watch for the first and last infos! do not remove them and follow the instructions. * * *[/comment]
  186.  
  187. [comment]----copy this entire thing to get another bit of info (first! make sure this is always the first bit of info!)----[/comment]
  188. [border=transparent; height:45px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:0 0 13px 0;]
  189. [comment]----info icon----[/comment]
  190. [border=transparent; height:45px; width:45px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:18px; line-height:100%; flex-shrink:0;][comment]
  191. ----* * * info icon here! (replace icon in fa-icon with your own!)----
  192. [/comment][fa]fas fa-star[/fa][/border]
  193.  
  194. [comment]----info text----[/comment]
  195. [border=transparent; height:100%; flex-grow:1; padding:5px 15px 5px 20px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:13px;][font=Karla][comment]
  196. ----* * * info contents here!----
  197. [/comment]character name here[comment]
  198. ----text ends here!----[/comment][/font][/border]
  199. [/border]
  200. [comment]----copy me too!----[/comment]
  201.  
  202. [comment]----copy this entire thing to get another bit of info----[/comment]
  203. [border=transparent; height:45px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:13px 0;]
  204. [comment]----info icon----[/comment]
  205. [border=transparent; height:45px; width:45px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:18px; line-height:100%; flex-shrink:0;][comment]
  206. ----* * * info icon here! (replace icon in fa-icon with your own!)----
  207. [/comment][fa]fas fa-star[/fa][/border]
  208.  
  209. [comment]----info text----[/comment]
  210. [border=transparent; height:100%; flex-grow:1; padding:5px 15px 5px 20px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:13px;][font=Karla][comment]
  211. ----* * * info contents here!----
  212. [/comment]character name here[comment]
  213. ----text ends here!----[/comment][/font][/border]
  214. [/border]
  215. [comment]----copy me too!----[/comment]
  216.  
  217. [comment]----copy this entire thing to get another bit of info----[/comment]
  218. [border=transparent; height:45px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:13px 0;]
  219. [comment]----info icon----[/comment]
  220. [border=transparent; height:45px; width:45px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:18px; line-height:100%; flex-shrink:0;][comment]
  221. ----* * * info icon here! (replace icon in fa-icon with your own!)----
  222. [/comment][fa]fas fa-star[/fa][/border]
  223.  
  224. [comment]----info text----[/comment]
  225. [border=transparent; height:100%; flex-grow:1; padding:5px 15px 5px 20px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:13px;][font=Karla][comment]
  226. ----* * * info contents here!----
  227. [/comment]character name here[comment]
  228. ----text ends here!----[/comment][/font][/border]
  229. [/border]
  230. [comment]----copy me too!----[/comment]
  231.  
  232. [comment]----copy this entire thing to get another bit of info----[/comment]
  233. [border=transparent; height:45px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:13px 0;]
  234. [comment]----info icon----[/comment]
  235. [border=transparent; height:45px; width:45px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:18px; line-height:100%; flex-shrink:0;][comment]
  236. ----* * * info icon here! (replace icon in fa-icon with your own!)----
  237. [/comment][fa]fas fa-star[/fa][/border]
  238.  
  239. [comment]----info text----[/comment]
  240. [border=transparent; height:100%; flex-grow:1; padding:5px 15px 5px 20px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:13px;][font=Karla][comment]
  241. ----* * * info contents here!----
  242. [/comment]character name here[comment]
  243. ----text ends here!----[/comment][/font][/border]
  244. [/border]
  245. [comment]----copy me too!----[/comment]
  246.  
  247. [comment]----copy this entire thing to get another bit of info (last! make sure this is always the last bit of info!)----[/comment]
  248. [border=transparent; height:45px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:13px 0 1px 0;]
  249. [comment]----info icon----[/comment]
  250. [border=transparent; height:45px; width:45px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:18px; line-height:100%; flex-shrink:0;][comment]
  251. ----* * * info icon here! (replace icon in fa-icon with your own!)----
  252. [/comment][fa]fas fa-star[/fa][/border]
  253.  
  254. [comment]----info text----[/comment]
  255. [border=transparent; height:100%; flex-grow:1; padding:5px 15px 5px 20px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:13px;][font=Karla][comment]
  256. ----* * * info contents here!----
  257. [/comment]character name here[comment]
  258. ----text ends here!----[/comment][/font][/border]
  259. [/border]
  260. [comment]----copy me too!----[/comment]
  261.  
  262. [/border][/border][/border]
  263. [comment]----requisite contents end----[/comment]
  264.  
  265. [/border]
  266. [comment]----column two end-----[/comment]
  267.  
  268. [comment]----column three (image) ----[/comment]
  269. [border=transparent; height:100%; width:25.5%; padding:0; flex-shrink:0; display:flex; flex-flow: column nowrap; background:var(--aimg-2); background-size:cover;
  270. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  271. [comment]----column three end-----[/comment]
  272.  
  273. [/border][/tab]
  274. [comment]----tab one end-----[/comment]
  275.  
  276.  
  277. [comment]----tab two (appearance)-----[/comment]
  278. [tab=aaaa2][comment]----* *button select----[/comment]
  279. [border=transparent; height:52px; width:52px; padding:0; position:absolute; top:74px; left:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-2); line-height:100%; margin-top:-2px;][comment]
  280. ----* * * button icon here (replace the icon in fa-icon with your own. make sure it matches the button in tabs cover)!----
  281. [/comment][fa]fas fa-star[/fa][/border]
  282. [/border]
  283.  
  284. [comment]----tab contents----[/comment]
  285. [border=transparent; height:100%; width:90.7%; padding:0; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: column nowrap;]
  286.  
  287. [comment]----row one----[/comment]
  288. [border=transparent; height:calc(77% - 25px); width:100%; padding:0; display:flex; flex-flow: row nowrap;]
  289. [comment]----big image----[/comment]
  290. [border=transparent; height:100%; width:29%; padding:0; margin-right:25px; flex-shrink:0; background: var(--bimg-1); background-size:cover;
  291. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  292.  
  293. [comment]----appearance----[/comment]
  294. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row wrap; align-content:flex-start; justify-content:flex-start;]
  295.  
  296. [comment]----tab title----[/comment]
  297. [border=transparent; height:38%; width:56%; padding:15px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  298. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; -webkit-text-stroke:0.1px var(--header); font-size:48px; text-transform:uppercase; font-weight:bold; letter-spacing:2px;][font=Oswald][comment]
  299. ----* * * title here----
  300. [/comment]appearance[/font][/border]
  301. [/border]
  302.  
  303. [comment]----appearance details----[/comment]
  304. [border=transparent; height:37%; width:44%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:center; justify-content:flex-start;]
  305. [comment]----details container----[/comment]
  306. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:3px;display:flex; flex-flow: column nowrap; justify-content:flex-start;]
  307.  
  308. [comment]----* *details box* *----[/comment]
  309. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow: row nowrap; background: var(--bg-2); flex-shrink:0;]
  310. [border=transparent; height:100%; width:0; padding:0; border-left:5px solid var(--color-2);][/border]
  311. [border=transparent; height:100%; width:100%; padding:3px 15px; border:1px solid var(--color-1); border-left:0; box-sizing:border-box; display:flex; align-items:center;]
  312. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); text-transform:uppercase; font-size:12px; line-height:100%;][font=Karla][comment]
  313. ----* * * appearance detail here!----
  314. [/comment]height[/font][/border]
  315. [/border]
  316. [/border]
  317. [comment]----detail box end----[/comment]
  318.  
  319. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  320.  
  321. [comment]----* *details box* *----[/comment]
  322. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow: row nowrap; background: var(--bg-2); flex-shrink:0;]
  323. [border=transparent; height:100%; width:0; padding:0; border-left:5px solid var(--color-2);][/border]
  324. [border=transparent; height:100%; width:100%; padding:3px 15px; border:1px solid var(--color-1); border-left:0; box-sizing:border-box; display:flex; align-items:center;]
  325. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); text-transform:uppercase; font-size:12px; line-height:100%;][font=Karla][comment]
  326. ----* * * appearance detail here!----
  327. [/comment]weight[/font][/border]
  328. [/border]
  329. [/border]
  330. [comment]----detail box end----[/comment]
  331.  
  332. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  333.  
  334. [comment]----* *details box* *----[/comment]
  335. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow: row nowrap; background: var(--bg-2); flex-shrink:0;]
  336. [border=transparent; height:100%; width:0; padding:0; border-left:5px solid var(--color-2);][/border]
  337. [border=transparent; height:100%; width:100%; padding:3px 15px; border:1px solid var(--color-1); border-left:0; box-sizing:border-box; display:flex; align-items:center;]
  338. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); text-transform:uppercase; font-size:12px; line-height:100%;][font=Karla][comment]
  339. ----* * * appearance detail here!----
  340. [/comment]eye colour[/font][/border]
  341. [/border]
  342. [/border]
  343. [comment]----detail box end----[/comment]
  344.  
  345. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  346.  
  347. [comment]----* *details box* *----[/comment]
  348. [border=transparent; height:27px; width:100%; padding:0; display:flex; flex-flow: row nowrap; background: var(--bg-2); flex-shrink:0;]
  349. [border=transparent; height:100%; width:0; padding:0; border-left:5px solid var(--color-2);][/border]
  350. [border=transparent; height:100%; width:100%; padding:3px 15px; border:1px solid var(--color-1); border-left:0; box-sizing:border-box; display:flex; align-items:center;]
  351. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); text-transform:uppercase; font-size:12px; line-height:100%;][font=Karla][comment]
  352. ----* * * appearance detail here!----
  353. [/comment]hair colour[/font][/border]
  354. [/border]
  355. [/border]
  356. [comment]----detail box end----[/comment]
  357.  
  358. [/border]
  359. [comment]----details container end----[/comment]
  360.  
  361. [comment]----lines! ignore!----[/comment]
  362. [border=transparent; height:80%; width:32px; padding:0; display:flex; flex-flow: column nowrap;]
  363. [border=transparent; flex-grow:1; width:32px; padding:0; border-top:5px solid var(--color-2); border-left:5px solid var(--color-2);][/border]
  364. [border=transparent; flex-grow:1; width:32px; padding:0; border:5px solid var(--color-2); border-right:0;][/border]
  365. [border=transparent; flex-grow:1; width:32px; padding:0; border-bottom:5px solid var(--color-2); border-left:5px solid var(--color-2);][/border]
  366. [/border]
  367. [border=transparent; height:0; width:37px; padding:0; border-top:5px solid var(--color-2);][/border]
  368. [/border]
  369. [comment]----appearance details end----[/comment]
  370.  
  371. [comment]----* * *appearance contents* * *----[/comment]
  372. [border=transparent; height: calc(63% - 25px); width:100%; margin-top:25px; border:1px solid var(--color-1); padding:12px 0; box-sizing:border-box; background: var(--bg-2); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  373.  
  374. [comment]----copy me for one bit of info! (first! make sure this bit of info is always first)----[/comment]
  375. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:0 0 10px 0;]
  376. [comment]----info title----[/comment]
  377. [border=transparent; height:fit-content; width:100%; padding:3px 0; box-sizing:border-box; color: var(--color-2); font-size:15px; text-transform:uppercase; letter-spacing:0.5px; line-height:100%; margin-bottom:6px;][font=Montserrat][comment]
  378. ----* * * info title here!----
  379. [/comment]hair style[/font][/border]
  380.  
  381. [comment]----info text----[/comment]
  382. [border=transparent; height:fit-content; width:calc(100% - 2px); margin-left:2px; padding:0 0 3px 10px; border-left:2px solid var(--color-2); box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:120%;][font=Karla][comment]
  383. ----* * * info contents here----
  384. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies.[/font][/border]
  385. [/border]
  386. [comment]----copy me too!----[/comment]
  387.  
  388. [comment]----copy me for one bit of info!----[/comment]
  389. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0;]
  390. [comment]----info title----[/comment]
  391. [border=transparent; height:fit-content; width:100%; padding:3px 0; box-sizing:border-box; color: var(--color-2); font-size:15px; text-transform:uppercase; letter-spacing:0.5px; line-height:100%; margin-bottom:6px;][font=Montserrat][comment]
  392. ----* * * info title here!----
  393. [/comment]build[/font][/border]
  394.  
  395. [comment]----info text----[/comment]
  396. [border=transparent; height:fit-content; width:calc(100% - 2px); margin-left:2px; padding:0 0 3px 10px; border-left:2px solid var(--color-2); box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:120%;][font=Karla][comment]
  397. ----* * * info contents here----
  398. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies.[/font][/border]
  399. [/border]
  400. [comment]----copy me too!----[/comment]
  401.  
  402. [comment]----copy me for one bit of info! (last! make sure this bit of info is always last!)----[/comment]
  403. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 0 0;]
  404. [comment]----info title----[/comment]
  405. [border=transparent; height:fit-content; width:100%; padding:3px 0; box-sizing:border-box; color: var(--color-2); font-size:15px; text-transform:uppercase; letter-spacing:0.5px; line-height:100%; margin-bottom:6px;][font=Montserrat][comment]
  406. ----* * * info title here!----
  407. [/comment]info title[/font][/border]
  408.  
  409. [comment]----info text----[/comment]
  410. [border=transparent; height:fit-content; width:calc(100% - 2px); margin-left:2px; padding:0 0 3px 10px; border-left:2px solid var(--color-2); box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:120%;][font=Karla][comment]
  411. ----* * * info contents here----
  412. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies.[/font][/border]
  413. [/border]
  414. [comment]----copy me too!----[/comment]
  415.  
  416. [/border][/border][/border]
  417. [comment]----appearance contents end----[/comment]
  418. [/border]
  419. [comment]----appearance end----[/comment]
  420. [/border]
  421. [comment]----row one end----[/comment]
  422.  
  423. [comment]----row two----[/comment]
  424. [border=transparent; height:23%; width:100%; padding:0; margin-top:auto; display:flex; flex-flow: row nowrap;]
  425. [comment]----medium quote----[/comment]
  426. [border=transparent; height:100%; width:42%; padding:0; margin-right:25px; display:flex; flex-flow: row-reverse nowrap; flex-shrink:0;]
  427. [comment]----quote icon----[/comment]
  428. [border=transparent; height:122px; width:122px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; line-height:100%; color: var(--header); font-size:48px; flex-shrink:0;][comment]
  429. ----* * * quote icon here (replace the icon in fa-icon with your own!)----
  430. [/comment][fa]fal fa-quote-right[/fa][/border]
  431.  
  432. [comment]----medium quote text----[/comment]
  433. [border=transparent; height:100%; flex-grow:1; padding:5px 20px; box-sizing:border-box; border:1px solid var(--color-1); background: var(--bg-2); overflow:hidden; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:100%; padding:0; overflow:hidden; color: var(--t-color); font-size:12px; text-transform:uppercase; line-height:130%; text-align:center;][font=Karla][comment]
  434. ----* * * medium quote here (6 lines max!)----
  435. [/comment]a quote would possibly come here and it can be a little longer woo awesome[/font][/border][/border]
  436. [/border]
  437. [comment]----medium quote end----[/comment]
  438.  
  439. [comment]----wider image----[/comment]
  440. [border=transparent; height:100%; flex-grow:1; padding:0; background: var(--bimg-2); background-size:cover;
  441. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  442. [/border]
  443. [comment]----row two end----[/comment]
  444.  
  445. [/border][/tab]
  446. [comment]----tab two end-----[/comment]
  447.  
  448.  
  449. [comment]----tab three (psyche)-----[/comment]
  450. [tab=aaaa3][comment]----* *button select----[/comment]
  451. [border=transparent; height:52px; width:52px; padding:0; position:absolute; top:148px; left:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  452. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-2); line-height:100%; margin-top:-2px;][comment]
  453. ----* * * button icon here (replace the icon in fa-icon with your own. make sure it matches the button in tabs cover)!----
  454. [/comment][fa]fas fa-star[/fa][/border]
  455. [/border]
  456.  
  457. [comment]----tab contents----[/comment]
  458. [border=transparent; height:100%; width:90.7%; padding:0; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: column nowrap;]
  459.  
  460. [comment]----row one----[/comment]
  461. [border=transparent; height:81%; width:100%; padding:0; display:flex; flex-flow: row nowrap;]
  462.  
  463. [comment]----column one----[/comment]
  464. [border=transparent; height:100%; width:28.5%; padding:0; flex-shrink:0; display:flex; flex-flow:column nowrap;]
  465. [comment]----image----[/comment]
  466. [border=transparent; height:24%; width:100%; padding:0; background:var(--cimg-1); background-size:cover; flex-shrink:0;
  467. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  468.  
  469. [comment]----* *traits title* *----[/comment]
  470. [border=transparent; height:10%; width:100%; padding:0; flex-shrink:0; display:flex; flex-flow: row nowrap; margin:25px 0;]
  471. [border=transparent; height:43px; width:43px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:20px; line-height:100%; flex-shrink:0;][comment]
  472. ----* * * trait icon here----
  473. [/comment][fa]fas fa-plus[/fa][/border]
  474.  
  475. [border=transparent; height:100%; flex-grow:1; padding:3px 15px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); color: var(--color-2); font-size:20px; text-transform:uppercase; letter-spacing:1px; line-height:100%; display:flex; align-items:center; justify-content:center;][font=Montserrat][comment]
  476. ----* * * traits title here!----
  477. [/comment]traits[/font][/border]
  478. [/border]
  479.  
  480. [comment]----* * *traits contents* * *----[/comment]
  481. [border=transparent; height:calc(66%- 50px); width:100%; padding:15px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Karla][comment]
  482. ----* * *text starts here!----
  483. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  484.  
  485. Nulla bibendum purus ut est imperdiet, non facilisis magna tempor. Praesent nec mi lacinia risus congue mattis sed feugiat ante. Sed et rutrum elit. Donec venenatis magna blandit, elementum dui at, finibus enim. Aenean ut nisi mattis, lacinia lectus non, vulputate ligula. Donec et bibendum elit, quis ullamcorper lorem. Maecenas congue ipsum eget sapien porta, molestie tempor odio auctor. Phasellus ac nibh cursus, sodales augue nec, dictum est. Sed ultrices, leo at ullamcorper rhoncus, lorem dui ultricies nunc, ac semper dolor massa nec neque.
  486. [/font][/border]
  487. [/border][/border]
  488. [comment]----traits contents end----[/comment]
  489. [/border]
  490. [comment]----column one end----[/comment]
  491.  
  492. [comment]----column two----[/comment]
  493. [border=transparent; height:100%; flex-grow:1; padding:0; margin:0 25px; display:flex; flex-flow:column nowrap;]
  494. [comment]----tab title----[/comment]
  495. [border=transparent; height:35%; width:100%; padding:15px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  496. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; -webkit-text-stroke:0.1px var(--header); font-size:48px; text-transform:uppercase; font-weight:bold; letter-spacing:2px;][font=Oswald][comment]
  497. ----* * * title here----
  498. [/comment]psyche[/font][/border]
  499. [/border]
  500.  
  501. [comment]----psyche contents----[/comment]
  502. [border=transparent; height:calc(65% - 25px); width:100%; margin-top:25px; padding:15px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  503.  
  504. [comment]----* *header* *----[/comment]
  505. [border=transparent; height:fit-content; width:calc(50% - 30px); margin:0 15px; padding:10px; box-sizing:border-box; background: var(--color-2); position:sticky; top:0; color: var(--header); font-size:16px; text-transform:uppercase; text-align:center; line-height:100%; letter-spacing:1px;][font=Montserrat][comment]
  506. ----* * * header title here!----
  507. [/comment]likes & dislikes[/font][/border]
  508.  
  509. [comment]----* * *psyche text* * *----[/comment]
  510. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:140%; margin:10px 0;][font=Karla][comment]
  511. ----* * * text starts here!----
  512. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  513.  
  514. Nulla bibendum purus ut est imperdiet, non facilisis magna tempor. Praesent nec mi lacinia risus congue mattis sed feugiat ante. Sed et rutrum elit. Donec venenatis magna blandit, elementum dui at, finibus enim. Aenean ut nisi mattis, lacinia lectus non, vulputate ligula. Donec et bibendum elit, quis ullamcorper lorem. Maecenas congue ipsum eget sapien porta, molestie tempor odio auctor. Phasellus ac nibh cursus, sodales augue nec, dictum est. Sed ultrices, leo at ullamcorper rhoncus, lorem dui ultricies nunc, ac semper dolor massa nec neque.
  515. [/font][/border]
  516. [comment]----psyche text end----[/comment]
  517.  
  518. [comment]----* *header* *----[/comment]
  519. [border=transparent; height:fit-content; width:calc(50% - 30px); margin:0 15px; padding:10px; box-sizing:border-box; background: var(--color-2); position:sticky; top:0; color: var(--header); font-size:16px; text-transform:uppercase; text-align:center; line-height:100%; letter-spacing:1px;][font=Montserrat][comment]
  520. ----* * * header title here!----
  521. [/comment]hobbies & talents[/font][/border]
  522.  
  523. [comment]----* * *psyche text* * *----[/comment]
  524. [border=transparent; height:fit-content; width:50%; padding:0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:140%; margin:10px 0;][font=Karla][comment]
  525. ----* * * text starts here!----
  526. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  527.  
  528. Nulla bibendum purus ut est imperdiet, non facilisis magna tempor. Praesent nec mi lacinia risus congue mattis sed feugiat ante. Sed et rutrum elit. Donec venenatis magna blandit, elementum dui at, finibus enim. Aenean ut nisi mattis, lacinia lectus non, vulputate ligula. Donec et bibendum elit, quis ullamcorper lorem. Maecenas congue ipsum eget sapien porta, molestie tempor odio auctor. Phasellus ac nibh cursus, sodales augue nec, dictum est. Sed ultrices, leo at ullamcorper rhoncus, lorem dui ultricies nunc, ac semper dolor massa nec neque.
  529. [/font][/border]
  530. [comment]----psyche text end----[/comment]
  531.  
  532. [/border][/border]
  533. [comment]----psyche contents end----[/comment]
  534. [/border]
  535. [comment]----column two end----[/comment]
  536.  
  537. [comment]----column three----[/comment]
  538. [border=transparent; height:100%; width:28.5%; padding:0; flex-shrink:0; display:flex; flex-flow:column nowrap;]
  539.  
  540. [comment]----* *traits title* *----[/comment]
  541. [border=transparent; height:10%; width:100%; padding:0; flex-shrink:0; display:flex; flex-flow: row nowrap;]
  542. [border=transparent; height:43px; width:43px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:20px; line-height:100%; flex-shrink:0;][comment]
  543. ----* * * trait icon here----
  544. [/comment][fa]fas fa-minus[/fa][/border]
  545.  
  546. [border=transparent; height:100%; flex-grow:1; padding:3px 15px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); color: var(--color-2); font-size:20px; text-transform:uppercase; letter-spacing:1px; line-height:100%; display:flex; align-items:center; justify-content:center;][font=Montserrat][comment]
  547. ----* * * traits title here!----
  548. [/comment]traits[/font][/border]
  549. [/border]
  550.  
  551. [comment]----* * *traits contents* * *----[/comment]
  552. [border=transparent; height:calc(65%- 50px); width:100%; padding:15px 0; margin:25px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:130%;][font=Karla][comment]
  553. ----* * *text starts here!----
  554. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  555.  
  556. Nulla bibendum purus ut est imperdiet, non facilisis magna tempor. Praesent nec mi lacinia risus congue mattis sed feugiat ante. Sed et rutrum elit. Donec venenatis magna blandit, elementum dui at, finibus enim. Aenean ut nisi mattis, lacinia lectus non, vulputate ligula. Donec et bibendum elit, quis ullamcorper lorem. Maecenas congue ipsum eget sapien porta, molestie tempor odio auctor. Phasellus ac nibh cursus, sodales augue nec, dictum est. Sed ultrices, leo at ullamcorper rhoncus, lorem dui ultricies nunc, ac semper dolor massa nec neque.
  557. [/font][/border]
  558. [/border][/border]
  559. [comment]----traits contents end----[/comment]
  560.  
  561. [comment]----image----[/comment]
  562. [border=transparent; height:24%; width:100%; padding:0; background:var(--cimg-2); background-size:cover; flex-shrink:0;
  563. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  564. [/border]
  565. [comment]----column three end----[/comment]
  566.  
  567. [/border]
  568. [comment]----row one end----[/comment]
  569.  
  570. [comment]----* *row two (looong quote)* *----[/comment]
  571. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:auto; display:flex; flex-flow: row nowrap;]
  572. [comment]----looong quote icon----[/comment]
  573. [border=transparent; height:70px; width:70px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:30px; line-height:100%;][comment]
  574. ----* * *looong quote icon here!----
  575. [/comment][fa]fal fa-quote-left[/fa][/border]
  576.  
  577. [comment]----* *looong quote text* *----[/comment]
  578. [border=transparent; height:100%; flex-grow:1; padding:5px 20px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:14px; display:flex; align-items:center; justify-content:center;][font=Karla][comment]
  579. ---- * * * loooong quote here!----
  580. [/comment]oh wow look it's yet another quote, and a long one too omg this is heckin awesome[/font][/border]
  581. [/border]
  582. [comment]----row two end----[/comment]
  583.  
  584. [/border][/tab]
  585. [comment]----tab three end-----[/comment]
  586.  
  587.  
  588. [comment]----tab four (history)-----[/comment]
  589. [tab=aaaa4][comment]----* *button select----[/comment]
  590. [border=transparent; height:52px; width:52px; padding:0; position:absolute; top:222px; left:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  591. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-2); line-height:100%; margin-top:-2px;][comment]
  592. ----* * * button icon here (replace the icon in fa-icon with your own. make sure it matches the button in tabs cover)!----
  593. [/comment][fa]fas fa-star[/fa][/border]
  594. [/border]
  595.  
  596. [comment]----tab contents----[/comment]
  597. [border=transparent; height:100%; width:90.7%; padding:0; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: column nowrap;]
  598.  
  599. [comment]----row one (main contents)----[/comment]
  600. [border=transparent; height:81%; width:100%; padding:0; position:relative; display:flex; align-items:center; justify-content:flex-start;]
  601.  
  602. [comment]----history tabs cover----[/comment]
  603. [border=transparent; height:100%; width:33%; padding:0; background: var(--bg-1); position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; position:relative; margin-left:-15px;]
  604.  
  605. [comment]----timeline (ignore!)----[/comment]
  606. [border=transparent; height:100%; width:100%; padding:0; position:absolute; z-index:1; top:0; left:0; display:flex; align-items:center; justify-content:center;][border=transparent; height:100%; width:8px; padding:0; background: var(--color-1); border-radius:8px; display:flex;][/border][/border]
  607. [comment]----timeline end----[/comment]
  608.  
  609. [comment]----button container----[/comment]
  610. [border=transparent; height:100%; width:100%; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; justify-content:space-around;]
  611.  
  612. [comment]----button 1----[/comment]
  613. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  614. [comment]----button----[/comment]
  615. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  616. [/border]
  617. [comment]----button info box end----[/comment]
  618.  
  619. [comment]----button 2----[/comment]
  620. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  621. [comment]----button----[/comment]
  622. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  623. [/border]
  624. [comment]----button info box end----[/comment]
  625.  
  626. [comment]----button 3----[/comment]
  627. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  628. [comment]----button----[/comment]
  629. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  630. [/border]
  631. [comment]----button info box end----[/comment]
  632.  
  633. [/border]
  634. [comment]----button container end----[/comment]
  635.  
  636. [/border][/border]
  637. [comment]----history tabs cover end----[/comment]
  638.  
  639. [comment]----* history tabs *----[/comment]
  640. [border=transparent; height:70%; width:30%; padding:0; display:flex; justify-content:center; overflow:hidden; margin-left:-15px;][border=transparent; width:30%; padding:0; line-height:760%; margin-top:-30px;][tabs]
  641.  
  642.  
  643. [comment]----* *stage 1* *----[/comment]
  644. [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; pointer-events:none; line-height:0; display:flex; align-items:flex-end;]
  645.  
  646. [comment]----button select (ignore all other buttons besides the one with *asterisks* next to the name!)----[/comment]
  647. [border=transparent; height:100%; width:33%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; position:relative; margin-left:-15px;]
  648.  
  649. [comment]----timeline (ignore!)----[/comment]
  650. [border=transparent; height:100%; width:100%; padding:0; position:absolute; z-index:1; top:0; left:0; display:flex; align-items:flex-start; justify-content:center;][border=transparent; height:20%; width:8px; padding:0; background: var(--color-2); border-radius:8px; display:flex;][/border][/border]
  651. [comment]----timeline end----[/comment]
  652.  
  653. [comment]----button container----[/comment]
  654. [border=transparent; height:100%; width:100%; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; justify-content:space-around;]
  655.  
  656. [comment]----* *button info box 1* *----[/comment]
  657. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  658. [comment]----* * *year* * *----[/comment]
  659. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%;][font=Montserrat][comment]
  660. ----* * * year here!----
  661. [/comment]1997[comment]
  662. ----text ends here----[/comment][/font][/border][/border]
  663.  
  664. [comment]----button----[/comment]
  665. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  666.  
  667. [comment]----* * *title* * *----[/comment]
  668. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:10px; text-transform:uppercase; text-align:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%;][font=Montserrat][comment]
  669. ----* * * title of stage of life here!----
  670. [/comment]birth & childhood[comment]
  671. ----text ends here----[/comment][/font][/border][/border]
  672. [/border]
  673. [comment]----* *button info box end* *----[/comment]
  674.  
  675. [comment]----button 2----[/comment]
  676. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  677. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  678. [/border]
  679. [comment]----button info box end----[/comment]
  680.  
  681. [comment]----button 3----[/comment]
  682. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  683. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  684. [/border]
  685. [comment]----button info box end----[/comment]
  686. [/border]
  687. [comment]----button container end----[/comment]
  688.  
  689. [/border][/border]
  690. [comment]----button select end----[/comment]
  691.  
  692. [comment]----* *stage of life contents* *----[/comment]
  693. [border=transparent; height:calc(64% - 25px); width:66%; margin-left:auto; padding:12px 15px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); display:flex; flex-flow: column nowrap; align-items:flex-end; pointer-events:auto;]
  694. [comment]----* stage of life title *----[/comment]
  695. [border=transparent; min-height:8%; max-height:16%; width:100%; padding:0; margin-bottom:5px; color: var(--color-2); text-transform:uppercase; display:flex; align-items:center; line-height:100%; font-size:13px; flex-shrink:0; letter-spacing:0.5px;][font=Montserrat][comment]
  696. ----* * * title here!----
  697. [/comment]some amazing title about their life here[/font][/border]
  698.  
  699. [comment]-----* * *stage of life text* * *----[/comment]
  700. [border=transparent; max-height:calc(92% - 5px); min-height:calc(84% - 5px); width:99.5%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; border-left:2px solid var(--color-2); font-size:11px; color: var(--t-color); line-height:130%; text-align:justify;][font=Karla][comment]
  701. ----* * *text starts here!----
  702. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  703.  
  704. Nulla bibendum purus ut est imperdiet, non facilisis magna tempor. Praesent nec mi lacinia risus congue mattis sed feugiat ante. Sed et rutrum elit. Donec venenatis magna blandit, elementum dui at, finibus enim. Aenean ut nisi mattis, lacinia lectus non, vulputate ligula. Donec et bibendum elit, quis ullamcorper lorem. Maecenas congue ipsum eget sapien porta, molestie tempor odio auctor. Phasellus ac nibh cursus, sodales augue nec, dictum est. Sed ultrices, leo at ullamcorper rhoncus, lorem dui ultricies nunc, ac semper dolor massa nec neque.
  705.  
  706. Curabitur varius ac tortor vel porta. Pellentesque tristique neque vel iaculis faucibus. Nullam ut venenatis ipsum. Integer tincidunt odio erat, quis ultricies ligula lacinia sit amet. Donec ornare ligula sed ex iaculis, quis cursus sapien mattis. Duis sed consectetur erat. Fusce ut molestie mi. Nam rhoncus libero ac mi tincidunt convallis.
  707. [/font][/border]
  708. [/border][/border]
  709. [comment]----stage of life text end----[/comment]
  710. [/border]
  711. [comment]----stage of life contents end----[/comment]
  712.  
  713. [/border][/tab]
  714. [comment]----stage end----[/comment]
  715.  
  716.  
  717. [comment]----* *stage 2* *----[/comment]
  718. [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; pointer-events:none; line-height:0; display:flex; align-items:flex-end;]
  719.  
  720. [comment]----button select (ignore all other buttons besides the one with *asterisks* next to the name!)----[/comment]
  721. [border=transparent; height:100%; width:33%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; position:relative; margin-left:-15px;]
  722.  
  723. [comment]----timeline (ignore!)----[/comment]
  724. [border=transparent; height:100%; width:100%; padding:0; position:absolute; z-index:1; top:0; left:0; display:flex; align-items:flex-start; justify-content:center;][border=transparent; height:50%; width:8px; padding:0; background: var(--color-2); border-radius:8px; display:flex;][/border][/border]
  725. [comment]----timeline end----[/comment]
  726.  
  727. [comment]----button container----[/comment]
  728. [border=transparent; height:100%; width:100%; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; justify-content:space-around;]
  729.  
  730. [comment]----button 1----[/comment]
  731. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  732. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  733. [/border]
  734. [comment]----button info box end----[/comment]
  735.  
  736. [comment]----* *button info box 2* *----[/comment]
  737. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  738. [comment]----* * *year* * *----[/comment]
  739. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%;][font=Montserrat][comment]
  740. ----* * * year here!----
  741. [/comment]2011[comment]
  742. ----text ends here----[/comment][/font][/border][/border]
  743.  
  744. [comment]----button----[/comment]
  745. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  746.  
  747. [comment]----* * *title* * *----[/comment]
  748. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:10px; text-transform:uppercase; text-align:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%;][font=Montserrat][comment]
  749. ----* * * title of stage of life here!----
  750. [/comment]teenage years[comment]
  751. ----text ends here----[/comment][/font][/border][/border]
  752. [/border]
  753. [comment]----* *button info box end* *----[/comment]
  754.  
  755. [comment]----button 3----[/comment]
  756. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  757. [border=transparent; height:35px; width:35px; padding:0; background: var(--bg-2); border:4px solid var(--color-1); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  758. [/border]
  759. [comment]----button info box end----[/comment]
  760. [/border]
  761. [comment]----button container end----[/comment]
  762.  
  763. [/border][/border]
  764. [comment]----button select end----[/comment]
  765.  
  766. [comment]----* *stage of life contents* *----[/comment]
  767. [border=transparent; height:calc(64% - 25px); width:66%; margin-left:auto; padding:12px 15px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); display:flex; flex-flow: column nowrap; align-items:flex-end; pointer-events:auto;]
  768. [comment]----* stage of life title *----[/comment]
  769. [border=transparent; min-height:8%; max-height:16%; width:100%; padding:0; margin-bottom:5px; color: var(--color-2); text-transform:uppercase; display:flex; align-items:center; line-height:100%; font-size:13px; flex-shrink:0; letter-spacing:0.5px;][font=Montserrat][comment]
  770. ----* * * title here!----
  771. [/comment]some other amazing title about their life here[/font][/border]
  772.  
  773. [comment]-----* * *stage of life text* * *----[/comment]
  774. [border=transparent; max-height:calc(92% - 5px); min-height:calc(84% - 5px); width:99.5%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; border-left:2px solid var(--color-2); font-size:11px; color: var(--t-color); line-height:130%; text-align:justify;][font=Karla][comment]
  775. ----* * *text starts here!----
  776. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  777. [/font][/border]
  778. [/border][/border]
  779. [comment]----stage of life text end----[/comment]
  780. [/border]
  781. [comment]----stage of life contents end----[/comment]
  782.  
  783. [/border][/tab]
  784. [comment]----stage end----[/comment]
  785.  
  786.  
  787. [comment]----* *stage 3* *----[/comment]
  788. [tab=aa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; right:0; pointer-events:none; line-height:0; display:flex; align-items:flex-end;]
  789.  
  790. [comment]----button select (ignore all other buttons besides the one with *asterisks* next to the name!)----[/comment]
  791. [border=transparent; height:100%; width:33%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; position:relative; margin-left:-15px;]
  792.  
  793. [comment]----timeline (ignore!)----[/comment]
  794. [border=transparent; height:100%; width:100%; padding:0; position:absolute; z-index:1; top:0; left:0; display:flex; align-items:flex-start; justify-content:center;][border=transparent; height:80%; width:8px; padding:0; background: var(--color-2); border-radius:8px; display:flex;][/border][/border]
  795. [comment]----timeline end----[/comment]
  796.  
  797. [comment]----button container----[/comment]
  798. [border=transparent; height:100%; width:100%; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; display:flex; flex-flow:column nowrap; justify-content:space-around;]
  799.  
  800. [comment]----button 1----[/comment]
  801. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  802. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  803. [/border]
  804. [comment]----button info box end----[/comment]
  805.  
  806. [comment]----button 2----[/comment]
  807. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  808. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  809. [/border]
  810. [comment]----button info box end----[/comment]
  811.  
  812. [comment]----* *button info box 3* *----[/comment]
  813. [border=transparent; height:40px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; justify-content:center;]
  814. [comment]----* * *year* * *----[/comment]
  815. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:15px;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%;][font=Montserrat][comment]
  816. ----* * * year here!----
  817. [/comment]2020[comment]
  818. ----text ends here----[/comment][/font][/border][/border]
  819.  
  820. [comment]----button----[/comment]
  821. [border=transparent; height:35px; width:35px; padding:0; background: var(--color-2); border:4px solid var(--bg-2); border-radius:50%; margin:0 8px; flex-shrink:0;][/border]
  822.  
  823. [comment]----* * *title* * *----[/comment]
  824. [border=transparent; height:85%; width:35%; flex-shrink:0; padding:5px; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:10px; text-transform:uppercase; text-align:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%;][font=Montserrat][comment]
  825. ----* * * title of stage of life here!----
  826. [/comment]at present[comment]
  827. ----text ends here----[/comment][/font][/border][/border]
  828. [/border]
  829. [comment]----* *button info box end* *----[/comment]
  830.  
  831. [/border]
  832. [comment]----button container end----[/comment]
  833.  
  834. [/border][/border]
  835. [comment]----button select end----[/comment]
  836.  
  837. [comment]----* *stage of life contents* *----[/comment]
  838. [border=transparent; height:calc(64% - 25px); width:66%; margin-left:auto; padding:12px 15px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); display:flex; flex-flow: column nowrap; align-items:flex-end; pointer-events:auto;]
  839. [comment]----* stage of life title *----[/comment]
  840. [border=transparent; min-height:8%; max-height:16%; width:100%; padding:0; margin-bottom:5px; color: var(--color-2); text-transform:uppercase; display:flex; align-items:center; line-height:100%; font-size:13px; flex-shrink:0; letter-spacing:0.5px;][font=Montserrat][comment]
  841. ----* * * title here!----
  842. [/comment]some new amazing title about their life here[/font][/border]
  843.  
  844. [comment]-----* * *stage of life text* * *----[/comment]
  845. [border=transparent; max-height:calc(92% - 5px); min-height:calc(84% - 5px); width:99.5%; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 10px; box-sizing:border-box; border-left:2px solid var(--color-2); font-size:11px; color: var(--t-color); line-height:130%; text-align:justify;][font=Karla][comment]
  846. ----* * *text starts here!----
  847. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo augue, ullamcorper in tortor quis, facilisis molestie elit. Aliquam mollis metus vehicula ante imperdiet, eu luctus nibh venenatis. Vivamus venenatis erat et gravida maximus. Praesent tristique vulputate aliquam. Maecenas sollicitudin dui arcu, vel bibendum magna facilisis et. Etiam sit amet neque cursus, pharetra felis ac, luctus lacus. Phasellus quis orci imperdiet neque placerat interdum id sit amet tortor. Mauris consequat, nunc eu bibendum rutrum, elit sem tincidunt augue, a congue lorem justo eu ante. Aliquam erat volutpat. Nullam finibus diam non pretium volutpat.
  848. [/font][/border]
  849. [/border][/border]
  850. [comment]----stage of life text end----[/comment]
  851. [/border]
  852. [comment]----stage of life contents end----[/comment]
  853.  
  854. [/border][/tab]
  855. [comment]----stage end----[/comment]
  856.  
  857.  
  858. [/tabs][/border][/border]
  859. [comment]----history tabs end----[/comment]
  860.  
  861. [comment]----history body space----[/comment]
  862. [border=transparent; height:100%; width:66%; margin-left:auto; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  863.  
  864. [comment]----tab title----[/comment]
  865. [border=transparent; height:36%; width:56%; padding:15px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  866. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; -webkit-text-stroke:0.1px var(--header); font-size:48px; text-transform:uppercase; font-weight:bold; letter-spacing:2px;][font=Oswald][comment]
  867. ----* * * title here----
  868. [/comment]history[/font][/border]
  869. [/border]
  870.  
  871. [comment]----image----[/comment]
  872. [border=transparent; height:36%; flex-grow:1; margin-left:25px; padding:0; background: var(--dimg-1); background-size:cover; flex-shrink:0;
  873. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  874.  
  875. [/border]
  876. [comment]----history body space end----[/comment]
  877. [/border]
  878. [comment]----row one end----[/comment]
  879.  
  880. [comment]----* *row two (looong quote 2)* *----[/comment]
  881. [border=transparent; height:fit-content; width:100%; padding:0; margin-top:auto; display:flex; flex-flow: row-reverse nowrap;]
  882. [comment]----looong quote icon----[/comment]
  883. [border=transparent; height:70px; width:70px; padding:0; background: var(--color-2); display:flex; align-items:center; justify-content:center; color: var(--header); font-size:30px; line-height:100%;][comment]
  884. ----* * *looong quote icon here!----
  885. [/comment][fa]fal fa-quote-right[/fa][/border]
  886.  
  887. [comment]----* *looong quote text* *----[/comment]
  888. [border=transparent; height:100%; flex-grow:1; padding:5px 20px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); line-height:100%; color: var(--t-color); text-transform:uppercase; font-size:14px; display:flex; align-items:center; justify-content:center;][font=Karla][comment]
  889. ---- * * * loooong quote here!----
  890. [/comment]another long quote and this one stays the same throughout all the history tabs![/font][/border]
  891. [/border]
  892. [comment]----row two end----[/comment]
  893.  
  894. [/border][/tab]
  895. [comment]----tab four end-----[/comment]
  896.  
  897.  
  898. [comment]----tab five (misc)-----[/comment]
  899. [tab=aaaa5][comment]----* *button select----[/comment]
  900. [border=transparent; height:52px; width:52px; padding:0; position:absolute; top:296px; left:0; border:1px solid var(--color-1); background: var(--bg-2); display:flex; align-items:center; justify-content:center;]
  901. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:24px; color: var(--color-2); line-height:100%; margin-top:-2px;][comment]
  902. ----* * * button icon here (replace the icon in fa-icon with your own. make sure it matches the button in tabs cover)!----
  903. [/comment][fa]fas fa-star[/fa][/border]
  904. [/border]
  905.  
  906. [comment]----tab contents----[/comment]
  907. [border=transparent; height:100%; width:90.7%; padding:0; position:absolute; top:0; right:0; line-height:0; display:flex; flex-flow: row nowrap;]
  908.  
  909. [comment]----column one (interview)----[/comment]
  910. [border=transparent; height:100%; width:30%; padding:15px 0; flex-shrink:0; background: var(--bg-2); border:1px solid var(--color-1); box-sizing:border-box; display:flex; flex-direction: column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  911.  
  912. [comment]----copy this to make another set of questions! (first! make sure this set is first!)----[/comment]
  913. [border=transparent; height:fit-content; width:100%; padding:0; margin:0 0 15px 0; display:flex; flex-flow: column nowrap;]
  914. [comment]----* *question* *----[/comment]
  915. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:90%; padding:12px 15px; box-sizing:border-box; background: var(--color-2); border-radius:12px 12px 12px 0; line-height:120%; color: var(--header); text-transform:uppercase; font-size:11px; margin:5px auto 5px 0; text-align:justify;][font=Montserrat][comment]
  916. ----* * * question here!----
  917. [/comment]question comes here[/font][/border]
  918.  
  919. [comment]----* *answer* *----[/comment]
  920. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:88%; padding:12px 15px; box-sizing:border-box; background: var(--color-1); border-radius:12px 12px 0 12px; line-height:130%; color: var(--t-color); text-transform:uppercase; font-size:11px; margin:5px 0 5px auto; text-align:justify;][font=Karla][comment]
  921. ----* * * answer here!----
  922. [/comment]answer comes here[/font][/border]
  923. [/border]
  924. [comment]----copy me too!----[/comment]
  925.  
  926. [comment]----copy this to make another set of questions!----[/comment]
  927. [border=transparent; height:fit-content; width:100%; padding:0; margin:15px 0; display:flex; flex-flow: column nowrap;]
  928. [comment]----* *question* *----[/comment]
  929. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:90%; padding:12px 15px; box-sizing:border-box; background: var(--color-2); border-radius:12px 12px 12px 0; line-height:120%; color: var(--header); text-transform:uppercase; font-size:11px; margin:5px auto 5px 0; text-align:justify;][font=Montserrat][comment]
  930. ----* * * question here!----
  931. [/comment]question comes here[/font][/border]
  932.  
  933. [comment]----* *answer* *----[/comment]
  934. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:88%; padding:12px 15px; box-sizing:border-box; background: var(--color-1); border-radius:12px 12px 0 12px; line-height:130%; color: var(--t-color); text-transform:uppercase; font-size:11px; margin:5px 0 5px auto; text-align:justify;][font=Karla][comment]
  935. ----* * * answer here!----
  936. [/comment]answer comes here[/font][/border]
  937. [/border]
  938. [comment]----copy me too!----[/comment]
  939.  
  940. [comment]----copy this to make another set of questions!----[/comment]
  941. [border=transparent; height:fit-content; width:100%; padding:0; margin:15px 0; display:flex; flex-flow: column nowrap;]
  942. [comment]----* *question* *----[/comment]
  943. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:90%; padding:12px 15px; box-sizing:border-box; background: var(--color-2); border-radius:12px 12px 12px 0; line-height:120%; color: var(--header); text-transform:uppercase; font-size:11px; margin:5px auto 5px 0; text-align:justify;][font=Montserrat][comment]
  944. ----* * * question here!----
  945. [/comment]question comes here[/font][/border]
  946.  
  947. [comment]----* *answer* *----[/comment]
  948. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:88%; padding:12px 15px; box-sizing:border-box; background: var(--color-1); border-radius:12px 12px 0 12px; line-height:130%; color: var(--t-color); text-transform:uppercase; font-size:11px; margin:5px 0 5px auto; text-align:justify;][font=Karla][comment]
  949. ----* * * answer here!----
  950. [/comment]answer comes here[/font][/border]
  951. [/border]
  952. [comment]----copy me too!----[/comment]
  953.  
  954. [comment]----copy this to make another set of questions!----[/comment]
  955. [border=transparent; height:fit-content; width:100%; padding:0; margin:15px 0; display:flex; flex-flow: column nowrap;]
  956. [comment]----* *question* *----[/comment]
  957. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:90%; padding:12px 15px; box-sizing:border-box; background: var(--color-2); border-radius:12px 12px 12px 0; line-height:120%; color: var(--header); text-transform:uppercase; font-size:11px; margin:5px auto 5px 0; text-align:justify;][font=Montserrat][comment]
  958. ----* * * question here!----
  959. [/comment]question comes here[/font][/border]
  960.  
  961. [comment]----* *answer* *----[/comment]
  962. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:88%; padding:12px 15px; box-sizing:border-box; background: var(--color-1); border-radius:12px 12px 0 12px; line-height:130%; color: var(--t-color); text-transform:uppercase; font-size:11px; margin:5px 0 5px auto; text-align:justify;][font=Karla][comment]
  963. ----* * * answer here!----
  964. [/comment]answer comes here[/font][/border]
  965. [/border]
  966. [comment]----copy me too!----[/comment]
  967.  
  968. [comment]----copy this to make another set of questions! (last! make sure this set is last!)----[/comment]
  969. [border=transparent; height:fit-content; width:100%; padding:0; margin:15px 0 0 0; display:flex; flex-flow: column nowrap;]
  970. [comment]----* *question* *----[/comment]
  971. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:90%; padding:12px 15px; box-sizing:border-box; background: var(--color-2); border-radius:12px 12px 12px 0; line-height:120%; color: var(--header); text-transform:uppercase; font-size:11px; margin:5px auto 5px 0; text-align:justify;][font=Montserrat][comment]
  972. ----* * * question here!----
  973. [/comment]question comes here[/font][/border]
  974.  
  975. [comment]----* *answer* *----[/comment]
  976. [border=transparent; height:fit-content; width:fit-content; min-width:30%; max-width:88%; padding:12px 15px; box-sizing:border-box; background: var(--color-1); border-radius:12px 12px 0 12px; line-height:130%; color: var(--t-color); text-transform:uppercase; font-size:11px; margin:5px 0 5px auto; text-align:justify;][font=Karla][comment]
  977. ----* * * answer here!----
  978. [/comment]answer comes here[/font][/border]
  979. [/border]
  980. [comment]----copy me too!----[/comment]
  981.  
  982. [/border][/border][/border]
  983. [comment]----column one end-----[/comment]
  984.  
  985. [comment]----column two (relationships)----[/comment]
  986. [border=transparent; height:100%; flex-grow:1; padding:0; margin:0 25px; display:flex; flex-flow: column nowrap;]
  987. [comment]----tab title----[/comment]
  988. [border=transparent; height:28%; width:100%; padding:15px; box-sizing:border-box; background: var(--color-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  989. [border=transparent; height:fit-content; width:fit-content; padding:0; color:transparent; -webkit-text-stroke:0.1px var(--header); font-size:48px; text-transform:uppercase; font-weight:bold; letter-spacing:2px;][font=Oswald][comment]
  990. ----* * * title here----
  991. [/comment]misc[/font][/border]
  992. [/border]
  993.  
  994. [comment]----* * * relationship contents * * *----[/comment]
  995. [border=transparent; height:calc(72% - 25px); width:100%; margin-top:25px; padding:15px 0; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--color-1); display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap;]
  996.  
  997. [comment]----copy this whole thing to make a new relationship----[/comment]
  998. [border=transparent; height:145px; width:100%; padding:0; display:flex; flex-flow:column wrap; margin:10px 0;]
  999. [comment]----relationship picture (change the number in background: var(--rX); to match the one in the variables!)----[/comment]
  1000. [border=transparent; height:100%; width:35%; padding:0; /*edit here!*/ background: var(--r1); background-size:cover; flex-shrink:0; margin-right:15px;
  1001. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  1002.  
  1003. [comment]----* *relationship name* *----[/comment]
  1004. [border=transparent; height:18%; width:calc(65% - 15px); padding:0 5px; background: var(--color-2); box-sizing:border-box; color: var(--header); font-size:12px; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center;][font=Montserrat][comment]
  1005. ----* * * relationship name here----
  1006. [/comment]name here[/font][/border]
  1007.  
  1008. [comment]----* * relationship description * * ----[/comment]
  1009. [border=transparent; height:calc(82% - 8px); width:calc(65% - 15px); padding:0; margin-top:8px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  1010. [border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:140%;][font=Karla][comment]
  1011. ----* * * relationship description here!----
  1012. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies. Suspendisse vehicula vehicula massa vitae viverra. Etiam venenatis libero non mattis tincidunt. Quisque tempor, libero dapibus porttitor cursus, dolor dui maximus lorem, vel gravida sem velit a ipsum. Phasellus convallis purus eget egestas rutrum. Nullam tortor eros, egestas sit amet vehicula luctus, elementum quis nunc. Nam semper nisl at lacus consequat tempor. Suspendisse massa quam, ornare a fringilla ut, lacinia non augue. Aliquam in sagittis libero, nec pharetra quam.[/font][/border]
  1013. [/border][/border]
  1014. [/border]
  1015. [comment]----copy me too!----[/comment]
  1016.  
  1017. [comment]----copy this whole thing to make a new relationship----[/comment]
  1018. [border=transparent; height:145px; width:100%; padding:0; display:flex; flex-flow:column wrap; margin:10px 0;]
  1019. [comment]----relationship picture (change the number in background: var(--rX); to match the one in the variables!)----[/comment]
  1020. [border=transparent; height:100%; width:35%; padding:0; /*edit here!*/ background: var(--r2); background-size:cover; flex-shrink:0; margin-right:15px;
  1021. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  1022.  
  1023. [comment]----* *relationship name* *----[/comment]
  1024. [border=transparent; height:18%; width:calc(65% - 15px); padding:0 5px; background: var(--color-2); box-sizing:border-box; color: var(--header); font-size:12px; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center;][font=Montserrat][comment]
  1025. ----* * * relationship name here----
  1026. [/comment]name here[/font][/border]
  1027.  
  1028. [comment]----* * relationship description * * ----[/comment]
  1029. [border=transparent; height:calc(82% - 8px); width:calc(65% - 15px); padding:0; margin-top:8px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  1030. [border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:140%;][font=Karla][comment]
  1031. ----* * * relationship description here!----
  1032. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies. Suspendisse vehicula vehicula massa vitae viverra. Etiam venenatis libero non mattis tincidunt. Quisque tempor, libero dapibus porttitor cursus, dolor dui maximus lorem, vel gravida sem velit a ipsum. Phasellus convallis purus eget egestas rutrum. Nullam tortor eros, egestas sit amet vehicula luctus, elementum quis nunc. Nam semper nisl at lacus consequat tempor. Suspendisse massa quam, ornare a fringilla ut, lacinia non augue. Aliquam in sagittis libero, nec pharetra quam.[/font][/border]
  1033. [/border][/border]
  1034. [/border]
  1035. [comment]----copy me too!----[/comment]
  1036.  
  1037. [comment]----copy this whole thing to make a new relationship----[/comment]
  1038. [border=transparent; height:145px; width:100%; padding:0; display:flex; flex-flow:column wrap; margin:10px 0;]
  1039. [comment]----relationship picture (change the number in background: var(--rX); to match the one in the variables!)----[/comment]
  1040. [border=transparent; height:100%; width:35%; padding:0; /*edit here!*/ background: var(--r3); background-size:cover; flex-shrink:0; margin-right:15px;
  1041. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  1042.  
  1043. [comment]----* *relationship name* *----[/comment]
  1044. [border=transparent; height:18%; width:calc(65% - 15px); padding:0 5px; background: var(--color-2); box-sizing:border-box; color: var(--header); font-size:12px; text-transform:uppercase; line-height:100%; display:flex; align-items:center; justify-content:center;][font=Montserrat][comment]
  1045. ----* * * relationship name here----
  1046. [/comment]name here[/font][/border]
  1047.  
  1048. [comment]----* * relationship description * * ----[/comment]
  1049. [border=transparent; height:calc(82% - 8px); width:calc(65% - 15px); padding:0; margin-top:8px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  1050. [border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:140%;][font=Karla][comment]
  1051. ----* * * relationship description here!----
  1052. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et posuere felis, eget elementum diam. In luctus auctor libero eu ultricies. Suspendisse vehicula vehicula massa vitae viverra. Etiam venenatis libero non mattis tincidunt. Quisque tempor, libero dapibus porttitor cursus, dolor dui maximus lorem, vel gravida sem velit a ipsum. Phasellus convallis purus eget egestas rutrum. Nullam tortor eros, egestas sit amet vehicula luctus, elementum quis nunc. Nam semper nisl at lacus consequat tempor. Suspendisse massa quam, ornare a fringilla ut, lacinia non augue. Aliquam in sagittis libero, nec pharetra quam.[/font][/border]
  1053. [/border][/border]
  1054. [/border]
  1055. [comment]----copy me too!----[/comment]
  1056.  
  1057. [/border][/border][/border]
  1058. [comment]----relationship contents end----[/comment]
  1059. [/border]
  1060. [comment]----column two end-----[/comment]
  1061.  
  1062. [comment]----column three (images) ----[/comment]
  1063. [border=transparent; height:100%; width:24%; padding:0; flex-shrink:0; display:flex; flex-flow: column nowrap;]
  1064. [border=transparent; height:21%; width:100%; padding:0; background: var(--eimg-1); background-size:cover; flex-shrink:0;
  1065. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  1066.  
  1067. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  1068.  
  1069. [border=transparent; height:21%; width:100%; padding:0; background: var(--eimg-2); background-size:cover; flex-shrink:0;
  1070. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  1071.  
  1072. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  1073.  
  1074. [border=transparent; height:21%; width:100%; padding:0; background: var(--eimg-3); background-size:cover; flex-shrink:0;
  1075. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  1076.  
  1077. [border=transparent; flex-grow:1; width:100%; padding:0; font-size:0;]filler! ignore[/border]
  1078.  
  1079. [border=transparent; height:21%; width:100%; padding:0; background: var(--eimg-4); background-size:cover; flex-shrink:0;
  1080. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  1081. [/border]
  1082. [comment]----column three end-----[/comment]
  1083.  
  1084. [/border][/tab]
  1085. [comment]----tab five end-----[/comment]
  1086.  
  1087. [/tabs][/border][/border]
  1088. [comment]----tabs end----[/comment]
  1089.  
  1090. [/border][comment]----signature! (do not remove!)-----
  1091. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:60px; color: var(--color-2); left:0; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by natasha., coded by uxie♡[/font][/bg][/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!