API tools faq
paste
ooksie

yin & yang (uxie x low fidelity)

ooksie
Nov 27th, 2020 (edited)
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.25 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *container background;
  3. --bg-1: #0F0F0F;
  4. *contents background;
  5. --bg-2: #FFFFFF;
  6. *first accent colour (lighter) -- quote marks, second tab title;
  7. --color-1: #828282;
  8. *second accent colour (darker) -- titles, names;
  9. --color-2: #2B2B2B;
  10. *text colour;
  11. --t-color: #000;
  12.  
  13. *images are categorised based on which tab theyre in. images in tab 1 are labelled with a, tab 2 with b, and so on;
  14. --aimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  15. --aimg-2: url('https://i.pinimg.com/originals/a0/8c/86/a08c869f2a10bcd72fc731d805a9f48e.jpg');
  16. --aimg-3: url('https://data.whicdn.com/images/307724946/original.png');
  17. --bimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  18. --cimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  19. --cimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  20. --cimg-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21. --dimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  22. --dimg-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  23. --dimg-3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  24. --eimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  25.  
  26. height:550px; width:550px; padding:0; padding-bottom:25px; line-height:0; margin:auto; position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-1); position:relative; display:flex; align-items:flex-end; justify-content:center;]
  27.  
  28. [comment]----tabs cover----[/comment]
  29. [border=transparent; height:65px; width:100%; padding:0; background: var(--bg-1); position:absolute; bottom:0; left:0; pointer-events:none; display:flex; flex-flow: row wrap; align-items:center; justify-content:center;]
  30. [border=transparent; height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  31. [border=transparent; height:18px; width:18px; padding:0; background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  32. [border=transparent; height:100%; width:50px; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  33. [border=transparent; height:18px; width:18px; padding:0; background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  34. [border=transparent; height:100%; width:50px; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  35. [border=transparent; height:18px; width:18px; padding:0; background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  36. [border=transparent; height:100%; width:50px; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  37. [border=transparent; height:18px; width:18px; padding:0; background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  38. [border=transparent; height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler! ignore[/border]
  39. [/border]
  40. [comment]----tabs cover end----[/comment]
  41.  
  42. [comment]----tabs----[/comment]
  43. [border=transparent; height:45px; width:58%; padding:0; overflow:hidden;][border=transparent; padding:0; margin-top:-28px;][tabs]
  44.  
  45. [comment]----tab one (cover)----[/comment]
  46. [tab=aaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:65px; box-sizing:border-box; position:absolute; top:0; left:0; pointer-events:none;]
  47. [comment]----main content----[/comment]
  48. [border=transparent; height:100%; width:100%; padding:0 15px 20px 15px; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap; pointer-events:auto;]
  49.  
  50. [comment]----header----[/comment]
  51. [border=transparent; height:11%; width:100%; padding:0; box-sizing:border-box; position:relative; z-index:5; display:flex; flex-flow: row nowrap; align-items:center;]
  52.  
  53. [comment]----names ----[/comment]
  54. [border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; margin-right:15px; position:relative;]
  55. [comment]----* name * ----[/comment]
  56. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; font-weight:bold; font-size:40px; line-height:100%; color: var(--color-2); -webkit-text-stroke:0.5px var(--color-2);][font=Arimo][comment]
  57. ----* * * name here!----
  58. [/comment]yin xiao huo[/font][/border]
  59.  
  60. [comment]----* name: the sequel *----[/comment]
  61. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; margin-bottom:-30px; font-size:75px; color: var(--color-1); line-height:100%;][font=Mr De Haviland][comment]
  62. ----* * * second name here!----
  63. [/comment]yin xiao huo[/font][/border][/border]
  64. [/border]
  65. [border=transparent; height:3px; flex-grow:1; padding:0; background: var(--color-2);][/border]
  66. [/border]
  67. [comment]----header end----[/comment]
  68.  
  69. [comment]----tab contents----[/comment]
  70. [border=transparent; height:87%; width:100%; padding:0; margin-top:auto; position:relative; z-index:4; display:flex; flex-flow: column wrap; justify-content:flex-end;]
  71. [comment]----images----[/comment]
  72. [border=transparent; height:32%; width:50%; padding:0; background:var(--aimg-1); background-size:cover;
  73. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  74. [border=transparent; height:68%; width:60%; padding:0; background:var(--aimg-2); background-size:cover;
  75. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  76. [border=transparent; height:65%; width:57%; padding:0; position:absolute; top:0; right:0; background:var(--aimg-3); background-size:cover;
  77. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  78.  
  79. [comment]----* role *----[/comment]
  80. [border=transparent; height:calc(35% - 16px); width:calc(40% - 16px); padding:0 0 0 10px; box-sizing:border-box; margin:8px 0 8px 8px; border-left:3px solid var(--color-2); display:flex; align-items:center; justify-content:center;][border=transparent; height:fit-content; width:120%; padding:0 0 0 15px; box-sizing:border-box; color: var(--color-2); font-size:54px; font-weight:bold; -webkit-text-stroke:1px var(--color-2); line-height:70%; text-transform:uppercase; letter-spacing:0.5px;][font=Arimo][comment]
  81. ----* * * role here! (6 characters max)----
  82. [/comment]samson.[/font][/border][/border]
  83.  
  84. [/border]
  85. [comment]----tab contents end----[/comment]
  86. [/border]
  87. [comment]----main content end----[/comment]
  88.  
  89. [comment]----quote marks----[/comment]
  90. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:10px; left:18px; z-index:3; font-size:185px; color: var(--color-1); line-height:80%;]❝[/border]
  91. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:-20px; right:18px; z-index:3; font-size:185px; color: var(--color-1); line-height:80%;]❞[/border]
  92.  
  93. [/border][/tab]
  94. [comment]----tab one end----[/comment]
  95.  
  96.  
  97. [comment]----tab two (basics)----[/comment]
  98. [tab=....][border=transparent; height:100%; width:100%; padding:65px; box-sizing:border-box; position:absolute; top:0; left:0; pointer-events:none;]
  99. [comment]----main content----[/comment]
  100. [border=transparent; height:100%; width:100%; padding:5px 15px 15px 15px; box-sizing:border-box; background: var(--bg-2); pointer-events:auto; display:flex; flex-flow: column nowrap; align-items:center;]
  101.  
  102. [comment]----header----[/comment]
  103. [border=transparent; height:11%; width:100%; padding:0; box-sizing:border-box; position:relative; z-index:5; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  104.  
  105. [comment]----tab titles-----[/comment]
  106. [border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; margin-left:15px; position:relative;]
  107. [comment]----* tab title * ----[/comment]
  108. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; font-weight:bold; font-size:40px; line-height:100%; color: var(--color-2); -webkit-text-stroke:0.5px var(--color-2);][font=Arimo][comment]
  109. ----* * * tab title here!----
  110. [/comment]the file[/font][/border]
  111.  
  112. [comment]----* tab title: the sequel *----[/comment]
  113. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; margin-bottom:-30px; font-size:75px; color: var(--color-1); line-height:100%;][font=Mr De Haviland][comment]
  114. ----* * * tab title here!----
  115. [/comment]the file[/font][/border][/border]
  116. [/border]
  117. [border=transparent; height:3px; flex-grow:1; padding:0; background: var(--color-2);][/border]
  118. [/border]
  119. [comment]----header end----[/comment]
  120.  
  121. [comment]----tab contents----[/comment]
  122. [border=transparent; height:88%; width:100%; padding:0; margin-top:auto; position:relative; z-index:4; display:flex; flex-flow: column wrap; justify-content:flex-end; align-items:flex-end;]
  123. [comment]----image----[/comment]
  124. [border=transparent; height:125px; width:125px; padding:0; background: var(--bimg-1); background-size:cover; position:absolute; top:0; left:0;
  125. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  126.  
  127. [comment]----* *basics text* *----[/comment]
  128. [border=transparent; height:85%; width:78%; padding:10px; border:3px solid var(--color-2); box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:11px; line-height:140%; margin-top:60px;][font=Montserrat][comment]
  129. ----* * * text starts here!----
  130. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem diam, scelerisque vel suscipit quis, molestie dictum ex. Vestibulum id tortor ac orci aliquet iaculis in et nunc. Etiam sit amet ligula et sapien porta semper. Mauris tempus aliquet dictum. Donec sodales lacus in ultricies consectetur. Pellentesque vel pharetra libero. Quisque arcu velit, pulvinar et orci nec, elementum convallis lacus. Aenean luctus mollis velit, nec fermentum diam. Aenean lorem ipsum, sodales sit amet viverra in, condimentum sit amet mauris. Nullam sagittis vestibulum ipsum, quis gravida metus.
  131.  
  132. Pellentesque eu molestie lacus. Vivamus pretium efficitur posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus nisi id erat fermentum, a euismod leo posuere. Vivamus cursus felis id mi facilisis finibus. Donec nisl augue, consectetur at luctus vel, consectetur et nisi. Aliquam erat volutpat. Integer in quam laoreet mauris blandit imperdiet ac nec orci. Donec aliquam efficitur neque, id vestibulum dolor lacinia et. Maecenas volutpat ipsum at nunc mollis, pharetra consequat ligula hendrerit.
  133. [/font][/border][/border][/border]
  134. [comment]----basics text end----[/comment]
  135.  
  136. [/border]
  137. [comment]----tab contents end----[/comment]
  138.  
  139. [/border]
  140. [comment]----main content end----[/comment]
  141.  
  142. [comment]----quote marks----[/comment]
  143. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:-12px; left:18px; font-size:185px; color: var(--color-1); line-height:80%;]❝[/border]
  144. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:10px; right:18px; font-size:185px; color: var(--color-1); line-height:80%;]❞[/border]
  145.  
  146. [/border][/tab]
  147. [comment]----tab two end----[/comment]
  148.  
  149.  
  150. [comment]----tab three (visage)----[/comment]
  151. [tab=....][border=transparent; height:100%; width:100%; padding:65px; box-sizing:border-box; position:absolute; top:0; left:0; pointer-events:none;]
  152. [comment]----main content----[/comment]
  153. [border=transparent; height:100%; width:100%; padding:5px 15px 15px 15px; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow: row nowrap; pointer-events:auto;]
  154.  
  155. [comment]----tab contents----[/comment]
  156. [border=transparent; height:100%; width:64%; padding:0; display:flex; flex-flow: column nowrap;]
  157.  
  158. [comment]----header----[/comment]
  159. [border=transparent; height:11%; width:100%; padding:0; box-sizing:border-box; position:relative; z-index:5; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  160.  
  161. [comment]----tab titles-----[/comment]
  162. [border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; margin-right:15px; position:relative;]
  163. [comment]----* tab title * ----[/comment]
  164. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; font-weight:bold; font-size:40px; line-height:100%; color: var(--color-2); -webkit-text-stroke:0.5px var(--color-2);][font=Arimo][comment]
  165. ----* * * tab title here!----
  166. [/comment]visage[/font][/border]
  167.  
  168. [comment]----* tab title: the sequel *----[/comment]
  169. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; margin-bottom:-20px; font-size:75px; color: var(--color-1); line-height:100%;][font=Mr De Haviland][comment]
  170. ----* * * tab title here!----
  171. [/comment]visage[/font][/border][/border]
  172. [/border]
  173. [border=transparent; height:3px; flex-grow:1; padding:0; background: var(--color-2);][/border]
  174. [/border]
  175. [comment]----header end----[/comment]
  176.  
  177. [comment]----* *visage text* *----[/comment]
  178. [border=transparent; margin:auto 0; height:83%; width:100%; padding:10px; border:3px solid var(--color-2); box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:11px; line-height:140%;][font=Montserrat][comment]
  179. ----* * * text starts here!----
  180. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem diam, scelerisque vel suscipit quis, molestie dictum ex. Vestibulum id tortor ac orci aliquet iaculis in et nunc. Etiam sit amet ligula et sapien porta semper. Mauris tempus aliquet dictum. Donec sodales lacus in ultricies consectetur. Pellentesque vel pharetra libero. Quisque arcu velit, pulvinar et orci nec, elementum convallis lacus. Aenean luctus mollis velit, nec fermentum diam. Aenean lorem ipsum, sodales sit amet viverra in, condimentum sit amet mauris. Nullam sagittis vestibulum ipsum, quis gravida metus.
  181.  
  182. Pellentesque eu molestie lacus. Vivamus pretium efficitur posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus nisi id erat fermentum, a euismod leo posuere. Vivamus cursus felis id mi facilisis finibus. Donec nisl augue, consectetur at luctus vel, consectetur et nisi. Aliquam erat volutpat. Integer in quam laoreet mauris blandit imperdiet ac nec orci. Donec aliquam efficitur neque, id vestibulum dolor lacinia et. Maecenas volutpat ipsum at nunc mollis, pharetra consequat ligula hendrerit.
  183. [/font][/border][/border][/border]
  184. [comment]----visage text end----[/comment]
  185.  
  186. [/border]
  187. [comment]----tab contents end----[/comment]
  188.  
  189. [comment]----images----[/comment]
  190. [border=transparent; height:100%; width:36%; padding:10px 0 0 15px; box-sizing:border-box; display:flex; flex-flow: column nowrap; align-items:flex-end;]
  191. [border=transparent; height:120px; width:120px; padding:0; background: var(--cimg-1); background-size:cover; flex-shrink:0;
  192. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  193. [border=transparent; height:120px; width:120px; padding:0; background: var(--cimg-2); background-size:cover; flex-shrink:0; margin:auto 0;
  194. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  195. [border=transparent; height:120px; width:120px; padding:0; background: var(--cimg-3); background-size:cover; flex-shrink:0;
  196. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  197. [/border]
  198.  
  199. [/border]
  200. [comment]----main content end----[/comment]
  201.  
  202. [comment]----quote marks----[/comment]
  203. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:10px; left:18px; font-size:185px; color: var(--color-1); line-height:80%;]❝[/border]
  204. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:-20px; right:18px; font-size:185px; color: var(--color-1); line-height:80%;]❞[/border]
  205.  
  206. [/border][/tab]
  207. [comment]----tab three end----[/comment]
  208.  
  209.  
  210. [comment]----tab four (persona)----[/comment]
  211. [tab=....][border=transparent; height:100%; width:100%; padding:65px; box-sizing:border-box; position:absolute; top:0; left:0; pointer-events:none;]
  212. [comment]----main content----[/comment]
  213. [border=transparent; height:100%; width:100%; padding:5px 15px 15px 15px; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow: column nowrap; pointer-events:auto;]
  214.  
  215. [comment]----header----[/comment]
  216. [border=transparent; height:11%; width:100%; padding:0; box-sizing:border-box; position:relative; z-index:5; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  217.  
  218. [comment]----tab titles-----[/comment]
  219. [border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; margin-left:15px; position:relative;]
  220. [comment]----* tab title * ----[/comment]
  221. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; font-weight:bold; font-size:40px; line-height:100%; color: var(--color-2); -webkit-text-stroke:0.5px var(--color-2);][font=Arimo][comment]
  222. ----* * * tab title here!----
  223. [/comment]persona[/font][/border]
  224.  
  225. [comment]----* tab title: the sequel *----[/comment]
  226. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; margin-bottom:-20px; font-size:75px; color: var(--color-1); line-height:100%;][font=Mr De Haviland][comment]
  227. ----* * * tab title here!----
  228. [/comment]persona[/font][/border][/border]
  229. [/border]
  230. [border=transparent; height:3px; flex-grow:1; padding:0; background: var(--color-2);][/border]
  231. [/border]
  232. [comment]----header end----[/comment]
  233.  
  234. [comment]----* *persona text* *----[/comment]
  235. [border=transparent; margin:auto 0 0 0; height:54%; width:100%; padding:10px; border:3px solid var(--color-2); box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:11px; line-height:140%;][font=Montserrat][comment]
  236. ----* * * text starts here!----
  237. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem diam, scelerisque vel suscipit quis, molestie dictum ex. Vestibulum id tortor ac orci aliquet iaculis in et nunc. Etiam sit amet ligula et sapien porta semper. Mauris tempus aliquet dictum. Donec sodales lacus in ultricies consectetur. Pellentesque vel pharetra libero. Quisque arcu velit, pulvinar et orci nec, elementum convallis lacus. Aenean luctus mollis velit, nec fermentum diam. Aenean lorem ipsum, sodales sit amet viverra in, condimentum sit amet mauris. Nullam sagittis vestibulum ipsum, quis gravida metus.
  238.  
  239. Pellentesque eu molestie lacus. Vivamus pretium efficitur posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus nisi id erat fermentum, a euismod leo posuere. Vivamus cursus felis id mi facilisis finibus. Donec nisl augue, consectetur at luctus vel, consectetur et nisi. Aliquam erat volutpat. Integer in quam laoreet mauris blandit imperdiet ac nec orci. Donec aliquam efficitur neque, id vestibulum dolor lacinia et. Maecenas volutpat ipsum at nunc mollis, pharetra consequat ligula hendrerit.
  240. [/font][/border][/border][/border]
  241. [comment]----persona text end----[/comment]
  242.  
  243. [comment]----images----[/comment]
  244. [border=transparent; height:33%; width:100%; padding:15px 0 0 0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
  245. [border=transparent; height:120px; width:120px; padding:0; background: var(--dimg-1); background-size:cover; flex-shrink:0;
  246. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  247. [border=transparent; height:120px; width:120px; padding:0; background: var(--dimg-2); background-size:cover; flex-shrink:0; margin:0 auto;
  248. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  249. [border=transparent; height:120px; width:120px; padding:0; background: var(--dimg-3); background-size:cover; flex-shrink:0;
  250. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  251. [/border]
  252.  
  253. [/border]
  254. [comment]----main content end----[/comment]
  255.  
  256. [comment]----quote marks----[/comment]
  257. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:-12px; left:18px; font-size:185px; color: var(--color-1); line-height:80%;]❝[/border]
  258. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:10px; right:18px; font-size:185px; color: var(--color-1); line-height:80%;]❞[/border]
  259.  
  260. [/border][/tab]
  261. [comment]----tab four end----[/comment]
  262.  
  263.  
  264. [comment]----tab five (history)----[/comment]
  265. [tab=....][border=transparent; height:100%; width:100%; padding:65px; box-sizing:border-box; position:absolute; top:0; left:0; pointer-events:none;]
  266. [comment]----main content----[/comment]
  267. [border=transparent; height:100%; width:100%; padding:5px 15px 15px 15px; box-sizing:border-box; background: var(--bg-2); pointer-events:auto; display:flex; flex-flow: column nowrap; align-items:center;]
  268.  
  269. [comment]----header----[/comment]
  270. [border=transparent; height:11%; width:100%; padding:0; box-sizing:border-box; position:relative; z-index:5; display:flex; flex-flow: row nowrap; align-items:center;]
  271.  
  272. [comment]----tab titles-----[/comment]
  273. [border=transparent; height:fit-content; width:fit-content; padding:0; flex-shrink:0; margin-left:15px; position:relative;]
  274. [comment]----* tab title * ----[/comment]
  275. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; font-weight:bold; font-size:40px; line-height:100%; color: var(--color-2); -webkit-text-stroke:0.5px var(--color-2);][font=Arimo][comment]
  276. ----* * * tab title here!----
  277. [/comment]history[/font][/border]
  278.  
  279. [comment]----* tab title: the sequel *----[/comment]
  280. [border=transparent; height:100%; width:100%; padding:0; position:absolute; bottom:0; left:0; z-index:3; display:flex; align-items:flex-end; justify-content:center;][border=transparent; height:fit-content; width:fit-content; padding:0; margin-bottom:-20px; font-size:75px; color: var(--color-1); line-height:100%;][font=Mr De Haviland][comment]
  281. ----* * * tab title here!----
  282. [/comment]history[/font][/border][/border]
  283. [/border]
  284. [border=transparent; height:3px; flex-grow:1; padding:0; background: var(--color-2);][/border]
  285. [/border]
  286. [comment]----header end----[/comment]
  287.  
  288. [comment]----tab contents----[/comment]
  289. [border=transparent; height:85%; width:100%; padding:0; margin-top:auto; position:relative; z-index:4; display:flex; flex-flow: column wrap; justify-content:flex-start; align-items:flex-start;]
  290. [comment]----image----[/comment]
  291. [border=transparent; height:125px; width:125px; padding:0; background: var(--eimg-1); background-size:cover; position:absolute; bottom:0; right:0;
  292. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  293.  
  294. [comment]----* *history text* *----[/comment]
  295. [border=transparent; height:87%; width:78%; padding:10px; border:3px solid var(--color-2); box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:11px; line-height:140%; margin-bottom:70px;][font=Montserrat][comment]
  296. ----* * * text starts here!----
  297. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem diam, scelerisque vel suscipit quis, molestie dictum ex. Vestibulum id tortor ac orci aliquet iaculis in et nunc. Etiam sit amet ligula et sapien porta semper. Mauris tempus aliquet dictum. Donec sodales lacus in ultricies consectetur. Pellentesque vel pharetra libero. Quisque arcu velit, pulvinar et orci nec, elementum convallis lacus. Aenean luctus mollis velit, nec fermentum diam. Aenean lorem ipsum, sodales sit amet viverra in, condimentum sit amet mauris. Nullam sagittis vestibulum ipsum, quis gravida metus.
  298.  
  299. Pellentesque eu molestie lacus. Vivamus pretium efficitur posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempus nisi id erat fermentum, a euismod leo posuere. Vivamus cursus felis id mi facilisis finibus. Donec nisl augue, consectetur at luctus vel, consectetur et nisi. Aliquam erat volutpat. Integer in quam laoreet mauris blandit imperdiet ac nec orci. Donec aliquam efficitur neque, id vestibulum dolor lacinia et. Maecenas volutpat ipsum at nunc mollis, pharetra consequat ligula hendrerit.
  300. [/font][/border][/border][/border]
  301. [comment]----history text end----[/comment]
  302.  
  303. [/border]
  304. [comment]----tab contents end----[/comment]
  305.  
  306. [/border]
  307. [comment]----main content end----[/comment]
  308. [comment]----quote marks----[/comment]
  309. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; top:10px; left:18px; font-size:185px; color: var(--color-1); line-height:80%;]❝[/border]
  310. [border=transparent; height:fit-content; width:fit-content; padding:0; position:absolute; bottom:-20px; right:18px; font-size:185px; color: var(--color-1); line-height:80%;]❞[/border]
  311.  
  312. [/border][/tab]
  313. [comment]----tab five end----[/comment]
  314.  
  315. [/tabs][/border][/border]
  316. [comment]----tabs end----[/comment]
  317.  
  318. [/border][comment]----signature! (do not remove!)-----
  319. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%; color: var(--t-color);][font=Open Sans]♡design by low fidelity, 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!