API tools faq
paste
Advertisement
ooksie

with you! (apps.)

ooksie
Jan 5th, 2022 (edited)
392
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.40 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Corben]headers[/font]
  5. [font=Libre Franklin]subheader, body text[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10.  
  11. /*text background colour*/
  12. --bg-color: #e5e2ff;
  13.  
  14. /*main background colour*/
  15. --color-1: #C7C2F5;
  16. /*accent colour 1 -- slightly darker than color-1*/
  17. --color-2: #a8a2e5;
  18. /*accent colour 2 -- compliment color-1 + color-2*/
  19. --color-3: #F7A8E6;
  20. /*accent colour 3*/
  21. --color-4: #fff;
  22.  
  23. /*header colour -- main title, subtitle*/
  24. --h1: #fff;
  25. /*header colour 2 -- tab titles*/
  26. --h2: #9892db;
  27. /*text colour*/
  28. --t-color: #3a3156;
  29.  
  30. /*fonts used*/
  31. --header: 'Corben', sans-serif;
  32. --subheader: 'Libre Franklin', sans-serif;
  33. --body: 'Libre Franklin', sans-serif;
  34.  
  35. /*role images*/
  36. --r1: url('link');
  37. --r2: url('link');
  38.  
  39. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden; margin:15px 0 20px 0; line-height:0;][border=transparent; height:auto; height:490px; width:100%; min-width:330px; max-width:420px; padding:5px 7px 15px 15px; box-sizing:border-box; margin:auto; position:relative; background: var(--color-1); position:relative; --s:clamp(0px, -30px + 7vw, 8px); box-sizing:border-box;]
  40. [comment]----container----[/comment]
  41. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap;]
  42.  
  43. [comment]----header----[/comment]
  44. [border=transparent; height:auto; min-height:90px; width:100%; padding:5px 13px clamp(10px, -30px + 8vw, 20px) 5px; box-sizing:border-box; flex-shrink:0;]
  45. [comment]----title text----[/comment]
  46. [border=transparent; height:auto; width:auto; padding:2px 0 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  47. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box;][border=transparent; height:auto; width:auto; max-height:clamp(50px, 120px - 15vw, 72px); overflow:hidden; padding:0 10px 10px 0; box-sizing:border-box; color: var(--h1); font-weight:bold; font-family: var(--header); font-size:clamp(35px, -40px + 10vw, 45px); font-weight:bold; letter-spacing:0; word-spacing:6px; -webkit-text-stroke:1px var(--h1); text-shadow:3px 3px var(--color-3), 6px 6px var(--color-2);][border=transparent; height:auto; width:auto; padding:0 0 8px 0; box-sizing:border-box; line-height:100%; display:inline;][comment]
  48.  
  49. ----* * * title here----
  50.  
  51. [/comment]after school[/border][comment]
  52. [/comment][border=transparent; height:auto; width:auto; padding:0 30px 6px 0; box-sizing:border-box; line-height:100%; display:inline-block; position:relative;][comment]
  53.  
  54. ----* * * last character of title here----
  55.  
  56. [/comment]![comment]
  57.  
  58. [/comment][border=transparent; height:auto; width:auto; padding:0; text-shadow:3px 3px var(--color-3), 6px 6px var(--color-2); color: var(--h1); font-size:22px; position:absolute; left:20px; top:-3px; transform:rotate(10deg);][fa]fas fa-sparkles[/fa][/border][/border][/border]
  59. [/border]
  60. [border=transparent; height:auto; max-height:28px; width:fit-content; width:-moz-fit-content; padding:0; margin-top:7px; overflow:hidden;][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; display:inline; padding:2px 5px; box-sizing:border-box; color: var(--h1); background: var(--color-2); font-size:12px; letter-spacing:0.8px; font-family: var(--subheader); line-height:17px; box-decoration-break:clone; -webkit-box-decoration-break: clone; font-weight:bold;][comment]
  61.  
  62. ----* * * subtitle here----
  63.  
  64. [/comment]i'm so good with you ♡[/border][/border]
  65. [/border]
  66. [comment]----title text end----[/comment]
  67. [/border]
  68. [comment]----header end----[/comment]
  69.  
  70. [comment]----content box----[/comment]
  71. [border=transparent; height:85%; max-height:calc(100% - 90px); width:100%; padding:0; display:flex; flex-flow:row wrap;]
  72.  
  73. [comment]----links container----[/comment]
  74. [border=transparent; height:auto; flex:12; min-width:clamp(35px, 300px - 35vw, 190px); max-height:50px; padding:5px 13px 5px 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; align-items:start; align-content:start; --m: clamp(0px, -30px + 8vw, 15px) clamp(5px, 50px - 8vw, 10px); margin-right:clamp(0px, -20px + 6vw, 5px);]
  75.  
  76. [comment]----link box (replace xx with link)----[/comment]
  77. [url='xx'][border=transparent; height:auto; padding:0; width:auto; min-width:25px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; align-content:center; overflow:hidden; color: var(--color-4); margin:var(--m);]
  78. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-size:clamp(17px, -30px + 8vw, 23px); line-height:100%; margin:0 5px;][comment]
  79.  
  80. ----* * * link icon here----
  81.  
  82. [/comment][fa]fas fa-star[/fa][/border]
  83. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:12px; margin-top:clamp(4px, -30px + 7vw, 10px); letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold; text-align:center;][comment]
  84.  
  85. ----* * * link title here----
  86.  
  87. [/comment]int. check[/border]
  88. [/border][/url]
  89. [comment]----link box end----[/comment]
  90. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  91.  
  92. [comment]----link box (replace xx with link)----[/comment]
  93. [url='xx'][border=transparent; height:auto; padding:0; width:auto; min-width:25px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; align-content:center; overflow:hidden; color: var(--color-4); margin:var(--m);]
  94. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-size:clamp(17px, -30px + 8vw, 23px); line-height:100%; margin:0 5px;][comment]
  95.  
  96. ----* * * link icon here----
  97.  
  98. [/comment][fa]fas fa-users[/fa][/border]
  99. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:12px; margin-top:clamp(4px, -30px + 7vw, 10px); letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold; text-align:center;][comment]
  100.  
  101. ----* * * link title here----
  102.  
  103. [/comment]cs[/border]
  104. [/border][/url]
  105. [comment]----link box end----[/comment]
  106. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  107.  
  108. [comment]----link box (replace xx with link)----[/comment]
  109. [url='xx'][border=transparent; height:auto; padding:0; width:auto; min-width:25px; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; align-content:center; overflow:hidden; color: var(--color-4); margin:var(--m);]
  110. [border=transparent; height:auto; width:auto; padding:0; box-sizing:border-box; font-size:clamp(17px, -30px + 8vw, 23px); line-height:100%; margin:0 5px;][comment]
  111.  
  112. ----* * * link icon here----
  113.  
  114. [/comment][fa]fas fa-comment-dots[/fa][/border]
  115. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:12px; margin-top:clamp(4px, -30px + 7vw, 10px); letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold; text-align:center;][comment]
  116.  
  117. ----* * * link title here----
  118.  
  119. [/comment]ooc[/border]
  120. [/border][/url]
  121. [comment]----link box end----[/comment]
  122. [border=transparent; height:0; width:5px; padding:0; flex-shrink:0;][/border]
  123. [/border]
  124. [comment]----links container end----[/comment]
  125.  
  126. [comment]----right----[/comment]
  127. [border=transparent; height:clamp(320px, 41vw, 365px); flex:88; min-width:270px; padding:0; display:flex; flex-flow:column nowrap; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-20px;][/border]
  128.  
  129. [comment]----long text section----[/comment]
  130. [border=transparent; height:calc(100% - 5px); width:50%; padding:0; display:flex; flex-flow:column nowrap; margin-top:20px;]
  131. [comment]----title----[/comment]
  132. [border=transparent; height:auto; width:100%; padding:9px 12px 15px 12px; box-sizing:border-box; display:flex; flex-flow:row nowrap; font-size:18px; border-radius:1.5px; background: var(--bg-color); flex-shrink:0; box-shadow:4px 4px var(--color-2);][border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); letter-spacing:0.5px; line-height:60%; text-transform:lowercase;][comment]
  133.  
  134. ----* * *title here----
  135.  
  136. [/comment]the sheet[/border]
  137. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); line-height:60%; margin-left:2px; letter-spacing:2px;]...[/border][/border]
  138.  
  139. [comment]----contents----[/comment]
  140. [border=transparent; height:98%; width:100%; padding:12px 0; box-sizing:border-box; background: var(--bg-color); margin-top:16px; box-shadow:4px 4px var(--color-2); border-radius:1.5px; overflow:hidden; display:flex; flex-flow:column nowrap;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 7px 0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; text-align:justify; line-height:17px; font-family: var(--body); margin-top:-1px;][comment]
  141.  
  142. ----* * * text starts here----
  143.  
  144. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et augue urna. Mauris bibendum quam sem, et porttitor eros consectetur in. Quisque luctus diam quis erat sodales, nec posuere turpis suscipit. Curabitur scelerisque ex eu massa bibendum feugiat. In hac habitasse platea dictumst. Curabitur est elit, semper quis urna non, molestie suscipit lectus. Cras eget magna sed sem rutrum faucibus nec sed dui. Morbi tincidunt erat eu laoreet ullamcorper.
  145.  
  146. Ut sagittis eleifend ante, vel ultricies magna varius eget. Duis luctus ultricies ex eget posuere. Mauris laoreet diam mattis turpis tincidunt fringilla. Donec non malesuada lectus. Vivamus ut augue accumsan, tincidunt metus id, tincidunt nisl. Fusce at ornare ligula. Sed mattis, justo nec viverra porttitor, felis dui pretium leo, sit amet eleifend ante enim eget nisi. Vivamus fringilla ac metus vulputate vulputate. Nunc quis ultrices velit.
  147.  
  148. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam et lobortis magna, vel sollicitudin metus. Mauris at tellus non elit hendrerit feugiat eget nec ipsum. Pellentesque quis neque vitae dui dictum bibendum eu in odio. In non leo sit amet nibh consectetur consectetur. Morbi tincidunt auctor metus, at imperdiet odio pulvinar non. Ut mollis, velit ut viverra aliquam, eros libero blandit nisl, vel egestas mi elit et orci.
  149. [/border][/border][/border]
  150. [comment]----tab contents end----[/comment]
  151. [/border]
  152. [comment]----long text section end----[/comment]
  153.  
  154. [comment]----roles section----[/comment]
  155. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; margin:20px 0 5px 0;]
  156.  
  157. [comment]----title----[/comment]
  158. [border=transparent; height:auto; width:100%; padding:9px 12px 15px 12px; box-sizing:border-box; display:flex; flex-flow:row nowrap; font-size:18px; border-radius:1.5px; background: var(--bg-color); flex-shrink:0; box-shadow:4px 4px var(--color-2);][border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); letter-spacing:0.5px; line-height:60%; text-transform:lowercase;][comment]
  159.  
  160. ----* * *title here----
  161.  
  162. [/comment]the members[/border]
  163. [border=transparent; height:auto; width:auto; padding:0; color: var(--h2); font-family: var(--header); -webkit-text-stroke:1px var(--h2); line-height:60%; margin-left:2px; letter-spacing:2px;]...[/border][/border]
  164.  
  165. [comment]----contents----[/comment]
  166. [border=transparent; height:auto; width:100%; padding:0; box-sizing:border-box; margin-top:22px; border-radius:1.5px; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-18px;][/border]
  167.  
  168. [comment]----copy this whole thing to add another role----[/comment]
  169. [border=transparent; height:106px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px;]
  170. [border=transparent; width:clamp(70px, 13vw, 90px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:calc(100% - 8px); border:6px solid var(--bg-color); box-shadow:4px 4px var(--color-2); border-radius:1.5px;
  171.  
  172. /*edit the number in rX to match the variables*/ background: var(--r1);
  173. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  174.  
  175. background-size:cover; position:relative; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.2; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; align-items:flex-end; position:absolute; top:0; left:-0.5px;][border=transparent; height:auto; width:auto; padding:4px 5px 2px 5px; box-sizing:border-box; background: var(--color-3); color: var(--h1); font-family: var(--subheader); letter-spacing:1px; font-size:8.5px; text-transform:uppercase; font-weight:bold; line-height:100%;][comment]
  176.  
  177. ----* * * role status/spots here----
  178.  
  179. [/comment]open[/border]
  180. [/border][/border][/border]
  181.  
  182. [comment]-----role info----[/comment]
  183. [border=transparent; height:106px; flex:1; padding:0; margin-left:17px; display:flex; flex-flow:column nowrap;]
  184. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:5px 8px 4px 8px; box-sizing:border-box; color: var(--h1); font-family: var(--subheader); letter-spacing:2px; text-transform:uppercase; font-weight:bold; -webkit-text-stroke:0.3px var(--h1); font-size:13px; background: var(--color-2); line-height:100%; flex-shrink:0;][comment]
  185.  
  186. ----* * * role name here----
  187.  
  188. [/comment]role name[/border]
  189. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap; overflow:hidden; margin-top:6px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 1px; box-sizing:border-box; color: var(--t-color); font-size:10.5px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  190.  
  191. ----* * * text start here----
  192.  
  193. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et augue urna. Mauris bibendum quam sem, et porttitor eros consectetur in. Quisque luctus diam quis erat sodales, nec posuere turpis suscipit. Curabitur scelerisque ex eu massa bibendum feugiat. In hac habitasse platea dictumst. Curabitur est elit, semper quis urna non, molestie suscipit lectus. Cras eget magna sed sem rutrum faucibus nec sed dui. Morbi tincidunt erat eu laoreet ullamcorper.
  194. [/border][/border][/border]
  195. [/border]
  196. [/border]
  197. [comment]----copy me too!----[/comment]
  198.  
  199. [comment]----copy this whole thing to add another role----[/comment]
  200. [border=transparent; height:106px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px;]
  201. [border=transparent; width:clamp(70px, 13vw, 90px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:calc(100% - 8px); border:6px solid var(--bg-color); box-shadow:4px 4px var(--color-2); border-radius:1.5px;
  202.  
  203. /*edit the number in rX to match the variables*/ background: var(--r2);
  204. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  205.  
  206. background-size:cover; position:relative; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.2; position:absolute; top:0; left:0; z-index:1;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; align-items:flex-end; position:absolute; top:0; left:-0.5px;][border=transparent; height:auto; width:auto; padding:4px 5px 2px 5px; box-sizing:border-box; background: var(--color-3); color: var(--h1); font-family: var(--subheader); letter-spacing:1px; font-size:8.5px; text-transform:uppercase; font-weight:bold; line-height:100%;][comment]
  207.  
  208. ----* * * role status/spots here----
  209.  
  210. [/comment]open[/border]
  211. [/border][/border][/border]
  212.  
  213. [comment]-----role info----[/comment]
  214. [border=transparent; height:106px; flex:1; padding:0; margin-left:17px; display:flex; flex-flow:column nowrap;]
  215. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:5px 8px 4px 8px; box-sizing:border-box; color: var(--h1); font-family: var(--subheader); letter-spacing:2px; text-transform:uppercase; font-weight:bold; -webkit-text-stroke:0.3px var(--h1); font-size:13px; background: var(--color-2); line-height:100%; flex-shrink:0;][comment]
  216.  
  217. ----* * * role name here----
  218.  
  219. [/comment]role name[/border]
  220. [border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:column nowrap; overflow:hidden; margin-top:6px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 0 0 1px; box-sizing:border-box; color: var(--t-color); font-size:10.5px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  221.  
  222. ----* * * text start here----
  223.  
  224. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et augue urna. Mauris bibendum quam sem, et porttitor eros consectetur in. Quisque luctus diam quis erat sodales, nec posuere turpis suscipit. Curabitur scelerisque ex eu massa bibendum feugiat. In hac habitasse platea dictumst. Curabitur est elit, semper quis urna non, molestie suscipit lectus. Cras eget magna sed sem rutrum faucibus nec sed dui. Morbi tincidunt erat eu laoreet ullamcorper.
  225. [/border][/border][/border]
  226. [/border]
  227. [/border]
  228. [comment]----copy me too!----[/comment]
  229.  
  230. [/border]
  231. [/border]
  232. [comment]----roles section end----[/comment]
  233.  
  234. [/border][/border]
  235. [comment]----right end----[/comment]
  236. [/border]
  237. [comment]----container----[/comment]
  238. [comment]
  239. ----signature! do not remove
  240. [/comment][bg=transparent; height:fit-content; width:auto; padding:0; position:absolute;z-index:15;opacity:0.7;color: var(--color-2); font-size:clamp(9px, -30px + 5vw, 10px);text-align:center; top:13px; right:13px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/border][/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!