API tools faq
paste
ooksie

delphinium (uxie x natasha)

ooksie
Nov 16th, 2020 (edited)
232
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.58 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *biiig background colour;
  3. --bg-1: #F6F6F6;
  4. *main contents background colour;
  5. --bg-2: #fff;
  6. *main content + buttons border colour;
  7. --border: #ededed;
  8. *main accent colour;
  9. --color-1: #45B4CE;
  10. *just that lil bar where the circles are on;
  11. --color-2: #EEEEEE;
  12. *big title + smaller subheaders colour;
  13. --header: #fff;
  14. *text colour;
  15. --t-color: #000;
  16.  
  17. *role images!;
  18. --r1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  19. --r2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  20. --r3: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21.  
  22. height:fit-content; width:100%; padding:70px 0 90px 0; background-color: var(--bg-1); position:relative; line-height:0; margin:auto; display:flex; align-items:center; justify-content:center;]
  23.  
  24. [border=transparent; height:460px; width:520px; padding:18px; box-sizing:border-box; background: var(--bg-2); border:1px solid var(--border);][border=transparent; height:100%; width:100%; padding:0; position:relative;]
  25.  
  26. [comment]----header----[/comment]
  27. [border=transparent; height:30%; width:100%; background: var(--bg-2); padding:0; position:absolute; top:0; left:0; z-index:2; display:flex; flex-flow: row nowrap; align-items:center; pointer-events:none;]
  28.  
  29. [comment]----big title----[/comment]
  30. [border=transparent; height:100%; width:31%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0; pointer-events:auto;]
  31. [border=transparent; height:100%; flex-grow:1; padding:10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; overflow:hidden;]
  32. [border=transparent; height:fit-content; width:min-content; padding:0; color: var(--header); font-size:40px; line-height:115%; font-weight:bold; text-transform:uppercase; letter-spacing:2px; text-align:center;][font=Oswald][comment]
  33. ----* * * title here----
  34. [/comment]begin again[/font][/border]
  35. [/border]
  36.  
  37. [border=transparent; height:0; width:0; padding:0; border-left:16px solid var(--color-1); border-top:16px solid transparent; border-bottom:16px solid transparent; flex-shrink:0;][/border]
  38. [/border]
  39.  
  40. [comment]----tabs cover----[/comment]
  41. [border=transparent; height:20px; flex-grow:1; padding:0; margin-left:12px; display:flex; flex-flow: row nowrap; align-items:center; position:relative;]
  42. [comment]----line----[/comment]
  43. [border=transparent; height:6px; min-height:6px; max-height:6px; width:100%; padding:0; background: var(--color-2); border-radius:6px; flex-shrink:0;][/border]
  44.  
  45. [comment]----buttons container----[/comment]
  46. [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center; pointer-events:none;]
  47.  
  48. [border=transparent; height:100%; width:60px; padding:0; pointer-events:auto; font-size:0;]filler![/border]
  49. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--border); background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  50. [border=transparent; height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler![/border]
  51. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--border); background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  52. [border=transparent; height:100%; flex-grow:1; padding:0; pointer-events:auto; font-size:0;]filler![/border]
  53. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--border); background: var(--bg-2); border-radius:50%; flex-shrink:0;][/border]
  54. [border=transparent; height:100%; width:60px; padding:0; pointer-events:auto; font-size:0;]filler![/border]
  55.  
  56. [/border]
  57. [/border]
  58. [comment]----tabs cover end----[/comment]
  59.  
  60. [/border]
  61. [comment]----header----[/comment]
  62.  
  63. [comment]----tabs----[/comment]
  64. [border=transparent; height:30%; width:100%; padding:0; display:flex; align-items:center; justify-content:flex-end;]
  65. [border=transparent; height:20%; width:65%; padding:0; overflow:hidden;][border=transparent; padding:0; margin-left:-10px;][tabs]
  66.  
  67. [comment]----tab one----[/comment]
  68. [tab=aaaa][border=transparent; padding:0; line-height:0;]
  69. [comment]----tab title----[/comment]
  70. [border=transparent; height:11%; width:67%; padding:0; position:absolute; top:88px; right:0; z-index:4;]
  71. [border=transparent; height:18px; width:18px; padding:0; border:2px solid var(--color-1); border-bottom:0; border-right:0; background: var(--bg-2); transform:rotate(45deg); margin-bottom:-10px; position:relative; z-index:2; left:62px;][/border]
  72.  
  73. [border=transparent; height:fit-content; width:calc(100% - 4px); padding:0; border:2px solid var(--color-1); display:flex; align-items:center; justify-content:center; background: var(--bg-2);]
  74. [border=transparent; height:fit-content; max-width:100%; padding:8px 0; box-sizing:border-box; color: var(--color-1); text-align:center; text-transform:uppercase; font-size:13px; letter-spacing:1px; line-height:100%; overflow:hidden; background: var(--bg-2); position:relative; z-index:3;][font=Montserrat][comment]
  75. ----* * * tab title here----
  76. [/comment]so, what's the story so far?[/font][/border]
  77. [/border]
  78. [/border]
  79.  
  80. [comment]----tab contents----[/comment]
  81. [border=transparent; height:calc(70% - 23px); width:100%; padding:0; position:absolute; bottom:0; left:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative;]
  82. [border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; line-height:130%; font-size:12px;][font=Karla][comment]
  83. ----* * * text starts here!----
  84. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus. Nam finibus nibh malesuada, accumsan ex vitae, euismod justo. Nunc malesuada diam in nisl tincidunt, vitae lacinia odio convallis.
  85.  
  86. Vivamus semper posuere purus, ut egestas felis suscipit sed. Pellentesque tincidunt in est sit amet lobortis. Nullam sodales iaculis enim, quis pharetra nisi tristique vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Duis blandit sollicitudin luctus. Sed sagittis, dolor nec fringilla iaculis, tellus quam dictum ante, vel scelerisque magna mi nec est. Etiam pellentesque arcu eu tristique porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo ipsum ut sapien rhoncus, vel malesuada mi molestie. In auctor arcu enim, vitae consequat urna interdum nec.
  87.  
  88. Nullam sagittis laoreet est, id iaculis risus euismod et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pulvinar maximus nulla, vitae pellentesque tortor vehicula sit amet. Quisque fermentum purus in diam tempus, suscipit egestas urna vestibulum. Sed varius ipsum elit, ut pretium velit efficitur sed. Mauris sollicitudin lacus id varius vehicula. Morbi blandit sodales turpis, a feugiat arcu mattis eu. Nam vitae risus ac neque finibus semper id eu mauris. Maecenas blandit consectetur libero at placerat. Morbi egestas lobortis enim, at lobortis arcu elementum quis. Donec ullamcorper pharetra accumsan. Etiam placerat pretium laoreet. Etiam vitae cursus odio, a ultrices sem. Phasellus blandit enim at felis cursus, id hendrerit sem faucibus. Donec sit amet laoreet tellus, sit amet scelerisque erat.
  89. [/font][/border]
  90. [/border][/border]
  91. [comment]----tab contents end----[/comment]
  92.  
  93. [comment]----button select----[/comment]
  94. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--color-1); background: var(--color-1); border-radius:50%; flex-shrink:0; position:absolute; top:55px; right:243px; z-index:4;][/border]
  95. [/border][/tab]
  96. [comment]----tab one end----[/comment]
  97.  
  98.  
  99. [comment]----tab two----[/comment]
  100. [tab=aaaa][border=transparent; padding:0; line-height:0;]
  101. [comment]----tab title----[/comment]
  102. [border=transparent; height:11%; width:67%; padding:0; position:absolute; top:88px; right:0; z-index:4;]
  103. [border=transparent; height:18px; width:18px; padding:0; border:2px solid var(--color-1); border-bottom:0; border-right:0; background: var(--bg-2); transform:rotate(45deg); margin-bottom:-10px; position:relative; z-index:2; left:153px;][/border]
  104.  
  105. [border=transparent; height:fit-content; width:calc(100% - 4px); padding:0; border:2px solid var(--color-1); display:flex; align-items:center; justify-content:center; background: var(--bg-2);]
  106. [border=transparent; height:fit-content; max-width:100%; padding:8px 0; box-sizing:border-box; color: var(--color-1); text-align:center; text-transform:uppercase; font-size:13px; letter-spacing:1px; line-height:100%; overflow:hidden; background: var(--bg-2); position:relative; z-index:3;][font=Montserrat][comment]
  107. ----* * * tab title here----
  108. [/comment]and who are the people involved?[/font][/border]
  109. [/border]
  110. [/border]
  111.  
  112. [comment]----tab contents----[/comment]
  113. [border=transparent; height:calc(70% - 19.5px); width:100%; padding:0; position:absolute; bottom:0; left:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative;]
  114. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: column nowrap;]
  115.  
  116. [comment]----copy this whole thing to make one new role! (role box 1 -- alternate role box 1 and 2!)----[/comment]
  117. [border=transparent; height:138px; width:100%; padding:15px 0 20px 0; box-sizing:border-box; border-left:3px solid var(--color-1); border-bottom:3px solid var(--color-1); display:flex; flex-flow: row nowrap; align-items:center;]
  118.  
  119. [comment]----line (ignore)----[/comment]
  120. [border=transparent; height:0; width:42px; padding:0; border-top:3px solid var(--color-1); flex-shrink:0; margin:0 -1px;][/border]
  121.  
  122. [comment]----picture (change the number in 'rX' to match the variable!)----[/comment]
  123. [border=transparent; height:95px; width:95px; padding:0; border:3px solid var(--color-1); flex-shrink:0;
  124. /*edit the number here!*/ background: var(--r1); background-size:cover;
  125. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  126.  
  127. [comment]----role info----[/comment]
  128. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow: row wrap;]
  129. [comment]----role name----[/comment]
  130. [border=transparent; height:28%; width:100%; padding:0 5px; box-sizing:border-box; color: var(--color-1); font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:100%; font-size:23px; display:flex; align-items:center; justify-content:flex-start;][font=Oswald][comment]
  131. ----* * * role name here----
  132. [/comment]role name[/font][/border]
  133.  
  134. [comment]----role description----[/comment]
  135. [border=transparent; height:calc(72% - 6px); width:100%; margin-top:6px; padding:0; 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 5px; box-sizing:border-box; color: var(--t-color); font-size:12px; line-height:130%; text-align:justify; direction:ltr;][font=Karla][comment]
  136. ----* * * description here!----
  137. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendissge sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus. Nam finibus nibh malesuada, accumsan ex vitae, euismod justo. Nunc malesuada diam in nisl tincidunt, vitae lacinia odio convallis.
  138. [/font][/border][/border][/border]
  139. [/border]
  140. [/border]
  141. [comment]----copy me too!----[/comment]
  142.  
  143. [comment]----copy this whole thing to make one new role! (role box 2 -- alternate role box 1 and 2!)----[/comment]
  144. [border=transparent; height:138px; width:100%; padding:15px 0 20px 0; box-sizing:border-box; border-right:3px solid var(--color-1); border-bottom:3px solid var(--color-1); display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  145.  
  146. [comment]----line (ignore)----[/comment]
  147. [border=transparent; height:0; width:42px; padding:0; border-top:3px solid var(--color-1); flex-shrink:0; margin:0 -1px;][/border]
  148.  
  149. [comment]----picture (change the number in 'rX' to match the variable!)----[/comment]
  150. [border=transparent; height:95px; width:95px; padding:0; border:3px solid var(--color-1); flex-shrink:0;
  151. /*edit the number here!*/ background: var(--r2); background-size:cover;
  152. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  153.  
  154. [comment]----role info----[/comment]
  155. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:15px; display:flex; flex-flow: row wrap;]
  156. [comment]----role name----[/comment]
  157. [border=transparent; height:28%; width:100%; padding:0 5px; box-sizing:border-box; color: var(--color-1); font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:100%; font-size:23px; display:flex; align-items:center; justify-content:flex-start;][font=Oswald][comment]
  158. ----* * * role name here----
  159. [/comment]role name[/font][/border]
  160.  
  161. [comment]----role description----[/comment]
  162. [border=transparent; height:calc(72% - 6px); width:100%; margin-top:6px; padding:0; 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 5px; box-sizing:border-box; color: var(--t-color); font-size:12px; line-height:130%; text-align:justify; direction:rtl;][font=Karla][comment]
  163. ----* * * description here!----
  164. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendissge sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus. Nam finibus nibh malesuada, accumsan ex vitae, euismod justo. Nunc malesuada diam in nisl tincidunt, vitae lacinia odio convallis.
  165. [/font][/border][/border][/border]
  166. [/border]
  167. [/border]
  168. [comment]----copy me too!----[/comment]
  169.  
  170. [comment]----copy this whole thing to make one new role! (role box 1 -- alternate role box 1 and 2!)----[/comment]
  171. [border=transparent; height:138px; width:100%; padding:15px 0 20px 0; box-sizing:border-box; border-left:3px solid var(--color-1); border-bottom:3px solid var(--color-1); display:flex; flex-flow: row nowrap; align-items:center;]
  172.  
  173. [comment]----line (ignore)----[/comment]
  174. [border=transparent; height:0; width:42px; padding:0; border-top:3px solid var(--color-1); flex-shrink:0; margin:0 -1px;][/border]
  175.  
  176. [comment]----picture (change the number in 'rX' to match the variable!)----[/comment]
  177. [border=transparent; height:95px; width:95px; padding:0; border:3px solid var(--color-1); flex-shrink:0;
  178. /*edit the number here!*/ background: var(--r3); background-size:cover;
  179. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  180.  
  181. [comment]----role info----[/comment]
  182. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:15px; display:flex; flex-flow: row wrap;]
  183. [comment]----role name----[/comment]
  184. [border=transparent; height:28%; width:100%; padding:0 5px; box-sizing:border-box; color: var(--color-1); font-weight:bold; letter-spacing:1px; text-transform:uppercase; line-height:100%; font-size:23px; display:flex; align-items:center; justify-content:flex-start;][font=Oswald][comment]
  185. ----* * * role name here----
  186. [/comment]role name[/font][/border]
  187.  
  188. [comment]----role description----[/comment]
  189. [border=transparent; height:calc(72% - 6px); width:100%; margin-top:6px; padding:0; 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 5px; box-sizing:border-box; color: var(--t-color); font-size:12px; line-height:130%; text-align:justify; direction:ltr;][font=Karla][comment]
  190. ----* * * description here!----
  191. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendissge sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus. Nam finibus nibh malesuada, accumsan ex vitae, euismod justo. Nunc malesuada diam in nisl tincidunt, vitae lacinia odio convallis.
  192. [/font][/border][/border][/border]
  193. [/border]
  194. [/border]
  195. [comment]----copy me too!----[/comment]
  196.  
  197. [/border]
  198. [/border][/border]
  199. [comment]----tab contents end----[/comment]
  200.  
  201. [comment]----button select----[/comment]
  202. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--color-1); background: var(--color-1); border-radius:50%; flex-shrink:0; position:absolute; top:55px; right:152px; z-index:4;][/border]
  203. [/border][/tab]
  204. [comment]----tab two end----[/comment]
  205.  
  206.  
  207. [comment]----tab three----[/comment]
  208. [tab=aaaa][border=transparent; padding:0; line-height:0;]
  209. [comment]----tab title----[/comment]
  210. [border=transparent; height:11%; width:67%; padding:0; position:absolute; top:88px; right:0; z-index:4;]
  211. [border=transparent; height:18px; width:18px; padding:0; border:2px solid var(--color-1); border-bottom:0; border-right:0; background: var(--bg-2); transform:rotate(45deg); margin-bottom:-10px; position:relative; z-index:2; left:245px;][/border]
  212.  
  213. [border=transparent; height:fit-content; width:calc(100% - 4px); padding:0; border:2px solid var(--color-1); display:flex; align-items:center; justify-content:center; background: var(--bg-2);]
  214. [border=transparent; height:fit-content; max-width:100%; padding:8px 0; box-sizing:border-box; color: var(--color-1); text-align:center; text-transform:uppercase; font-size:13px; letter-spacing:1px; line-height:100%; overflow:hidden; position:relative; z-index:3;][font=Montserrat][comment]
  215. ----* * * tab title here----
  216. [/comment]what else do i need to know?[/font][/border]
  217. [/border]
  218. [/border]
  219.  
  220. [comment]----tab contents----[/comment]
  221. [border=transparent; height:calc(70% - 20px); width:100%; padding:0; position:absolute; bottom:0; left:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; position:relative;]
  222. [border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: column nowrap;]
  223.  
  224. [comment]----copy this whole thing to make one new box (content box 1 -- alternate content box 1 & 2!)----[/comment]
  225. [border=transparent; height:50px; width:100%; padding:0; margin:9px 0; display:flex; flex-flow: row nowrap; align-items:center;]
  226. [comment]----number----[/comment]
  227. [border=transparent; height:100%; width:fit-content; padding:5px 8px 5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  228. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:36px; line-height:100%; letter-spacing:2px; font-weight:bold; text-align:center;][font=Oswald][comment]
  229. ----* * * number here----
  230. [/comment]01[/font][/border]
  231. [/border]
  232. [border=transparent; height:0; width:0; padding:0; border-left:11px solid var(--color-1); border-top:11px solid transparent; border-bottom:11px solid transparent; flex-shrink:0;][/border]
  233.  
  234. [comment]----content----[/comment]
  235. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:10px; 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:12px; line-height:135%; text-align:justify; direction:ltr;][font=Karla][comment]
  236. ----* * * text starts here----
  237. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus.
  238. [/font][/border][/border][/border]
  239. [/border]
  240. [comment]----copy me too!----[/comment]
  241.  
  242. [comment]----copy this whole thing to make one new box (content box 2 -- alternate content box 1 & 2!)----[/comment]
  243. [border=transparent; height:50px; width:100%; padding:0; margin:9px 0; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  244. [comment]----number----[/comment]
  245. [border=transparent; height:100%; width:fit-content; padding:5px 8px 5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  246. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:36px; line-height:100%; letter-spacing:2px; font-weight:bold; text-align:center;][font=Oswald][comment]
  247. ----* * * number here----
  248. [/comment]02[/font][/border]
  249. [/border]
  250. [border=transparent; height:0; width:0; padding:0; border-right:11px solid var(--color-1); border-top:11px solid transparent; border-bottom:11px solid transparent; flex-shrink:0;][/border]
  251.  
  252. [comment]----content----[/comment]
  253. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:10px; 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:12px; line-height:135%; text-align:justify; direction:rtl;][font=Karla][comment]
  254. ----* * * text starts here----
  255. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus.
  256. [/font][/border][/border][/border]
  257. [/border]
  258. [comment]----copy me too!----[/comment]
  259.  
  260. [comment]----copy this whole thing to make one new box (content box 1 -- alternate content box 1 & 2!)----[/comment]
  261. [border=transparent; height:50px; width:100%; padding:0; margin:9px 0; display:flex; flex-flow: row nowrap; align-items:center;]
  262. [comment]----number----[/comment]
  263. [border=transparent; height:100%; width:fit-content; padding:5px 8px 5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  264. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:36px; line-height:100%; letter-spacing:2px; font-weight:bold; text-align:center;][font=Oswald][comment]
  265. ----* * * number here----
  266. [/comment]03[/font][/border]
  267. [/border]
  268. [border=transparent; height:0; width:0; padding:0; border-left:11px solid var(--color-1); border-top:11px solid transparent; border-bottom:11px solid transparent; flex-shrink:0;][/border]
  269.  
  270. [comment]----content----[/comment]
  271. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:10px; 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:12px; line-height:135%; text-align:justify; direction:ltr;][font=Karla][comment]
  272. ----* * * text starts here----
  273. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus.
  274. [/font][/border][/border][/border]
  275. [/border]
  276. [comment]----copy me too!----[/comment]
  277.  
  278. [comment]----copy this whole thing to make one new box (content box 2 -- alternate content box 1 & 2!)----[/comment]
  279. [border=transparent; height:50px; width:100%; padding:0; margin:9px 0; display:flex; flex-flow: row-reverse nowrap; align-items:center;]
  280. [comment]----number----[/comment]
  281. [border=transparent; height:100%; width:fit-content; padding:5px 8px 5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  282. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:36px; line-height:100%; letter-spacing:2px; font-weight:bold; text-align:center;][font=Oswald][comment]
  283. ----* * * number here----
  284. [/comment]04[/font][/border]
  285. [/border]
  286. [border=transparent; height:0; width:0; padding:0; border-right:11px solid var(--color-1); border-top:11px solid transparent; border-bottom:11px solid transparent; flex-shrink:0;][/border]
  287.  
  288. [comment]----content----[/comment]
  289. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:10px; 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:12px; line-height:135%; text-align:justify; direction:rtl;][font=Karla][comment]
  290. ----* * * text starts here----
  291. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus.
  292. [/font][/border][/border][/border]
  293. [/border]
  294. [comment]----copy me too!----[/comment]
  295.  
  296. [comment]----copy this whole thing to make one new box (content box 1 -- alternate content box 1 & 2!)----[/comment]
  297. [border=transparent; height:50px; width:100%; padding:0; margin:9px 0; display:flex; flex-flow: row nowrap; align-items:center;]
  298. [comment]----number----[/comment]
  299. [border=transparent; height:100%; width:fit-content; padding:5px 8px 5px 10px; box-sizing:border-box; background: var(--color-1); display:flex; align-items:center; justify-content:center; flex-shrink:0;]
  300. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:36px; line-height:100%; letter-spacing:2px; font-weight:bold; text-align:center;][font=Oswald][comment]
  301. ----* * * number here----
  302. [/comment]05[/font][/border]
  303. [/border]
  304. [border=transparent; height:0; width:0; padding:0; border-left:11px solid var(--color-1); border-top:11px solid transparent; border-bottom:11px solid transparent; flex-shrink:0;][/border]
  305.  
  306. [comment]----content----[/comment]
  307. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:10px; 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:12px; line-height:135%; text-align:justify; direction:ltr;][font=Karla][comment]
  308. ----* * * text starts here----
  309. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus.
  310. [/font][/border][/border][/border]
  311. [/border]
  312. [comment]----copy me too!----[/comment]
  313.  
  314. [comment]----text box (add display:none; to the end of the border if you don't want this!)----[/comment]
  315. [border=transparent; height:auto; width:100%; margin:20px 0 2px 0; padding:0; color: var(--t-color); font-size:12px; line-height:130%; text-align:justify;][font=Karla][comment]
  316. ----* * * text starts here!----
  317. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat justo vitae odio aliquam, at suscipit mauris ullamcorper. Maecenas eleifend ut lorem sed ornare. Aenean turpis elit, aliquam ut viverra a, efficitur et risus. Suspendisse sed lectus ac urna posuere consectetur. Sed dapibus, erat at tristique suscipit, quam velit scelerisque nisl, at bibendum nisi magna vitae sem. Phasellus varius auctor tristique. Praesent ac turpis massa. Morbi magna lorem, feugiat quis purus a, tempus efficitur nulla. Sed auctor suscipit sapien, non facilisis sem. Donec placerat, mi et hendrerit lobortis, ipsum odio condimentum risus, nec eleifend ex diam eu sapien. Mauris at dolor molestie, pellentesque felis at, malesuada purus. Nam finibus nibh malesuada, accumsan ex vitae, euismod justo. Nunc malesuada diam in nisl tincidunt, vitae lacinia odio convallis.
  318.  
  319. Vivamus semper posuere purus, ut egestas felis suscipit sed. Pellentesque tincidunt in est sit amet lobortis. Nullam sodales iaculis enim, quis pharetra nisi tristique vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Duis blandit sollicitudin luctus. Sed sagittis, dolor nec fringilla iaculis, tellus quam dictum ante, vel scelerisque magna mi nec est. Etiam pellentesque arcu eu tristique porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo ipsum ut sapien rhoncus, vel malesuada mi molestie. In auctor arcu enim, vitae consequat urna interdum nec.
  320. [/font][/border]
  321.  
  322. [/border]
  323. [/border][/border]
  324. [comment]----tab contents end----[/comment]
  325.  
  326. [comment]----button select----[/comment]
  327. [border=transparent; height:15px; width:15px; padding:0; border:1px solid var(--color-1); background: var(--color-1); border-radius:50%; flex-shrink:0; position:absolute; top:55px; right:60px; z-index:4;][/border]
  328. [/border][/tab]
  329. [comment]----tab three end----[/comment]
  330.  
  331. [/tabs][/border][/border]
  332. [/border]
  333. [comment]----tabs end----[/comment]
  334.  
  335. [/border][/border]
  336. [comment]----signature! (do not remove!)-----
  337. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:80px; color: var(--color-1); left:0; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by natasha., coded by uxie♡[/font][/bg]
  338. [/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!