API tools faq
paste
ooksie

fortune's fool (uxie x reveriee)

ooksie
Oct 18th, 2020 (edited)
277
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.38 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *the background image;
  3. --bg: url('https://cdn.discordapp.com/attachments/763695220701134872/767215195184431124/WXkCvoaKHoAAAAAElFTkSuQmCC.png');
  4. *the font image used for the title;
  5. --title: url('https://cdn.discordapp.com/attachments/763695220701134872/767214109271523368/Hem4uhvfuoApAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAwcAL6ugbukCoQAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQI.png');
  6. *text colour of the title contents;
  7. --h-color: #fff;
  8. *slightly transparent black used for most of the backgrounds;
  9. --bg-color: rgb(0, 0, 0, 0.75);
  10. *off-white colour on the tab contents;
  11. --color-1: #fafaf4;
  12. *lighter red accent colour;
  13. --color-2: #CE443F;
  14. *dark red accent colour;
  15. --color-3: #c41713;
  16. *light gray headings;
  17. --color-4: #dfe0d6;
  18. *text colour;
  19. --t-color: #313130;
  20.  
  21. /**** tab images are categorised by the tabs they're on, a being tab 1, b being tab 2 and so on. ***/
  22. *the images on the left and right of the text respectively;
  23. --aimg-1: url('https://64.media.tumblr.com/879ccba476579cdfd5279714efa5002a/d4d8bc9cfde72fff-83/s1280x1920/8fc353a77769c99238af5c4ccd43ec564ead7f1e.jpg');
  24. --aimg-2: url('https://64.media.tumblr.com/c7239000d3a0b2fee70e9effecdf2c4e/d4d8bc9cfde72fff-f7/s1280x1920/36489859b33ee3db1220cd90181acd9ad6726c25.jpg');
  25.  
  26. *the character images;
  27. --bimg-1: url('https://64.media.tumblr.com/da748e694ef842690566f0a265055558/d4d8bc9cfde72fff-5a/s1280x1920/76ad5758ebda6e7008c70b61195db8f0dfa4493e.jpg');
  28. --bimg-2: url('https://64.media.tumblr.com/5be0afb90f567f3e852e700c7362a137/d4d8bc9cfde72fff-32/s1280x1920/3b06e0a457c65d2e742120b2926d3a7cba16ecc7.png');
  29. --bimg-3: url('https://64.media.tumblr.com/369df1eafbdad47eaa7df56980f08fe5/d4d8bc9cfde72fff-8f/s1280x1920/0d0a2d97c74c5111c71a8d0d2155d43e242a313f.jpg');
  30.  
  31. --cimg-1: url('https://64.media.tumblr.com/da748e694ef842690566f0a265055558/d4d8bc9cfde72fff-5a/s1280x1920/76ad5758ebda6e7008c70b61195db8f0dfa4493e.jpg');
  32. --cimg-2: url('https://64.media.tumblr.com/5be0afb90f567f3e852e700c7362a137/d4d8bc9cfde72fff-32/s1280x1920/3b06e0a457c65d2e742120b2926d3a7cba16ecc7.png');
  33. --cimg-3: url('https://64.media.tumblr.com/369df1eafbdad47eaa7df56980f08fe5/d4d8bc9cfde72fff-8f/s1280x1920/0d0a2d97c74c5111c71a8d0d2155d43e242a313f.jpg');
  34.  
  35. height:410px; width:730px; padding:0; margin:auto; line-height:0; padding:20px; display:flex; align-items:center; justify-content:center; position:relative;]
  36. [comment]----background----[/comment]
  37. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg) 85% 100%; background-size:auto 108%; position:absolute; pointer-events:none; top:0; left:0;][/border]
  38.  
  39. [border=transparent; margin-top:20px; height:8%; width:45%; padding:0; overflow:hidden; display:flex; justify-content:center;][border=transparent; padding:0; margin-top:-25px;][tabs]
  40. [comment]----first page lobby----[/comment]
  41. [tab=.][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; pointer-events:none; line-height:0;]
  42. [border=transparent; height:63%; width:68%; background-color: var(--bg-color); padding:15px 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:center;]
  43.  
  44. [comment]----short description----[/comment]
  45. [border=transparent; height:fit-content; width:57%; border-bottom:3px solid var(--h-color); padding:3px 15px; box-sizing:border-box; text-align:right; font-size:13px; color: var(--h-color); line-height:130%; margin-right:auto;][font=Roboto]a story on gods, fate, and love long lost[/font][/border]
  46.  
  47. [comment]----title text----[/comment]
  48. [border=transparent; flex-grow:1; width:100%; padding:0; display:flex; flex-flow: row wrap; justify-content:center; align-items:center; align-content:center;]
  49.  
  50. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h-color); font-size:18px; line-height:130%; text-align:center; pointer-events:auto;][font=Roboto][comment]
  51. ----- short text here idk -----
  52. [/comment]oh, i am[/font][/border]
  53.  
  54. [comment]----actual title but real (this is a picture, so you'd have to get your own image file)----[/comment]
  55. [border=transparent; height:70px; width:350px; padding:0; background: var(--title); background-size:cover; image-rendering:crisp-edges][/border]
  56.  
  57. [comment]----actual title but fake (this was made w/ bbcode if u don't want to use an image.
  58. to use, remove the /*remove this*/ display:none; and add it to the actual title but real border) -----[/comment]
  59. [border=transparent; height:fit-content; width:100%; padding:0; color: var(--h-color); font-size:43px; font-weight:bold; text-transform:uppercase; text-align:center; letter-spacing:0.5px; line-height:130%; /*remove this*/ display:none;][font=Times][comment]----* * *put your title here!----
  60. [/comment]fortune's fool[/font][/border]
  61.  
  62. [/border]
  63.  
  64. [comment]----users text----[/comment]
  65. [border=transparent; height:fit-content; width:50%; border-top:3px solid var(--h-color); padding:3px 15px; box-sizing:border-box; text-align:left; font-size:13px; color: var(--h-color); line-height:130%; margin-left:auto;][font=Roboto][comment]
  66. ---- put in the users of the roleplay here ----
  67. [/comment]by reveriee x neon reverie[/font][/border]
  68.  
  69. [/border]
  70. [/border][/tab]
  71. [comment]----first page lobby end----[/comment]
  72.  
  73. [comment]----main content----[/comment]
  74. [tab=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:30px; box-sizing:border-box; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; line-height:0;]h
  75. [border=transparent; height:100%; width:100%; background-color: var(--bg-color); padding:10px; box-sizing:border-box;]
  76. [comment]----container box----[/comment]
  77. [border=transparent; height:100%; width:100%; padding:0; border:5px solid var(--color-1); background-color: var(--color-1); box-sizing:border-box; position:relative; display:flex; justify-content:center; align-items:flex-start;]
  78.  
  79. [comment]----tab cover----[/comment]
  80. [border=transparent; height: 10%; width:100%; background-color: var(--color-1); padding:0; position:absolute; display:flex; flex-flow: row nowrap; justify-content:center; color: var(--t-color); align-items:center; font-weight:bold; text-transform:uppercase; font-style:oblique; pointer-events:none;]
  81. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-size:30px; font-style:normal;]❦[/border]
  82. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-size:27px; margin:0 8px;][font=Kanit]/[/font][/border]
  83. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-size:26px;][font=Source Sans Pro][comment]
  84. * * *---- button title here ----
  85. [/comment]deities[/font][/border]
  86. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-size:27px; margin:0 8px;][font=Kanit]/[/font][/border]
  87. [border=transparent; height:fit-content; width:fit-content; padding:0; line-height:120%; font-size:26px;][font=Source Sans Pro][comment]
  88. * * *---- button title here ----
  89. [/comment]mortals[/font][/border]
  90. [/border]
  91.  
  92. [comment]----actual tabs----[/comment]
  93. [border=transparent; height:8%; width:50%; padding:0; overflow:hidden;][border=transparent; padding:0; margin-top:5px;][tabs]
  94. [tab=..][border=transparent; height: 100%; width:100%; position:absolute; top:0; left:0; padding:0; pointer-events:none; display:flex; flex-flow: row nowrap;]
  95.  
  96. [comment]----image 1----[/comment]
  97. [border=transparent; height:100%; width:27%; background: var(--aimg-1); background-size:cover; padding:0; flex-shrink:0;][/border]
  98.  
  99. [comment]----tab 1 contents----[/comment]
  100. [border=transparent; flex-grow:1; height:100%; padding:0; margin:0 10px; display:flex; flex-flow: column nowrap;]
  101. [comment]----filler box for access to buttons----[/comment]
  102. [border=transparent; height:17%; width:100%; padding:0; pointer-events:none;][/border]
  103.  
  104. [comment]----actual body contents----[/comment]
  105. [border=transparent; flex-grow:1; width:100%; padding:3px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:fit-content; width:50%; padding:0; box-sizing:border-box; color: var(--t-color); text-align:justify; font-size:12px; line-height:115%;][font=Source Sans Pro][comment]---- * * * your text goes here!----
  106. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  107.  
  108. Integer facilisis nisi in elit tempus gravida. Aenean vehicula bibendum eleifend. Praesent finibus magna quam, molestie condimentum nunc blandit eu. Morbi et rutrum mi. Quisque viverra tristique nisl, sit amet blandit neque maximus eu. Donec eget mauris leo. Nullam imperdiet interdum velit, vel consectetur purus ullamcorper vel. Donec commodo urna ex, ac placerat nisi scelerisque eu. Maecenas quis ornare lectus, et consectetur metus. Donec id rutrum urna. Nunc accumsan mattis massa ut mattis. Proin nisi quam, tempus efficitur dolor eget, ornare aliquam elit. Curabitur ultricies justo quis tellus condimentum, a posuere lacus iaculis. Aliquam vitae accumsan nibh.
  109. [/font][/border][/border][/border]
  110. [/border]
  111.  
  112. [comment]----image 2----[/comment]
  113. [border=transparent; height:100%; width:27%; background: var(--aimg-2); background-size:cover; padding:0; flex-shrink:0;][/border]
  114.  
  115. [comment]----button select----[/comment]
  116. [border=transparent; height:fit-content; width:fit-content; padding:0 1px; box-sizing:border-box; background-color: var(--color-1); position:absolute; top:4px; left:201px; line-height:95%; font-size:30px; color: var(--color-2); border-bottom:3px solid var(--color-2); font-weight:bold;]❦[/border]
  117.  
  118. [/border][/tab]
  119.  
  120. [tab=deities..][border=transparent; height: 100%; width:100%; position:absolute; top:0; left:0; padding:0; pointer-events:none; display:flex; flex-flow: column nowrap;]
  121.  
  122. [comment]----header cover for access to tabs ----[/comment]
  123. [border=transparent; height:13%; width:100%; padding:0; flex-shrink:0;][/border]
  124.  
  125. [comment]----tab contents----[/comment]
  126. [border=transparent; flex-grow:1; width:100%; pointer-events:auto; padding:0; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  127.  
  128. [comment]----* * *copy this entire thing to get one character box----[/comment]
  129. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  130.  
  131. [comment]----character image, remember to change the image variable----[/comment]
  132. [border=transparent; height:100%; width:23%; padding:0; background: var(--bimg-1); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  133. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  134. [/border]
  135.  
  136. [comment]----other name/title/role----[/comment]
  137. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  138. ---- * * * character's alias/title/role here ----
  139. [/comment]이름[/font][/border]
  140.  
  141. [comment]----info container----[/comment]
  142. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:8px; display:flex; flex-flow: column nowrap;]
  143.  
  144. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  145. [comment]----name----[/comment]
  146. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  147. [/comment]name here[/font][/border]
  148.  
  149. [comment]----line---[/comment]
  150. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  151.  
  152. [comment]----role----[/comment]
  153. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  154. ---- * * * character's role here ----
  155. [/comment]god of role[/font][/border]
  156. [/border]
  157.  
  158. [comment]----body content----[/comment]
  159. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  160. ---- * * * character's description starts here ----
  161. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  162. [/font][/border][/border][/border]
  163. [comment]----body content end----[/comment]
  164. [/border]
  165. [comment]----info container end----[/comment]
  166. [/border]
  167. [comment]----copy me too!!!!----[/comment]
  168.  
  169. [comment]----* * *copy this entire thing to get one character box----[/comment]
  170. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  171.  
  172. [comment]----character image, remember to change the image variable----[/comment]
  173. [border=transparent; height:100%; width:23%; padding:0; background: var(--bimg-2); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  174. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  175. [/border]
  176.  
  177. [comment]----other name/title/role----[/comment]
  178. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  179. ---- * * * character's alias/title/role here ----
  180. [/comment]이름[/font][/border]
  181.  
  182. [comment]----info container----[/comment]
  183. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:8px; display:flex; flex-flow: column nowrap;]
  184.  
  185. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  186. [comment]----name----[/comment]
  187. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  188. [/comment]name here[/font][/border]
  189.  
  190. [comment]----line---[/comment]
  191. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  192.  
  193. [comment]----role----[/comment]
  194. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  195. ---- * * * character's role here ----
  196. [/comment]god of role[/font][/border]
  197. [/border]
  198.  
  199. [comment]----body content----[/comment]
  200. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  201. ---- * * * character's description starts here ----
  202. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  203. [/font][/border][/border][/border]
  204. [comment]----body content end----[/comment]
  205. [/border]
  206. [comment]----info container end----[/comment]
  207. [/border]
  208. [comment]----copy me too!!!!----[/comment]
  209.  
  210. [comment]----* * *copy this entire thing to get one character box----[/comment]
  211. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row nowrap; margin:5px 0;]
  212.  
  213. [comment]----character image, remember to change the image variable----[/comment]
  214. [border=transparent; height:100%; width:23%; padding:0; background: var(--bimg-3); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  215. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  216. [/border]
  217.  
  218. [comment]----other name/title/role----[/comment]
  219. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  220. ---- * * * character's alias/title/role here ----
  221. [/comment]이름[/font][/border]
  222.  
  223. [comment]----info container----[/comment]
  224. [border=transparent; height:100%; flex-grow:1; padding:0; margin-left:8px; display:flex; flex-flow: column nowrap;]
  225.  
  226. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  227. [comment]----name----[/comment]
  228. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  229. [/comment]name here[/font][/border]
  230.  
  231. [comment]----line---[/comment]
  232. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  233.  
  234. [comment]----role----[/comment]
  235. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  236. ---- * * * character's role here ----
  237. [/comment]god of role[/font][/border]
  238. [/border]
  239.  
  240. [comment]----body content----[/comment]
  241. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  242. ---- * * * character's description starts here ----
  243. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  244. [/font][/border][/border][/border]
  245. [comment]----body content end----[/comment]
  246. [/border]
  247. [comment]----info container end----[/comment]
  248. [/border]
  249. [comment]----copy me too!!!!----[/comment]
  250.  
  251. [/border][/border]
  252.  
  253. [comment]----button select----[/comment]
  254. [border=transparent; height:fit-content; width:fit-content; padding:0 1.5px; box-sizing:border-box; background-color: var(--color-1); position:absolute; top:5.5px; left:251.5px; line-height:95%; font-size:26px; color: var(--color-2); border-bottom:3px solid var(--color-2); font-weight:bold; font-style:oblique; text-transform:uppercase;][font=Source Sans Pro][comment]
  255. * * *---- button title here ----
  256. [/comment]deities[/font][/border]
  257.  
  258. [/border][/tab]
  259.  
  260. [tab=mortals..][border=transparent; height: 100%; width:100%; position:absolute; top:0; left:0; padding:0; pointer-events:none; display:flex; flex-flow: column nowrap;]
  261.  
  262. [comment]----header cover for access to tabs ----[/comment]
  263. [border=transparent; height:13%; width:100%; padding:0; flex-shrink:0;][/border]
  264.  
  265. [comment]----tab contents----[/comment]
  266. [border=transparent; flex-grow:1; width:100%; pointer-events:auto; padding:0; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  267.  
  268. [comment]----* * *copy this entire thing to get one character box----[/comment]
  269. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:5px 0;]
  270.  
  271. [comment]----character image, remember to change the image variable----[/comment]
  272. [border=transparent; height:100%; width:23%; padding:0; background: var(--cimg-1); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  273. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  274. [/border]
  275.  
  276. [comment]----other name/title/role----[/comment]
  277. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  278. ---- * * * character's alias/title/role here ----
  279. [/comment]이름[/font][/border]
  280.  
  281. [comment]----info container----[/comment]
  282. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:8px; display:flex; flex-flow: column nowrap;]
  283.  
  284. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  285. [comment]----name----[/comment]
  286. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  287. [/comment]name here[/font][/border]
  288.  
  289. [comment]----line---[/comment]
  290. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  291.  
  292. [comment]----role----[/comment]
  293. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  294. ---- * * * character's role here ----
  295. [/comment]role here[/font][/border]
  296. [/border]
  297.  
  298. [comment]----body content----[/comment]
  299. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  300. ---- * * * character's description starts here ----
  301. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  302. [/font][/border][/border][/border]
  303. [comment]----body content end----[/comment]
  304. [/border]
  305. [comment]----info container end----[/comment]
  306. [/border]
  307. [comment]----copy me too!!!!----[/comment]
  308.  
  309. [comment]----* * *copy this entire thing to get one character box----[/comment]
  310. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:5px 0;]
  311.  
  312. [comment]----character image, remember to change the image variable----[/comment]
  313. [border=transparent; height:100%; width:23%; padding:0; background: var(--cimg-2); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  314. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  315. [/border]
  316.  
  317. [comment]----other name/title/role----[/comment]
  318. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  319. ---- * * * character's alias/title/role here ----
  320. [/comment]이름[/font][/border]
  321.  
  322. [comment]----info container----[/comment]
  323. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:8px; display:flex; flex-flow: column nowrap;]
  324.  
  325. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  326. [comment]----name----[/comment]
  327. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  328. [/comment]name here[/font][/border]
  329.  
  330. [comment]----line---[/comment]
  331. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  332.  
  333. [comment]----role----[/comment]
  334. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  335. ---- * * * character's role here ----
  336. [/comment]role here[/font][/border]
  337. [/border]
  338.  
  339. [comment]----body content----[/comment]
  340. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  341. ---- * * * character's description starts here ----
  342. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  343. [/font][/border][/border][/border]
  344. [comment]----body content end----[/comment]
  345. [/border]
  346. [comment]----info container end----[/comment]
  347. [/border]
  348. [comment]----copy me too!!!!----[/comment]
  349.  
  350. [comment]----* * *copy this entire thing to get one character box----[/comment]
  351. [border=transparent; height:145px; width:50%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:5px 0;]
  352.  
  353. [comment]----character image, remember to change the image variable----[/comment]
  354. [border=transparent; height:100%; width:23%; padding:0; background: var(--cimg-3); /*edit this to adjust cropping of pic*/ background-position: 50% 50%; background-size:cover; position:relative; flex-shrink:0;]
  355. [border=transparent; height:2px; width:80%; background-color: var(--h-color); padding:0; position:absolute; bottom:15px; right:0;][/border]
  356. [/border]
  357.  
  358. [comment]----other name/title/role----[/comment]
  359. [border=transparent; flex-shrink:0; height:100%; width:10%; padding:5px; box-sizing:border-box; background-color: var(--color-3); text-align:center; color: var(--h-color); font-size:40px; line-height:120%; display:flex; align-items:center; justify-content:center;][font=Noto Sans][comment]
  360. ---- * * * character's alias/title/role here ----
  361. [/comment]이름[/font][/border]
  362.  
  363. [comment]----info container----[/comment]
  364. [border=transparent; height:100%; flex-grow:1; padding:0; margin-right:8px; display:flex; flex-flow: column nowrap;]
  365.  
  366. [border=transparent; height:fit-content; width:100%; padding:3px 8px; box-sizing:border-box; background-color: var(--color-4); display:flex; flex-flow: row nowrap; align-items:center;]
  367. [comment]----name----[/comment]
  368. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:22px; color: var(--color-3); text-transform:uppercase; font-weight:900; line-height:130%; font-style:oblique; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][font=Times][comment]----- * * *character's name here-----
  369. [/comment]name here[/font][/border]
  370.  
  371. [comment]----line---[/comment]
  372. [border=transparent; height:2px; width:25px; background-color: var(--t-color); margin:0 8px; padding:0; margin-top:3px;][/border]
  373.  
  374. [comment]----role----[/comment]
  375. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; color: var(--t-color); line-height:130%;][font=Source Sans Pro][comment]
  376. ---- * * * character's role here ----
  377. [/comment]role here[/font][/border]
  378. [/border]
  379.  
  380. [comment]----body content----[/comment]
  381. [border=transparent; flex-grow:1; width:100%; margin-top:8px; padding:0 0 3px 0; 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 3px; box-sizing:border-box; text-align:justify; font-size:13px; color: var(--t-color); line-height:120%;][font=Source Sans Pro][comment]
  382. ---- * * * character's description starts here ----
  383. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit tincidunt ipsum sit amet venenatis. Donec vulputate, nulla quis sollicitudin dapibus, sapien velit egestas nibh, nec venenatis augue urna in est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac leo viverra, lobortis felis et, lacinia orci. Sed in egestas diam, sit amet condimentum dui. Praesent efficitur auctor dapibus. Etiam arcu nulla, faucibus eu bibendum accumsan, sodales quis neque. Aliquam placerat enim sit amet dui eleifend convallis in a eros. Aenean pretium nunc fermentum vestibulum condimentum. Nam maximus nunc turpis, quis pulvinar enim facilisis in. Phasellus eu elit sed orci maximus imperdiet. Proin justo orci, sollicitudin a dapibus vel, placerat quis odio. Nunc volutpat ipsum at orci malesuada, ac dapibus metus efficitur. Donec dictum odio sit amet tincidunt vestibulum. Mauris nisi mauris, malesuada sit amet vehicula eu, molestie vel lectus.
  384. [/font][/border][/border][/border]
  385. [comment]----body content end----[/comment]
  386. [/border]
  387. [comment]----info container end----[/comment]
  388. [/border]
  389. [comment]----copy me too!!!!----[/comment]
  390.  
  391. [/border][/border]
  392.  
  393. [comment]----button select----[/comment]
  394. [border=transparent; height:fit-content; width:fit-content; padding:0 1.5px; box-sizing:border-box; background-color: var(--color-1); position:absolute; top:5.5px; left:364px; line-height:95%; font-size:26px; color: var(--color-2); border-bottom:3px solid var(--color-2); font-weight:bold; font-style:oblique; text-transform:uppercase;][font=Source Sans Pro][comment]
  395. * * *---- button title here ----
  396. [/comment]mortals[/font][/border]
  397.  
  398. [/border][/tab]
  399.  
  400. [/tabs][/border][/border]
  401.  
  402. [/border]
  403. [comment]----container box----[/comment]
  404. [/border]
  405. [/border][/tab]
  406. [comment]----main content end----[/comment]
  407. [/tabs][/border][/border]
  408.  
  409. [comment]----signature! do not remove!----[/comment][bg=transparent; height:fit-content; padding:0; width:100%; margin:auto; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px; color: var(--color-1); position:absolute; bottom:15px; left:0;][font=Open Sans]♡design by reveriee, coded by uxie♡[/font][/bg]
  410. [/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!