API tools faq
paste
ooksie

with you! (int. check)

ooksie
Jan 5th, 2022 (edited)
456
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.39 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. /*background image (by emoly_j on twt)*/
  12. --bg: url('https://i.redd.it/4p9qj0hl7ho61.png');
  13. /*tab background colour*/
  14. --bg-color: #e5e2ff;
  15.  
  16. /*main background colour*/
  17. --color-1: #C7C2F5;
  18. /*accent colour 1 -- slightly darker than color-1*/
  19. --color-2: #a8a2e5;
  20. /*accent colour 2 -- compliment color-1 + color-2*/
  21. --color-3: #F7A8E6;
  22. /*accent colour 3*/
  23. --color-4: #fff;
  24. /*accent colour 4 -- lighter than color-1*/
  25. --color-5: #eceaff;
  26.  
  27. /*tab button colours*/
  28. --b1: #f9c2fc;
  29. --b2: #c2b2f7;
  30. --b3: #bfe1fc;
  31.  
  32. /*header colour -- main title, subtitle*/
  33. --h1: #fff;
  34. /*header colour 2 -- tab titles*/
  35. --h2: #9892db;
  36. /*text colour*/
  37. --t-color: #3a3156;
  38.  
  39. /*fonts used*/
  40. --header: 'Corben', sans-serif;
  41. --subheader: 'Libre Franklin', sans-serif;
  42. --body: 'Libre Franklin', sans-serif;
  43.  
  44. /*main content image*/
  45. --img-1: url('https://64.media.tumblr.com/d103bf09c28772a149293ed0793773cb/41b67c40a1882a50-61/s540x810/a5dd63dfb8185d8264b56bb66e69aff23ba67b99.gif');
  46.  
  47. /*role images*/
  48. --r1: url('link');
  49. --r2: url('link');
  50. --r3: url('link');
  51.  
  52.  
  53. height:auto; width:100%; padding:0; overflow-x:auto; overflow-y:hidden; margin:15px 0 20px 0; line-height:0;][border=transparent; height:450px; width:100%; min-width:330px; max-width:670px; padding:0; margin:auto; position:relative; background: var(--bg); background-size:cover; background-position:50% 100%; --b: clamp(10px, -40px + 8vw, 21px);][border=transparent; height:calc(100% + 0.5px); width:100%; padding:0; overflow:hidden; display:flex; flex-flow:column nowrap; position:relative; top:0; z-index:2;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; --s:clamp(0px, -30px + 7vw, 8px);][border=transparent; height:auto; width:calc(50% + var(--s)); padding:0;]
  54.  
  55. [comment]----title page----[/comment]
  56. [border=transparent; height:calc(450px - var(--b) - 90px); width:100%; padding:0; border:var(--b) solid var(--color-1); border-bottom:0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  57.  
  58. [comment]----top----[/comment]
  59. [border=transparent; flex:1; padding:15px; box-sizing:border-box; border:2px solid var(--color-4); display:flex; flex-flow:column nowrap; align-items:flex-end;][border=transparent; height:30px; width:30px; padding:2px 0 0 0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px var(--color-2); background: var(--color-1); color: var(--color-5); font-size:18px;][fa]far fa-long-arrow-down[/fa][/border][border=transparent; height:fit-content; width:auto; padding:7px 8px 5px 8px; box-sizing:border-box; background: var(--color-1); color: var(--h1); font-family: var(--subheader); letter-spacing:1.5px; text-transform:uppercase; font-size:9px; line-height:100%; font-weight:bold; margin:auto 0 0 auto; box-shadow:3px 3px var(--color-2);][comment]
  60.  
  61. ----* * * roleplay owner----
  62.  
  63. [/comment]a roleplay by user[/border][/border]
  64. [/border]
  65. [comment]----title page end----[/comment]
  66.  
  67. [comment]----content page----[/comment]
  68. [border=transparent; --h: clamp(465px, 51vw, 471px); height:calc(var(--h) - var(--b)); max-height:calc(var(--h) - var(--b)); width:100%; padding:0; border:var(--b) solid var(--color-1); border-top:0; box-sizing:border-box; scroll-snap-align:start; display:flex; flex-flow:column nowrap;]
  69.  
  70. [comment]----header----[/comment]
  71. [border=transparent; height:auto; min-height:90px; width:100%; padding:clamp(8px, -30px + 7vw, 13px) 5px 20px 5px; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:row nowrap; align-items:center; flex-shrink:0;]
  72. [comment]----title text----[/comment]
  73. [border=transparent; height:auto; width:auto; padding:2px 0 0 0; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  74. [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(30px, -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]
  75.  
  76. ----* * * title here----
  77.  
  78. [/comment]after school[/border][comment]
  79. [/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]
  80.  
  81. ----* * * last character of title here----
  82.  
  83. [/comment]![comment]
  84.  
  85. [/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]
  86. [/border]
  87. [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]
  88.  
  89. ----* * * subtitle here----
  90.  
  91. [/comment]i'm so good with you ♡[/border][/border]
  92. [/border]
  93. [comment]----title text end----[/comment]
  94.  
  95. [comment]----links container----[/comment]
  96. [border=transparent; height:100%; flex:1 0; min-width:clamp(75px, -20px + 20vw, 190px); padding:14px 0 5px 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-end; align-content:flex-end; margin-left:15px;][border=transparent; flex:1; padding:0;][/border]
  97.  
  98. [comment]----link box (replace xx with link)----[/comment]
  99. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  100. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  101.  
  102. ----* * * link icon here----
  103.  
  104. [/comment][fa]fas fa-star[/fa][/border]
  105. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  106.  
  107. ----* * * link title here----
  108.  
  109. [/comment]main[/border]
  110. [/border][/url]
  111. [comment]----link box end----[/comment]
  112. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  113.  
  114. [comment]----link box (replace xx with link)----[/comment]
  115. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  116. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  117.  
  118. ----* * * link icon here----
  119.  
  120. [/comment][fa]fas fa-users[/fa][/border]
  121. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  122.  
  123. ----* * * link title here----
  124.  
  125. [/comment]cs[/border]
  126. [/border][/url]
  127. [comment]----link box end----[/comment]
  128. [border=transparent; height:0; width:clamp(5px, -30px + 9vw, 40px); padding:0; flex-shrink:0;][/border]
  129.  
  130. [comment]----link box (replace xx with link)----[/comment]
  131. [url='xx'][border=transparent; height:clamp(30px, -50px + 10vw, 50px); padding:0; width:auto; min-width:25px; max-width:40px; display:flex; flex-flow:column nowrap; align-items:center; overflow:hidden; color: var(--color-4);]
  132. [border=transparent; height:auto; width:auto; padding:0 3px; box-sizing:border-box; font-size:clamp(20px, -30px + 8vw, 23px); line-height:100%;][comment]
  133.  
  134. ----* * * link icon here----
  135.  
  136. [/comment][fa]fas fa-comment-dots[/fa][/border]
  137. [border=transparent; height:auto; width:auto; padding:0; font-family: var(--subheader); text-transform:uppercase; font-size:10px; line-height:100%; margin-top:12px; letter-spacing:1px; text-decoration:underline var(--color-1); font-weight:bold;][comment]
  138.  
  139. ----* * * link title here----
  140.  
  141. [/comment]ooc[/border]
  142. [/border][/url]
  143. [comment]----link box end----[/comment]
  144. [border=transparent; height:0; width:5px; padding:0; flex-shrink:0;][/border]
  145. [/border]
  146. [comment]----links container end----[/comment]
  147. [/border]
  148. [comment]----header end----[/comment]
  149.  
  150. [comment]----content container----[/comment]
  151. [border=transparent; flex:1; width:100%; padding:0 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; background: var(--color-1);]
  152. [comment]----left----[/comment]
  153. [border=transparent; flex:39; min-height:180px; min-width:170px; padding:0; display:flex; flex-flow:column nowrap;]
  154.  
  155. [comment]----image----[/comment]
  156. [border=transparent; flex:1; width:100%; padding:0; background: var(--img-1); border:2px solid var(--color-4); box-sizing:border-box; background-size:cover; position:relative;
  157.  
  158. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  159.  
  160. display:flex; align-items:flex-end;][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]
  161. [comment]----scroll container----[/comment]
  162. [border=transparent; height:125px; width:100%; padding:10px 0; box-sizing:border-box; position:relative; z-index:2; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:100%; width:50%; padding:0 2px 0 10px; box-sizing:border-box; display:flex; align-items:flex-end;][border=transparent; height:15px; width:15px; padding:1px 0 0 0; box-sizing:border-box; background: var(--bg-color); color: var(--color-2); font-size:9px; display:flex; align-items:center; justify-content:center;][fa]fas fa-long-arrow-down[/fa][/border][/border][border=transparent; height:auto; width:50%; padding:0 2px 0 10px; box-sizing:border-box; margin-top:25px;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-10px;][/border]
  163.  
  164. [comment]----copy this whole thing to make another notif----[/comment]
  165. [border=transparent; height:auto; width:100%; padding:8px 10px 10px 10px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;]
  166. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin-right:14px; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  167.  
  168. ----* * * notif icon here----
  169.  
  170. [/comment][fa]far fa-heart[/fa][/border]
  171. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  172. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  173.  
  174. ----* * * notif title here----
  175.  
  176. [/comment]gms[/border]
  177. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:100%; margin-top:4px;][comment]
  178.  
  179. ----* * * notif contents here----
  180.  
  181. [/comment]user one, user two[/border]
  182. [/border]
  183. [/border][/border]
  184. [comment]----copy me too!----[/comment]
  185.  
  186. [comment]----copy this whole thing to make another notif----[/comment]
  187. [border=transparent; height:auto; width:100%; padding:8px 12px 10px 12px; box-sizing:border-box; position:relative; border-radius:5px; overflow:hidden; margin-top:8px;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-5); opacity:0.95; position:absolute; top:0; left:0;][/border][border=transparent; height:100%; width:100%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;]
  188. [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-size:20px; flex-shrink:0; margin-right:14px; text-shadow:1px 1px var(--color-2), 2px 2px var(--color-3);][comment]
  189.  
  190. ----* * * notif icon here----
  191.  
  192. [/comment][fa]far fa-tag[/fa][/border]
  193. [border=transparent; height:auto; flex:1; padding:0; display:flex; flex-flow:column nowrap;]
  194. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:4px 4px 2px 4px; background: var(--color-2); font-family: var(--subheader); font-weight:bold; text-transform:uppercase; letter-spacing:1.5px; font-size:8.5px; line-height:100%; color:var(--h1); opacity:0.9;][comment]
  195.  
  196. ----* * * notif title here----
  197.  
  198. [/comment]tags[/border]
  199. [border=transparent; height:auto; width:auto; padding:0 1px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); font-size:10.5px; line-height:100%; margin-top:4px;][comment]
  200.  
  201. ----* * * notif contents here----
  202.  
  203. [/comment]tag one, tag two[/border]
  204. [/border]
  205. [/border][/border]
  206. [comment]----copy me too!----[/comment]
  207.  
  208. [/border][/border][/border]
  209. [/border]
  210. [comment]----image end----[/comment]
  211.  
  212. [comment]----music player----[/comment]
  213. [border=transparent; height:55px; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:15px; flex-shrink:0;]
  214. [comment]----music title----[/comment]
  215. [border=transparent; height:auto; width:100%; padding:0; color: var(--color-4); font-family: var(--subheader); text-transform:uppercase; font-weight:bold; letter-spacing:1px; font-size:16px; line-height:100%; -webkit-text-stroke:0.5px var(--color-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  216.  
  217. ----* * * music title here----
  218.  
  219. [/comment]after school[/border]
  220. [comment]----music artist----[/comment]
  221. [border=transparent; height:auto; width:100%; padding:0; color: var(--color-2); font-family: var(--subheader); text-transform:uppercase; letter-spacing:0.5px; font-size:10px; line-height:100%; margin-top:5px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  222.  
  223. ----* * * music artist here----
  224.  
  225. [/comment]weeekly[/border]
  226. [border=transparent; height:auto; width:100%; padding:0; margin-top:0; display:flex; flex-flow:row nowrap; align-items:flex-end;]
  227. [border=transparent; height:4px; flex:1; padding:0; background: var(--color-5); margin-bottom:8px;][border=transparent; height:100%;
  228. /*edit this to adjust length of music bar*/ width:65%;
  229.  
  230. padding:0; background: var(--color-2);][/border][/border]
  231. [comment]----buttons----[/comment]
  232. [border=transparent; height:auto; width:auto; padding:0; flex-shrink:0; display:flex; flex-flow:row nowrap; align-items:center; margin-left:15px;]
  233. [border=transparent; height:19px; width:19px; padding:2px 3px 0 0; box-sizing:border-box; border-radius:50%; background: var(--color-5); color: var(--color-2); font-size:10px; display:flex; justify-content:center; align-items:center;][fa]fas fa-chevron-left[/fa][/border]
  234. [border=transparent; height:25px; width:25px; padding:0; border-radius:50%; margin:0 8px; position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:1px 0 0 0; box-sizing:border-box; background: var(--color-2); color: var(--color-4); font-size:10.5px; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; pointer-events:none; border-radius:50%;][fa]fas fa-play[/fa][/border]
  235. [comment]----actual media player----[/comment]
  236. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; z-index:1; opacity:0.01%;]
  237. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  238. [border=transparent; height:80px; width:180px; padding:0; margin-top:-18px; margin-left:-18px; position:absolute; top:0; left:0;]
  239. [media=soundcloud]https://soundcloud.com/dilla-fadilla-738297077/weekly-after-school[/media]
  240. [/border]
  241.  
  242. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  243. [border=transparent; height:500px; width:500px; margin-top:-175px; margin-left:-97px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  244. [media=googledrive]1wdREzHCykQn1UeMRB546l6t8o7bxGknj[/MEDIA]
  245. [/border]
  246. [/border]
  247. [comment]----actual media player end----[/comment]
  248. [/border]
  249. [border=transparent; height:19px; width:19px; padding:2px 0 0 1px; box-sizing:border-box; border-radius:50%; background: var(--color-5); color: var(--color-2); font-size:10px; display:flex; justify-content:center; align-items:center;][fa]fas fa-chevron-right[/fa][/border]
  250. [/border]
  251. [comment]----buttons end----[/comment]
  252. [/border]
  253. [/border]
  254. [comment]----music player end----[/comment]
  255. [/border]
  256. [comment]----left end----[/comment]
  257.  
  258. [comment]----right----[/comment]
  259. [border=transparent; height:clamp(310px, 600px - 65vw, 380px); flex:61; min-width:200px; padding:0; display:flex; flex-flow:row wrap; position:relative;]
  260. [comment]----tabs----[/comment]
  261. [border=transparent; height:clamp(50px, -150px + 38vw, 340px); flex:1 0 17%; min-width:40px; padding:5px 8px; box-sizing:border-box; overflow:hidden;][border=transparent; padding:0; line-height:43px; margin:0 -20px 0 clamp(-30px, -80px + 10vw, -25px); letter-spacing:-60px;][tabs]
  262.  
  263. [comment]----tab one----[/comment]
  264. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row wrap;][border=transparent; height:auto; min-height:50px; flex:1 0 17%; min-width:30px; padding:0;][/border][border=transparent; height:clamp(300px, 100%, 330px); flex:1 0 83%; min-width:300px; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  265.  
  266. [comment]----tab title----[/comment]
  267. [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]
  268.  
  269. ----* * * tab title here----
  270.  
  271. [/comment]introducing[/border]
  272. [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]
  273.  
  274. [comment]----tab contents----[/comment]
  275. [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]
  276.  
  277. ----* * * text starts here----
  278.  
  279. [/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.
  280.  
  281. 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.
  282.  
  283. [comment]----copy me to make a divider!----[/comment]
  284. [border=transparent; height:auto; width:100px; padding:0; display:flex; justify-content:center; align-items:center; margin:-22px auto -32px auto;][border=transparent; padding:0; height:0; flex:1; padding:0; border-top:2px solid var(--color-2);][/border][border=transparent; height:auto; width:auto; padding:0; margin:0 8px; color: var(--color-3); text-shadow:1px 1px var(--color-2); font-size:12px;][comment]
  285.  
  286. ----* * * divider icon here----
  287.  
  288. [/comment][fa]fas fa-star[/fa][/border][border=transparent; padding:0; height:0; flex:1; padding:0; border-top:2px solid var(--color-2);][/border][/border]
  289. [comment]----copy me too!----[/comment]
  290.  
  291. 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.
  292. [/border][/border][/border]
  293. [comment]----tab contents end----[/comment]
  294. [/border][/border][/tab]
  295. [comment]----tab one end----[/comment]
  296.  
  297.  
  298. [comment]----tab two----[/comment]
  299. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row wrap;][border=transparent; height:auto; min-height:50px; flex:1 0 17%; min-width:30px; padding:0;][/border][border=transparent; height:clamp(300px, 100%, 330px); flex:1 0 83%; min-width:300px; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  300.  
  301. [comment]----tab title----[/comment]
  302. [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]
  303.  
  304. ----* * * tab title here----
  305.  
  306. [/comment]the members[/border]
  307. [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]
  308.  
  309. [comment]----tab contents----[/comment]
  310. [border=transparent; height:98%; width:100%; padding:0; box-sizing:border-box; margin-top:20px; 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; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-18px;][/border]
  311.  
  312. [comment]----copy this whole thing to add another role----[/comment]
  313. [border=transparent; height:106px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px;]
  314. [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;
  315.  
  316. /*edit the number in rX to match the variables*/ background: var(--r1);
  317. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  318.  
  319. 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]
  320.  
  321. ----* * * role status/spots here----
  322.  
  323. [/comment]open[/border]
  324. [/border][/border][/border]
  325.  
  326. [comment]-----role info----[/comment]
  327. [border=transparent; height:106px; flex:1; padding:0; margin-left:17px; display:flex; flex-flow:column nowrap;]
  328. [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]
  329.  
  330. ----* * * role name here----
  331.  
  332. [/comment]role name[/border]
  333. [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]
  334.  
  335. ----* * * text start here----
  336.  
  337. [/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.
  338. [/border][/border][/border]
  339. [/border]
  340. [/border]
  341. [comment]----copy me too!----[/comment]
  342.  
  343. [comment]----copy this whole thing to add another role----[/comment]
  344. [border=transparent; height:106px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px;]
  345. [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;
  346.  
  347. /*edit the number in rX to match the variables*/ background: var(--r2);
  348. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  349.  
  350. 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]
  351.  
  352. ----* * * role status/spots here----
  353.  
  354. [/comment]open[/border]
  355. [/border][/border][/border]
  356.  
  357. [comment]-----role info----[/comment]
  358. [border=transparent; height:106px; flex:1; padding:0; margin-left:17px; display:flex; flex-flow:column nowrap;]
  359. [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]
  360.  
  361. ----* * * role name here----
  362.  
  363. [/comment]role name[/border]
  364. [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]
  365.  
  366. ----* * * text start here----
  367.  
  368. [/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.
  369. [/border][/border][/border]
  370. [/border]
  371. [/border]
  372. [comment]----copy me too!----[/comment]
  373.  
  374. [comment]----copy this whole thing to add another role----[/comment]
  375. [border=transparent; height:106px; width:100%; padding:0; display:flex; flex-flow:row nowrap; margin-top:18px;]
  376. [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;
  377.  
  378. /*edit the number in rX to match the variables*/ background: var(--r3);
  379. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  380.  
  381. 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]
  382.  
  383. ----* * * role status/spots here----
  384.  
  385. [/comment]open[/border]
  386. [/border][/border][/border]
  387.  
  388. [comment]-----role info----[/comment]
  389. [border=transparent; height:106px; flex:1; padding:0; margin-left:17px; display:flex; flex-flow:column nowrap;]
  390. [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]
  391.  
  392. ----* * * role name here----
  393.  
  394. [/comment]role name[/border]
  395. [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]
  396.  
  397. ----* * * text start here----
  398.  
  399. [/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.
  400. [/border][/border][/border]
  401. [/border]
  402. [/border]
  403. [comment]----copy me too!----[/comment]
  404.  
  405. [/border][/border][/border]
  406. [comment]----tab contents end----[/comment]
  407. [/border][/border][/tab]
  408. [comment]----tab two end----[/comment]
  409.  
  410.  
  411. [comment]----tab three----[/comment]
  412. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; line-height:0; letter-spacing:0; pointer-events:none; display:flex; flex-flow:row wrap;][border=transparent; height:auto; min-height:50px; flex:1 0 17%; min-width:30px; padding:0;][/border][border=transparent; height:clamp(300px, 100%, 330px); flex:1 0 83%; min-width:300px; padding:0; box-sizing:border-box; display:flex; flex-flow:column nowrap; pointer-events:auto;]
  413.  
  414. [comment]----tab title----[/comment]
  415. [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]
  416.  
  417. ----* * * tab title here----
  418.  
  419. [/comment]listen closely[/border]
  420. [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]
  421.  
  422. [comment]----tab contents----[/comment]
  423. [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 4px 0 12px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-12px;][/border]
  424.  
  425. [comment]----copy this whole thing to add another rule----[/comment]
  426. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  427. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:1px 5px 5px 5px; background: var(--color-2); color: var(--h1); font-weight:bold; -webkit-text-stroke:0.3px var(--h1); font-family: var(--header); letter-spacing:1px; font-size:18px; line-height:16px; word-spacing:3px; text-transform:lowercase; text-shadow:1.5px 1.5px var(--color-3);][comment]
  428.  
  429. ----* * * rule title here----
  430.  
  431. [/comment]rule one![/border]
  432.  
  433. [border=transparent; height:auto; width:100%; padding:0; margin-top:8px; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  434.  
  435. ----* * * text starts here----
  436.  
  437. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dolor est. Fusce venenatis metus eu leo efficitur, vitae consequat arcu venenatis. Praesent magna sem, efficitur quis magna eu, congue eleifend nisl.
  438. [/border]
  439. [/border]
  440. [comment]----copy me too!----[/comment]
  441.  
  442. [comment]----copy this whole thing to add another rule----[/comment]
  443. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  444. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:1px 5px 5px 5px; background: var(--color-2); color: var(--h1); font-weight:bold; -webkit-text-stroke:0.3px var(--h1); font-family: var(--header); letter-spacing:1px; font-size:18px; line-height:16px; word-spacing:3px; text-transform:lowercase; text-shadow:1.5px 1.5px var(--color-3);][comment]
  445.  
  446. ----* * * rule title here----
  447.  
  448. [/comment]rule two![/border]
  449.  
  450. [border=transparent; height:auto; width:100%; padding:0; margin-top:8px; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  451.  
  452. ----* * * text starts here----
  453.  
  454. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dolor est. Fusce venenatis metus eu leo efficitur, vitae consequat arcu venenatis. Praesent magna sem, efficitur quis magna eu, congue eleifend nisl.
  455. [/border]
  456. [/border]
  457. [comment]----copy me too!----[/comment]
  458.  
  459. [comment]----copy this whole thing to add another rule----[/comment]
  460. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:column nowrap; margin-top:12px;]
  461. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:1px 5px 5px 5px; background: var(--color-2); color: var(--h1); font-weight:bold; -webkit-text-stroke:0.3px var(--h1); font-family: var(--header); letter-spacing:1px; font-size:18px; line-height:16px; word-spacing:3px; text-transform:lowercase; text-shadow:1.5px 1.5px var(--color-3);][comment]
  462.  
  463. ----* * * rule title here----
  464.  
  465. [/comment]rule three![/border]
  466.  
  467. [border=transparent; height:auto; width:100%; padding:0; margin-top:8px; color: var(--t-color); font-size:11px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  468.  
  469. ----* * * text starts here----
  470.  
  471. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dolor est. Fusce venenatis metus eu leo efficitur, vitae consequat arcu venenatis. Praesent magna sem, efficitur quis magna eu, congue eleifend nisl.
  472. [/border]
  473. [/border]
  474. [comment]----copy me too!----[/comment]
  475.  
  476. [/border][/border][/border]
  477. [comment]----tab contents end----[/comment]
  478. [/border][/border][/tab]
  479. [comment]----tab three end----[/comment]
  480.  
  481.  
  482. [/tabs][/border][/border]
  483. [comment]----tabs end----[/comment]
  484.  
  485. [comment]----filler----[/comment]
  486. [border=transparent; height:clamp(310px, 100%, 330px); flex:1 0 83%; min-width:300px; padding:0; background: var(--color-1);][/border]
  487.  
  488. [comment]----sidebar----[/comment]
  489. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; pointer-events:none; display:flex; flex-flow:row wrap;]
  490. [comment]----button container----[/comment]
  491. [border=transparent; height:auto; min-height:50px; flex:1 0 17%; min-width:40px; padding:2px 5px; box-sizing:border-box; display:flex; flex-flow:row wrap; align-content:flex-start; align-items:center; justify-content:center; --m: clamp(5px, 50px - 7vw, 12px); background: var(--color-1);]
  492. [comment]----button----[/comment]
  493. [border=transparent; height:28px; width:28px; padding:0 0 7px 1px; box-sizing:border-box; border-radius:50%; background: var(--b1); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 8px) var(--m);][border=transparent; padding:0; transform:rotate(12deg);]a[/border][/border]
  494. [comment]----button----[/comment]
  495. [border=transparent; height:28px; width:28px; padding:0 0 3px 2px; box-sizing:border-box; border-radius:50%; background: var(--b2); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 10px) var(--m);][border=transparent; padding:0; transform:rotate(-6deg);]b[/border][/border]
  496. [comment]----button----[/comment]
  497. [border=transparent; height:28px; width:28px; padding:0 0 6px 0; box-sizing:border-box; border-radius:50%; background: var(--b3); box-shadow:2px 2px var(--color-2); color: var(--color-4); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; font-family: var(--header); margin:clamp(5px, -30px + 6vw, 10px) var(--m);][border=transparent; padding:0; transform:rotate(8deg);]c[/border][/border]
  498.  
  499. [border=transparent; height:clamp(3px, -90px + 17vw, 150px); flex:1; min-width:3px; max-width:calc(100% - 65px); padding:0; background: var(--color-2); margin:clamp(5px, -30px + 6vw, 15px) 8px 0 8px;][/border]
  500.  
  501. [/border]
  502. [border=transparent; height:clamp(310px, 100%, 330px); flex:1 0 83%; min-width:300px; padding:0;][/border]
  503. [/border]
  504. [comment]----sidebar end----[/comment]
  505. [/border]
  506. [comment]----right end----[/comment]
  507. [/border]
  508. [comment]----content container end----[/comment]
  509.  
  510. [/border]
  511. [comment]----content page end----[/comment]
  512. [/border][/border][/border]
  513.  
  514. [comment]----background stuff----[/comment]
  515. [border=transparent; height:100%; width:100%; padding:0; border:var(--b) solid var(--color-1); border-right:calc(var(--b) - var(--s)) solid var(--color-1); box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; pointer-events:none;][/border][border=transparent; height:100%; width:100%; padding: var(--b); box-sizing:border-box;position:absolute; top:0; left:0; z-index:1; pointer-events:none;][border=transparent; height:100%; width:100%; padding:0; border-top:2px solid var(--color-4); box-sizing:border-box;][/border][/border][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); opacity:0.15; position:absolute; top:0; left:0; z-index:1; pointer-events:none;][/border]
  516.  
  517. [comment]
  518. ----signature! do not remove
  519. [/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:clamp(10px, -30px + 6vw, 15px); right:15px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border][/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!