API tools faq
paste
ooksie

candy stripes (uxie x nerdy tangents)

ooksie
Feb 25th, 2021 (edited)
184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.12 KB | None | 0 0
raw download clone embed print report
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Permanent Marker]title text[/font]
  5. [font=Schoolbell]subtitle[/font]
  6. [font=Alegreya]tab titles[/font]
  7. [font=Lato]body text[/font]
  8.  
  9. 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 ( ‾́ ◡ ‾́ )
  10.  
  11. [/comment][border=transparent;
  12.  
  13. *big background image -- you can replace it with a colour hex too!;
  14. --bg-1: url('https://i.imgur.com/8H5ZfEg.png');
  15. *textbox + tabbox background colour;
  16. --bg-2: #fff;
  17.  
  18. *first accent colour -- textbox borders, bolded text;
  19. --color-1: #CC6EE6;
  20. *second accent colour -- selected tab underlines;
  21. --color-2: #5E17EB;
  22.  
  23. *main title colour -- you can replace the entire var(--color-1) section w a hex code!;
  24. --h1: var(--color-1);
  25. *subtitle colour;
  26. --h2: #8C52FF;
  27. *tab title colour;
  28. --h3: #000;
  29. *text colour;
  30. --t-color: #000;
  31.  
  32. *fonts used;
  33. --title: 'Permanent Marker', display;
  34. --stitle: 'Schoolbell', display;
  35. --button: 'Alegreya', serif;
  36. --body: 'Lato', sans-serif;
  37.  
  38.  
  39. height:700px; width:100%; max-width:450px; padding:clamp(10px, 6vw, 30px); padding-bottom:35px; box-sizing:border-box; background: var(--bg-1); position:relative; line-height:0; margin:auto;
  40.  
  41. /*using image background? use these to adjust the size and cropping of your image. background size < 100% for a tiled background!!*/
  42. background-size:cover; background-position:50% 50%;
  43.  
  44. ][border=transparent; height:100%; width:100%; max-width:450px; padding:0; display:flex; flex-flow:column nowrap; align-items:center; position:relative;]
  45. [comment]----content filler area----[/comment]
  46. [border=transparent; height:calc(76% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; background: var(--bg-2); border:3px solid var(--color-1); margin-bottom:auto;]
  47.  
  48. [comment]----title----[/comment]
  49. [border=transparent; height:fit-content; max-height:60px; width:100%; padding:0; color: var(--h1); line-height:calc(135% - 10px); font-family: var(--title); font-size:clamp(30px, 8.5vw, 45px); letter-spacing:clamp(2px, 2vw, 5px); text-transform:uppercase; text-align:center; overflow:hidden;][comment]
  50.  
  51. ----* * * title here----
  52.  
  53. [/comment]title here[/border]
  54.  
  55. [comment]----subtitle----[/comment]
  56. [border=transparent; height:fit-content; max-height:25px; width:100%; padding:0; color: var(--h2); line-height:100%; font-family: var(--stitle); font-size:clamp(16px, 5vw, 22px); letter-spacing:clamp(1px, 1.5vw, 3px); text-align:center; margin:10px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  57.  
  58. ----* * * subtitle here----
  59.  
  60. [/comment]Subtitle Here[/border]
  61.  
  62. [/border]
  63. [comment]----content filler area end----[/comment]
  64.  
  65. [comment]----tabs----[/comment]
  66. [border=transparent; height:24%; width:calc(100% - 20px); padding:0; overflow:hidden;][border=transparent; padding:0; margin:5px -80px 0 -38px; letter-spacing:clamp(0.3px, 2.5vw, 21px); line-height:41px;][tabs]
  67.  
  68.  
  69. [comment]----tab one----[/comment]
  70. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  71.  
  72. [comment]----tab contents----[/comment]
  73. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  74.  
  75. ----* * * text starts here----
  76.  
  77. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  78.  
  79. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  80. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  81.  
  82. ---- * * * bolded text here----
  83.  
  84. [/comment]bold we in bold!!!![/border][comment]
  85.  
  86. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  87.  
  88. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  89. [/border][/border][/border][/border]
  90. [comment]----tab contents end----[/comment]
  91.  
  92. [comment]----button select (ignore!)----[/comment]
  93. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 3px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  94.  
  95. [comment]----selected button----[/comment]
  96. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  97. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  98.  
  99. [comment]----filler button----[/comment]
  100. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  101. [comment]----filler button----[/comment]
  102. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  103. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  104. [comment]----filler button----[/comment]
  105. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  106. [comment]----filler button----[/comment]
  107. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  108. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  109. [comment]----filler button----[/comment]
  110. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  111.  
  112. [/border]
  113. [comment]----button select end----[/comment]
  114. [/border][/tab]
  115. [comment]----tab one end----[/comment]
  116.  
  117.  
  118. [comment]----tab two----[/comment]
  119. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  120.  
  121. [comment]----tab contents----[/comment]
  122. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  123.  
  124. ----* * * text starts here----
  125.  
  126. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  127.  
  128. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  129. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  130.  
  131. ---- * * * bolded text here----
  132.  
  133. [/comment]bold we in bold!!!![/border][comment]
  134.  
  135. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  136.  
  137. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  138. [/border][/border][/border][/border]
  139. [comment]----tab contents end----[/comment]
  140.  
  141. [comment]----button select (ignore!)----[/comment]
  142. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  143.  
  144. [comment]----filler button----[/comment]
  145. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  146. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  147.  
  148. [comment]----selected button----[/comment]
  149. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  150.  
  151. [comment]----filler button----[/comment]
  152. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  153. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  154. [comment]----filler button----[/comment]
  155. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  156. [comment]----filler button----[/comment]
  157. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  158. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  159. [comment]----filler button----[/comment]
  160. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  161.  
  162. [/border]
  163. [comment]----button select end----[/comment]
  164. [/border][/tab]
  165. [comment]----tab two end----[/comment]
  166.  
  167.  
  168. [comment]----tab three----[/comment]
  169. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  170.  
  171. [comment]----tab contents----[/comment]
  172. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  173.  
  174. ----* * * text starts here----
  175.  
  176. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  177.  
  178. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  179. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  180.  
  181. ---- * * * bolded text here----
  182.  
  183. [/comment]bold we in bold!!!![/border][comment]
  184.  
  185. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  186.  
  187. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  188. [/border][/border][/border][/border]
  189. [comment]----tab contents end----[/comment]
  190.  
  191. [comment]----button select (ignore!)----[/comment]
  192. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  193.  
  194. [comment]----filler button----[/comment]
  195. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  196. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  197. [comment]----filler button----[/comment]
  198. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  199.  
  200. [comment]----selected button----[/comment]
  201. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  202.  
  203. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  204. [comment]----filler button----[/comment]
  205. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  206. [comment]----filler button----[/comment]
  207. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  208. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  209. [comment]----filler button----[/comment]
  210. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  211.  
  212. [/border]
  213. [comment]----button select end----[/comment]
  214. [/border][/tab]
  215. [comment]----tab three end----[/comment]
  216.  
  217.  
  218. [comment]----tab four----[/comment]
  219. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  220.  
  221. [comment]----tab contents----[/comment]
  222. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  223.  
  224. ----* * * text starts here----
  225.  
  226. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  227.  
  228. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  229. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  230.  
  231. ---- * * * bolded text here----
  232.  
  233. [/comment]bold we in bold!!!![/border][comment]
  234.  
  235. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  236.  
  237. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  238. [/border][/border][/border][/border]
  239. [comment]----tab contents end----[/comment]
  240.  
  241. [comment]----button select (ignore!)----[/comment]
  242. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  243.  
  244. [comment]----filler button----[/comment]
  245. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  246. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  247. [comment]----filler button----[/comment]
  248. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  249. [comment]----filler button----[/comment]
  250. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  251. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  252.  
  253. [comment]----selected button----[/comment]
  254. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  255.  
  256. [comment]----filler button----[/comment]
  257. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  258. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  259. [comment]----filler button----[/comment]
  260. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  261.  
  262. [/border]
  263. [comment]----button select end----[/comment]
  264. [/border][/tab]
  265. [comment]----tab four end----[/comment]
  266.  
  267.  
  268. [comment]----tab five----[/comment]
  269. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  270.  
  271. [comment]----tab contents----[/comment]
  272. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  273.  
  274. ----* * * text starts here----
  275.  
  276. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  277.  
  278. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  279. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  280.  
  281. ---- * * * bolded text here----
  282.  
  283. [/comment]bold we in bold!!!![/border][comment]
  284.  
  285. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  286.  
  287. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  288. [/border][/border][/border][/border]
  289. [comment]----tab contents end----[/comment]
  290.  
  291. [comment]----button select (ignore!)----[/comment]
  292. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  293.  
  294. [comment]----filler button----[/comment]
  295. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  296. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  297. [comment]----filler button----[/comment]
  298. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  299. [comment]----filler button----[/comment]
  300. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  301. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  302. [comment]----filler button----[/comment]
  303. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  304.  
  305. [comment]----selected button----[/comment]
  306. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  307.  
  308. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  309. [comment]----filler button----[/comment]
  310. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  311.  
  312. [/border]
  313. [comment]----button select end----[/comment]
  314. [/border][/tab]
  315. [comment]----tab five end----[/comment]
  316.  
  317.  
  318. [comment]----tab six----[/comment]
  319. [tab=aaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; line-height:0; letter-spacing:0; pointer-events:none;]
  320.  
  321. [comment]----tab contents----[/comment]
  322. [border=transparent; height:calc(80% - 15px); width:100%; padding:clamp(10px, 4vw, 15px); box-sizing:border-box; position:relative; pointer-events:auto;][border=transparent; height:calc(100% - 130px); padding:0; margin-top:100px; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:13px; text-align:justify; line-height:16px; font-family: var(--body);][comment]
  323.  
  324. ----* * * text starts here----
  325.  
  326. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac metus sit amet sapien lacinia finibus ornare at mi. In elementum molestie volutpat. Aliquam at ante laoreet, dapibus elit luctus, dictum urna. Suspendisse a sem sed lorem varius scelerisque. Ut a purus luctus, consequat turpis in, sagittis tellus. Aliquam magna ante, ultrices a suscipit sed, dapibus in turpis. Suspendisse et sem dolor. Cras nec malesuada erat, non congue ex. Donec sagittis augue ex, quis convallis ante vehicula varius. Maecenas porttitor, leo eget tempus consequat, sapien nulla suscipit turpis, in lacinia enim urna ac metus. Aliquam erat volutpat. Maecenas mi est, facilisis ut lacinia non, volutpat nec eros. Quisque a porta velit, vel tempus erat. Donec a aliquam ipsum.
  327.  
  328. [comment]----copy this for bolded text! no linebreaks between this line and the previous!----
  329. [/comment][border=0; padding:0; color: var(--color-1); font-weight:bold; display:inline;][comment]
  330.  
  331. ---- * * * bolded text here----
  332.  
  333. [/comment]bold we in bold!!!![/border][comment]
  334.  
  335. ----copy me too! no linebreaks between this line and the next!----[/comment] Aliquam imperdiet turpis ut varius ullamcorper. Donec accumsan sapien sit amet mauris dictum, nec sollicitudin odio ullamcorper. Donec eu orci at nisi aliquam venenatis at nec neque. Suspendisse eu tellus nec eros auctor feugiat. Suspendisse congue volutpat dolor a dapibus. Cras suscipit vestibulum diam, vel rhoncus nisi efficitur eget. Donec at fermentum erat, vel accumsan ante. Aenean malesuada mauris quis ex laoreet, non laoreet enim maximus. Nunc vitae mauris aliquam risus ullamcorper vestibulum sed ut turpis.
  336.  
  337. Fusce quis diam tellus. Proin augue augue, convallis vel mi interdum, tincidunt posuere ex. Suspendisse fringilla augue ut iaculis vestibulum. Donec sagittis suscipit massa et vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sit amet lacinia nulla. Quisque at felis eleifend urna auctor euismod. Integer commodo quam suscipit, dapibus magna semper, ullamcorper orci. Nullam egestas diam at vestibulum mattis. Donec varius semper bibendum.
  338. [/border][/border][/border][/border]
  339. [comment]----tab contents end----[/comment]
  340.  
  341. [comment]----button select (ignore!)----[/comment]
  342. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  343.  
  344. [comment]----filler button----[/comment]
  345. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  346. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  347. [comment]----filler button----[/comment]
  348. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  349. [comment]----filler button----[/comment]
  350. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  351. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  352. [comment]----filler button----[/comment]
  353. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  354. [comment]----filler button----[/comment]
  355. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0;][/border]
  356. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  357.  
  358. [comment]----selected button----[/comment]
  359. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); border-bottom:3px solid var(--color-2); box-sizing:border-box;][/border]
  360.  
  361. [/border]
  362. [comment]----button select end----[/comment]
  363. [/border][/tab]
  364. [comment]----tab six end----[/comment]
  365.  
  366. [/tabs][/border][/border]
  367.  
  368. [comment]----tabs cover----[/comment]
  369. [border=transparent; height:24%; width:100%; padding:0 clamp(3px, 2vw, 10px) 2px clamp(3px, 2vw, 10px); box-sizing:border-box; background: var(--bg-2); border:3px solid var(--color-1); box-sizing:border-box; position:absolute; bottom:0; left:0; z-index:1; pointer-events:none; display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;]
  370.  
  371. [comment]----button/tab title----[/comment]
  372. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  373. ----* * * tab title here----
  374. [/comment]tab title[/border]
  375. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  376.  
  377. [comment]----button/tab title----[/comment]
  378. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  379. ----* * * tab title here----
  380. [/comment]tab title[/border]
  381.  
  382. [comment]----button/tab title----[/comment]
  383. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  384. ----* * * tab title here----
  385. [/comment]tab title[/border]
  386. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  387.  
  388. [comment]----button/tab title----[/comment]
  389. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  390. ----* * * tab title here----
  391. [/comment]tab title[/border]
  392.  
  393. [comment]----button/tab title----[/comment]
  394. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  395. ----* * * tab title here----
  396. [/comment]tab title[/border]
  397. [border=transparent; height:33px; width:20px; padding:0; pointer-events:auto; flex:auto 0;][/border]
  398.  
  399. [comment]----button/tab title----[/comment]
  400. [border=transparent; height:33px; width:calc(48% - 20px); padding:0; margin:5px 0; flex:auto 0; font-family: var(--button); color: var(--h3); line-height:100%; font-size:clamp(17px, 4vw, 22px); border-bottom:3px solid var(--bg-2); box-sizing:border-box; text-align:center; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; justify-content:center; overflow:hidden; text-overflow:ellipsis;][comment]
  401. ----* * * tab title here----
  402. [/comment]tab title[/border]
  403.  
  404. [/border]
  405. [comment]----tabs cover end----[/comment]
  406.  
  407. [/border][comment]----signature! (do not remove!)-----
  408. [/comment][bg=transparent; height:fit-content; width:100%; padding:0; position:absolute; bottom:20px; left:10px; z-index:7;][border=transparent; height:fit-content; width:fit-content; margin:auto; background: var(--bg-2); padding:5px; box-sizing:border-box; opacity:0.85;font-size:10px;text-align:center; line-height:100%; color: var(--color-1);][font=Open Sans]♡design by nerdy tangents, coded by uxie♡[/font][/border][/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!