API tools faq
paste
Advertisement
ooksie

curious cat (uxie x nerdy tangents)

ooksie
Jan 20th, 2021 (edited)
291
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.35 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Euphoria Script]title[/font]
  5. [font=Allura]header[/font]
  6. [font=Barlow]body[/font]
  7.  
  8. 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 ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11. *background colour;
  12. --bg-color: #E2E1E0;
  13. *main textbox colour;
  14. --color-1: #BDA495;
  15.  
  16. *title text colour;
  17. --h1: #8F481D;
  18. *headers text colour;
  19. --h2: #4D322C;
  20. *subtitle + body text colour;
  21. --t-color: #62483e;
  22.  
  23. *fonts;
  24. --title: 'Euphoria Script', display;
  25. --header: 'Allura', display;
  26. --body: 'Barlow', sans-serif;
  27.  
  28. *cover page cat (170px x 170px);
  29. --img-1: url('https://i.imgur.com/eJwpgnq.png');
  30. *lazy tabs header cat (85px x 190px);
  31. --img-2: url('https://i.imgur.com/U1JVFFy.png');
  32.  
  33. *main button images (keep them 1:1 in aspect ratio!);
  34. --button: url('https://i.imgur.com/fT8d9in.png');
  35. *selected button;
  36. --sbutton: url('https://i.imgur.com/QYgwQgw.png');
  37.  
  38. height:470px; width:100%; max-width:430px; padding:0; padding-bottom:20px; position:relative; line-height:0; margin:auto;][border=transparent; height:470px; width:100%; max-width:430px; padding:20px 0; box-sizing:border-box; background:var(--bg-color); position:relative; display:flex; justify-content:center;]
  39.  
  40. [comment]----cover page (tabs cover)----[/comment]
  41. [border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  42.  
  43. [comment]----image----[/comment]
  44. [border=transparent; height:170px; width:170px; padding:0; background: var(--img-1); position:relative; background-size:cover; margin-top:-85px; background-repeat:no-repeat;
  45. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;]
  46. [comment]----button----[/comment]
  47. [border=transparent; height:45px; width:45px; padding:0; background: var(--button); position:absolute; top:20px; right:-31px; background-size:cover;
  48. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  49. [/border]
  50. [comment]----image end----[/comment]
  51.  
  52. [comment]----title----[/comment]
  53. [border=transparent; height:fit-content; width:100%; padding:0 10px; box-sizing:border-box; margin:20px 0 10px 0; color: var(--h1); font-size:50px; font-family: var(--title); text-align:center; line-height:100%; pointer-events:auto;][comment]
  54. ----* * * title here----
  55. [/comment]A Search[/border]
  56.  
  57. [comment]----subtitle----[/comment]
  58. [border=transparent; height:fit-content; width:100%; padding:0 10px; box-sizing:border-box; color: var(--t-color); font-size:16px; font-family: var(--body); text-align:center; line-height:13px; letter-spacing:1px; pointer-events:auto;][comment]
  59. ----* * * subtitle here (leave blank if you don't want anything!)----
  60. [/comment]subtitle subtitle.[/border]
  61.  
  62. [/border]
  63. [comment]----cover page end----[/comment]
  64.  
  65. [comment]----tabs pt. 1 (cover page -> main content)----[/comment]
  66. [border=transparent; height:30px; width:45px; padding:0; overflow:hidden; margin:70px 0 0 190px;][border=transparent; padding:0; margin:-25px 0 0 -50px;][tabs]
  67. [tab=.]filler tab, ignore![/tab]
  68.  
  69. [comment]----main content container----[/comment]
  70. [tab=contents][border=transparent; height:100%; width:100%; padding:75px 15px 20px 15px; box-sizing:border-box; background: var(--bg-color); position:absolute; top:0; left:0; z-index:2; display:flex; justify-content:center;]
  71.  
  72. [comment]----content area----[/comment]
  73. [border=transparent; height:100%; width:100%; max-width:360px; padding:20px 10px; box-sizing:border-box; background: var(--color-1); border-radius:10px; position:relative; display:flex; justify-content:center; align-items:flex-end;]
  74. [comment]----image----[/comment]
  75. [border=transparent; height:85px; width:190px; padding:0; position:absolute; top:-65px; right:0; z-index:5; background: var(--img-2); background-size:cover; background-repeat:no-repeat; /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  76.  
  77. [comment]----tabs cover----[/comment]
  78. [border=transparent; height:50px; width:100%; padding:0 0 15px 0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; position:absolute; bottom:0; right:0; z-index:1; background: var(--color-1); border-radius:0 0 10px 10px; pointer-events:none;]
  79. [comment]----button----[/comment]
  80. [border=transparent; height:48px; width:48px; padding:0; background: var(--button); background-size:cover; margin:0 10px;
  81. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  82. [comment]----button----[/comment]
  83. [border=transparent; height:48px; width:48px; padding:0; background: var(--button); background-size:cover; margin:0 10px;
  84. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  85. [comment]----button----[/comment]
  86. [border=transparent; height:48px; width:48px; padding:0; background: var(--button); background-size:cover; margin:0 10px;
  87. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  88. [comment]----button----[/comment]
  89. [border=transparent; height:48px; width:48px; padding:0; background: var(--button); background-size:cover; margin:0 10px;
  90. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  91. [/border]
  92.  
  93. [comment]----tabs----[/comment]
  94. [border=transparent; height:30px; width:300px; padding:0; overflow:hidden;][border=transparent; padding:0;][tabs]
  95.  
  96. [comment]----tab one----[/comment]
  97. [tab=a.][border=transparent; height:calc(100% - 60px); width:100%; padding:15px 0; box-sizing:border-box; background: var(--color-1); border-radius:10px; overflow:hidden; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  98.  
  99. [comment]----copy this whole thing to make a new section----[/comment]
  100. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  101. [comment]----section header----[/comment]
  102. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  103. ----* * * header here----
  104. [/comment]about me[/border]
  105.  
  106. [comment]----section contents----[/comment]
  107. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  108. ----* * * section contents here-----
  109. [/comment]• this is a simple bullet point.
  110. • this is a simple bullet point.[/border]
  111. [/border]
  112. [comment]----copy me too!----[/comment]
  113.  
  114. [comment]----copy this whole thing to make a new section----[/comment]
  115. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  116. [comment]----section header----[/comment]
  117. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  118. ----* * * header here----
  119. [/comment]deal breakers[/border]
  120.  
  121. [comment]----section contents----[/comment]
  122. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  123. ----* * * section contents here-----
  124. [/comment]• this is a simple bullet point.
  125. • this is a simple bullet point.[/border]
  126. [/border]
  127. [comment]----copy me too!----[/comment]
  128.  
  129. [/border][/border][/border]
  130. [comment]----tab contents end----[/comment]
  131.  
  132. [comment]----button select----[/comment]
  133. [border=transparent; height:50px; width:100%; padding:0 0 15px 0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; position:absolute; bottom:0; right:0; z-index:1; border-radius:0 0 10px 10px; pointer-events:none;]
  134. [comment]----selected button----[/comment]
  135. [border=transparent; height:48px; width:48px; padding:0; background: var(--sbutton), var(--color-1); background-size:cover; margin:0 10px; pointer-events:auto;
  136. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  137. [comment]----filler button----[/comment]
  138. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  139. [comment]----filler button----[/comment]
  140. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  141. [comment]----filler button----[/comment]
  142. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  143. [/border]
  144. [/tab]
  145. [comment]----tab one end----[/comment]
  146.  
  147. [comment]----tab two----[/comment]
  148. [tab=b.][border=transparent; height:calc(100% - 60px); width:100%; padding:15px 0; box-sizing:border-box; background: var(--color-1); border-radius:10px; overflow:hidden; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  149.  
  150. [comment]----copy this whole thing to make a new section----[/comment]
  151. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  152. [comment]----section header----[/comment]
  153. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  154. ----* * * header here----
  155. [/comment]about you[/border]
  156.  
  157. [comment]----section contents----[/comment]
  158. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  159. ----* * * section contents here-----
  160. [/comment]• this is a simple bullet point.
  161. • this is a simple bullet point.[/border]
  162. [/border]
  163. [comment]----copy me too!----[/comment]
  164.  
  165. [comment]----copy this whole thing to make a new section----[/comment]
  166. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  167. [comment]----section header----[/comment]
  168. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  169. ----* * * header here----
  170. [/comment]ghost policy[/border]
  171.  
  172. [comment]----section contents----[/comment]
  173. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  174. ----* * * section contents here-----
  175. [/comment]• this is a simple bullet point.
  176. • this is a simple bullet point.[/border]
  177. [/border]
  178. [comment]----copy me too!----[/comment]
  179.  
  180. [/border][/border][/border]
  181. [comment]----tab contents end----[/comment]
  182.  
  183. [comment]----button select----[/comment]
  184. [border=transparent; height:50px; width:100%; padding:0 0 15px 0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; position:absolute; bottom:0; right:0; z-index:1; border-radius:0 0 10px 10px; pointer-events:none;]
  185. [comment]----filler button----[/comment]
  186. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  187. [comment]----selected button----[/comment]
  188. [border=transparent; height:48px; width:48px; padding:0; background: var(--sbutton), var(--color-1); background-size:cover; margin:0 10px; pointer-events:auto;
  189. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  190. [comment]----filler button----[/comment]
  191. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  192. [comment]----filler button----[/comment]
  193. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  194. [/border]
  195. [/tab]
  196. [comment]----tab two end----[/comment]
  197.  
  198.  
  199. [comment]----tab three----[/comment]
  200. [tab=c.][border=transparent; height:calc(100% - 60px); width:100%; padding:15px 0; box-sizing:border-box; background: var(--color-1); border-radius:10px; overflow:hidden; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  201.  
  202. [comment]----copy this whole thing to make a new section----[/comment]
  203. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  204. [comment]----section header----[/comment]
  205. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  206. ----* * * header here----
  207. [/comment]fandoms[/border]
  208.  
  209. [comment]----section contents----[/comment]
  210. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  211. ----* * * section contents here-----
  212. [/comment]• this is a simple bullet point.
  213. • this is a simple bullet point.[/border]
  214. [/border]
  215. [comment]----copy me too!----[/comment]
  216.  
  217. [comment]----copy this whole thing to make a new section----[/comment]
  218. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  219. [comment]----section header----[/comment]
  220. [border=transparent; height:fit-content; width:100%; padding:5px 10px; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:center; background: var(--color-1);][comment]
  221. ----* * * header here----
  222. [/comment]originals[/border]
  223.  
  224. [comment]----section contents----[/comment]
  225. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:15px; font-family:var(--body); text-align:center; line-height:21px;][comment]
  226. ----* * * section contents here-----
  227. [/comment]• this is a simple bullet point.
  228. • this is a simple bullet point.[/border]
  229. [/border]
  230. [comment]----copy me too!----[/comment]
  231.  
  232. [/border][/border][/border]
  233. [comment]----tab contents end----[/comment]
  234.  
  235. [comment]----button select----[/comment]
  236. [border=transparent; height:50px; width:100%; padding:0 0 15px 0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; position:absolute; bottom:0; right:0; z-index:1; border-radius:0 0 10px 10px; pointer-events:none;]
  237. [comment]----filler button----[/comment]
  238. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  239. [comment]----filler button----[/comment]
  240. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  241. [comment]----selected button----[/comment]
  242. [border=transparent; height:48px; width:48px; padding:0; background: var(--sbutton), var(--color-1); background-size:cover; margin:0 10px; pointer-events:auto;
  243. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  244. [comment]----filler button----[/comment]
  245. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  246. [/border]
  247. [/tab]
  248. [comment]----tab three end----[/comment]
  249.  
  250.  
  251. [comment]----tab four----[/comment]
  252. [tab=d.][border=transparent; height:calc(100% - 60px); width:100%; padding:15px 0; box-sizing:border-box; background: var(--color-1); border-radius:10px; overflow:hidden; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; display:flex; flex-flow:column nowrap;]
  253.  
  254. [comment]----copy this whole thing to make a new section----[/comment]
  255. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  256. [comment]----section header----[/comment]
  257. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:left; background: var(--color-1);][comment]
  258. ----* * * header here----
  259. [/comment]idea name[/border]
  260.  
  261. [comment]----section contents----[/comment]
  262. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:14px; font-family:var(--body); text-align:justify; line-height:18px;][comment]
  263. ----* * * section contents here-----
  264. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies lorem sit amet massa blandit dapibus. Duis fringilla blandit elit, vel malesuada justo porttitor et. Vivamus est erat, commodo a ligula eget, tincidunt hendrerit enim. Fusce vitae finibus odio, vitae aliquam magna. Nullam ac laoreet nisl. Nam mi odio, ultricies quis leo ut, fringilla dignissim libero.[/border]
  265. [/border]
  266. [comment]----copy me too!----[/comment]
  267.  
  268. [comment]----copy this whole thing to make a new section----[/comment]
  269. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: column nowrap; margin:10px 0 10px 5px;]
  270. [comment]----section header----[/comment]
  271. [border=transparent; height:fit-content; width:100%; padding:5px 0; box-sizing:border-box; position:sticky; top:0; color: var(--h2); font-size:46px; font-family:var(--header); line-height:80%; text-align:left; background: var(--color-1);][comment]
  272. ----* * * header here----
  273. [/comment]idea name[/border]
  274.  
  275. [comment]----section contents----[/comment]
  276. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--t-color); font-size:14px; font-family:var(--body); text-align:justify; line-height:18px;][comment]
  277. ----* * * section contents here-----
  278. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies lorem sit amet massa blandit dapibus. Duis fringilla blandit elit, vel malesuada justo porttitor et. Vivamus est erat, commodo a ligula eget, tincidunt hendrerit enim. Fusce vitae finibus odio, vitae aliquam magna. Nullam ac laoreet nisl. Nam mi odio, ultricies quis leo ut, fringilla dignissim libero.[/border]
  279. [/border]
  280. [comment]----copy me too!----[/comment]
  281.  
  282. [/border][/border][/border]
  283. [comment]----tab contents end----[/comment]
  284.  
  285. [comment]----button select----[/comment]
  286. [border=transparent; height:50px; width:100%; padding:0 0 15px 0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; position:absolute; bottom:0; right:0; z-index:1; border-radius:0 0 10px 10px; pointer-events:none;]
  287. [comment]----filler button----[/comment]
  288. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  289. [comment]----filler button----[/comment]
  290. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  291. [comment]----filler button----[/comment]
  292. [border=transparent; height:48px; width:48px; padding:0; margin:0 10px;][/border]
  293. [comment]----selected button----[/comment]
  294. [border=transparent; height:48px; width:48px; padding:0; background: var(--sbutton), var(--color-1); background-size:cover; margin:0 10px; pointer-events:auto;
  295. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  296. [/border]
  297. [/tab]
  298. [comment]----tab four end----[/comment]
  299.  
  300. [/tabs][/border][/border]
  301. [/border]
  302.  
  303. [/border][/tab]
  304. [comment]----main content container----[/comment]
  305. [/tabs][/border][/border]
  306.  
  307. [/border][comment]----signature! (do not remove!)-----
  308. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; color: var(--color-1); position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.8;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by nerdy tangents, coded by uxie♡[/font][/bg][/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!