API tools faq
paste
ooksie

stellamaris (uxie x natasha.)

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