Advertisement
ooksie

curious cat (uxie x nerdy tangents)

Jan 20th, 2021 (edited)
103
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
RAW Paste Data Copied
Advertisement