API tools faq
paste
Advertisement
ooksie

stardust smoothie v1 (nine lives)

ooksie
Dec 2nd, 2020 (edited)
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.31 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Abril Fatface]main title & tab titles[/font]
  5. [font=Poppins]subtitle/subheaders[/font]
  6. [font=Montserrat]body text[/font]
  7.  
  8. to replace fonts, replace them here, then search up 'font-family' and replace them there too between the ''!
  9. [/comment][border=transparent;
  10. *border around code;
  11. --border: #EAEDEF;
  12. *first background colour of tabs;
  13. --bg-1:#fff;
  14. *second background colour of tabs;
  15. --bg-2: #1C213E;
  16.  
  17. *first accent colour (darker);
  18. --color-1: #1C213E;
  19. *second accent colour (lighter);
  20. --color-2: #323751;
  21. *third accent colour (darkest);
  22. --color-3: #261D26;
  23. *fourth accent colour (lightest);
  24. --color-4: #fff;
  25.  
  26. *text colour on darker tabs;
  27. --t-color-1: #fff;
  28. *text colour on lighter tabs;
  29. --t-color-2: #000;
  30.  
  31. *button images (images w transparent backgrounds only);
  32. --b1: url('https://i.imgur.com/99zOd0M.png');
  33. --b2: url('https://i.imgur.com/5xwmi6n.png');
  34.  
  35. *tab images are categorised based on which tab theyre in. images in tab 1 are labelled a, tab 2 with b, and so on;
  36. --aimg-1: url('https://i.pinimg.com/originals/49/39/93/4939938e74b35c35aa6dac2287681d95.jpg');
  37. --bimg-1: url('https://i.pinimg.com/originals/aa/25/25/aa2525c031eba1e98386c10256d0a826.png');
  38.  
  39. *role images. each role is identified by rX, each image in that role is defined by the number after it, i.e. rX-Y. to make a new role image, just copy the variables and edit the numbers in X and Y. ensure there are 2 images for each role, and that all images are 1:1 in aspect ratio;
  40. --r1-1: url('https://i.pinimg.com/564x/24/e4/72/24e4729ac8a97b530ba580dfa161c5a3.jpg');
  41. --r1-2: url('https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg');
  42. --r2-1: url('https://i.pinimg.com/564x/24/e4/72/24e4729ac8a97b530ba580dfa161c5a3.jpg');
  43. --r2-2: url('https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg');
  44. --r3-1: url('https://i.pinimg.com/564x/24/e4/72/24e4729ac8a97b530ba580dfa161c5a3.jpg');
  45. --r3-2: url('https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg');
  46. --r4-1: url('https://i.pinimg.com/564x/24/e4/72/24e4729ac8a97b530ba580dfa161c5a3.jpg');
  47. --r4-2: url('https://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg');
  48.  
  49. height:460px; width:690px; padding:0; border:1px solid var(--border); margin:auto; line-height:0; position:relative; display:flex; align-items:flex-end; justify-content:flex-end;]
  50.  
  51. [comment]----tabs----[/comment]
  52. [border=transparent; height:42%; width:8%; padding:0; overflow:hidden;][border=transparent; padding:0; margin:-10px 0 0 -25px; line-height:55px;][tabs]
  53.  
  54. [comment]----tab one (cover)----[/comment]
  55. [tab=.][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1); pointer-events:none; position:absolute; top:0; left:0; line-height:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center;]
  56.  
  57. [comment]----text effect thing (ignore!)----[/comment]
  58. [border=transparent; height:100%; width:92%; padding:0; background: white; position:absolute; top:0; left:0; z-index:1;][/border]
  59. [border=transparent; height:100%; width:39%; padding:0; background: black; position:absolute; top:0; left:0; z-index:2;][/border]
  60. [border=transparent; height:100%; width:53%; padding:0; background: var(--color-1); position:absolute; top:0; right:8%; z-index:4; mix-blend-mode:screen;][/border]
  61.  
  62. [comment]----tab image----[/comment]
  63. [border=transparent; height:100%; width:39%; padding:0; background: var(--aimg-1); background-size:cover; position:absolute; top:0; left:0; z-index:5; mix-blend-mode:screen;
  64. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  65.  
  66. [comment]----tab contents----[/comment]
  67. [border=transparent; height:100%; width:100%; padding:0 10% 7% 10%; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; mix-blend-mode: difference; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; max-width:95%; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; color: var(--bg-1); pointer-events:auto;]
  68.  
  69. [comment]----title----[/comment]
  70. [border=transparent; height:fit-content; width:fit-content; padding:5px 0; box-sizing:border-box; font-family:'Abril Fatface', display; font-size:62px; letter-spacing:1px;text-align:center; line-height:100%;][comment]
  71. ----* * * title here!----
  72. [/comment]your title here.[/border]
  73.  
  74. [comment]----subtitle----[/comment]
  75. [border=transparent; height:fit-content; width:auto; min-width:100%; padding:0 10px 0 20px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center;][border=transparent; height:1px; flex-grow:1; margin:0 15px; background: var(--bg-1); padding:0;][/border][border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; font-size:13px; font-family:'Poppins', sans-serif; line-height:100%; font-weight:normal; outline:1px solid transparent; letter-spacing:0.5px;][comment]
  76. ----* * *subtitle here----
  77. [/comment]and a cool quote here about how cool this is[/border][/border]
  78.  
  79. [/border][/border]
  80. [comment]----tab contents end----[/comment]
  81.  
  82. [comment]----tab cover----[/comment]
  83. [border=transparent; height:45%; width:8%; padding:0; position:absolute; bottom:0; right:0; display:flex; flex-flow:column nowrap; font-size:0;]
  84. [comment]----selected button----[/comment]
  85. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;
  86. /*select*/ animation: fa-spin 5s linear infinite;]selected![/border]
  87. [comment]----button----[/comment]
  88. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;][/border]
  89. [comment]----button----[/comment]
  90. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;][/border]
  91. [/border]
  92. [comment]----tab cover end----[/comment]
  93.  
  94. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  95. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-2); font-size:10px; position:absolute; z-index:7; top:5px; right:10px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; opacity:1;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  96.  
  97. [/border][/tab]
  98. [comment]----tab one end----[/comment]
  99.  
  100.  
  101. [comment]----tab two (plot)----[/comment]
  102. [tab=.][border=transparent; height:100%; width:100%; padding:45px; box-sizing:border-box; background: var(--bg-2); pointer-events:none; position:absolute; top:0; left:0; line-height:0;]
  103.  
  104. [comment]----tab title----[/comment]
  105. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:38px; left:38px; color: var(--bg-1); font-size:66px; font-family:'Abril Fatface', display; line-height:100%; pointer-events:auto;][comment]
  106. ----* * * tab title here----
  107. [/comment]the plot.[/border]
  108.  
  109. [comment]----tab contents----[/comment]
  110. [border=transparent; height:100%; width:100%; padding:30px 20px 65px 20px; box-sizing:border-box; background: var(--color-2); display:flex; flex-flow: row nowrap; align-items:center;]
  111. [comment]----image----[/comment]
  112. [border=transparent; height:138px; width:138px; padding:0; margin:0 45px 0 25px; flex-shrink:0; position:relative;]
  113. [border=transparent; height:100%; width:100%; padding:0; background: var(--bimg-1); background-size:cover; position:relative; z-index:2;
  114. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  115. [border=transparent; height:98%; width:98%; padding:0; position:absolute; top:1%; left:1%; z-index:1; background: var(--color-3); transform:rotate(45deg);][/border]
  116. [/border]
  117.  
  118. [comment]----tab text----[/comment]
  119. [border=transparent; height:100%; flex-grow:1; padding:0; 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; color: var(--t-color-1); font-size:12px; line-height:130%; text-align:justify; font-family:'Montserrat', sans-serif;][comment]
  120. ----* * *text starts here!----
  121. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt scelerisque massa tincidunt pharetra. Cras non velit nec turpis scelerisque gravida vel eget nulla. Nullam aliquam suscipit ex, ut venenatis erat porttitor tempus. Pellentesque vel pretium tortor. Integer efficitur molestie nibh ac laoreet. Morbi ut ultrices ex. Aenean et feugiat arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dapibus euismod tortor, non molestie mauris eleifend ut. Curabitur iaculis, odio eget hendrerit venenatis, justo erat eleifend neque, sit amet congue arcu urna non quam. Mauris tincidunt velit et orci luctus sollicitudin. In malesuada sapien dolor, vel eleifend mi elementum in. In eu ornare purus. Donec hendrerit, urna sed faucibus rutrum, ante mi convallis tellus, et varius enim dui vitae leo.
  122.  
  123. Sed facilisis ullamcorper eleifend. Phasellus rhoncus tincidunt neque in interdum. Mauris ultrices dignissim augue. Sed sit amet venenatis ipsum, dignissim porta magna. Phasellus ligula risus, auctor ut vestibulum in, convallis eget est. Integer vel fermentum elit. Donec consectetur viverra purus. Nunc lobortis mi ac nunc dignissim posuere. Praesent ultricies, nulla vel consectetur ultricies, erat augue molestie dolor, a commodo lacus arcu a urna. Praesent iaculis, sem non feugiat lobortis, ante velit accumsan arcu, a auctor sapien mauris in justo. Nulla sagittis aliquet ligula, a porttitor ex lobortis accumsan. Morbi malesuada in felis quis sagittis. Donec tincidunt, nibh nec commodo tincidunt, ante libero lacinia leo, eu sodales nulla diam quis nisl. Aenean tempor nulla venenatis leo feugiat, at dapibus massa aliquet. Duis eu tempus felis, a laoreet ligula. Proin laoreet convallis eros.
  124. [/border][/border][/border]
  125. [comment]----tab text end----[/comment]
  126. [/border]
  127. [comment]----tab contents end----[/comment]
  128.  
  129. [comment]----tab cover----[/comment]
  130. [border=transparent; height:45%; width:8%; padding:0; position:absolute; bottom:0; right:0; display:flex; flex-flow:column nowrap; font-size:0;]
  131. [comment]----button----[/comment]
  132. [border=transparent; height:40px; width:40px; padding:0; background: var(--b2); background-size:cover; margin:10px 0;][/border]
  133. [comment]----selected button----[/comment]
  134. [border=transparent; height:40px; width:40px; padding:0; background: var(--b2); background-size:cover; margin:10px 0;
  135. /*select*/ animation: fa-spin 5s linear infinite;]selected![/border]
  136. [comment]----button----[/comment]
  137. [border=transparent; height:40px; width:40px; padding:0; background: var(--b2); background-size:cover; margin:10px 0;][/border]
  138. [/border]
  139. [comment]----tab cover end----[/comment]
  140.  
  141. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  142. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-1); font-size:10px; position:absolute; z-index:7; top:5px; right:10px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; opacity:1;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  143.  
  144. [/border][/tab]
  145. [comment]----tab two end----[/comment]
  146.  
  147.  
  148. [comment]----tab three (roles)----[/comment]
  149. [tab=.][border=transparent; height:100%; width:100%; padding:20px 65px 35px 35px; box-sizing:border-box; background: var(--bg-1); pointer-events:none; position:absolute; top:0; left:0; line-height:0; display:flex; flex-flow:column nowrap;]
  150.  
  151. [comment]----tab title----[/comment]
  152. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-2); font-size:66px; font-family:'Abril Fatface', display; line-height:100%; flex-shrink:0; margin-bottom:auto; pointer-events:auto;][comment]
  153. ----* * * tab title here----
  154. [/comment]the cast.[/border]
  155.  
  156. [comment]----tab contents----[/comment]
  157. [border=transparent; height:81%; width:100%; padding:0; 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; display:flex; flex-flow: row wrap;]
  158.  
  159.  
  160. [comment]----copy this whole thing to add one more role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  161. [border=transparent; height:305px; width:calc(50% - 20px); padding:0; margin:10px; display:flex; flex-flow: column nowrap; align-items:flex-end;]
  162. [comment]----role name----[/comment]
  163. [border=transparent; min-height:6%; width:80%; padding:0; box-sizing:border-box; text-align:center; color: var(--color-1); font-size:30px; text-transform:uppercase; font-weight:bold; color: var(--color-1); font-family:'Poppins', sans-serif; line-height:100%; letter-spacing:1px; position:relative; z-index:3; margin-bottom:-10px; flex-shrink:0;][comment]
  164. ----* * * role name here----
  165. [/comment]role name[/border]
  166.  
  167. [comment]----role contents----[/comment]
  168. [border=transparent; max-height:calc(94% + 10px); min-height:calc(64% + 10px); width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  169. [comment]----role icon----[/comment]
  170. [border=transparent; height:64px; width:64px; padding:0; overflow:hidden; position:relative; z-index:2; transform:rotate(45deg); margin:0 -32px 0 15px; flex-shrink:0;][border=transparent; height:140%; width:140%; padding:0; position:absolute; top:-20%; left:-20%; transform:rotate(-45deg);
  171. /*edit the role icon here to match the variable*/ background: var(--r1-1);
  172.  
  173. background-size:100%; image-rendering:smooth;
  174.  
  175. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  176.  
  177. [comment]----role text----[/comment]
  178. [border=transparent; height:100%; flex-grow:1; padding:15px 0; box-sizing:border-box;
  179. /*edit the role icon here to match the variable*/ background: var(--r1-2);
  180.  
  181. overflow:hidden; display:flex; flex-direction:column; pointer-events:auto; background-size:cover; position:relative; z-index:1;
  182.  
  183. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0; box-sizing:border-box;][/border]
  184.  
  185. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; position:relative;][border=transparent; height:auto; width:90%; padding:10px 10px 10px 20px; box-sizing:border-box; position:relative; margin-left:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-4); opacity:0.8; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family:'Montserrat', sans-serif; font-size:11px; text-align:justify; line-height:130%; position:relative; z-index:2;][comment]
  186. ----* * * text starts here!----
  187. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt scelerisque massa tincidunt pharetra. Cras non velit nec turpis scelerisque gravida vel eget nulla. Nullam aliquam suscipit ex, ut venenatis erat porttitor tempus. Pellentesque vel pretium tortor. Integer efficitur molestie nibh ac laoreet. Morbi ut ultrices ex. Aenean et feugiat arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dapibus euismod tortor, non molestie mauris eleifend ut. Curabitur iaculis, odio eget hendrerit venenatis, justo erat eleifend neque, sit amet congue arcu urna non quam. Mauris tincidunt velit et orci luctus sollicitudin. In malesuada sapien dolor, vel eleifend mi elementum in. In eu ornare purus. Donec hendrerit, urna sed faucibus rutrum, ante mi convallis tellus, et varius enim dui vitae leo.
  188.  
  189. Sed facilisis ullamcorper eleifend. Phasellus rhoncus tincidunt neque in interdum. Mauris ultrices dignissim augue. Sed sit amet venenatis ipsum, dignissim porta magna. Phasellus ligula risus, auctor ut vestibulum in, convallis eget est. Integer vel fermentum elit. Donec consectetur viverra purus. Nunc lobortis mi ac nunc dignissim posuere. Praesent ultricies, nulla vel consectetur ultricies, erat augue molestie dolor, a commodo lacus arcu a urna. Praesent iaculis, sem non feugiat lobortis, ante velit accumsan arcu, a auctor sapien mauris in justo. Nulla sagittis aliquet ligula, a porttitor ex lobortis accumsan. Morbi malesuada in felis quis sagittis. Donec tincidunt, nibh nec commodo tincidunt, ante libero lacinia leo, eu sodales nulla diam quis nisl. Aenean tempor nulla venenatis leo feugiat, at dapibus massa aliquet. Duis eu tempus felis, a laoreet ligula. Proin laoreet convallis eros.
  190. [/border][/border]
  191.  
  192. [/border][/border][/border]
  193. [comment]----role text end----[/comment]
  194. [/border]
  195. [comment]----role contents end----[/comment]
  196. [/border]
  197. [comment]----copy me too!----[/comment]
  198.  
  199. [comment]----copy this whole thing to add one more role! (role box 2 -- alternate role box 1 and 2)----[/comment]
  200. [border=transparent; height:305px; width:calc(50% - 20px); padding:0; margin:10px; display:flex; flex-flow: column-reverse nowrap; align-items:flex-end;]
  201. [comment]----role name----[/comment]
  202. [border=transparent; min-height:6%; width:80%; padding:0; box-sizing:border-box; text-align:center; color: var(--color-1); font-size:30px; text-transform:uppercase; font-weight:bold; color: var(--color-1); font-family:'Poppins', sans-serif; line-height:100%; letter-spacing:1px; position:relative; z-index:3; margin-top:-10px; flex-shrink:0;][comment]
  203. ----* * * role name here----
  204. [/comment]role name[/border]
  205.  
  206. [comment]----role contents----[/comment]
  207. [border=transparent; max-height:calc(94% + 10px); min-height:calc(64% + 10px); width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  208. [comment]----role icon----[/comment]
  209. [border=transparent; height:64px; width:64px; padding:0; overflow:hidden; position:relative; z-index:2; transform:rotate(45deg); margin:0 -32px 0 15px; flex-shrink:0;][border=transparent; height:140%; width:140%; padding:0; position:absolute; top:-20%; left:-20%; transform:rotate(-45deg);
  210. /*edit the role icon here to match the variable*/ background: var(--r2-1);
  211.  
  212. background-size:100%; image-rendering:smooth;
  213.  
  214. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  215.  
  216. [comment]----role text----[/comment]
  217. [border=transparent; height:100%; flex-grow:1; padding:15px 0; box-sizing:border-box;
  218. /*edit the role icon here to match the variable*/ background: var(--r2-2);
  219.  
  220. overflow:hidden; display:flex; flex-direction:column; pointer-events:auto; background-size:cover; position:relative; z-index:1;
  221.  
  222. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0; box-sizing:border-box;][/border]
  223.  
  224. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; position:relative;][border=transparent; height:auto; width:90%; padding:10px 10px 10px 20px; box-sizing:border-box; position:relative; margin-left:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-4); opacity:0.8; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family:'Montserrat', sans-serif; font-size:11px; text-align:justify; line-height:130%; position:relative; z-index:2;][comment]
  225. ----* * * text starts here!----
  226. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt scelerisque massa tincidunt pharetra. Cras non velit nec turpis scelerisque gravida vel eget nulla. Nullam aliquam suscipit ex, ut venenatis erat porttitor tempus. Pellentesque vel pretium tortor. Integer efficitur molestie nibh ac laoreet. Morbi ut ultrices ex. Aenean et feugiat arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dapibus euismod tortor, non molestie mauris eleifend ut. Curabitur iaculis, odio eget hendrerit venenatis, justo erat eleifend neque, sit amet congue arcu urna non quam. Mauris tincidunt velit et orci luctus sollicitudin. In malesuada sapien dolor, vel eleifend mi elementum in. In eu ornare purus. Donec hendrerit, urna sed faucibus rutrum, ante mi convallis tellus, et varius enim dui vitae leo.
  227.  
  228. Sed facilisis ullamcorper eleifend. Phasellus rhoncus tincidunt neque in interdum. Mauris ultrices dignissim augue. Sed sit amet venenatis ipsum, dignissim porta magna. Phasellus ligula risus, auctor ut vestibulum in, convallis eget est. Integer vel fermentum elit. Donec consectetur viverra purus. Nunc lobortis mi ac nunc dignissim posuere. Praesent ultricies, nulla vel consectetur ultricies, erat augue molestie dolor, a commodo lacus arcu a urna. Praesent iaculis, sem non feugiat lobortis, ante velit accumsan arcu, a auctor sapien mauris in justo. Nulla sagittis aliquet ligula, a porttitor ex lobortis accumsan. Morbi malesuada in felis quis sagittis. Donec tincidunt, nibh nec commodo tincidunt, ante libero lacinia leo, eu sodales nulla diam quis nisl. Aenean tempor nulla venenatis leo feugiat, at dapibus massa aliquet. Duis eu tempus felis, a laoreet ligula. Proin laoreet convallis eros.
  229. [/border][/border]
  230.  
  231. [/border][/border][/border]
  232. [comment]----role text end----[/comment]
  233. [/border]
  234. [comment]----role contents end----[/comment]
  235. [/border]
  236. [comment]----copy me too!----[/comment]
  237.  
  238. [comment]----copy this whole thing to add one more role! (role box 1 -- alternate role box 1 and 2)----[/comment]
  239. [border=transparent; height:305px; width:calc(50% - 20px); padding:0; margin:10px; display:flex; flex-flow: column nowrap; align-items:flex-end;]
  240. [comment]----role name----[/comment]
  241. [border=transparent; min-height:6%; width:80%; padding:0; box-sizing:border-box; text-align:center; color: var(--color-1); font-size:30px; text-transform:uppercase; font-weight:bold; color: var(--color-1); font-family:'Poppins', sans-serif; line-height:100%; letter-spacing:1px; position:relative; z-index:3; margin-bottom:-10px; flex-shrink:0;][comment]
  242. ----* * * role name here----
  243. [/comment]role name[/border]
  244.  
  245. [comment]----role contents----[/comment]
  246. [border=transparent; max-height:calc(94% + 10px); min-height:calc(64% + 10px); width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  247. [comment]----role icon----[/comment]
  248. [border=transparent; height:64px; width:64px; padding:0; overflow:hidden; position:relative; z-index:2; transform:rotate(45deg); margin:0 -32px 0 15px; flex-shrink:0;][border=transparent; height:140%; width:140%; padding:0; position:absolute; top:-20%; left:-20%; transform:rotate(-45deg);
  249. /*edit the role icon here to match the variable*/ background: var(--r3-1);
  250.  
  251. background-size:100%; image-rendering:smooth;
  252.  
  253. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  254.  
  255. [comment]----role text----[/comment]
  256. [border=transparent; height:100%; flex-grow:1; padding:15px 0; box-sizing:border-box;
  257. /*edit the role icon here to match the variable*/ background: var(--r3-2);
  258.  
  259. overflow:hidden; display:flex; flex-direction:column; pointer-events:auto; background-size:cover; position:relative; z-index:1;
  260.  
  261. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0; box-sizing:border-box;][/border]
  262.  
  263. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; position:relative;][border=transparent; height:auto; width:90%; padding:10px 10px 10px 20px; box-sizing:border-box; position:relative; margin-left:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-4); opacity:0.8; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family:'Montserrat', sans-serif; font-size:11px; text-align:justify; line-height:130%; position:relative; z-index:2;][comment]
  264. ----* * * text starts here!----
  265. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt scelerisque massa tincidunt pharetra. Cras non velit nec turpis scelerisque gravida vel eget nulla. Nullam aliquam suscipit ex, ut venenatis erat porttitor tempus. Pellentesque vel pretium tortor. Integer efficitur molestie nibh ac laoreet. Morbi ut ultrices ex. Aenean et feugiat arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dapibus euismod tortor, non molestie mauris eleifend ut. Curabitur iaculis, odio eget hendrerit venenatis, justo erat eleifend neque, sit amet congue arcu urna non quam. Mauris tincidunt velit et orci luctus sollicitudin. In malesuada sapien dolor, vel eleifend mi elementum in. In eu ornare purus. Donec hendrerit, urna sed faucibus rutrum, ante mi convallis tellus, et varius enim dui vitae leo.
  266.  
  267. Sed facilisis ullamcorper eleifend. Phasellus rhoncus tincidunt neque in interdum. Mauris ultrices dignissim augue. Sed sit amet venenatis ipsum, dignissim porta magna. Phasellus ligula risus, auctor ut vestibulum in, convallis eget est. Integer vel fermentum elit. Donec consectetur viverra purus. Nunc lobortis mi ac nunc dignissim posuere. Praesent ultricies, nulla vel consectetur ultricies, erat augue molestie dolor, a commodo lacus arcu a urna. Praesent iaculis, sem non feugiat lobortis, ante velit accumsan arcu, a auctor sapien mauris in justo. Nulla sagittis aliquet ligula, a porttitor ex lobortis accumsan. Morbi malesuada in felis quis sagittis. Donec tincidunt, nibh nec commodo tincidunt, ante libero lacinia leo, eu sodales nulla diam quis nisl. Aenean tempor nulla venenatis leo feugiat, at dapibus massa aliquet. Duis eu tempus felis, a laoreet ligula. Proin laoreet convallis eros.
  268. [/border][/border]
  269.  
  270. [/border][/border][/border]
  271. [comment]----role text end----[/comment]
  272. [/border]
  273. [comment]----role contents end----[/comment]
  274. [/border]
  275. [comment]----copy me too!----[/comment]
  276.  
  277. [comment]----copy this whole thing to add one more role! (role box 2 -- alternate role box 1 and 2)----[/comment]
  278. [border=transparent; height:305px; width:calc(50% - 20px); padding:0; margin:10px; display:flex; flex-flow: column-reverse nowrap; align-items:flex-end;]
  279. [comment]----role name----[/comment]
  280. [border=transparent; min-height:6%; width:80%; padding:0; box-sizing:border-box; text-align:center; color: var(--color-1); font-size:30px; text-transform:uppercase; font-weight:bold; color: var(--color-1); font-family:'Poppins', sans-serif; line-height:100%; letter-spacing:1px; position:relative; z-index:3; margin-top:-10px; flex-shrink:0;][comment]
  281. ----* * * role name here----
  282. [/comment]role name[/border]
  283.  
  284. [comment]----role contents----[/comment]
  285. [border=transparent; max-height:calc(94% + 10px); min-height:calc(64% + 10px); width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center;]
  286. [comment]----role icon----[/comment]
  287. [border=transparent; height:64px; width:64px; padding:0; overflow:hidden; position:relative; z-index:2; transform:rotate(45deg); margin:0 -32px 0 15px; flex-shrink:0;][border=transparent; height:140%; width:140%; padding:0; position:absolute; top:-20%; left:-20%; transform:rotate(-45deg);
  288. /*edit the role icon here to match the variable*/ background: var(--r4-1);
  289.  
  290. background-size:100%; image-rendering:smooth;
  291.  
  292. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  293.  
  294. [comment]----role text----[/comment]
  295. [border=transparent; height:100%; flex-grow:1; padding:15px 0; box-sizing:border-box;
  296. /*edit the role icon here to match the variable*/ background: var(--r4-2);
  297.  
  298. overflow:hidden; display:flex; flex-direction:column; pointer-events:auto; background-size:cover; position:relative; z-index:1;
  299.  
  300. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0; box-sizing:border-box;][/border]
  301.  
  302. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; position:relative;][border=transparent; height:auto; width:90%; padding:10px 10px 10px 20px; box-sizing:border-box; position:relative; margin-left:auto;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-4); opacity:0.8; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; color: var(--t-color-2); font-family:'Montserrat', sans-serif; font-size:11px; text-align:justify; line-height:130%; position:relative; z-index:2;][comment]
  303. ----* * * text starts here!----
  304. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt scelerisque massa tincidunt pharetra. Cras non velit nec turpis scelerisque gravida vel eget nulla. Nullam aliquam suscipit ex, ut venenatis erat porttitor tempus. Pellentesque vel pretium tortor. Integer efficitur molestie nibh ac laoreet. Morbi ut ultrices ex. Aenean et feugiat arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dapibus euismod tortor, non molestie mauris eleifend ut. Curabitur iaculis, odio eget hendrerit venenatis, justo erat eleifend neque, sit amet congue arcu urna non quam. Mauris tincidunt velit et orci luctus sollicitudin. In malesuada sapien dolor, vel eleifend mi elementum in. In eu ornare purus. Donec hendrerit, urna sed faucibus rutrum, ante mi convallis tellus, et varius enim dui vitae leo.
  305.  
  306. Sed facilisis ullamcorper eleifend. Phasellus rhoncus tincidunt neque in interdum. Mauris ultrices dignissim augue. Sed sit amet venenatis ipsum, dignissim porta magna. Phasellus ligula risus, auctor ut vestibulum in, convallis eget est. Integer vel fermentum elit. Donec consectetur viverra purus. Nunc lobortis mi ac nunc dignissim posuere. Praesent ultricies, nulla vel consectetur ultricies, erat augue molestie dolor, a commodo lacus arcu a urna. Praesent iaculis, sem non feugiat lobortis, ante velit accumsan arcu, a auctor sapien mauris in justo. Nulla sagittis aliquet ligula, a porttitor ex lobortis accumsan. Morbi malesuada in felis quis sagittis. Donec tincidunt, nibh nec commodo tincidunt, ante libero lacinia leo, eu sodales nulla diam quis nisl. Aenean tempor nulla venenatis leo feugiat, at dapibus massa aliquet. Duis eu tempus felis, a laoreet ligula. Proin laoreet convallis eros.
  307. [/border][/border]
  308.  
  309. [/border][/border][/border]
  310. [comment]----role text end----[/comment]
  311. [/border]
  312. [comment]----role contents end----[/comment]
  313. [/border]
  314. [comment]----copy me too!----[/comment]
  315.  
  316.  
  317. [/border][/border][/border]
  318. [comment]----tab contents end----[/comment]
  319.  
  320. [comment]----tab cover----[/comment]
  321. [border=transparent; height:45%; width:8%; padding:0; position:absolute; bottom:0; right:0; display:flex; flex-flow:column nowrap; font-size:0;]
  322. [comment]----button----[/comment]
  323. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;][/border]
  324. [comment]----button----[/comment]
  325. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;][/border]
  326. [comment]----selected button----[/comment]
  327. [border=transparent; height:40px; width:40px; padding:0; background: var(--b1); background-size:cover; margin:10px 0;
  328. /*select*/ animation: fa-spin 5s linear infinite;]selected![/border]
  329. [/border]
  330. [comment]----tab three end----[/comment]
  331.  
  332. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  333. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--bg-2); font-size:10px; position:absolute; z-index:7; top:5px; right:10px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; opacity:1;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  334.  
  335. [/border][/tab]
  336. [comment]----tab three end----[/comment]
  337.  
  338. [/tabs][/border][/border]
  339. [comment]----tabs end----[/comment]
  340.  
  341. [/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!