API tools faq
paste
ooksie

human behaviour (uxie x low fidelity)

ooksie
Dec 10th, 2020 (edited)
291
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 53.93 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *background image;
  3. --bg: url('https://i.imgur.com/PioO6Li.png');
  4.  
  5. *main accent colour (dark);
  6. --color-1: #0f0f0f;
  7. *secondary accent colour (light);
  8. --color-2: #f1f1f1;
  9. *tertiary accent colour (mid - dark);
  10. --color-3: #252734;
  11.  
  12. *header text colour (light) -- main title;
  13. --h1: #fff;
  14. *header text colour (dark) -- tab titles, subheaders;
  15. --h2: #0f0f0f;
  16. *text colour;
  17. --t-color: #000;
  18.  
  19. *images are categorised based on what tab theyre in. images in tab 1 are labelled with a, tab 2 with b, and so on;
  20. --aimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21. --bimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  22. --bimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  23. --dimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  24. --dimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  25. --dimg-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  26. --dimg-4: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  27.  
  28. *role images (in tab 3);
  29. --r1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  30. --r2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  31. --r3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  32. --r4: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  33. --r5: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  34. --r6: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  35. --r7: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  36.  
  37. height:500px; width:880px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg); background-size:cover; background-position: 100% 100%; position:relative;]
  38.  
  39. [comment]----content container----[/comment]
  40. [border=transparent; height:calc(100% - 20px); width:calc(100% - 20px); padding:25px; box-sizing:border-box; border-bottom:3px solid var(--color-2); border-right:3px solid var(--color-2); position:relative; z-index:2; display:flex; flex-flow: row-reverse nowrap;]
  41.  
  42. [comment]----title (input your title twice! ***one line only! if you want two lines, reduce font-size!)----[/comment]
  43. [border=transparent; height:auto; min-height:17%; width:84%; pointer-events:none; padding:0 0 0 12px; box-sizing:border-box; margin-left:auto; display:flex; align-items:flex-start; justify-content:flex-end; position:relative; z-index:4;
  44. /*edit me if you can't fit your whole title!*/ font-size:66px;][border=transparent; height:fit-content; width:fit-content; padding:0; position:relative; pointer-events:auto;]
  45. [comment]---outlined text----[/comment]
  46. [border=transparent; height:fit-content; width:fit-content; padding:0; color: transparent; -webkit-text-stroke:0.5px var(--color-1); font-weight:bold; line-height:80%; text-transform:uppercase; letter-spacing:1px; position:absolute; bottom:-10px; left:-10px; z-index:2;][font=Josefin Sans][comment]
  47. ----* * * title here----
  48. [/comment]mores hominum[/font][/border]
  49.  
  50. [comment]---filled-in text----[/comment]
  51. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h1); font-weight:bold; line-height:80%; text-transform:uppercase; letter-spacing:1px; position:relative; z-index:3; -webkit-text-stroke:0.5px var(--h1);][font=Josefin Sans][comment]
  52. ----* * * title here----
  53. [/comment]mores hominum[/font][/border]
  54. [/border][/border]
  55.  
  56. [comment]----tabs cover----[/comment]
  57. [border=transparent; height:fit-content; width:fit-content; max-width:95px; padding:0; box-sizing:border-box; background: var(--color-1); position:absolute; top:21px; left:21px; z-index:2; display:flex; flex-flow: row wrap; pointer-events:none;]
  58. [comment]----button 1----[/comment]
  59. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-3); margin:3px; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:25px; line-height:100%;][comment]
  60. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  61. [/comment][fa]fal fa-home-alt[/fa][/border]
  62.  
  63. [comment]----button 2----[/comment]
  64. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-3); margin:3px; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:25px; line-height:100%;][comment]
  65. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  66. [/comment][fa]fal fa-map-marker-alt[/fa][/border]
  67.  
  68. [comment]----button 3----[/comment]
  69. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-3); margin:3px; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:25px; line-height:100%;][comment]
  70. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  71. [/comment][fa]fal fa-user[/fa][/border]
  72.  
  73. [comment]----button 4----[/comment]
  74. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-3); margin:3px; display:flex; align-items:center; justify-content:center; color: var(--color-2); font-size:25px; line-height:100%;][comment]
  75. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  76. [/comment][fa]fal fa-clipboard-list[/fa][/border]
  77.  
  78. [/border]
  79. [comment]----tabs cover----[/comment]
  80.  
  81. [comment]----tabs----[/comment]
  82. [border=transparent; height:18%; width:11%; padding:0; overflow:hidden;][border=transparent; width:160px; padding:0; margin:-43px -15px 0 -30px; line-height:40px;][tabs]
  83.  
  84. [comment]-----tab 0 (cover)----[/comment]
  85. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:25px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end; line-height:0;]
  86.  
  87. [comment]----tab contents----[/comment]
  88. [border=transparent; height:77%; width:50%; padding:10px 20px; box-sizing:border-box; position:relative; display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:auto;]
  89.  
  90. [comment]----note one----[/comment]
  91. [border=transparent; height:210px; width:200px; padding:0; background: var(--color-2); position:absolute; top:20px; left:10px; transform:rotate(-2deg);][border=transparent; height:100%; width:100%; padding:25px 15px 15px 15px; box-sizing:border-box; position:relative;]
  92.  
  93. [comment]----text----[/comment]
  94. [border=transparent; height:100%; 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; color: var(--t-color); font-size:12px; text-align:center; line-height:140%;][font=Montserrat][comment]
  95. ----* * * short description about roleplay! this scrolls----
  96. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  97. [/font][/border][/border][/border]
  98. [comment]----text end----[/comment]
  99.  
  100. [comment]----tape----[/comment]
  101. [border=transparent; height:28px; width:70px; padding:0; background: var(--color-3); position:absolute; top:-15px; left:60px; transform:rotate(2deg); opacity:0.7][/border]
  102.  
  103. [/border][/border]
  104. [comment]----note one end----[/comment]
  105.  
  106. [comment]----note two----[/comment]
  107. [border=transparent; height:185px; width:185px; background: var(--color-2); transform:rotate(5deg); padding:25px 15px 15px 15px; box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center;]
  108.  
  109. [comment]----text----[/comment]
  110. [border=transparent; height:fit-content; max-height:100%; width:fit-content; padding:0; overflow:hidden; color: var(--t-color); font-size:14px; text-align:center; line-height:130%; text-transform:uppercase;][font=Montserrat][comment]
  111. ----* * * some extra details about the roleplay! this doesn't scroll----
  112. [/comment][i]a criminal minds[/i] inspired b.a.u. roleplay
  113.  
  114. gm'ed by
  115. [b]low fidelity[/b]
  116. &
  117. [b]takuwan[/b]
  118. [/font][/border]
  119. [comment]----text end----[/comment]
  120.  
  121. [comment]----tape----[/comment]
  122. [border=transparent; height:25px; width:70px; padding:0; background: var(--color-3); position:absolute; top:-15px; left:60px; transform:rotate(-10deg); opacity:0.7][/border]
  123.  
  124. [/border]
  125. [comment]----note two end----[/comment]
  126.  
  127. [/border]
  128. [comment]----tab contents end----[/comment]
  129.  
  130. [/border][/tab]
  131. [comment]-----tab 0 end----[/comment]
  132.  
  133. [comment]-----tab 1 (introduction)----[/comment]
  134. [tab=.][border=transparent; height:100%; width:100%; padding:25px 35px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end; line-height:0;]
  135.  
  136. [comment]----button select (if you edited the button icons, change them here too to match the top!)----[/comment]
  137. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-2); position:absolute; top:24px; left:24px; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:25px; line-height:100%;][comment]
  138. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  139. [/comment][fa]fal fa-home-alt[/fa][/border]
  140.  
  141. [comment]----tab contents container-----[/comment]
  142. [border=transparent; height:77%; width:77%; padding:0; display:flex; flex-flow: row nowrap; pointer-events:auto;]
  143.  
  144. [comment]----tab contents----[/comment]
  145. [border=transparent; height:100%; flex-grow:1; padding:10px 15px; box-sizing:border-box; background: var(--color-2); display:flex; flex-flow:column nowrap;]
  146. [comment]----tab title----[/comment]
  147. [border=transparent; min-height:15%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px; box-sizing:border-box; position:relative;]
  148. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-2px; z-index:1; transform:rotate(2deg); opacity:0.8;][/border]
  149.  
  150. [comment]----title----[/comment]
  151. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:28px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  152. ----* * * tab title here
  153. [/comment]introduction.[/font][/border]
  154. [/border][/border]
  155. [comment]----tab title end----[/comment]
  156.  
  157. [comment]----introduction contents----[/comment]
  158. [border=transparent; height:auto; max-height:84%; width:100%; padding:10px 0 5px 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); font-size:12px; line-height:130%; text-align:justify;][font=Montserrat][comment]
  159. ----* * * text starts here----
  160. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  161.  
  162. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  163. [/font][/border][/border][/border]
  164. [comment]----introduction contents end----[/comment]
  165. [/border]
  166. [comment]----tab contents end----[/comment]
  167.  
  168. [comment]----image----[/comment]
  169. [border=transparent; height:100%; width:26%; flex-shrink:0; padding:0; margin-left:15px; background: var(--aimg-1); background-size:cover;
  170. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  171.  
  172. [/border]
  173. [comment]----tab contents container end----[/comment]
  174.  
  175. [/border][/tab]
  176. [comment]-----tab 1 end----[/comment]
  177.  
  178.  
  179. [comment]-----tab 2 (setting)----[/comment]
  180. [tab=.][border=transparent; height:100%; width:100%; padding:25px 35px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end; line-height:0;]
  181.  
  182. [comment]----button select (if you edited the button icons, change them here too to match the top!)----[/comment]
  183. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-2); position:absolute; top:24px; left:70px; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:25px; line-height:100%;][comment]
  184. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  185. [/comment][fa]fal fa-map-marker-alt[/fa][/border]
  186.  
  187. [comment]----tab contents container----[/comment]
  188. [border=transparent; height:77%; width:77%; padding:0; display:flex; flex-flow: column nowrap; pointer-events:auto;]
  189. [comment]----tab contents----[/comment]
  190. [border=transparent; height:calc(71% - 15px); width:100%; padding:5px 15px; box-sizing:border-box; background: var(--color-2); display:flex; flex-flow: column nowrap;]
  191. [comment]----tab title----[/comment]
  192. [border=transparent; min-height:14%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px; box-sizing:border-box; position:relative;]
  193. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(-2deg); opacity:0.8;][/border]
  194.  
  195. [comment]----title----[/comment]
  196. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:28px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  197. ----* * * tab title here
  198. [/comment]the setting.[/font][/border]
  199. [/border][/border]
  200. [comment]----tab title end----[/comment]
  201.  
  202. [comment]----setting contents----[/comment]
  203. [border=transparent; height:auto; max-height:84%; width:100%; padding:15px 0 10px 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); font-size:12px; line-height:130%; text-align:justify;][font=Montserrat][comment]
  204. ----* * * text starts here----
  205. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  206.  
  207. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  208. [/font][/border][/border][/border]
  209. [comment]----setting contents end----[/comment]
  210. [/border]
  211. [comment]----tab contents end----[/comment]
  212.  
  213. [comment]----images----[/comment]
  214. [border=transparent; height:29%; width:100%; padding:0; margin-top:15px; display:flex; flex-flow: row nowrap;]
  215. [border=transparent; height:100%; flex:1; padding:0; background: var(--bimg-1); background-size:cover; margin-right:15px;
  216. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  217. [border=transparent; height:100%; flex:1; padding:0; background: var(--bimg-2); background-size:cover;
  218. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  219. [/border]
  220. [/border]
  221. [comment]----tab contents container end----[/comment]
  222.  
  223. [/border][/tab]
  224. [comment]-----tab 2 end----[/comment]
  225.  
  226.  
  227. [comment]-----tab 3 (roles)----[/comment]
  228. [tab=.][border=transparent; height:100%; width:100%; padding:25px 35px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end; line-height:0;]
  229.  
  230. [comment]----button select (if you edited the button icons, change them here too to match the top!)----[/comment]
  231. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-2); position:absolute; top:70px; left:24px; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:25px; line-height:100%;][comment]
  232. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  233. [/comment][fa]fal fa-user[/fa][/border]
  234.  
  235. [comment]----tab contents----[/comment]
  236. [border=transparent; height:77%; width:77%; padding:10px 0; box-sizing:border-box; background:var(--color-2); overflow:hidden; display:flex; flex-direction:column; pointer-events:auto;][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;]
  237.  
  238. [comment]----copy this whole thing to make another role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  239. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; margin:10px 0;]
  240. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  241. [border=transparent; height:95%; width:28%; padding:0; background: var(--r1); background-size:cover; position:relative; flex-shrink:0;
  242. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  243. [comment]----tape----[/comment]
  244. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(-7deg); opacity:0.6][/border]
  245. [/border]
  246.  
  247. [comment]----role info----[/comment]
  248. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap;]
  249. [comment]----role name----[/comment]
  250. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  251. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(2deg); opacity:0.7;][/border]
  252.  
  253. [comment]----title----[/comment]
  254. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  255. ----* * * tab title here
  256. [/comment]role one.[/font][/border]
  257. [/border][/border]
  258. [comment]----role name end----[/comment]
  259.  
  260. [comment]----role description----[/comment]
  261. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  262. ----* * * text starts here----
  263. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  264.  
  265. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  266. [/font][/border][/border][/border]
  267. [comment]----role description end----[/comment]
  268. [/border]
  269. [/border]
  270. [comment]----copy me too!----[/comment]
  271.  
  272. [comment]----copy this whole thing to make another role! (role box 2 -- alternate role box 1 and 2)----[/comment]
  273. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:flex-end; margin:10px 0;]
  274. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  275. [border=transparent; height:95%; width:28%; padding:0; background: var(--r2); background-size:cover; position:relative; flex-shrink:0;
  276. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  277. [comment]----tape----[/comment]
  278. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(7deg); opacity:0.6][/border]
  279. [/border]
  280.  
  281. [comment]----role info----[/comment]
  282. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:15px; display:flex; flex-flow:column nowrap;]
  283. [comment]----role name----[/comment]
  284. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start; justify-content:flex-end;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  285. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(-2deg); opacity:0.7;][/border]
  286.  
  287. [comment]----title----[/comment]
  288. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  289. ----* * * tab title here
  290. [/comment]role two.[/font][/border]
  291. [/border][/border]
  292. [comment]----role name end----[/comment]
  293.  
  294. [comment]----role description----[/comment]
  295. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  296. ----* * * text starts here----
  297. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  298.  
  299. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  300. [/font][/border][/border][/border]
  301. [comment]----role description end----[/comment]
  302. [/border]
  303. [/border]
  304. [comment]----copy me too!----[/comment]
  305.  
  306. [comment]----copy this whole thing to make another role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  307. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; margin:10px 0;]
  308. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  309. [border=transparent; height:95%; width:28%; padding:0; background: var(--r3); background-size:cover; position:relative; flex-shrink:0;
  310. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  311. [comment]----tape----[/comment]
  312. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(-7deg); opacity:0.6][/border]
  313. [/border]
  314.  
  315. [comment]----role info----[/comment]
  316. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap;]
  317. [comment]----role name----[/comment]
  318. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  319. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(2deg); opacity:0.7;][/border]
  320.  
  321. [comment]----title----[/comment]
  322. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  323. ----* * * tab title here
  324. [/comment]role three.[/font][/border]
  325. [/border][/border]
  326. [comment]----role name end----[/comment]
  327.  
  328. [comment]----role description----[/comment]
  329. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  330. ----* * * text starts here----
  331. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  332.  
  333. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  334. [/font][/border][/border][/border]
  335. [comment]----role description end----[/comment]
  336. [/border]
  337. [/border]
  338. [comment]----copy me too!----[/comment]
  339.  
  340. [comment]----copy this whole thing to make another role! (role box 2 -- alternate role box 1 and 2)----[/comment]
  341. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:flex-end; margin:10px 0;]
  342. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  343. [border=transparent; height:95%; width:28%; padding:0; background: var(--r4); background-size:cover; position:relative; flex-shrink:0;
  344. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  345. [comment]----tape----[/comment]
  346. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(7deg); opacity:0.6][/border]
  347. [/border]
  348.  
  349. [comment]----role info----[/comment]
  350. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:15px; display:flex; flex-flow:column nowrap;]
  351. [comment]----role name----[/comment]
  352. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start; justify-content:flex-end;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  353. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(-2deg); opacity:0.7;][/border]
  354.  
  355. [comment]----title----[/comment]
  356. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  357. ----* * * tab title here
  358. [/comment]role four.[/font][/border]
  359. [/border][/border]
  360. [comment]----role name end----[/comment]
  361.  
  362. [comment]----role description----[/comment]
  363. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  364. ----* * * text starts here----
  365. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  366.  
  367. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  368. [/font][/border][/border][/border]
  369. [comment]----role description end----[/comment]
  370. [/border]
  371. [/border]
  372. [comment]----copy me too!----[/comment]
  373.  
  374. [comment]----copy this whole thing to make another role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  375. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; margin:10px 0;]
  376. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  377. [border=transparent; height:95%; width:28%; padding:0; background: var(--r5); background-size:cover; position:relative; flex-shrink:0;
  378. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  379. [comment]----tape----[/comment]
  380. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(-7deg); opacity:0.6][/border]
  381. [/border]
  382.  
  383. [comment]----role info----[/comment]
  384. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap;]
  385. [comment]----role name----[/comment]
  386. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  387. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(2deg); opacity:0.7;][/border]
  388.  
  389. [comment]----title----[/comment]
  390. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  391. ----* * * tab title here
  392. [/comment]role five.[/font][/border]
  393. [/border][/border]
  394. [comment]----role name end----[/comment]
  395.  
  396. [comment]----role description----[/comment]
  397. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  398. ----* * * text starts here----
  399. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  400.  
  401. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  402. [/font][/border][/border][/border]
  403. [comment]----role description end----[/comment]
  404. [/border]
  405. [/border]
  406. [comment]----copy me too!----[/comment]
  407.  
  408. [comment]----copy this whole thing to make another role! (role box 2 -- alternate role box 1 and 2)----[/comment]
  409. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:flex-end; margin:10px 0;]
  410. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  411. [border=transparent; height:95%; width:28%; padding:0; background: var(--r6); background-size:cover; position:relative; flex-shrink:0;
  412. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  413. [comment]----tape----[/comment]
  414. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(7deg); opacity:0.6][/border]
  415. [/border]
  416.  
  417. [comment]----role info----[/comment]
  418. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:15px; display:flex; flex-flow:column nowrap;]
  419. [comment]----role name----[/comment]
  420. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start; justify-content:flex-end;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  421. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(-2deg); opacity:0.7;][/border]
  422.  
  423. [comment]----title----[/comment]
  424. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  425. ----* * * tab title here
  426. [/comment]role six.[/font][/border]
  427. [/border][/border]
  428. [comment]----role name end----[/comment]
  429.  
  430. [comment]----role description----[/comment]
  431. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  432. ----* * * text starts here----
  433. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  434.  
  435. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  436. [/font][/border][/border][/border]
  437. [comment]----role description end----[/comment]
  438. [/border]
  439. [/border]
  440. [comment]----copy me too!----[/comment]
  441.  
  442. [comment]----copy this whole thing to make another role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  443. [border=transparent; height:180px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end; margin:10px 0;]
  444. [comment]----role image (change the number in --rX to match the one in the variables)----[/comment]
  445. [border=transparent; height:95%; width:28%; padding:0; background: var(--r7); background-size:cover; position:relative; flex-shrink:0;
  446. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  447. [comment]----tape----[/comment]
  448. [border=transparent; height:23px; width:60px; padding:0; background: var(--color-3); position:absolute; top:-10px; left:50px; transform:rotate(-7deg); opacity:0.6][/border]
  449. [/border]
  450.  
  451. [comment]----role info----[/comment]
  452. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap;]
  453. [comment]----role name----[/comment]
  454. [border=transparent; min-height:18%; width:100%; padding:0; display:flex; align-items:flex-start;][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  455. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(2deg); opacity:0.7;][/border]
  456.  
  457. [comment]----title----[/comment]
  458. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  459. ----* * * tab title here
  460. [/comment]role seven.[/font][/border]
  461. [/border][/border]
  462. [comment]----role name end----[/comment]
  463.  
  464. [comment]----role description----[/comment]
  465. [border=transparent; height:auto; max-height:82%; width:100%; padding:15px 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); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  466. ----* * * text starts here----
  467. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  468.  
  469. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  470. [/font][/border][/border][/border]
  471. [comment]----role description end----[/comment]
  472. [/border]
  473. [/border]
  474. [comment]----copy me too!----[/comment]
  475.  
  476. [/border][/border][/border]
  477. [comment]----tab contents container end----[/comment]
  478.  
  479. [/border][/tab]
  480. [comment]-----tab 3 end----[/comment]
  481.  
  482.  
  483. [comment]-----tab 4 (rules)----[/comment]
  484. [tab=.][border=transparent; height:100%; width:100%; padding:25px 35px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; pointer-events:none; display:flex; align-items:flex-end; justify-content:flex-end; line-height:0;]
  485.  
  486. [comment]----button select (if you edited the button icons, change them here too to match the top!)----[/comment]
  487. [border=transparent; height:40px; width:40px; padding:0; background: var(--color-2); position:absolute; top:70px; left:70px; display:flex; align-items:center; justify-content:center; color: var(--color-3); font-size:25px; line-height:100%;][comment]
  488. ----* * * button icon here (edit the icon name in fa-(icon) and put in your own!)----
  489. [/comment][fa]fal fa-clipboard-list[/fa][/border]
  490.  
  491. [comment]----tab contents container----[/comment]
  492. [border=transparent; height:77%; width:77%; padding:0; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][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;]
  493.  
  494. [comment]----copy this whole thing to make another rule! (rule box 1 -- alternate rule box 1 and 2)----[/comment]
  495. [border=transparent; height:185px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-start;]
  496.  
  497. [comment]----images----[/comment]
  498. [border=transparent; height:96%; width:30%; padding:0; display:flex; flex-flow:column nowrap; flex-shrink:0;]
  499. [border=transparent; height:100%; width:100%; padding:0; background: var(--dimg-1); background-size:cover;
  500. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  501. [/border]
  502.  
  503. [comment]----rules contents----[/comment]
  504. [border=transparent; height:185px; flex-grow:1; padding:10px 15px; box-sizing:border-box; margin-left:15px; display:flex; flex-flow:column nowrap; background: var(--color-2);]
  505. [comment]----rule title----[/comment]
  506. [border=transparent; height:18%; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:flex-start; background: var(--color-2);][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  507. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(2deg); opacity:0.7;][/border]
  508.  
  509. [comment]----title----[/comment]
  510. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  511. ----* * * tab title here
  512. [/comment]rule one.[/font][/border]
  513. [/border][/border]
  514. [comment]----rule title end----[/comment]
  515.  
  516. [comment]----rule description----[/comment]
  517. [border=transparent; max-height:80%; width:100%; padding:15px 0 0 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:1005; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  518. ----* * * text starts here----
  519. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  520.  
  521. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  522. [/font][/border][/border][/border]
  523. [comment]----rule description end----[/comment]
  524. [/border]
  525. [comment]----rules contents end----[/comment]
  526. [/border]
  527. [comment]----copy me too!----[/comment]
  528.  
  529. [comment]----copy this whole thing to make another rule! (rule box 2 -- alternate rule box 1 and 2)----[/comment]
  530. [border=transparent; height:185px; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:flex-end;]
  531.  
  532. [comment]----images----[/comment]
  533. [border=transparent; height:96%; width:30%; padding:0; display:flex; flex-flow:column nowrap; flex-shrink:0;]
  534. [border=transparent; height:100%; width:100%; padding:0; background: var(--dimg-2); background-size:cover;
  535. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  536. [/border]
  537.  
  538. [comment]----rules contents----[/comment]
  539. [border=transparent; height:185px; flex-grow:1; padding:10px 15px; box-sizing:border-box; margin-left:15px; display:flex; flex-flow:column nowrap; background: var(--color-2);]
  540. [comment]----rule title----[/comment]
  541. [border=transparent; height:18%; width:100%; padding:0; box-sizing:border-box; display:flex; align-items:flex-start; background: var(--color-2);][border=transparent; height:fit-content; width:fit-content; max-width:100%; padding:3px 15px; box-sizing:border-box; position:relative;]
  542. [border=transparent; height:78%; width:100%; padding:0; background: var(--color-3); position:absolute; left:0; bottom:-1px; z-index:1; transform:rotate(-2deg); opacity:0.7;][/border]
  543.  
  544. [comment]----title----[/comment]
  545. [border=transparent; height:fit-content; width:fit-content; padding:0; font-weight:bold; color: var(--h2); font-size:25px; text-transform:uppercase; letter-spacing:2px; line-height:100%; position:relative; z-index:2; -webkit-text-stroke:2px var(--h2);][font=Josefin Sans][comment]
  546. ----* * * tab title here
  547. [/comment]rule two.[/font][/border]
  548. [/border][/border]
  549. [comment]----rule title end----[/comment]
  550.  
  551. [comment]----rule description----[/comment]
  552. [border=transparent; max-height:80%; width:100%; padding:15px 0 0 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:1005; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:12px; text-align:justify; line-height:140%;][font=Montserrat][comment]
  553. ----* * * text starts here----
  554. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus felis et tortor molestie dignissim ac eu erat. Vivamus nec consequat mauris. Ut posuere ligula at velit vulputate auctor. Proin tincidunt at mauris et congue. Morbi eu augue faucibus, malesuada neque eu, elementum sapien. Sed iaculis nisl vitae tellus feugiat, ut bibendum dui vestibulum. Nam fermentum, magna ac faucibus egestas, felis mi bibendum tortor, quis congue dui enim et urna. Proin non tellus sit amet ligula tempor blandit.
  555.  
  556. Aenean maximus ex eget odio consequat ultrices. In eget pharetra risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum sem lectus, tristique imperdiet risus imperdiet a. Vivamus enim sapien, dictum eu facilisis eu, condimentum quis libero. Maecenas in eros urna. Vivamus sollicitudin convallis porttitor. Mauris nulla mauris, efficitur vel pulvinar vitae, tincidunt sed sem. Nulla aliquet, leo sed rutrum fermentum, felis augue ultrices ex, nec dapibus diam urna sit amet ipsum.
  557. [/font][/border][/border][/border]
  558. [comment]----rule description end----[/comment]
  559. [/border]
  560. [comment]----rules contents end----[/comment]
  561. [/border]
  562. [comment]----copy me too!----[/comment]
  563.  
  564.  
  565. [/border][/border][/border]
  566. [comment]----tab contents container end----[/comment]
  567.  
  568. [/border][/tab]
  569. [comment]-----tab 4 end----[/comment]
  570.  
  571. [/tabs]][/border][/border]
  572. [comment]----tabs end----[/comment]
  573.  
  574. [/border]
  575. [comment]----content container end----[/comment]
  576.  
  577. [comment]----geometric accents----[/comment]
  578. [border=transparent; height:0; width:0; padding:0; border-top:250px solid var(--color-1); border-right:220px solid transparent; position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border]
  579. [border=transparent; height:0; width:0; padding:0; border-bottom:720px solid var(--color-1); border-left:550px solid transparent; position:absolute; bottom:0; right:0; z-index:1; pointer-events:none;][/border]
  580. [/border][comment]----signature! (do not remove!)-----
  581. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by low fidelity, 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!