API tools faq
paste
Advertisement
ooksie

lovelorn tart (nine lives)

ooksie
Dec 20th, 2020 (edited)
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.89 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Indie Flower]titles[/font]
  5. [font=Karla]body text[/font]
  6.  
  7. to replace fonts, replace them here, then search up 'font-family' and replace them there too between the ''!
  8. [/comment][border=transparent;
  9. *background image;
  10. --bg: url('https://i.pinimg.com/originals/41/d1/c0/41d1c071e3ed681041a6668d58d4238e.jpg');
  11. *background colour;
  12. --bg-color: #FFF4EC;
  13.  
  14. *first accent colour (dark);
  15. --color-1: #40006E;
  16. *second accent colour (light -- close to bg/white);
  17. --color-2: #FFF4E9;
  18. *third accent colour (middle, lighter tone than dark);
  19. --color-3: #964FC9;
  20.  
  21. *text colour;
  22. --t-color: #fff;
  23.  
  24. *role images. to add a new variable for new roles, follow the same format here and below!;
  25. --r1: url('https://static.tumblr.com/7f60ade2a20178b0c3997fcfd5af5381/twiieiz/7nipzeifj/tumblr_static_1138901105-content_2048_v2.gif');
  26. --r2: url('https://static.tumblr.com/7f60ade2a20178b0c3997fcfd5af5381/twiieiz/7nipzeifj/tumblr_static_1138901105-content_2048_v2.gif');
  27.  
  28. height:420px; width:100%; max-width:620px; padding:10px; box-sizing:border-box; background: var(--bg-color); border:5px solid var(--color-1); display:flex; flex-flow: row-reverse nowrap; align-items:center; justify-content:center; margin:auto; line-height:0; position:relative; overflow:hidden;]
  29.  
  30. [comment]----main content----[/comment]
  31. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center;]
  32.  
  33. [comment]----content filler----[/comment]
  34. [border=transparent; height:80%; flex-grow:1; background: var(--bg); border:5px solid var(--color-1); box-sizing:border-box; background-size:cover; margin-top:25px;
  35. /*edit the following to adjust the cropping of the image*/ background-position:10% 0%; -webkit-filter:brightness(0.85) saturate(1.4); pointer-events:none;][/border]
  36.  
  37. [comment]-----tabs cover----[/comment]
  38. [border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:center; position:absolute; top:0; right:0; pointer-events:none;][border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center; justify-content:flex-end;][border=transparent; height:65%; width:50px; padding:10px 0; box-sizing:border-box; background: var(--color-1); margin-top:25px; display:flex; flex-flow:column nowrap; align-items:center;]
  39.  
  40. [comment]----button----[/comment]
  41. [border=transparent; height:25%; width:fit-content; padding:0; color: var(--color-2); font-size:25px; display:flex; align-items:center;][comment]
  42. ----* * * button icon here! replace icon in fa-icon with the icon of your choice
  43. [/comment][fa]fas fa-address-book[/fa][/border]
  44.  
  45. [comment]----button----[/comment]
  46. [border=transparent; height:25%; width:fit-content; padding:0; color: var(--color-2); font-size:25px; display:flex; align-items:center;][comment]
  47. ----* * * button icon here! replace icon in fa-icon with the icon of your choice
  48. [/comment][fa]fas fa-map-marker-alt[/fa][/border]
  49.  
  50. [comment]----button----[/comment]
  51. [border=transparent; height:25%; width:fit-content; padding:0; color: var(--color-2); font-size:25px; display:flex; align-items:center;][comment]
  52. ----* * * button icon here! replace icon in fa-icon with the icon of your choice
  53. [/comment][fa]fas fa-user[/fa][/border]
  54.  
  55. [comment]----button----[/comment]
  56. [border=transparent; height:25%; width:fit-content; padding:0; color: var(--color-2); font-size:25px; display:flex; align-items:center;][comment]
  57. ----* * * button icon here! replace icon in fa-icon with the icon of your choice
  58. [/comment][fa]fas fa-balance-scale[/fa][/border]
  59.  
  60. [/border][/border][/border]
  61.  
  62. [comment]----tabs----[/comment]
  63. [border=transparent; height:65%; width:50px; padding:0; overflow:hidden; margin:25px 0 0 -25px; flex-shrink:0;][border=transparent; padding:0; margin-left:-30px; line-height:55px; margin-top:10px;][tabs]
  64.  
  65. [comment]----tab one----[/comment]
  66. [tab=aa][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:center; position:absolute; top:0; right:0; z-index:3; line-height:0; pointer-events:none;]
  67.  
  68. [comment]----tab icon----[/comment]
  69. [border=transparent; width:clamp(240px, 20vw, 270px); padding:0; position:absolute; bottom:clamp(-145px, -10vw, -130px); left:clamp(-135px, -11vw, -120px);][border=transparent; padding:0; padding-top:100%; position:relative; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.3; position:absolute; top:0; left:0; z-index:1;][/border]
  70. [border=transparent; height:100%; width:100%; padding:20% 24%; box-sizing:border-box; font-size:clamp(40px, 4vw, 50px); color: var(--color-2); margin-left:auto; position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; position:relative; left:clamp(35px, 6vw, 50px);][comment]
  71. ----* * * tab icon here! replace icon in fa-icon with the icon of your choice
  72. [/comment][fa]fas fa-address-book[/fa][/border][/border]
  73. [/border][/border]
  74.  
  75. [comment]----tab contents container----[/comment]
  76. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center; justify-content:flex-start;]
  77.  
  78. [comment]----tab contents----[/comment]
  79. [border=transparent; height:88%; flex-grow:1; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:auto; pointer-events:auto;]
  80. [comment]----tab title----[/comment]
  81. [border=transparent; min-height:20%; height:auto; width:100%; padding:20px 0 0 0; box-sizing:border-box; font-family:'Indie Flower', display; font-weight:bold; letter-spacing:3px; font-size: clamp(50px, 10vw, 72px); color: var(--color-3); text-align:center; line-height:80%; -webkit-text-stroke:1px var(--color-3); flex-shrink:0;][comment]
  82. ----* * * tab title here!----
  83. [/comment]title here[/border]
  84.  
  85. [comment]----tab text----[/comment]
  86. [border=transparent; max-height:80%; width:90%; margin:0 auto; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative; z-index:2;][border=transparent; height:auto; width:50%; padding:0 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:12px; font-family:'Karla', sans-serif; text-align:justify; line-height:130%;][comment]
  87. ---* * * text starts here!----
  88. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna ante. Cras in ligula quis nulla hendrerit volutpat. In maximus eros luctus, ultrices erat sed, consectetur mi. Sed mauris ligula, maximus et ornare vitae, placerat eu elit. Sed dictum diam sit amet malesuada pulvinar. Sed ante nisl, ornare non lorem ut, euismod aliquam leo. Etiam nec pharetra lectus. Vivamus sollicitudin molestie aliquam. Nunc eu magna quis justo rhoncus ultrices. Suspendisse luctus rutrum lacus, in consectetur purus dignissim nec. Donec neque purus, vulputate id fringilla in, bibendum quis purus. Donec vel iaculis tellus. Praesent iaculis gravida vulputate. Aenean faucibus eros risus.
  89.  
  90. Nulla lobortis a massa id venenatis. Suspendisse potenti. Integer sodales imperdiet nulla, imperdiet bibendum nibh lacinia sed. Donec pharetra turpis in risus iaculis, non fermentum massa euismod. Maecenas fermentum non odio ut iaculis. Nam vehicula laoreet augue, ullamcorper lobortis neque porttitor et. Morbi mattis ultrices malesuada. Suspendisse potenti. Praesent euismod purus mattis eros tincidunt gravida. Aenean ultrices auctor tristique. Aenean tincidunt eros rhoncus ante semper imperdiet. Praesent ac dictum felis. Nunc eget gravida nisl, in faucibus metus. Fusce augue mi, consectetur egestas porta sed, sagittis et mi. Cras congue pretium arcu a consequat.
  91. [/border][/border][/border]
  92. [comment]----tab text end----[/comment]
  93.  
  94. [/border]
  95. [comment]----tab contents end----[/comment]
  96.  
  97. [comment]----filler area----[/comment]
  98. [border=transparent; height:100%; width:50px; padding:0; flex-shrink:0;][/border]
  99. [/border]
  100. [comment]----tab contents container end----[/comment]
  101.  
  102. [/border][/tab]
  103. [comment]----tab one end----[/comment]
  104.  
  105.  
  106. [comment]----tab two----[/comment]
  107. [tab=aa][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:center; position:absolute; top:0; right:0; z-index:3; line-height:0; pointer-events:none;]
  108.  
  109. [comment]----tab icon----[/comment]
  110. [border=transparent; width:clamp(240px, 20vw, 270px); padding:0; position:absolute; bottom:clamp(-145px, -10vw, -130px); left:clamp(-135px, -11vw, -120px);][border=transparent; padding:0; padding-top:100%; position:relative; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.3; position:absolute; top:0; left:0; z-index:1;][/border]
  111. [border=transparent; height:100%; width:100%; padding:20% 24%; box-sizing:border-box; font-size:clamp(40px, 4vw, 50px); color: var(--color-2); margin-left:auto; position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; position:relative; left:clamp(35px, 6vw, 50px);][comment]
  112. ----* * * tab icon here! replace icon in fa-icon with the icon of your choice
  113. [/comment][fa]fas fa-map-marker-alt[/fa][/border][/border]
  114. [/border][/border]
  115.  
  116. [comment]----tab contents container----[/comment]
  117. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center; justify-content:flex-start;]
  118.  
  119. [comment]----tab contents----[/comment]
  120. [border=transparent; height:88%; flex-grow:1; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:auto; pointer-events:auto;]
  121. [comment]----tab title----[/comment]
  122. [border=transparent; min-height:20%; height:auto; width:100%; padding:20px 0 0 0; box-sizing:border-box; font-family:'Indie Flower', display; font-weight:bold; letter-spacing:3px; font-size: clamp(50px, 10vw, 72px); color: var(--color-3); text-align:center; line-height:80%; -webkit-text-stroke:1px var(--color-3); flex-shrink:0;][comment]
  123. ----* * * tab title here!----
  124. [/comment]the setting[/border]
  125.  
  126. [comment]----tab text----[/comment]
  127. [border=transparent; max-height:80%; width:90%; margin:0 auto; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative; z-index:2;][border=transparent; height:auto; width:50%; padding:0 10px 0 30px; box-sizing:border-box; color: var(--t-color); font-size:12px; font-family:'Karla', sans-serif; text-align:justify; line-height:130%;][comment]
  128. ---* * * text starts here!----
  129. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna ante. Cras in ligula quis nulla hendrerit volutpat. In maximus eros luctus, ultrices erat sed, consectetur mi. Sed mauris ligula, maximus et ornare vitae, placerat eu elit. Sed dictum diam sit amet malesuada pulvinar. Sed ante nisl, ornare non lorem ut, euismod aliquam leo. Etiam nec pharetra lectus. Vivamus sollicitudin molestie aliquam. Nunc eu magna quis justo rhoncus ultrices. Suspendisse luctus rutrum lacus, in consectetur purus dignissim nec. Donec neque purus, vulputate id fringilla in, bibendum quis purus. Donec vel iaculis tellus. Praesent iaculis gravida vulputate. Aenean faucibus eros risus.
  130.  
  131. Nulla lobortis a massa id venenatis. Suspendisse potenti. Integer sodales imperdiet nulla, imperdiet bibendum nibh lacinia sed. Donec pharetra turpis in risus iaculis, non fermentum massa euismod. Maecenas fermentum non odio ut iaculis. Nam vehicula laoreet augue, ullamcorper lobortis neque porttitor et. Morbi mattis ultrices malesuada. Suspendisse potenti. Praesent euismod purus mattis eros tincidunt gravida. Aenean ultrices auctor tristique. Aenean tincidunt eros rhoncus ante semper imperdiet. Praesent ac dictum felis. Nunc eget gravida nisl, in faucibus metus. Fusce augue mi, consectetur egestas porta sed, sagittis et mi. Cras congue pretium arcu a consequat.
  132. [/border][/border][/border]
  133. [comment]----tab text end----[/comment]
  134.  
  135. [/border]
  136. [comment]----tab contents end----[/comment]
  137.  
  138. [comment]----filler area----[/comment]
  139. [border=transparent; height:100%; width:50px; padding:0; flex-shrink:0;][/border]
  140. [/border]
  141. [comment]----tab contents container end----[/comment]
  142.  
  143. [/border][/tab]
  144. [comment]----tab two end----[/comment]
  145.  
  146.  
  147. [comment]----tab three----[/comment]
  148. [tab=aa][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:center; position:absolute; top:0; right:0; z-index:3; line-height:0; pointer-events:none;]
  149.  
  150. [comment]----tab icon----[/comment]
  151. [border=transparent; width:clamp(240px, 20vw, 270px); padding:0; position:absolute; bottom:clamp(-145px, -10vw, -130px); left:clamp(-135px, -11vw, -120px);][border=transparent; padding:0; padding-top:100%; position:relative; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.3; position:absolute; top:0; left:0; z-index:1;][/border]
  152. [border=transparent; height:100%; width:100%; padding:20% 24%; box-sizing:border-box; font-size:clamp(40px, 4vw, 50px); color: var(--color-2); margin-left:auto; position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; position:relative; left:clamp(35px, 6vw, 50px);][comment]
  153. ----* * * tab icon here! replace icon in fa-icon with the icon of your choice
  154. [/comment][fa]fas fa-user[/fa][/border][/border]
  155. [/border][/border]
  156.  
  157. [comment]----tab contents container----[/comment]
  158. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center; justify-content:flex-start;]
  159.  
  160. [comment]----tab contents----[/comment]
  161. [border=transparent; height:88%; flex-grow:1; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:auto; pointer-events:auto;]
  162. [comment]----tab title----[/comment]
  163. [border=transparent; min-height:20%; height:auto; width:100%; padding:20px 0 0 0; box-sizing:border-box; font-family:'Indie Flower', display; font-weight:bold; letter-spacing:3px; font-size: clamp(50px, 10vw, 72px); color: var(--color-3); text-align:center; line-height:80%; -webkit-text-stroke:1px var(--color-3); flex-shrink:0;][comment]
  164. ----* * * tab title here!----
  165. [/comment]the roles[/border]
  166.  
  167. [comment]----tab text----[/comment]
  168. [border=transparent; max-height:80%; width:90%; margin:0 auto; padding:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative; z-index:2;][border=transparent; height:auto; width:50%; padding:0 10px 0 30px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  169.  
  170. [comment]----copy this whole thing to make a new role!----[/comment]
  171. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; display:flex; flex-flow: row-reverse wrap; justify-content:center; margin:10px 0;]
  172.  
  173. [comment]----role icon & name----[/comment]
  174. [border=transparent; flex:3; min-width:145px; max-width:145px; padding:0; box-sizing:border-box; display:flex; justify-content:center; position:relative; margin:5px;]
  175. [comment]----role icon (remember to change the number in --rX to match the one in the variables at the start of the code)----[/comment]
  176. [border=transparent; width:80%; padding:0; padding-top:80%; border-radius:50%; border:2px solid var(--color-1); box-shadow:5px 5px var(--color-1);
  177. /*edit this!*/ background: var(--r1); background-size:cover;
  178. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  179. [comment]----role name----[/comment]
  180. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-weight:bold; font-family:'Indie Flower', display; font-size:25px; line-height:90%; letter-spacing:1px; text-shadow:2px 2px var(--color-3);][comment]
  181. ----* * * role name here----
  182. [/comment]role here[/border][/border]
  183. [/border][/border]
  184.  
  185. [comment]----role description----[/comment]
  186. [border=transparent; flex:5; max-height:120px; padding:0; min-width:220px; overflow:hidden; display:flex; flex-direction:column; margin:5px 0;][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:130%; font-family:'Karla', sans-serif;][comment]
  187. ----* * * text starts here!----
  188. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin libero quis augue dapibus, ac elementum mauris sodales. Etiam ultrices urna vel rutrum euismod. Ut quis augue quis nibh aliquam iaculis. Vestibulum eget rhoncus tortor. Ut a lacinia urna, in mollis nibh. Etiam venenatis, elit id sagittis varius, libero lectus tincidunt sem, vitae consectetur lorem massa non lorem. Quisque gravida consectetur ligula ac auctor. Donec posuere ut purus in eleifend. Mauris facilisis bibendum urna, non tristique lectus laoreet eget.
  189. [/border][/border][/border]
  190.  
  191. [/border]
  192. [comment]----copy me too!----[/comment]
  193.  
  194. [comment]----copy this whole thing to make a new role!----[/comment]
  195. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; display:flex; flex-flow: row-reverse wrap; justify-content:center; margin:10px 0;]
  196.  
  197. [comment]----role icon & name----[/comment]
  198. [border=transparent; flex:3; min-width:145px; max-width:145px; padding:0; box-sizing:border-box; display:flex; justify-content:center; position:relative; margin:5px;]
  199. [comment]----role icon (remember to change the number in --rX to match the one in the variables at the start of the code)----[/comment]
  200. [border=transparent; width:80%; padding:0; padding-top:80%; border-radius:50%; border:2px solid var(--color-1); box-shadow:5px 5px var(--color-1);
  201. /*edit this!*/ background: var(--r2); background-size:cover;
  202. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  203. [comment]----role name----[/comment]
  204. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-weight:bold; font-family:'Indie Flower', display; font-size:25px; line-height:90%; letter-spacing:1px; text-shadow:2px 2px var(--color-3);][comment]
  205. ----* * * role name here----
  206. [/comment]role here[/border][/border]
  207. [/border][/border]
  208.  
  209. [comment]----role description----[/comment]
  210. [border=transparent; flex:5; max-height:120px; padding:0; min-width:220px; overflow:hidden; display:flex; flex-direction:column; margin:5px 0;][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:130%; font-family:'Karla', sans-serif;][comment]
  211. ----* * * text starts here!----
  212. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin libero quis augue dapibus, ac elementum mauris sodales. Etiam ultrices urna vel rutrum euismod. Ut quis augue quis nibh aliquam iaculis. Vestibulum eget rhoncus tortor. Ut a lacinia urna, in mollis nibh. Etiam venenatis, elit id sagittis varius, libero lectus tincidunt sem, vitae consectetur lorem massa non lorem. Quisque gravida consectetur ligula ac auctor. Donec posuere ut purus in eleifend. Mauris facilisis bibendum urna, non tristique lectus laoreet eget.
  213. [/border][/border][/border]
  214.  
  215. [/border]
  216. [comment]----copy me too!----[/comment]
  217.  
  218. [/border][/border][/border]
  219. [comment]----tab text end----[/comment]
  220.  
  221. [/border]
  222. [comment]----tab contents end----[/comment]
  223.  
  224. [comment]----filler area----[/comment]
  225. [border=transparent; height:100%; width:50px; padding:0; flex-shrink:0;][/border]
  226. [/border]
  227. [comment]----tab contents container end----[/comment]
  228.  
  229. [/border][/tab]
  230. [comment]----tab three end----[/comment]
  231.  
  232.  
  233. [comment]----tab four----[/comment]
  234. [tab=aa][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; display:flex; justify-content:center; position:absolute; top:0; right:0; z-index:3; line-height:0; pointer-events:none;]
  235.  
  236. [comment]----tab icon----[/comment]
  237. [border=transparent; width:clamp(240px, 20vw, 270px); padding:0; position:absolute; bottom:clamp(-145px, -10vw, -130px); left:clamp(-135px, -11vw, -120px);][border=transparent; padding:0; padding-top:100%; position:relative; border-radius:50%; overflow:hidden;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.3; position:absolute; top:0; left:0; z-index:1;][/border]
  238. [border=transparent; height:100%; width:100%; padding:20% 24%; box-sizing:border-box; font-size:clamp(40px, 4vw, 50px); color: var(--color-2); margin-left:auto; position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; line-height:100%; position:relative; left:clamp(35px, 6vw, 50px);][comment]
  239. ----* * * tab icon here! replace icon in fa-icon with the icon of your choice
  240. [/comment][fa]fas fa-balance-scale[/fa][/border][/border]
  241. [/border][/border]
  242.  
  243. [comment]----tab contents container----[/comment]
  244. [border=transparent; height:100%; width:100%; max-width:540px; padding:0; display:flex; align-items:center; justify-content:flex-start;]
  245.  
  246. [comment]----tab contents----[/comment]
  247. [border=transparent; height:88%; flex-grow:1; padding:0; display:flex; flex-flow:column nowrap; margin-bottom:auto; pointer-events:auto;]
  248. [comment]----tab title----[/comment]
  249. [border=transparent; min-height:20%; height:auto; width:100%; padding:20px 0 0 0; box-sizing:border-box; font-family:'Indie Flower', display; font-weight:bold; letter-spacing:3px; font-size: clamp(50px, 10vw, 72px); color: var(--color-3); text-align:center; line-height:80%; -webkit-text-stroke:1px var(--color-3); flex-shrink:0;][comment]
  250. ----* * * tab title here!----
  251. [/comment]the rules[/border]
  252.  
  253. [comment]----tab text----[/comment]
  254. [border=transparent; max-height:80%; width:90%; margin:0 auto; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative; z-index:2;][border=transparent; height:auto; width:50%; padding:0 10px 0 30px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  255.  
  256. [comment]----copy this whole thing to make a new rule (rule box 1 -- alternate rule boxes 1 and 2)----[/comment]
  257. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:10px 0;]
  258. [comment]----rule number----[/comment]
  259. [border=transparent; height:fit-content; width:fit-content; padding:0; box-sizing:border-box; flex-shrink:0; color: var(--color-2); font-size:clamp(60px, 4vw, 75px); line-height:100%; font-weight:bold; font-family:'Indie Flower', display; margin-left:15px; position:sticky; top:0;][comment]
  260. ----* * * rule number here!----
  261. [/comment]1[/border]
  262.  
  263. [comment]----rule description----[/comment]
  264. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); font-family:'Karla', sans-serif; text-align:justify; line-height:130%; font-size:12px;][comment]
  265. ----* * * text starts here!----
  266. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin libero quis augue dapibus, ac elementum mauris sodales. Etiam ultrices urna vel rutrum euismod. Ut quis augue quis nibh aliquam iaculis. Vestibulum eget rhoncus tortor.[/border]
  267. [/border]
  268. [comment]----copy this too!----[/comment]
  269.  
  270. [comment]----copy this whole thing to make a new rule (rule box 2 -- alternate rule boxes 1 and 2)----[/comment]
  271. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:10px 0;]
  272. [comment]----rule number----[/comment]
  273. [border=transparent; height:fit-content; width:fit-content; padding:0; box-sizing:border-box; flex-shrink:0; color: var(--color-2); font-size:clamp(60px, 4vw, 75px); line-height:100%; font-weight:bold; font-family:'Indie Flower', display; margin-right:15px; position:sticky; top:0;][comment]
  274. ----* * * rule number here!----
  275. [/comment]2[/border]
  276.  
  277. [comment]----rule description----[/comment]
  278. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); font-family:'Karla', sans-serif; text-align:justify; line-height:130%; font-size:12px;][comment]
  279. ----* * * text starts here!----
  280. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin libero quis augue dapibus, ac elementum mauris sodales. Etiam ultrices urna vel rutrum euismod. Ut quis augue quis nibh aliquam iaculis. Vestibulum eget rhoncus tortor.[/border]
  281. [/border]
  282. [comment]----copy this too!----[/comment]
  283.  
  284. [comment]----copy this whole thing to make a new rule (rule box 1 -- alternate rule boxes 1 and 2)----[/comment]
  285. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:10px 0;]
  286. [comment]----rule number----[/comment]
  287. [border=transparent; height:fit-content; width:fit-content; padding:0; box-sizing:border-box; flex-shrink:0; color: var(--color-2); font-size:clamp(60px, 4vw, 75px); line-height:100%; font-weight:bold; font-family:'Indie Flower', display; margin-left:15px; position:sticky; top:0;][comment]
  288. ----* * * rule number here!----
  289. [/comment]3[/border]
  290.  
  291. [comment]----rule description----[/comment]
  292. [border=transparent; height:fit-content; flex-grow:1; padding:0; color: var(--t-color); font-family:'Karla', sans-serif; text-align:justify; line-height:130%; font-size:12px;][comment]
  293. ----* * * text starts here!----
  294. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin libero quis augue dapibus, ac elementum mauris sodales. Etiam ultrices urna vel rutrum euismod. Ut quis augue quis nibh aliquam iaculis. Vestibulum eget rhoncus tortor.
  295.  
  296. this can just keep goin LOL[/border]
  297. [/border]
  298. [comment]----copy this too!----[/comment]
  299.  
  300. [/border][/border][/border]
  301. [comment]----tab text end----[/comment]
  302.  
  303. [/border]
  304. [comment]----tab contents end----[/comment]
  305.  
  306. [comment]----filler area----[/comment]
  307. [border=transparent; height:100%; width:50px; padding:0; flex-shrink:0;][/border]
  308. [/border]
  309. [comment]----tab contents container end----[/comment]
  310.  
  311. [/border][/tab]
  312. [comment]----tab four end----[/comment]
  313.  
  314. [/tabs][/border][/border]
  315.  
  316. [/border]
  317. [comment]----main content end----[/comment]
  318.  
  319. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  320. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); font-size:10px; position:absolute; z-index:7; top:5.5px; right:7px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%;][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]
  321. [/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!