API tools faq
paste
Advertisement
soxxx

illusion

soxxx
Feb 18th, 2020
300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.21 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=bkgd]
  3. --border-color: #fff;
  4. --color1: #453A34;
  5. --color2: #7A352D;
  6. --color3: #BDABA8;
  7. --color4: #51B2C5;
  8. --color5: #1A5A66;
  9. --text-color: #fff;
  10. position: relative;
  11. width: 280px;
  12. height: 385px;
  13. margin-right: auto;
  14. margin-left: auto;
  15. background: url(https://i.pinimg.com/564x/e0/0f/7f/e00f7f3debd8ef0f4422ce8ef200f395.jpg);
  16. background-size: 100%;
  17. background-position: 0% 70%;
  18. border: 1px solid var(--border-color);
  19. overflow: visible;
  20. margin-top: 40px;
  21. cursor: url('https://i.imgur.com/FMvuswx.png'), auto;
  22. [/class]
  23.  
  24. [class=name]
  25. position: absolute;
  26. top: -35px;
  27. height: 25px;
  28. width: 259px;
  29. text-align: left;
  30. text-transform: uppercase;
  31. font-weight: 400;
  32. font-style: normal;
  33. font-size: 20px;
  34. line-height: 25px;
  35. color: var(--text-color);
  36. border: 1px solid var(--border-color);
  37. padding: 0px 10px 0px 10px;
  38. [/class]
  39.  
  40. [class=role]
  41. position: absolute;
  42. top: 183px;
  43. left: -212px;
  44. height: 18px;
  45. width: 365px;
  46. transform: rotate(-90deg);
  47. text-align: left;
  48. text-transform: uppercase;
  49. font-weight: 400;
  50. font-style: normal;
  51. font-size: 13px;
  52. line-height: 18px;
  53. color: var(--text-color);
  54. border: 1px solid var(--border-color);
  55. padding: 0px 10px 0px 10px;
  56. [/class]
  57.  
  58. [class=back]
  59. position: absolute;
  60. top: 22px;
  61. left: 265px;
  62. height: 12px;
  63. width: auto;
  64. transform: rotate(90deg);
  65. text-align: left;
  66. text-transform: uppercase;
  67. font-weight: 400;
  68. font-style: normal;
  69. font-size: 8px;
  70. line-height: 12px;
  71. color: var(--text-color);
  72. border: 1px solid var(--border-color);
  73. padding: 0px 10px 0px 10px;
  74. letter-spacing: 0px;
  75. [/class]
  76.  
  77. [class=tab]
  78. position: absolute;
  79. border: 1px solid var(--border-color);
  80. transition-duration: 0.3s;
  81. color: var(--text-color);
  82. text-transform: uppercase;
  83. [/class]
  84.  
  85. [class=tabs]
  86. height: 65px;
  87. width: 10px;
  88. border: 1px solid var(--border-color);
  89. left: 260px;
  90. font-size: 8px;
  91. line-height: 10px;
  92. writing-mode: vertical-rl;
  93. text-orientation: mixed;
  94. text-align: center;
  95. letter-spacing: 2px;
  96. [/class]
  97.  
  98. [class name=tab state=hover]
  99. background-color: var(--border-color);
  100. transition-duration: 0.3s;
  101. color: #000;
  102. [/class]
  103.  
  104. [class=tab1]
  105. top: 10px;
  106. [/class]
  107.  
  108. [class=tab2]
  109. top: 85px;
  110. [/class]
  111.  
  112. [class=tab3]
  113. top: 160px;
  114. [/class]
  115.  
  116. [class=tab4]
  117. top: 235px;
  118. [/class]
  119.  
  120. [class=tab5]
  121. top: 310px;
  122. [/class]
  123.  
  124. [class=col1]
  125. background-color: var(--color1);
  126. [/class]
  127.  
  128. [class=col2]
  129. background-color: var(--color2);
  130. [/class]
  131.  
  132. [class=col3]
  133. background-color: var(--color3);
  134. [/class]
  135.  
  136. [class=col4]
  137. background-color: var(--color4);
  138. [/class]
  139.  
  140. [class=col5]
  141. background-color: var(--color5);
  142. [/class]
  143.  
  144. [class=header]
  145. position: absolute;
  146. width: auto;
  147. height: 27px;
  148. left: 12px;
  149. top: 12px;
  150. color: var(--text-color);
  151. font-size: 15px;
  152. line-height: 30px;
  153. text-align: left;
  154. text-transform: uppercase;
  155. padding: 0px 10px 0px 10px;
  156. [/class]
  157.  
  158. [class=headerbar]
  159. position: absolute;
  160. width: 240px;
  161. height: 30px;
  162. left: 10px;
  163. border: 1px solid var(--border-color);
  164. top: 10px;
  165. [/class]
  166.  
  167. [class=headerline]
  168. position: absolute;
  169. width: 96%;
  170. height: 1px;
  171. background-color: var(--border-color);
  172. top: 15px;
  173. [/class]
  174.  
  175. [class=textcontainer]
  176. position: absolute;
  177. width: 240px;
  178. height: 325px;
  179. left: 10px;
  180. border: 1px solid var(--border-color);
  181. top: 50px;
  182. overflow: hidden;
  183. [/class]
  184.  
  185. [class=text]
  186. position: relative;
  187. width: 225px;
  188. height: 310px;
  189. color: var(--text-color);
  190. overflow: auto;
  191. font-size: 10px;
  192. line-height: 12px;
  193. text-align: justify;
  194. text-transform: lowercase;
  195. padding: 10px 22px 5px 10px;
  196. [/class]
  197.  
  198. [class=tag]
  199. position: relative;
  200. overflow: visible;
  201. display: inline;
  202. width: auto;
  203. height: auto;
  204. border: 1px solid var(--border-color);
  205. font-size: 9px;
  206. text-align: center;
  207. margin-right: 3px;
  208. padding: 1px 3px 1px 3px;
  209. text-transform: uppercase;
  210. color: var(--text-color);
  211. font-weight: 400;
  212. [/class]
  213.  
  214. [class=credit]
  215. position: relative;
  216. overflow: hidden;
  217. width: 100%;
  218. height: 10px;
  219. text-align: center;
  220. font-style: normal;
  221. font-weight: normal;
  222. font-size: 8px;
  223. color: #dedede;
  224. opacity: 0.25;
  225. [/class]
  226.  
  227. [class=hidden]
  228. display: none;
  229. [/class]
  230.  
  231. [class=breaks]
  232. white-space: pre-wrap;
  233. [/class]
  234.  
  235. [script class=tab on=click]
  236. hide tabsContent
  237. set currentTab (getText)
  238. if (eq ${currentTab} collapse) (fadeIn 400 tabsContent0)
  239. if (eq ${currentTab} one) (fadeIn 400 tabsContent1)
  240. if (eq ${currentTab} two) (fadeIn 400 tabsContent2)
  241. if (eq ${currentTab} three) (fadeIn 400 tabsContent3)
  242. if (eq ${currentTab} four) (fadeIn 400 tabsContent4)
  243. if (eq ${currentTab} five) (fadeIn 400 tabsContent5)
  244. [/script]
  245.  
  246. [div class=bkgd]
  247. [div class="name col1"][font=Jua]illusion[/font][/div]
  248. [div class="role col5"][font=Jua]the pirate king[/font][/div]
  249. [div class="back tab col2"][font=Jua]collapse[/font][/div]
  250. [div class="tab tabs tab1 col1"][font=Jua]one[/font][/div]
  251. [div class="tab tabs tab2 col2"][font=Jua]two[/font][/div]
  252. [div class="tab tabs tab3 col3"][font=Jua]three[/font][/div]
  253. [div class="tab tabs tab4 col4"][font=Jua]four[/font][/div]
  254. [div class="tab tabs tab5 col5"][font=Jua]five[/font][/div]
  255. [div class="headerbar col1 hidden tabsContent tabsContent1"][div class=headerline][/div][/div]
  256. [div class="headerbar col2 hidden tabsContent tabsContent2"][div class=headerline][/div][/div]
  257. [div class="headerbar col3 hidden tabsContent tabsContent3"][div class=headerline][/div][/div]
  258. [div class="headerbar col4 hidden tabsContent tabsContent4"][div class=headerline][/div][/div]
  259. [div class="headerbar col5 hidden tabsContent tabsContent5"][div class=headerline][/div][/div]
  260. [div class="header col1 hidden tabsContent tabsContent1"][font=Jua]basics + appearance[/font][/div]
  261. [div class="header col2 hidden tabsContent tabsContent2"][font=Jua]persona[/font][/div]
  262. [div class="header col3 hidden tabsContent tabsContent3"][font=Jua]backstory[/font][/div]
  263. [div class="header col4 hidden tabsContent tabsContent4"][font=Jua]misc. + relationships[/font][/div]
  264. [div class="header col5 hidden tabsContent tabsContent5"][font=Jua]gallery[/font][/div]
  265.  
  266. [div class="textcontainer col1 hidden tabsContent tabsContent1 breaks"][div class=text][font=Raleway][div class=tag][font=Jua]name[/font][/div] park seonghwa
  267.  
  268. [div class=tag][font=Jua]nickname[/font][/div] seonghwa
  269.  
  270. [div class=tag][font=Jua]age[/font][/div] 21
  271.  
  272. [div class=tag][font=Jua]gender[/font][/div] male
  273.  
  274. [div class=tag][font=Jua]sexuality[/font][/div] heterosexual
  275.  
  276. [div class=tag][font=Jua]role[/font][/div] the pirate king
  277.  
  278. [div class=tag][font=Jua]hair color[/font][/div] dark brown
  279.  
  280. [div class=tag][font=Jua]eye color[/font][/div] dark brown
  281.  
  282. [div class=tag][font=Jua]height[/font][/div] 6'0"
  283.  
  284. [div class=tag][font=Jua]weight[/font][/div] 186 lbs
  285.  
  286. [div class=tag][font=Jua]distinguishing features[/font][/div] sharp jawline
  287.  
  288. [div class=tag][font=Jua]body mods[/font][/div] several ear piercings
  289.  
  290. [div class=tag][font=Jua]attire[/font][/div] x x x
  291.  
  292. [div class=tag][font=Jua]ailments[/font][/div] can't keep his tongue in his mouth
  293. [/font][/div][/div]
  294. [div class="textcontainer col2 hidden tabsContent tabsContent2 breaks"][div class=text][font=Raleway][div class=tag][font=Jua]vices[/font][/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus. Eget dolor morbi non arcu. Ac turpis egestas integer eget aliquet.
  295.  
  296. [div class=tag][font=Jua]virtues[/font][/div] Morbi quis commodo odio aenean sed adipiscing diam. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Platea dictumst vestibulum rhoncus est. Adipiscing bibendum est ultricies integer quis auctor elit. Ipsum nunc aliquet bibendum enim. Et netus et malesuada fames ac turpis. Ipsum consequat nisl vel pretium lectus quam.
  297.  
  298. [div class=tag][font=Jua]likes[/font][/div] Habitant morbi tristique senectus et netus. Cras semper auctor neque vitae tempus. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Ultricies leo integer malesuada nunc vel risus commodo.
  299.  
  300. [div class=tag][font=Jua]dislikes[/font][/div] Sagittis vitae et leo duis ut. Libero justo laoreet sit amet cursus sit amet dictum. Tellus elementum sagittis vitae et leo. Non blandit massa enim nec dui nunc mattis enim ut. Lectus sit amet est placerat in egestas erat imperdiet sed. Placerat duis ultricies lacus sed turpis.
  301.  
  302. [div class=tag][font=Jua]strengths[/font][/div] Tincidunt id aliquet risus feugiat in. Ipsum dolor sit amet consectetur adipiscing. Morbi tristique senectus et netus. Lacus suspendisse faucibus interdum posuere lorem. Nunc vel risus commodo viverra maecenas accumsan lacus. Quis imperdiet massa tincidunt nunc. Ac turpis egestas sed tempus urna et pharetra.
  303.  
  304. [div class=tag][font=Jua]weaknesses[/font][/div] Velit euismod in pellentesque massa placerat duis ultricies lacus. Tortor dignissim convallis aenean et tortor at risus. Vitae justo eget magna fermentum iaculis eu non diam. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Tortor posuere ac ut consequat semper viverra nam. Morbi tincidunt augue interdum velit euismod in.
  305.  
  306. [div class=tag][font=Jua]fears[/font][/div] Fringilla urna porttitor rhoncus dolor purus non enim praesent. A erat nam at lectus urna. Morbi tincidunt ornare massa eget egestas purus. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Enim sit amet venenatis urna cursus eget nunc scelerisque. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis.
  307.  
  308. [div class=tag][font=Jua]ambitions[/font][/div] Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Viverra adipiscing at in tellus integer feugiat.
  309. [/font][/div][/div]
  310. [div class="textcontainer col3 hidden tabsContent tabsContent3 breaks"][div class=text][font=Raleway][div class=tag][font=Jua]family[/font][/div] Eget dolor morbi non arcu. Ac turpis egestas integer eget aliquet. Morbi quis commodo odio aenean sed adipiscing diam. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Platea dictumst vestibulum rhoncus est.
  311.  
  312. [div class=tag][font=Jua]residence[/font][/div] Adipiscing bibendum est ultricies integer quis auctor elit. Ipsum nunc aliquet bibendum enim.
  313.  
  314. [div class=tag][font=Jua]education[/font][/div] Et netus et malesuada fames ac turpis. Ipsum consequat nisl vel pretium lectus quam. Habitant morbi tristique senectus et netus. Cras semper auctor neque vitae tempus.
  315.  
  316. [div class=tag][font=Jua]occupation[/font][/div] Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum.
  317.  
  318. [div class=tag][font=Jua]history[/font][/div] Sagittis vitae et leo duis ut. Libero justo laoreet sit amet cursus sit amet dictum. Tellus elementum sagittis vitae et leo. Non blandit massa enim nec dui nunc mattis enim ut. Lectus sit amet est placerat in egestas erat imperdiet sed. Placerat duis ultricies lacus sed turpis. Tincidunt id aliquet risus feugiat in. Ipsum dolor sit amet consectetur adipiscing. Morbi tristique senectus et netus. Lacus suspendisse faucibus interdum posuere lorem. Nunc vel risus commodo viverra maecenas accumsan lacus. Quis imperdiet massa tincidunt nunc. Ac turpis egestas sed tempus urna et pharetra.
  319.  
  320. Velit euismod in pellentesque massa placerat duis ultricies lacus. Tortor dignissim convallis aenean et tortor at risus. Vitae justo eget magna fermentum iaculis eu non diam. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Tortor posuere ac ut consequat semper viverra nam. Morbi tincidunt augue interdum velit euismod in. Fringilla urna porttitor rhoncus dolor purus non enim praesent. A erat nam at lectus urna. Morbi tincidunt ornare massa eget egestas purus. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Enim sit amet venenatis urna cursus eget nunc scelerisque. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Viverra adipiscing at in tellus integer feugiat. Urna nec tincidunt praesent semper feugiat nibh sed. Congue nisi vitae suscipit tellus mauris a diam maecenas. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. At augue eget arcu dictum varius duis at consectetur lorem. Mattis nunc sed blandit libero volutpat sed cras.
  321.  
  322. Ut tristique et egestas quis ipsum. Lacinia quis vel eros donec ac odio tempor. Quam viverra orci sagittis eu volutpat odio facilisis mauris sit. Amet nisl purus in mollis nunc sed id semper. Volutpat blandit aliquam etiam erat velit scelerisque. Condimentum id venenatis a condimentum vitae sapien. Lectus arcu bibendum at varius vel pharetra vel. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Mattis rhoncus urna neque viverra justo nec ultrices dui. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Rhoncus mattis rhoncus urna neque viverra justo nec. Ac auctor augue mauris augue. Fames ac turpis egestas integer eget aliquet nibh praesent. Vulputate dignissim suspendisse in est ante in. Enim ut tellus elementum sagittis. Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  323. [/font][/div][/div]
  324. [div class="textcontainer col4 hidden tabsContent tabsContent4 breaks"][div class=text][font=Raleway][div class=tag][font=Jua]theme song[/font][/div] illusion by ateez
  325.  
  326. [div class=tag][font=Jua]hobbies[/font][/div] dancing, swimming, singing, cooking, cleaning
  327.  
  328. [div class=tag][font=Jua]mbti type[/font][/div] infp
  329.  
  330. [div class=tag][font=Jua]enneagram type[/font][/div] 4
  331.  
  332.  
  333. [div class=tag style="display: block;"][font=Jua]relationships[/font][/div]
  334. [LIST]
  335. [*][B]one[/B]: Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  336. [*][B]two[/B]: Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  337. [*][B]three[/B]: Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  338. [*][B]four[/B]: Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  339. [*][B]five[/B]: Sit amet cursus sit amet dictum sit. Hendrerit dolor magna eget est lorem ipsum dolor sit. Leo urna molestie at elementum eu facilisis sed odio. Tellus rutrum tellus pellentesque eu tincidunt tortor.
  340. [/LIST]
  341. [/font][/div][/div]
  342. [div class="textcontainer col5 hidden tabsContent tabsContent5"][div class=text][font=Raleway][IMG]https://i.pinimg.com/474x/de/9f/b3/de9fb3235a411e64957274783703559e.jpg[/IMG]
  343. [IMG]https://i.pinimg.com/474x/dc/3c/fe/dc3cfe93a02e1b44a4aafcb8fde5ce31.jpg[/IMG]
  344. [IMG]https://i.pinimg.com/474x/c6/55/26/c6552661c0923d6e7d6e8ffc38881e08.jpg[/IMG]
  345. [IMG]https://i.pinimg.com/474x/b8/68/4f/b8684fb878b1dcb1f40fa0b542958724.jpg[/IMG]
  346. [IMG]https://i.pinimg.com/474x/a2/45/26/a245261429231f335dc3317f28116ce5.jpg[/IMG]
  347. [IMG]https://i.pinimg.com/474x/74/f1/93/74f193335a6394c4d7cca1bf34f10748.jpg[/IMG]
  348. [IMG]https://i.pinimg.com/474x/1e/a2/59/1ea259cef946574e1bb6fdd55ff3574c.jpg[/IMG]
  349. [IMG]https://i.pinimg.com/474x/0f/27/5d/0f275d87e562e50d270677eb8a62005d.jpg[/IMG]
  350. [/font][/div][/div]
  351. [/div]
  352. [/nobr][div class=credit]code by [USER=2383][COLOR=#dedede]sox[/COLOR][/USER][/div]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!