API tools faq
paste
ooksie

divided

ooksie
Apr 13th, 2021 (edited)
493
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.56 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by uxie!
  2. inspired by [url='https://springdoy.tumblr.com/post/641843298621849600/theme-044-starry-night']this tumblr theme[/url]!
  3.  
  4. fonts used:
  5. [font=Heebo]headers[/font]
  6. [font=Karla]body text[/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: #F7F7F7;
  13. /*textbox colour*/
  14. --bg-color-2: #fff;
  15.  
  16. /*big block of colour, button colours*/
  17. --color-1: #9CE0E5;
  18. /*name, subheaders colour*/
  19. --color-2: #fff;
  20. /*subtitle, details colour*/
  21. --color-3: #3688a5;
  22. /*selected button colour*/
  23. --color-4: #7ec6cc;
  24.  
  25. /*dialogue colour*/
  26. --dialogue: #6bbec4;
  27. /*text colour*/
  28. --t-color: #2d3235;
  29.  
  30. /*fonts used*/
  31. --header: 'Heebo', sans-serif;
  32. --body: 'Karla', sans-serif;
  33.  
  34. /*images -- image 2 can barely be seen so you can put the same image if you want*/
  35. --img-1: url('https://cdn.discordapp.com/attachments/756414055660388362/782992835556147280/39486050_2016887448621272_3029077259471290368_n.png');
  36. --img-2: url('https://cdn.discordapp.com/attachments/807471664278929430/807471866942849065/40012647_618158455245249_2312850523235024896_n.png');
  37.  
  38. height:fit-content; min-height:410px; width:100%; max-width:650px; padding:0; background: var(--bg-color); position:relative; margin:auto; line-height:0; border-radius:1.5px; overflow:hidden;][border=transparent; height:fit-content; min-height:410px; width:100%; max-width:650px; padding:10px 5px; box-sizing:border-box; position:relative; display:flex; flex-flow: row wrap; position:relative; z-index:2;]
  39.  
  40. [comment]----left----[/comment]
  41. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  42.  
  43. [comment]----tabs----[/comment]
  44. [border=transparent; height:30px; width:219px; padding:0; overflow:hidden; margin:0 0 clamp(22px, 5vw, 35px) 0; flex:auto 0;][border=transparent; padding:0; letter-spacing:-5px; margin:1px -40px 0 -18px;][tabs]
  45.  
  46. [comment]----mood----[/comment]
  47. [tab=.][border=transparent; height:100%; width:100%; padding:10px 5px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; display:flex; flex-flow: row wrap; pointer-events:none; letter-spacing:0;]
  48. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  49.  
  50. [comment]----button select----[/comment]
  51. [border=transparent; height:32px; width:219px; padding:0 8px; box-sizing:border-box; overflow:hidden; margin:0 0 clamp(20px, 5vw, 35px) 0; flex:auto 0; display:flex; flex-flow:row nowrap; color: var(--color-1); font-size:17px; justify-content:center; align-items:center;]
  52.  
  53. [comment]----selected button----[/comment]
  54. [border=transparent; height:fit-content; width:22px; padding:1.3px 0; box-sizing:border-box; line-height:100%; flex:auto 0; background: var(--bg-color); text-align:center; color: var(--color-4);][fa]far fa-heart[/fa][/border]
  55. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  56.  
  57. [comment]----filler button----[/comment]
  58. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  59. [border=transparent; height:100%; flex:1; padding:0;][/border]
  60. [comment]----filler button----[/comment]
  61. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  62. [border=transparent; height:100%; flex:1; padding:0;][/border]
  63. [comment]----filler button----[/comment]
  64. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  65.  
  66. [/border]
  67. [comment]----button select end----[/comment]
  68.  
  69. [comment]----filler things. ignore----[/comment]
  70. [border=transparent; width:clamp(180px, 70%, 220px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;][/border][/border]
  71. [border=transparent; height:21%; width:100%; padding:0; margin:35px 0 0 0;][/border]
  72. [/border]
  73.  
  74. [comment]----tab contents----[/comment]
  75. [border=transparent; height:410px; flex:60; min-width:250px; padding:0 5px; box-sizing:border-box; display:flex; align-items:flex-end; margin:10px;][border=transparent; height:calc(17% - 12px); width:100%; padding:0; display:flex; flex-flow: column nowrap; justify-content:center; align-items:flex-end; pointer-events:auto;]
  76. [comment]----title----[/comment]
  77. [border=transparent; height:fit-content; width:100%; padding:0 5px; box-sizing:border-box; line-height:100%; color: var(--color-2); font-weight:bold; letter-spacing:1px; font-size:19px; font-style:oblique; font-family: var(--header); flex:auto 0;][comment]
  78.  
  79. ----* * * tab title here---
  80.  
  81. [/comment]how she's feeling...[/border]
  82.  
  83. [comment]----contents----[/comment]
  84. [border=transparent; height:fit-content; width:100%; max-width:95%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--color-3); font-size:12px; text-align:right; font-size:12px; line-height:16px; font-family: var(--body);][comment]
  85.  
  86. ----* * * text here----
  87.  
  88. [/comment]maybe a little flustered, more than a little flabbergasted.
  89. [/border][/border][/border]
  90.  
  91. [/border][/border]
  92. [comment]----tab contents end----[/comment]
  93. [/border][/tab]
  94. [comment]----mood end----[/comment]
  95.  
  96.  
  97. [comment]----outfit----[/comment]
  98. [tab=.][border=transparent; height:100%; width:100%; padding:10px 5px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; display:flex; flex-flow: row wrap; pointer-events:none; letter-spacing:0;]
  99. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  100.  
  101. [comment]----button select----[/comment]
  102. [border=transparent; height:32px; width:219px; padding:0 8px; box-sizing:border-box; overflow:hidden; margin:0 0 clamp(20px, 5vw, 35px) 0; flex:auto 0; display:flex; flex-flow:row nowrap; color: var(--color-1); font-size:17px; justify-content:center; align-items:center; ]
  103.  
  104. [comment]----filler button----[/comment]
  105. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  106. [border=transparent; height:100%; flex:1; padding:0;][/border]
  107.  
  108. [comment]----selected button----[/comment]
  109. [border=transparent; height:fit-content; width:22px; padding:1.3px 0; box-sizing:border-box; line-height:100%; flex:auto 0; background: var(--bg-color); text-align:center; color: var(--color-4);][fa]far fa-tshirt[/fa][/border]
  110. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  111.  
  112. [comment]----filler button----[/comment]
  113. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  114. [border=transparent; height:100%; flex:1; padding:0;][/border]
  115. [comment]----filler button----[/comment]
  116. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  117.  
  118. [/border]
  119. [comment]----button select end----[/comment]
  120.  
  121. [comment]----filler things. ignore----[/comment]
  122. [border=transparent; width:clamp(180px, 70%, 220px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;][/border][/border]
  123. [border=transparent; height:21%; width:100%; padding:0; margin:35px 0 0 0;][/border]
  124. [/border]
  125.  
  126. [comment]----tab contents----[/comment]
  127. [border=transparent; height:410px; flex:60; min-width:250px; padding:0 5px; box-sizing:border-box; display:flex; align-items:flex-end; margin:10px;][border=transparent; height:calc(17% - 12px); width:100%; padding:0; display:flex; flex-flow: column nowrap; justify-content:center; align-items:flex-end; pointer-events:auto;]
  128. [comment]----title----[/comment]
  129. [border=transparent; height:fit-content; width:100%; padding:0 5px; box-sizing:border-box; line-height:100%; color: var(--color-2); font-weight:bold; letter-spacing:1px; font-size:19px; font-style:oblique; font-family: var(--header); flex:auto 0;][comment]
  130.  
  131. ----* * * tab title here---
  132.  
  133. [/comment]what she's wearing...[/border]
  134.  
  135. [comment]----contents----[/comment]
  136. [border=transparent; height:fit-content; width:100%; max-width:95%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--color-3); text-align:right; font-size:12px; font-family: var(--body);][comment]
  137.  
  138. ----* * * outfit link----
  139.  
  140. [/comment][url='https://i.pinimg.com/originals/dc/c0/f2/dcc0f2257fc2d3003a1013d7d47970dd.jpg'][comment]
  141.  
  142. [/comment][border=0; padding:0; color: var(--color-3); line-height:16px;][comment]
  143.  
  144. ----* * * outfit description----
  145.  
  146. [/comment]sweatshirt and jeans combo[/border][/url]
  147. [/border][/border][/border]
  148.  
  149. [/border][/border]
  150. [comment]----tab contents end----[/comment]
  151. [/border][/tab]
  152. [comment]----outfit end----[/comment]
  153.  
  154.  
  155. [comment]----location----[/comment]
  156. [tab=.][border=transparent; height:100%; width:100%; padding:10px 5px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; display:flex; flex-flow: row wrap; pointer-events:none; letter-spacing:0;]
  157. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  158.  
  159. [comment]----button select----[/comment]
  160. [border=transparent; height:32px; width:219px; padding:0 8px; box-sizing:border-box; overflow:hidden; margin:0 0 clamp(20px, 5vw, 35px) 0; flex:auto 0; display:flex; flex-flow:row nowrap; color: var(--color-1); font-size:17px; justify-content:center; align-items:center; ]
  161.  
  162. [comment]----filler button----[/comment]
  163. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  164. [border=transparent; height:100%; flex:1; padding:0;][/border]
  165. [comment]----filler button----[/comment]
  166. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  167. [border=transparent; height:100%; flex:1; padding:0;][/border]
  168.  
  169. [comment]----selected button----[/comment]
  170. [border=transparent; height:fit-content; width:22px; padding:1.3px 0; box-sizing:border-box; line-height:100%; flex:auto 0; background: var(--bg-color); text-align:center; color: var(--color-4);][fa]far fa-map-marker-alt[/fa][/border]
  171. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  172.  
  173. [comment]----filler button----[/comment]
  174. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  175.  
  176. [/border]
  177. [comment]----button select end----[/comment]
  178.  
  179. [comment]----filler things. ignore----[/comment]
  180. [border=transparent; width:clamp(180px, 70%, 220px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;][/border][/border]
  181. [border=transparent; height:21%; width:100%; padding:0; margin:35px 0 0 0;][/border]
  182. [/border]
  183.  
  184. [comment]----tab contents----[/comment]
  185. [border=transparent; height:410px; flex:60; min-width:250px; padding:0 5px; box-sizing:border-box; display:flex; align-items:flex-end; margin:10px;][border=transparent; height:calc(17% - 12px); width:100%; padding:0; display:flex; flex-flow: column nowrap; justify-content:center; align-items:flex-end; pointer-events:auto;]
  186. [comment]----title----[/comment]
  187. [border=transparent; height:fit-content; width:100%; padding:0 5px; box-sizing:border-box; line-height:100%; color: var(--color-2); font-weight:bold; letter-spacing:1px; font-size:19px; font-style:oblique; font-family: var(--header); flex:auto 0;][comment]
  188.  
  189. ----* * * tab title here---
  190.  
  191. [/comment]where she's at...[/border]
  192.  
  193. [comment]----contents----[/comment]
  194. [border=transparent; height:fit-content; width:100%; max-width:95%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--color-3); font-size:12px; text-align:right; font-size:12px; line-height:16px; font-family: var(--body);][comment]
  195.  
  196. ----* * * text here----
  197.  
  198. [/comment]some location here
  199. [/border][/border][/border]
  200.  
  201. [/border][/border]
  202. [comment]----tab contents end----[/comment]
  203. [/border][/tab]
  204. [comment]----location end----[/comment]
  205.  
  206.  
  207. [comment]----mentions----[/comment]
  208. [tab=.][border=transparent; height:100%; width:100%; padding:10px 5px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; display:flex; flex-flow: row wrap; pointer-events:none; letter-spacing:0;]
  209. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  210.  
  211. [comment]----button select----[/comment]
  212. [border=transparent; height:32px; width:219px; padding:0 8px; box-sizing:border-box; overflow:hidden; margin:0 0 clamp(20px, 5vw, 35px) 0; flex:auto 0; display:flex; flex-flow:row nowrap; color: var(--color-1); font-size:17px; justify-content:center; align-items:center; ]
  213.  
  214. [comment]----filler button----[/comment]
  215. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  216. [border=transparent; height:100%; flex:1; padding:0;][/border]
  217. [comment]----filler button----[/comment]
  218. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  219. [border=transparent; height:100%; flex:1; padding:0;][/border]
  220. [comment]----filler button----[/comment]
  221. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0;][/border]
  222. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  223.  
  224. [comment]----selected button----[/comment]
  225. [border=transparent; height:fit-content; width:22px; padding:1.3px 0; box-sizing:border-box; line-height:100%; flex:auto 0; background: var(--bg-color); text-align:center; color: var(--color-4);][fa]far fa-comment-exclamation[/fa][/border]
  226.  
  227. [/border]
  228. [comment]----button select end----[/comment]
  229.  
  230. [comment]----filler things. ignore----[/comment]
  231. [border=transparent; width:clamp(180px, 70%, 220px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;][/border][/border]
  232. [border=transparent; height:21%; width:100%; padding:0; margin:35px 0 0 0;][/border]
  233. [/border]
  234.  
  235. [comment]----tab contents----[/comment]
  236. [border=transparent; height:410px; flex:60; min-width:250px; padding:0 5px; box-sizing:border-box; display:flex; align-items:flex-end; margin:10px;][border=transparent; height:calc(17% - 12px); width:100%; padding:0; display:flex; flex-flow: column nowrap; justify-content:center; align-items:flex-end; pointer-events:auto;]
  237. [comment]----title----[/comment]
  238. [border=transparent; height:fit-content; width:100%; padding:0 5px; box-sizing:border-box; line-height:100%; color: var(--color-2); font-weight:bold; letter-spacing:1px; font-size:19px; font-style:oblique; font-family: var(--header); flex:auto 0;][comment]
  239.  
  240. ----* * * tab title here---
  241.  
  242. [/comment]in the conversation...[/border]
  243.  
  244. [comment]----contents----[/comment]
  245. [border=transparent; height:fit-content; width:100%; max-width:95%; padding:0; overflow:hidden; display:flex; flex-direction:column; margin-top:8px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 5px; box-sizing:border-box; color: var(--color-3); font-size:12px; text-align:right; font-size:12px; line-height:16px; font-family: var(--body);][comment]
  246.  
  247. ----* * * text here----
  248.  
  249. [/comment]@ uxie @ uxie
  250. [/border][/border][/border]
  251.  
  252. [/border][/border]
  253. [comment]----tab contents end----[/comment]
  254. [/border][/tab]
  255. [comment]----mentions end----[/comment]
  256. [/tabs][/border][/border]
  257. [comment]----tabs end----[/comment]
  258.  
  259. [comment]----images----[/comment]
  260. [border=transparent; width:clamp(180px, 70%, 210px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;]
  261. [border=transparent; height:calc(100% - 15px); width:calc(100% - 20px); padding:0; border-radius:2px; background: var(--img-1); background-size:cover; box-shadow:4px 4px var(--color-2); position:absolute; top:0; left:0; z-index:2;
  262. background-position:50% 50%;][/border]
  263. [border=transparent; height:calc(100% - 20px); width:calc(100% - 25px); padding:0; border-radius:2px; position:absolute; bottom:0; right:0; z-index:1; background: var(--img-2); background-size:cover;
  264. background-position:50% 50%;][/border]
  265. [/border][/border]
  266.  
  267. [comment]----name container----[/comment]
  268. [border=transparent; height:21%; width:100%; max-width:250px; padding:0; margin:35px 0 0 0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center;]
  269.  
  270. [comment]----given name----[/comment]
  271. [border=transparent; height:fit-content; max-height:74px; width:fit-content; max-width:95%; overflow:hidden; padding:0; box-sizing:border-box; color: var(--color-2); -webkit-text-stroke:1px var(--color-2); letter-spacing:3px; font-family: var(--header); font-size:40px; line-height:38px; text-transform:uppercase; font-weight:bold; text-align:center; margin:0 0 4px 0;][comment]
  272.  
  273. ----* * * first name here---
  274.  
  275. [/comment]jiyoung[/border]
  276.  
  277. [comment]----role----[/comment]
  278. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-3); font-size:12px; text-transform:uppercase; font-family: var(--body); line-height:16px; letter-spacing:1px;][comment]
  279.  
  280. ----* * * role here----
  281.  
  282. [/comment]the playwright[/border]
  283.  
  284. [/border]
  285. [comment]----name container end----[/comment]
  286.  
  287. [/border]
  288. [comment]----left end----[/comment]
  289.  
  290. [comment]----right----[/comment]
  291. [border=transparent; height:410px; flex:60; min-width:250px; padding:0 5px; box-sizing:border-box; position:relative; z-index:2; margin:10px; display:flex; flex-flow:column nowrap;]
  292.  
  293. [comment]----post contents----[/comment]
  294. [border=transparent; height:83%; width:100%; padding:12px 0; box-sizing:border-box; background: var(--bg-color-2); display:flex; flex-direction:column; overflow:hidden; border-radius:1px;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box; color: var(--t-color); font-size:11px; font-family: var(--body); line-height:15px; text-align:justify;][comment]
  295.  
  296. ----* * * text starts here----
  297.  
  298. [/comment][border=0; padding:0; display:inline; color: var(--dialogue); font-weight:bold;]"this is a dialogue."[/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac diam non tellus commodo semper sit amet eget elit. Praesent tempor elit at ligula dapibus cursus. Sed auctor, lacus non semper suscipit, nibh lectus facilisis nunc, a placerat urna elit sit amet leo. Mauris vehicula imperdiet nisl, in tincidunt lectus rhoncus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat quam, placerat ut lobortis a, imperdiet quis nisi. Fusce aliquet tincidunt feugiat. Donec ac nunc lacus. Donec volutpat lacus suscipit orci ornare, eget sollicitudin lacus malesuada. Donec commodo nibh efficitur eros dapibus mollis. Morbi in maximus velit, nec vehicula erat. In laoreet molestie viverra. Sed euismod, arcu in suscipit semper, ex risus luctus risus, ut mollis sapien nulla non lacus.
  299.  
  300. Vestibulum arcu ligula, rhoncus non pulvinar in, pellentesque id lectus. Ut pulvinar, ipsum vitae convallis scelerisque, arcu est mollis erat, eu ultrices lectus metus vel turpis. Vivamus mi magna, tempor ut hendrerit at, cursus et quam. Vivamus urna sem, tincidunt sed accumsan ut, fermentum id purus. Sed maximus tortor in risus dapibus, a posuere neque vehicula. Suspendisse vestibulum magna ac erat tristique, sit amet sodales leo scelerisque. Morbi a luctus magna, sed tincidunt arcu. Sed vulputate, est quis condimentum cursus, nulla eros dapibus risus, at varius turpis urna porttitor nisi. Morbi accumsan dui risus, bibendum malesuada ex viverra et. Nunc ultrices blandit ligula id aliquam. Pellentesque vestibulum arcu vel sem eleifend pretium. Aliquam in sem a lectus tincidunt ultricies. Praesent feugiat aliquet lectus, vel suscipit urna aliquam nec. Nulla a libero sit amet metus mollis tincidunt. Nam rutrum nunc non dapibus congue.
  301.  
  302. Vivamus nec ex pellentesque, iaculis nibh sit amet, vulputate est. Nam quis volutpat nisl, a aliquam justo. Donec eleifend neque sed lectus laoreet luctus. Pellentesque commodo tortor eget mauris finibus sagittis. In accumsan nunc ex. Sed ut scelerisque nulla. Praesent porta, velit ac molestie ornare, ex eros consequat nulla, id facilisis elit nisl blandit augue. Donec a mauris consectetur, feugiat nisl et, tincidunt lectus. In lobortis ultrices tortor quis lobortis.
  303. [/border][/border][/border]
  304. [comment]----post contents end----[/comment]
  305.  
  306. [/border]
  307.  
  308.  
  309. [comment]----tabs cover----[/comment]
  310. [border=transparent; height:100%; width:100%; padding:10px 5px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; flex-flow: row wrap; pointer-events:none;]
  311. [border=transparent; height:410px; flex:40; min-width:250px; padding:15px 0; box-sizing:border-box; position:relative; z-index:2; margin:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center;]
  312.  
  313. [comment]----button container----[/comment]
  314. [border=transparent; height:33px; width:219px; padding:0 8px; box-sizing:border-box; overflow:hidden; margin:0 0 clamp(20px, 5vw, 35px) 0; flex:auto 0; display:flex; flex-flow:row nowrap; color: var(--color-1); font-size:17px; justify-content:center; align-items:center; background: var(--bg-color);]
  315.  
  316. [comment]----button----[/comment]
  317. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0; text-align:center;][fa]far fa-heart[/fa][/border]
  318. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  319.  
  320. [comment]----button----[/comment]
  321. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0; text-align:center;][fa]far fa-tshirt[/fa][/border]
  322. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  323.  
  324. [comment]----button----[/comment]
  325. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0; text-align:center;][fa]far fa-map-marker-alt[/fa][/border]
  326. [border=transparent; height:100%; flex:1; padding:0; pointer-events:auto;][/border]
  327.  
  328. [comment]----button----[/comment]
  329. [border=transparent; height:fit-content; width:22px; padding:0; line-height:100%; flex:auto 0; text-align:center;][fa]far fa-comment-exclamation[/fa][/border]
  330.  
  331. [/border]
  332. [comment]----button container end----[/comment]
  333.  
  334. [comment]----filler things. ignore----[/comment]
  335. [border=transparent; width:clamp(180px, 70%, 220px); padding:0; position:relative;][border=transparent; padding:0; padding-top:97%;][/border][/border]
  336. [border=transparent; height:21%; width:100%; padding:0; margin:35px 0 0 0;][/border]
  337. [/border]
  338. [border=transparent; height:410px; flex:60; min-width:250px; padding:0; margin:10px;][/border]
  339. [/border]
  340. [comment]----tabs cover----[/comment]
  341.  
  342. [/border]
  343. [comment]----coloured background----[/comment]
  344. [border=transparent; height:100%; width:100%; padding:0; position:absolute; z-index:1; bottom:0; right:0; display:flex; flex-flow:column nowrap;][border=transparent; height:100%; width:100%; padding:0; background: var(--color-1); margin-top:clamp(168px, 32%, 280px);][/border][/border]
  345.  
  346. [comment]
  347. ----signature! do not remove
  348. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.5;color: var(--color-3); font-size:10px; left:15px; bottom:15px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/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!