API tools faq
paste
Advertisement
ooksie

purple prose (uxie x natasha.)

ooksie
Oct 23rd, 2020 (edited)
960
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.36 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *biiiiig background;
  3. --bg-1: #111111;
  4. *container background + secondary accent;
  5. --bg-2: #1E1E1E;
  6. *first accent colour;
  7. --color-1: #8B71AA;
  8. *button colour;
  9. --b-color: #fff;
  10. *text colour;
  11. --t-color: #fff;
  12.  
  13. *images are categorised by tab. images on tab 1 are labelled a, tab 2 with b and so on;
  14. --aimg-1: url('https://64.media.tumblr.com/986a90f758c0edf0530229a358ff4594/tumblr_ot4lcz4Inz1vk2smno3_1280.jpg');
  15. --aimg-2: url('https://64.media.tumblr.com/6658cd4d582ea9572790c24b21bfbcd3/tumblr_ot4lcz4Inz1vk2smno4_1280.jpg');
  16. --bimg-1: url('https://64.media.tumblr.com/550242533fd0da9e113f18a410dadc8e/7d63c1f802ce249c-40/s250x400/10863c1b2036b8a01911d696119b4483d963dace.png');
  17. --cimg-1: url('https://64.media.tumblr.com/14277f6501791ba4168f0ed592b797ad/tumblr_pm7bmeAMQW1y03ja9o2_1280.jpg');
  18. --dimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  19. --dimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  20. --dimg-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21. --dimg-4: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  22. --dimg-5: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  23. --dimg-6: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  24. --eimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  25. *all images labelled with "r" i.e. r1 are relationship images;
  26. --eimg-r1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  27. --eimg-r2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  28. --eimg-r3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  29.  
  30. height:auto; width:100%; padding:70px 10px 80px 10px; box-sizing:border-box; line-height:0; background: var(--bg-1); position:relative; overflow-x:auto;]
  31. [comment]----main container----[/comment]
  32. [border=transparent; height:520px; width:950px; padding:0; display:flex; flex-flow: row wrap; position:relative; margin:auto;]
  33.  
  34. [comment]----tabs cover----[/comment]
  35. [border=transparent; height:12%; width:40.5%; padding:0 38px; box-sizing:border-box; position:absolute; top:0; left:30px; background-color: var(--color-1); border-radius:40px 40px 0 0; pointer-events:none; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center;]
  36.  
  37. [comment]----button----[/comment]
  38. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; color: var(--b-color); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%;][comment]
  39. ---- * * * tab icons here ----
  40. [/comment][fa]fal fa-heart[/fa][/border]
  41. [comment]----button end----[/comment]
  42.  
  43. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0; pointer-events:auto;]filler[/border]
  44.  
  45. [comment]----button----[/comment]
  46. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; color: var(--b-color); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%;][comment]
  47. ---- * * * tab icons here ----
  48. [/comment][fa]fal fa-home[/fa][/border]
  49. [comment]----button end----[/comment]
  50.  
  51. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0; pointer-events:auto;]filler[/border]
  52.  
  53. [comment]----button----[/comment]
  54. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; color: var(--b-color); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%;][comment]
  55. ---- * * * tab icons here ----
  56. [/comment][fa]fal fa-heart[/fa][/border]
  57. [comment]----button end----[/comment]
  58.  
  59. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0; pointer-events:auto;]filler[/border]
  60.  
  61. [comment]----button----[/comment]
  62. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; color: var(--b-color); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%;][comment]
  63. ---- * * * tab icons here ----
  64. [/comment][fa]fal fa-home[/fa][/border]
  65. [comment]----button end----[/comment]
  66.  
  67. [border=transparent; height:100%; flex-grow:1; padding:0; font-size:0; pointer-events:auto;]filler[/border]
  68.  
  69. [comment]----button----[/comment]
  70. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; color: var(--b-color); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%;][comment]
  71. ---- * * * tab icons here ----
  72. [/comment][fa]fal fa-heart[/fa][/border]
  73. [comment]----button end----[/comment]
  74.  
  75. [/border]
  76. [comment]----tabs cover end----[/comment]
  77.  
  78. [comment]----tabs----[/comment]
  79. [border=transparent; height:12%; width:35%; padding:0; margin-left:25px;][border=transparent; height:50px; padding:0; margin:20px -40px 0 10px;][tabs]
  80.  
  81. [comment]----basics (tab)----[/comment]
  82. [tab=...][border=transparent; height:88%; width:100%; padding:15px; box-sizing:border-box; background-color:var(--bg-2); position:absolute; left:0; bottom:0; display:flex; flex-flow: column nowrap; justify-content:center; align-items:center;]
  83.  
  84. [comment]----row one----[/comment]
  85. [border=transparent; height:29%; width:100%; padding:8px 5px 0 5px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
  86.  
  87. [comment]----big role----[/comment]
  88. [border=transparent; height:fit-content; width:fit-content; color:var(--t-color); font-size:115px; letter-spacing:2px; line-height:80%; flex-shrink:0;][font=Abril Fatface][comment]
  89. ----* * * character's role here----
  90. [/comment]lux.[/font][/border]
  91.  
  92. [comment]----quote----[/comment]
  93. [border=transparent; height:100%; flex-grow:1; margin:0 25px; padding:0; position:relative; display:flex; align-items:center; justify-content:center;]
  94. [border=transparent; height:100%; width:fit-content; padding:0; color: var(--color-1); font-size:34px; display:flex; align-items:flex-start;][fa]fas fa-quote-left[/fa][/border]
  95. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); text-align:center; line-height:120%; font-size:12px; text-transform:uppercase;][font=Rubik][comment]
  96. ---- * * * a quote here ----
  97. [/comment]nasty quote!
  98. you can write a lil quote here
  99. 4 lines max!
  100. aaaaaaaaa[/font][/border]
  101. [border=transparent; height:100%; width:fit-content; padding:0; color: var(--color-1); font-size:34px; display:flex; align-items:flex-end;][fa]fas fa-quote-right[/fa][/border]
  102. [/border]
  103.  
  104. [comment]----music player----[/comment]
  105. [border=transparent; height:100%; width:35%; padding:13px 15px 12px 15px; box-sizing:border-box; background: var(--bg-1); border-radius:15px; flex-shrink:0; position:relative; display:flex; flex-flow: column nowrap; align-items:center; color:var(--t-color); text-transform:uppercase;]
  106. [comment]----song name----[/comment]
  107. [border=transparent; height:fit-content; width:100%; padding:0; font-size:12px; line-height:130%; letter-spacing:1.5px; font-weight:bold;][font=Montserrat][comment]
  108. ---- * * * song name here ----
  109. [/comment]song name[/font][/border]
  110.  
  111. [comment]----artist name----[/comment]
  112. [border=transparent; height:fit-content; width:100%; padding:0; font-size:8px; line-height:130%; letter-spacing:0.5px; margin:2px 0;][font=Rubik][comment]
  113. ---- * * * artist name here ----
  114. [/comment]artist name[/font][/border]
  115.  
  116. [comment]----song progress---[/comment]
  117. [border=transparent; height:2px; width:100%; padding:0; background-color: var(--t-color); margin:5px 0;][border=transparent; height:100%; padding:0; background: var(--color-1);
  118. /*edit this to adjust the progress of the song*/ width:75%;][/border][/border]
  119.  
  120. [comment]----music buttons----[/comment]
  121. [border=transparent; flex-grow:1; width:100%; padding:0 45px; background:var(--bg-1); position:relative; z-index:2; pointer-events:none; box-sizing:border-box; display:flex; justify-content:space-around; align-items:center;]
  122. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:18px; cursor:pointer; pointer-events:auto;][fa]fas fa-backward[/fa][/border]
  123. [border=transparent; height:34px; width:34px; padding:0; background-color: var(--color-1); border-radius:50%; font-size:13px; display:flex; justify-content:center; align-items:center;][fa]fas fa-play[/fa][/border]
  124. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:18px; cursor:pointer; pointer-events:auto;][fa]fas fa-forward[/fa][/border]
  125. [/border]
  126.  
  127. [comment]----media player (pick which player you want ^_^)----[/comment]
  128. [border=transparent; height:30px; width:30px; padding:0; position:absolute; z-index:1; bottom:20px; overflow:hidden; border-radius:50%;]
  129. [comment]----soundcloud (put a soundcloud link within media tag)----[/comment]
  130. [border=transparent; height:80px; width:160px; padding:0; margin-top:-20px; margin-left:-20px;]
  131. [media=soundcloud]https://soundcloud.com/britney-andrade-800147183/dongdang-isabellas-lullabycover[/media]
  132. [/border]
  133.  
  134. [comment]----google drive (put google file code within media tag)----[/comment]
  135. [border=transparent; height:500px; width:500px; margin-top:-308px; margin-left:-95px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  136. [media=googledrive]ur google file code here[/MEDIA]
  137. [/border]
  138. [/border]
  139. [/border]
  140.  
  141. [/border]
  142.  
  143. [comment]----row two----[/comment]
  144. [border=transparent; height:66%; width:100%; padding:0; margin-top:2%; display:flex; flex-flow: row nowrap;]
  145.  
  146. [comment]----images----[/comment]
  147. [border=transparent; height:100%; width:43%; padding:0 5px 25px 25px; box-sizing:border-box; position:relative; display:flex; align-items:flex-end; flex-shrink:0;]
  148. [border=transparent; height:93%; width:54%; padding:0; border:12px solid #fff; border-bottom:40px solid #fff; box-sizing:border-box; background: var(--aimg-1); background-size:cover; transform:rotate(-10deg); /*edit the following to adjust cropping of the image*/ background-position:50% 50%;][/border]
  149. [border=transparent; height:96%; width:56%; padding:0; border:12px solid #fff; border-bottom:40px solid #fff; box-sizing:border-box; background: var(--aimg-2); background-size:cover; position:absolute; bottom:10px; right:5px; transform:rotate(3deg); box-shadow:-5px 5px 5px rgb(48, 48, 48, .3);
  150. /*edit the following to adjust cropping of the image*/ background-position:50% 50%;][/border]
  151. [/border]
  152. [comment]----images end----[/comment]
  153.  
  154. [comment]----tab contents----[/comment]
  155. [border=transparent; height:100%; flex-grow:1; padding:0; box-sizing:border-box; margin-left:20px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; flex:1;][border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: column nowrap;]
  156.  
  157. [comment]----copy this whole thing for one bit of character info!----[/comment]
  158. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:5px 0;]
  159. [border=transparent; height:fit-content; width:fit-content; padding:10px 12px; box-sizing:border-box; color: var(--color-1); font-size:30px; line-height:100%;][comment]
  160. ----* * * icon here ----
  161. [/comment][fa]fal fa-home[/fa][/border]
  162. [border=transparent; height:fit-content; flex-grow:1; padding:0; display:flex; flex-flow: row wrap; color: var(--t-color);]
  163. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; line-height:130%; border-bottom:2px solid var(--color-1); font-size:11px; text-transform:uppercase; margin-bottom:5px; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]
  164. ----* * *info title here! ----
  165. [/comment]character name[/font][/border]
  166. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; font-size:11px; text-align:justify;][font=Rubik][comment]
  167. ----* * *info contents here!----
  168. [/comment]character name here. this whole bit will scroll when you add more content![/font][/border]
  169. [/border]
  170. [/border]
  171. [comment]----copy me too!!!----[/comment]
  172.  
  173. [comment]----copy this whole thing for one bit of character info!----[/comment]
  174. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:5px 0;]
  175. [border=transparent; height:fit-content; width:fit-content; padding:10px 12px; box-sizing:border-box; color: var(--color-1); font-size:30px; line-height:100%;][comment]
  176. ----* * * icon here ----
  177. [/comment][fa]fal fa-home[/fa][/border]
  178. [border=transparent; height:fit-content; flex-grow:1; padding:0; display:flex; flex-flow: row wrap; color: var(--t-color);]
  179. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; line-height:130%; border-bottom:2px solid var(--color-1); font-size:11px; text-transform:uppercase; margin-bottom:5px; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]
  180. ----* * *info title here! ----
  181. [/comment]nickname(s)[/font][/border]
  182. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; font-size:11px; text-align:justify;][font=Rubik][comment]
  183. ----* * *info contents here!----
  184. [/comment]character nicknames here[/font][/border]
  185. [/border]
  186. [/border]
  187. [comment]----copy me too!!!----[/comment]
  188.  
  189. [comment]----copy this whole thing for one bit of character info!----[/comment]
  190. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:5px 0;]
  191. [border=transparent; height:fit-content; width:fit-content; padding:10px 12px; box-sizing:border-box; color: var(--color-1); font-size:30px; line-height:100%;][comment]
  192. ----* * * icon here ----
  193. [/comment][fa]fal fa-home[/fa][/border]
  194. [border=transparent; height:fit-content; flex-grow:1; padding:0; display:flex; flex-flow: row wrap; color: var(--t-color);]
  195. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; line-height:130%; border-bottom:2px solid var(--color-1); font-size:11px; text-transform:uppercase; margin-bottom:5px; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]
  196. ----* * *info title here! ----
  197. [/comment]ethnicity[/font][/border]
  198. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; font-size:11px; text-align:justify;][font=Rubik][comment]
  199. ----* * *info contents here!----
  200. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  201. [/border]
  202. [/border]
  203. [comment]----copy me too!!!----[/comment]
  204.  
  205. [comment]----copy this whole thing for one bit of character info!----[/comment]
  206. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start; margin:5px 0;]
  207. [border=transparent; height:fit-content; width:fit-content; padding:10px 12px; box-sizing:border-box; color: var(--color-1); font-size:30px; line-height:100%;][comment]
  208. ----* * * icon here ----
  209. [/comment][fa]fal fa-home[/fa][/border]
  210. [border=transparent; height:fit-content; flex-grow:1; padding:0; display:flex; flex-flow: row wrap; color: var(--t-color);]
  211. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; line-height:130%; border-bottom:2px solid var(--color-1); font-size:11px; text-transform:uppercase; margin-bottom:5px; font-weight:bold; letter-spacing:0.5px;][font=Montserrat][comment]
  212. ----* * *info title here! ----
  213. [/comment]ethnicity[/font][/border]
  214. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; font-size:11px; text-align:justify;][font=Rubik][comment]
  215. ----* * *info contents here!----
  216. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  217. [/border]
  218. [/border]
  219. [comment]----copy me too!!!----[/comment]
  220.  
  221. [/border][/border][/border]
  222. [comment]----tab contents end----[/comment]
  223. [/border]
  224. [/border]
  225. [comment]----tab container end----[/comment]
  226.  
  227. [comment]----button select (remember to edit the icon here to match the icon of the tab!)----[/comment]
  228. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; background-color: var(--b-color); color: var(--bg-1); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%; position:absolute; top:15px; left:68px;][comment]
  229. ---- * * * tab icons here ----
  230. [/comment][fa]fal fa-heart[/fa][/border]
  231. [comment]----button select end----[/comment]
  232. [/tab]
  233. [comment]----basics (tab) end----[/comment]
  234.  
  235. [comment]----appearance (tab)----[/comment]
  236. [tab=...][border=transparent; height:88%; width:100%; padding:15px; box-sizing:border-box; background-color:var(--bg-2); position:absolute; left:0; bottom:0; display:flex; flex-flow: row nowrap; align-items:center;]
  237.  
  238. [comment]----image----[/comment]
  239. [border=transparent; height:100%; width:22%; padding:0; background: var(--bimg-1); background-size:cover; flex-shrink:0;
  240. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  241.  
  242. [comment]----tab contents----[/comment]
  243. [border=transparent; height:100%; flex-grow:1; padding:0; margin:0 20px; display:flex; flex-flow: column nowrap;]
  244.  
  245. [comment]----title----[/comment]
  246. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  247. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  248. [border=transparent; height:fit-content; width:fit-content; padding:0 0 5px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  249. ----* * *tab title here----
  250. [/comment]appearance[/font][/border]
  251. [/border]
  252. [comment]----title end----[/comment]
  253.  
  254. [comment]----body contents----[/comment]
  255. [border=transparent; flex-grow:1; width:100%; margin-top:5px; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  256.  
  257. [comment]----copy this whole thing for one bit of character info!----[/comment]
  258. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:flex-end; margin:8px 0;]
  259. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; color: var(--color-1); text-transform:uppercase; font-weight:bold; font-size:14px; letter-spacing:0.5px;][font=Montserrat][comment]
  260. ---- * * * info title here! ----
  261. [/comment]hair style[/font][/border]
  262. [border=transparent; height:fit-content; width:96%; margin-top:8px; padding:0 0 0 12px; box-sizing:border-box; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  263. ----* * *info contents here! -----
  264. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim.[/font][/border]
  265. [/border]
  266. [comment]----copy me too!----[/comment]
  267.  
  268. [comment]----copy this whole thing for one bit of character info!----[/comment]
  269. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:flex-end; margin:8px 0;]
  270. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; color: var(--color-1); text-transform:uppercase; font-weight:bold; font-size:14px; letter-spacing:0.5px;][font=Montserrat][comment]
  271. ---- * * * info title here! ----
  272. [/comment]modifications[/font][/border]
  273. [border=transparent; height:fit-content; width:96%; margin-top:8px; padding:0 0 0 12px; box-sizing:border-box; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  274. ----* * *info contents here! -----
  275. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim.[/font][/border]
  276. [/border]
  277. [comment]----copy me too!----[/comment]
  278.  
  279. [comment]----copy this whole thing for one bit of character info!----[/comment]
  280. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:flex-end; margin:8px 0;]
  281. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; color: var(--color-1); text-transform:uppercase; font-weight:bold; font-size:14px; letter-spacing:0.5px;][font=Montserrat][comment]
  282. ---- * * * info title here! ----
  283. [/comment]physique[/font][/border]
  284. [border=transparent; height:fit-content; width:96%; margin-top:8px; padding:0 0 0 12px; box-sizing:border-box; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  285. ----* * *info contents here! -----
  286. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim.[/font][/border]
  287. [/border]
  288. [comment]----copy me too!----[/comment]
  289.  
  290. [comment]----copy this whole thing for one bit of character info!----[/comment]
  291. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:flex-end; margin:8px 0;]
  292. [border=transparent; height:fit-content; width:100%; padding:0; line-height:130%; color: var(--color-1); text-transform:uppercase; font-weight:bold; font-size:14px; letter-spacing:0.5px;][font=Montserrat][comment]
  293. ---- * * * info title here! ----
  294. [/comment]attire[/font][/border]
  295. [border=transparent; height:fit-content; width:96%; margin-top:8px; padding:0 0 0 12px; box-sizing:border-box; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  296. ----* * *info contents here! -----
  297. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim.[/font][/border]
  298. [/border]
  299. [comment]----copy me too!----[/comment]
  300.  
  301. [/border][/border][/border]
  302. [comment]----body contents end----[/comment]
  303.  
  304. [/border]
  305. [comment]----tab contents end----[/comment]
  306.  
  307. [comment]----extra details----[/comment]
  308. [border=transparent; height:100%; width:17.5%; padding:0; flex-shrink:0; display:flex; flex-flow: column nowrap; justify-content:space-between;]
  309.  
  310. [comment]----detail box----[/comment]
  311. [border=transparent; height:21%; width:100%; padding:8px 25px; box-sizing:border-box; background: var(--bg-1); display:flex; flex-flow: column nowrap;]
  312. [border=transparent; height:fit-content; width:100%; padding:5px 0 10px 0; box-sizing:border-box; text-align:center; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:13px; border-bottom:2px dashed var(--color-1); flex-shrink:0; line-height:130%;][font=Montserrat][comment]
  313. ----* * *info title here!----
  314. [/comment]height[/font][/border]
  315. [border=transparent; flex-grow:1; width:100%; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color: var(--t-color); font-size:10px; line-height:130%;][font=Rubik][comment]
  316. ----* * *info contents here!----
  317. [/comment]height info[/font][/border]
  318. [/border]
  319. [comment]----detail box end----[/comment]
  320.  
  321. [comment]----detail box----[/comment]
  322. [border=transparent; height:21%; width:100%; padding:8px 25px; box-sizing:border-box; background: var(--bg-1); display:flex; flex-flow: column nowrap;]
  323. [border=transparent; height:fit-content; width:100%; padding:5px 0 10px 0; box-sizing:border-box; text-align:center; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:13px; border-bottom:2px dashed var(--color-1); flex-shrink:0; line-height:130%;][font=Montserrat][comment]
  324. ----* * *info title here!----
  325. [/comment]weight[/font][/border]
  326. [border=transparent; flex-grow:1; width:100%; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color: var(--t-color); font-size:10px; line-height:130%;][font=Rubik][comment]
  327. ----* * *info contents here!----
  328. [/comment]weight info[/font][/border]
  329. [/border]
  330. [comment]----detail box end----[/comment]
  331.  
  332. [comment]----detail box----[/comment]
  333. [border=transparent; height:21%; width:100%; padding:8px 25px; box-sizing:border-box; background: var(--bg-1); display:flex; flex-flow: column nowrap;]
  334. [border=transparent; height:fit-content; width:100%; padding:5px 0 10px 0; box-sizing:border-box; text-align:center; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:13px; border-bottom:2px dashed var(--color-1); flex-shrink:0; line-height:130%;][font=Montserrat][comment]
  335. ----* * *info title here!----
  336. [/comment]eye colour[/font][/border]
  337. [border=transparent; flex-grow:1; width:100%; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color: var(--t-color); font-size:10px; line-height:130%;][font=Rubik][comment]
  338. ----* * *info contents here!----
  339. [/comment]eye colour info[/font][/border]
  340. [/border]
  341. [comment]----detail box end----[/comment]
  342.  
  343. [comment]----detail box----[/comment]
  344. [border=transparent; height:21%; width:100%; padding:8px 25px; box-sizing:border-box; background: var(--bg-1); display:flex; flex-flow: column nowrap;]
  345. [border=transparent; height:fit-content; width:100%; padding:5px 0 10px 0; box-sizing:border-box; text-align:center; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:13px; border-bottom:2px dashed var(--color-1); flex-shrink:0; line-height:130%;][font=Montserrat][comment]
  346. ----* * *info title here!----
  347. [/comment]hair colour[/font][/border]
  348. [border=transparent; flex-grow:1; width:100%; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color: var(--t-color); font-size:10px; line-height:130%;][font=Rubik][comment]
  349. ----* * *info contents here!----
  350. [/comment]hair colour info[/font][/border]
  351. [/border]
  352. [comment]----detail box end----[/comment]
  353. [/border]
  354. [comment]----extra details end----[/comment]
  355.  
  356. [/border]
  357. [comment]----tab container end----[/comment]
  358.  
  359. [comment]----button select (remember to edit the icon here to match the icon of the tab!)----[/comment]
  360. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; background-color: var(--b-color); color: var(--bg-1); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%; position:absolute; top:15px; left:137px;][comment]
  361. ---- * * * tab icons here ----
  362. [/comment][fa]fal fa-home[/fa][/border]
  363. [comment]----button select end----[/comment]
  364. [/tab]
  365. [comment]----appearance (tab) end----[/comment]
  366.  
  367. [comment]----personality (tab)----[/comment]
  368. [tab=...][border=transparent; height:88%; width:100%; padding:15px; box-sizing:border-box; background-color:var(--bg-2); position:absolute; left:0; bottom:0; display:flex; flex-flow: row nowrap;]
  369. [comment]----tab contents----[/comment]
  370. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap;]
  371.  
  372. [comment]----title----[/comment]
  373. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  374. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  375. [border=transparent; height:fit-content; width:fit-content; padding:0 0 5px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  376. ----* * *tab title here----
  377. [/comment]personality[/font][/border]
  378. [/border]
  379. [comment]----title end----[/comment]
  380.  
  381. [comment]----body contents----[/comment]
  382. [border=transparent; flex-grow:1; width:100%; margin-top:5px; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  383.  
  384. [comment]----header----[/comment]
  385. [border=transparent; height:fit-content; width:50%; padding:8px; box-sizing:border-box; background: var(--bg-1); line-height:130%; color: var(--color-1); text-transform:uppercase; font-size:18px; letter-spacing:2.5px; position:sticky; top:0; text-align:center; font-weight:bold;][font=Montserrat][comment]
  386. ----* * * section header here----
  387. [/comment]positive traits[/font][/border]
  388.  
  389. [comment]----text (keep all your text per section in here!)----[/comment]
  390. [border=transparent; height:fit-content; width:50%; padding:0 10px; box-sizing:border-box; color: var(--t-color); text-align:justify; font-size:11px; margin:15px 0 25px 0; line-height:130%;][font=Rubik][comment]
  391. ----* * *type your info here!----
  392. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.
  393.  
  394. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum, turpis eu suscipit dignissim, lacus magna tempus nisl, non ullamcorper mauris erat sit amet nisl. Suspendisse sit amet ex eget est lacinia pretium. In hac habitasse platea dictumst. Proin dapibus mattis dui, et ullamcorper felis mollis in. Aenean iaculis aliquam mauris, vitae aliquet turpis bibendum eu. Suspendisse vestibulum tempus ipsum, non vehicula arcu egestas non. Nulla sagittis rutrum dui, at rhoncus urna tempor vel. Aenean lorem ante, consequat et urna molestie, scelerisque faucibus risus. Maecenas at urna suscipit nibh tincidunt tempor.[/font][/border]
  395. [comment]----text end (copy me too!)----[/comment]
  396.  
  397. [comment]----header----[/comment]
  398. [border=transparent; height:fit-content; width:50%; padding:8px; box-sizing:border-box; background: var(--bg-1); line-height:130%; color: var(--color-1); text-transform:uppercase; font-size:18px; letter-spacing:2.5px; position:sticky; top:0; text-align:center; font-weight:bold;][font=Montserrat][comment]
  399. ----* * * section header here----
  400. [/comment]negative traits[/font][/border]
  401.  
  402. [comment]----text (keep all your text per section in here!)----[/comment]
  403. [border=transparent; height:fit-content; width:50%; padding:0 10px; box-sizing:border-box; color: var(--t-color); text-align:justify; font-size:11px; margin:15px 0 25px 0; line-height:130%;][font=Rubik][comment]
  404. ----* * *type your info here!----
  405. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  406. [comment]----text end (copy me too!)----[/comment]
  407.  
  408. [comment]----header----[/comment]
  409. [border=transparent; height:fit-content; width:50%; padding:8px; box-sizing:border-box; background: var(--bg-1); line-height:130%; color: var(--color-1); text-transform:uppercase; font-size:18px; letter-spacing:2.5px; position:sticky; top:0; text-align:center; font-weight:bold;][font=Montserrat][comment]
  410. ----* * * section header here----
  411. [/comment]negative traits[/font][/border]
  412.  
  413. [comment]----text (keep all your text per section in here!)----[/comment]
  414. [border=transparent; height:fit-content; width:50%; padding:0 10px; box-sizing:border-box; color: var(--t-color); text-align:justify; font-size:11px; margin:15px 0 25px 0; line-height:130%;][font=Rubik][comment]
  415. ----* * *type your info here!----
  416. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  417. [comment]----text end (copy me too!)----[/comment]
  418.  
  419. [/border][/border]
  420. [comment]----body contents end----[/comment]
  421.  
  422. [/border]
  423. [comment]----tab contents end----[/comment]
  424.  
  425. [comment]----image----[/comment]
  426. [border=transparent; height:100%; width:26%; padding:0; margin-left:20px; background:var(--cimg-1); background-size:cover; flex-shrink:0;
  427. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  428. [/border]
  429. [comment]----tab container end----[/comment]
  430.  
  431. [comment]----button select (remember to edit the icon here to match the icon of the tab!)----[/comment]
  432. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; background-color: var(--b-color); color: var(--bg-1); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%; position:absolute; top:15px; left:206px;][comment]
  433. ---- * * * tab icons here ----
  434. [/comment][fa]fal fa-heart[/fa][/border]
  435. [comment]----button select end----[/comment]
  436. [/tab]
  437. [comment]----personality (tab) end----[/comment]
  438.  
  439. [comment]----background + gallery (tab)----[/comment]
  440. [tab=...][border=transparent; height:88%; width:100%; padding:15px; box-sizing:border-box; background-color:var(--bg-2); position:absolute; left:0; bottom:0; display:flex; flex-flow: row nowrap;]
  441. [comment]----background----[/comment]
  442. [border=transparent; height:100%; width:52%; padding:0 0 0 5px; display:flex; flex-flow: column nowrap;]
  443.  
  444. [comment]----title----[/comment]
  445. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  446. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  447. [border=transparent; height:fit-content; width:fit-content; padding:0 0 5px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  448. ----* * *tab title here----
  449. [/comment]background[/font][/border]
  450. [/border]
  451. [comment]----title end----[/comment]
  452.  
  453. [comment]----body contents----[/comment]
  454. [border=transparent; flex-grow:1; width:100%; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  455.  
  456. [comment]----copy this whole thing to get another event----[/comment]
  457. [border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:0; background:var(--bg-2);]
  458. [border=transparent; height:18px; width:18px; padding:0; border:1px solid var(--t-color); background:var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:10px; flex-shrink:0;][/border]
  459. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; line-height:130%; font-size:14px;][font=Montserrat][comment]
  460. ----* * *event header here!----
  461. [/comment]early life[/font][/border]
  462. [/border]
  463. [border=transparent; height:fit-content; width:calc(50% - 8.5px); padding:17px 0 17px 12px; box-sizing:border-box; margin-left:8.5px; margin-top: -5px; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  464. ---- * * * event content here!----
  465. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  466. [comment]----copy me too!----[/comment]
  467.  
  468. [comment]----copy this whole thing to get another event----[/comment]
  469. [border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:0; background:var(--bg-2);]
  470. [border=transparent; height:18px; width:18px; padding:0; border:1px solid var(--t-color); background:var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:10px; flex-shrink:0;][/border]
  471. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; line-height:130%; font-size:14px;][font=Montserrat][comment]
  472. ----* * *event header here!----
  473. [/comment]later life[/font][/border]
  474. [/border]
  475. [border=transparent; height:fit-content; width:calc(50% - 8.5px); padding:17px 0 17px 12px; box-sizing:border-box; margin-left:8.5px; margin-top: -5px; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  476. ---- * * * event content here!----
  477. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  478. [comment]----copy me too!----[/comment]
  479.  
  480. [comment]----copy this whole thing to get another event----[/comment]
  481. [border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; position:sticky; top:0; background:var(--bg-2);]
  482. [border=transparent; height:18px; width:18px; padding:0; border:1px solid var(--t-color); background:var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:10px; flex-shrink:0;][/border]
  483. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; line-height:130%; font-size:14px;][font=Montserrat][comment]
  484. ----* * *event header here!----
  485. [/comment]even later life[/font][/border]
  486. [/border]
  487. [border=transparent; height:fit-content; width:calc(50% - 8.5px); padding:17px 0 17px 12px; box-sizing:border-box; margin-left:8.5px; margin-top: -5px; border-left:1px solid var(--color-1); color: var(--t-color); text-align:justify; font-size:11px; line-height:130%;][font=Rubik][comment]
  488. ---- * * * event content here!----
  489. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.[/font][/border]
  490. [comment]----copy me too!----[/comment]
  491.  
  492. [/border][/border]
  493. [comment]----body contents end----[/comment]
  494.  
  495. [/border]
  496. [comment]----background end----[/comment]
  497.  
  498. [comment]----gallery----[/comment]
  499. [border=transparent; height:100%; width:47%; margin-left:1%; padding:0; display:flex; flex-flow:column-reverse nowrap;]
  500. [comment]----title----[/comment]
  501. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  502. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  503. [border=transparent; height:fit-content; width:fit-content; padding:3px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  504. ----* * *tab title here----
  505. [/comment]gallery[/font][/border]
  506. [/border]
  507. [comment]----title end----[/comment]
  508.  
  509. [comment]----gallery images----[/comment]
  510. [border=transparent; flex:1; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:center;]
  511. [border=transparent; height:30%; width:32%; padding:0; background: var(--dimg-1); background-size:cover;
  512. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  513. [border=transparent; height:30%; width:62%; padding:0; background: var(--dimg-2); background-size:cover;
  514. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  515. [border=transparent; height:25%; width:calc(100% - 15px); padding:0; background: var(--dimg-3); background-size:cover;
  516. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  517. [border=transparent; height:35%; width:32%; padding:0; background: var(--dimg-4); background-size:cover;
  518. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  519. [border=transparent; height:35%; width:28%; padding:0; background: var(--dimg-5); background-size:cover;
  520. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  521. [border=transparent; height:35%; width:32%; padding:0; background: var(--dimg-6); background-size:cover;
  522. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%; margin:5px;][/border]
  523. [/border]
  524. [comment]----images end----[/comment]
  525. [/border]
  526. [comment]----gallery end----[/comment]
  527.  
  528. [/border]
  529. [comment]----tab container end----[/comment]
  530.  
  531. [comment]----button select (remember to edit the icon here to match the icon of the tab!)----[/comment]
  532. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; background-color: var(--b-color); color: var(--bg-1); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%; position:absolute; top:15px; left:275px;][comment]
  533. ---- * * * tab icons here ----
  534. [/comment][fa]fal fa-home[/fa][/border]
  535. [comment]----button select end----[/comment]
  536. [/tab]
  537. [comment]----background + gallery (tab) end----[/comment]
  538.  
  539. [comment]----misc + relationships (tab)----[/comment]
  540. [tab=...][border=transparent; height:88%; width:100%; padding:15px; box-sizing:border-box; background-color:var(--bg-2); position:absolute; left:0; bottom:0; display:flex; flex-flow: row nowrap;]
  541.  
  542. [comment]----misc----[/comment]
  543. [border=transparent; height:100%; width:47%; padding:0; display:flex; flex-flow: column-reverse nowrap;]
  544.  
  545. [comment]----title----[/comment]
  546. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  547. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  548. [border=transparent; height:fit-content; width:fit-content; padding:0 0 5px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  549. ----* * *tab title here----
  550. [/comment]misc[/font][/border]
  551. [/border]
  552. [comment]----title end----[/comment]
  553.  
  554. [border=transparent; flex-grow:1; max-height:85%; width:100%; margin-bottom:10px; padding:0; display:flex; flex-flow: row nowrap;]
  555. [comment]----image----[/comment]
  556. [border=transparent; height:100%; width:32%; padding:0; background: var(--eimg-1); background-size:cover;
  557. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; flex-shrink:0;][/border]
  558.  
  559. [comment]----body contents----[/comment]
  560. [border=transparent; height:100%; max-height:364px; flex-grow:1; margin-left:20px; 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; color:var(--t-color); text-align:justify; line-height:130%; font-size:11px;][font=Rubik][comment]
  561. ----* * *your content here!----
  562. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.
  563.  
  564. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum, turpis eu suscipit dignissim, lacus magna tempus nisl, non ullamcorper mauris erat sit amet nisl. Suspendisse sit amet ex eget est lacinia pretium. In hac habitasse platea dictumst. Proin dapibus mattis dui, et ullamcorper felis mollis in. Aenean iaculis aliquam mauris, vitae aliquet turpis bibendum eu. Suspendisse vestibulum tempus ipsum, non vehicula arcu egestas non. Nulla sagittis rutrum dui, at rhoncus urna tempor vel. Aenean lorem ante, consequat et urna molestie, scelerisque faucibus risus. Maecenas at urna suscipit nibh tincidunt tempor.
  565.  
  566. Suspendisse aliquam urna eu laoreet ultrices. Proin elementum, mi et consequat hendrerit, odio lorem dignissim tellus, ut semper metus arcu iaculis metus. Aliquam quis nisl nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ac sollicitudin orci. Duis sit amet justo ultricies, efficitur sem sit amet, egestas est. Phasellus iaculis at turpis quis semper. Nulla sed pulvinar sapien, ut molestie odio.
  567. [/font][/border][/border][/border]
  568. [comment]----body contents end----[/comment]
  569. [/border]
  570.  
  571. [/border]
  572. [comment]----misc end----[/comment]
  573.  
  574. [comment]----relationships----[/comment]
  575. [border=transparent; height:100%; width:51%; margin-left:2%; padding:0; display:flex; flex-flow: column nowrap;]
  576.  
  577. [comment]----title----[/comment]
  578. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  579. [border=transparent; height:2px; flex-grow:1; padding:0; margin:0 15px 0 0; background: var(--t-color);][/border]
  580. [border=transparent; height:fit-content; width:fit-content; padding:0 0 8px 0; box-sizing:border-box; color: var(--t-color); font-size:41px; text-transform:uppercase; line-height:100%; letter-spacing:1px;][font=Abril Fatface][comment]
  581. ----* * *tab title here----
  582. [/comment]relationships[/font][/border]
  583. [/border]
  584. [comment]----title end----[/comment]
  585.  
  586. [comment]----body contents----[/comment]
  587. [border=transparent; height:100%; flex-grow:1; padding:0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  588.  
  589. [comment]----relationship box (copy this whole thing to get a new relationship!)----[/comment]
  590. [border=transparent; height:175px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:10px 0;]
  591. [comment]----image----[/comment]
  592. [border=transparent; height:175px; width:170px; padding:0; background: var(--eimg-r1); background-size:cover; flex-shrink:0;
  593. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  594.  
  595. [comment]----relationship info----[/comment]
  596. [border=transparent; height:100%; flex-grow:1; margin-left:15px; padding:0; display:flex; flex-flow: column nowrap;]
  597. [comment]----relationship header----[/comment]
  598. [border=transparent; height:fit-content; width:100%; padding:8px 10px; box-sizing:border-box; background: var(--bg-1); color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:14px; line-height:120%;][font=Montserrat][comment]
  599. ----* * * relationship name/header here! ----
  600. [/comment]relationship[/font][/border]
  601.  
  602. [comment]----relationship description----[/comment]
  603. [border=transparent; height:78%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0 5px; box-sizing:border-box; color: var(--t-color); text-align:justify; line-height:130%; font-size:11px;][font=Rubik][comment]
  604. ----* * *relationship description here!----
  605. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.
  606. [/font][/border][/border][/border]
  607. [/border]
  608. [comment]----relationship info end----[/comment]
  609. [/border]
  610. [comment]----relationship box end (copy me too!)----[/comment]
  611.  
  612. [comment]----relationship box (copy this whole thing to get a new relationship!)----[/comment]
  613. [border=transparent; height:175px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:10px 0;]
  614. [comment]----image----[/comment]
  615. [border=transparent; height:175px; width:170px; padding:0; background: var(--eimg-r2); background-size:cover; flex-shrink:0;
  616. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  617.  
  618. [comment]----relationship info----[/comment]
  619. [border=transparent; height:100%; flex-grow:1; margin-left:15px; padding:0; display:flex; flex-flow: column nowrap;]
  620. [comment]----relationship header----[/comment]
  621. [border=transparent; height:fit-content; width:100%; padding:8px 10px; box-sizing:border-box; background: var(--bg-1); color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:14px; line-height:120%;][font=Montserrat][comment]
  622. ----* * * relationship name/header here! ----
  623. [/comment]relationship[/font][/border]
  624.  
  625. [comment]----relationship description----[/comment]
  626. [border=transparent; height:78%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0 5px; box-sizing:border-box; color: var(--t-color); text-align:justify; line-height:130%; font-size:11px;][font=Rubik][comment]
  627. ----* * *relationship description here!----
  628. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.
  629. [/font][/border][/border][/border]
  630. [/border]
  631. [comment]----relationship info end----[/comment]
  632. [/border]
  633. [comment]----relationship box end (copy me too!)----[/comment]
  634.  
  635. [comment]----relationship box (copy this whole thing to get a new relationship!)----[/comment]
  636. [border=transparent; height:175px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:10px 0;]
  637. [comment]----image----[/comment]
  638. [border=transparent; height:175px; width:170px; padding:0; background: var(--eimg-r3); background-size:cover; flex-shrink:0;
  639. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  640.  
  641. [comment]----relationship info----[/comment]
  642. [border=transparent; height:100%; flex-grow:1; margin-left:15px; padding:0; display:flex; flex-flow: column nowrap;]
  643. [comment]----relationship header----[/comment]
  644. [border=transparent; height:fit-content; width:100%; padding:8px 10px; box-sizing:border-box; background: var(--bg-1); color: var(--color-1); text-transform:uppercase; font-weight:bold; letter-spacing:0.5px; font-size:14px; line-height:120%;][font=Montserrat][comment]
  645. ----* * * relationship name/header here! ----
  646. [/comment]relationship[/font][/border]
  647.  
  648. [comment]----relationship description----[/comment]
  649. [border=transparent; height:78%; width:100%; padding:0; margin-top:10px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0 5px; box-sizing:border-box; color: var(--t-color); text-align:justify; line-height:130%; font-size:11px;][font=Rubik][comment]
  650. ----* * *relationship description here!----
  651. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum interdum velit a consequat. Sed posuere nisl dolor. Nullam ullamcorper mollis luctus. Mauris id mattis dui, eu eleifend augue. Donec consequat, mi in dignissim bibendum, urna est aliquam nisi, ac ultrices nisi ex vitae risus. Donec congue vel nisl eget vestibulum. Sed a feugiat nulla, vitae posuere enim. Quisque blandit neque leo, vel gravida lectus facilisis ut. Nullam pharetra sem ex, non ullamcorper nunc posuere quis. Vestibulum tellus eros, aliquam at tempor sit amet, blandit ut dolor.
  652. [/font][/border][/border][/border]
  653. [/border]
  654. [comment]----relationship info end----[/comment]
  655. [/border]
  656. [comment]----relationship box end (copy me too!)----[/comment]
  657.  
  658. [/border][/border][/border]
  659. [comment]----body contents end----[/comment]
  660.  
  661. [/border]
  662. [comment]----relationships end----[/comment]
  663.  
  664. [/border]
  665. [comment]----tab container end----[/comment]
  666.  
  667. [comment]----button select (remember to edit the icon here to match the icon of the tab!)----[/comment]
  668. [border=transparent; height:32px; width:33px; padding:0; box-sizing:border-box; font-size:20px; background-color: var(--b-color); color: var(--bg-1); border-radius:50%; display:flex; justify-content:center; align-items:center; line-height:150%; position:absolute; top:15px; left:344px;][comment]
  669. ---- * * * tab icons here ----
  670. [/comment][fa]fal fa-heart[/fa][/border]
  671. [comment]----button select end----[/comment]
  672. [/tab]
  673. [comment]----misc + relationships (tab) end----[/comment]
  674.  
  675. [/tabs][/border][/border]
  676. [comment]----tabs end----[/comment]
  677.  
  678. [comment]----content filler area (ignore!)----[/comment]
  679. [border=transparent; height:88%; width:100%; padding:0; background: var(--bg-2);][/border]
  680. [/border]
  681. [comment]----main container end----[/comment]
  682. [comment]----signature (do not remove!)----[/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:70px; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px; color: var(--color-1);][font=Open Sans]♡design by natasha., coded by uxie♡[/font][/bg]
  683. [/border]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!