API tools faq
paste
Advertisement
soxxx

serendipity

soxxx
Feb 6th, 2020
468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.42 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=bkgd]
  3. --dec-color: #fff;
  4. --accent-color: #f28fa6;
  5. --dark-color: #251e3d;
  6. position: relative;
  7. margin-right: auto;
  8. margin-left: auto;
  9. margin-top: 10px;
  10. margin-bottom: 5px;
  11. width: 300px;
  12. height: 400px;
  13. background: url(https://i.pinimg.com/474x/21/bd/b5/21bdb5e4b57f8d7df3b6592366983261.jpg);
  14. background-size: 150%;
  15. background-position: 100% 60%;
  16. overflow: visible;
  17. border-radius: 10px;
  18. cursor: url('https://i.imgur.com/FMvuswx.png'), auto;
  19. [/class]
  20.  
  21. [class=bkgdtrace]
  22. position: absolute;
  23. width: 300px;
  24. height: 400px;
  25. border: 1px solid var(--dec-color);
  26. border-radius: 20px;
  27. overflow: visible;
  28. [/class]
  29.  
  30. [class=star]
  31. position: absolute;
  32. width: 100px;
  33. height: 100px;
  34. color: var(--dec-color);
  35. overflow: visible;
  36. font-size: 15px;
  37. left: 190px;
  38. top: 10px;
  39. text-shadow: 2px 2px 0px var(--dark-color);
  40. [/class]
  41.  
  42. [class=pic]
  43. position: absolute;
  44. width: 80px;
  45. height: 80px;
  46. left: 200px;
  47. top: 20px;
  48. background: url(https://i.pinimg.com/474x/dd/75/88/dd758861eb7fb277bc4a8ee0fb8367ae.jpg);
  49. background-size: 100%;
  50. background-position: 50% 50%;
  51. border-radius: 100%;
  52. border: 1px solid var(--dec-color);
  53. box-shadow: 2px 2px 0px var(--accent-color);
  54. [/class]
  55.  
  56. [class=picdec]
  57. position: absolute;
  58. width: 95px;
  59. height: 65px;
  60. left: 192px;
  61. top: 28px;
  62. border: 1px solid var(--dec-color);
  63. border-radius: 100%;
  64. transform: rotate(10deg);
  65. [/class]
  66.  
  67. [class=spinny]
  68. animation: {post_id}spin 10s linear infinite;
  69. [/class]
  70.  
  71. [class=name]
  72. position: absolute;
  73. width: 100%;
  74. height: auto;
  75. color: var(--dec-color);
  76. overflow: visible;
  77. font-size: 30px;
  78. left: 30px;
  79. top: 10px;
  80. text-transform: lowercase;
  81. text-shadow: 2px 2px 0px var(--dark-color);
  82. [/class]
  83.  
  84. [class=role]
  85. position: absolute;
  86. width: 130px;
  87. height: auto;
  88. color: var(--accent-color);
  89. overflow: visible;
  90. font-size: 20px;
  91. line-height: 15px;
  92. left: 60px;
  93. top: 45px;
  94. text-transform: lowercase;
  95. text-shadow: 1px 1px 0px var(--dark-color);
  96. [/class]
  97.  
  98. [class=tab]
  99. position: absolute;
  100. left: 260px;
  101. font-size: 20px;
  102. color: var(--dec-color);
  103. transition-duration: 0.3s;
  104. text-shadow: 1px 1px 0px var(--dark-color);
  105. text-align: center;
  106. [/class]
  107.  
  108. [class name=tab state=hover]
  109. color: var(--accent-color);
  110. transition-duration: 0.3s;
  111. text-shadow: 1px 1px 0px var(--dark-color);
  112. [/class]
  113.  
  114. [class=textcontainer]
  115. position: absolute;
  116. width: 220px;
  117. height: 250px;
  118. overflow: hidden;
  119. left: 35px;
  120. top: 120px;
  121. [/class]
  122.  
  123. [class=text]
  124. position: relative;
  125. width: 210px;
  126. height: 250px;
  127. color: var(--dec-color);
  128. overflow: auto;
  129. font-size: 10px;
  130. line-height: 12px;
  131. text-transform: lowercase;
  132. text-align: justify;
  133. padding-right: 40px;
  134. [/class]
  135.  
  136. [class=hidden]
  137. display:none;
  138. [/class]
  139.  
  140. [class=tag]
  141. position: relative;
  142. display: inline;
  143. width: auto;
  144. height: auto;
  145. color: var(--accent-color);
  146. text-transform: lowercase;
  147. margin-right: 5px;
  148. text-decoration: underline;
  149. font-weight: 700;
  150. font-size: 12px;
  151. text-shadow: 0.5px 0.5px 0px var(--dark-color);
  152. [/class]
  153.  
  154. [class=credit]
  155. position: relative;
  156. overflow: hidden;
  157. width: 100%;
  158. height: 10px;
  159. text-align: center;
  160. font-style: normal;
  161. font-weight: normal;
  162. font-size: 8px;
  163. color: #dedede;
  164. opacity: 0.2;
  165. [/class]
  166.  
  167. [class=accentcolor]
  168. color: var(--accent-color);
  169. text-shadow: 0.5px 0.5px 0px var(--dark-color);
  170. display: inline;
  171. [/class]
  172.  
  173. [class=header]
  174. position: absolute;
  175. color: var(--dec-color);
  176. width: 200px;
  177. height: auto;
  178. line-height: 21px;
  179. top: 86px;
  180. left: 35px;
  181. font-size: 22px;
  182. text-transform: lowercase;
  183. text-shadow: 1px 1px 0px var(--dark-color);
  184. [/class]
  185.  
  186. [class=tabstar]
  187. position: absolute;
  188. width: 30px;
  189. height: 30px;
  190. color: var(--dec-color);
  191. overflow: visible;
  192. font-size: 3px;
  193. left: 255px;
  194. text-shadow: 1px 1px 0px var(--dark-color);
  195. [/class]
  196.  
  197. [class=tabspinny1]
  198. animation: {post_id}spin 20s linear infinite;
  199. [/class]
  200.  
  201. [class=tabspinny2]
  202. animation: {post_id}spin 15s linear infinite;
  203. [/class]
  204.  
  205. [class=tabspinny3]
  206. animation: {post_id}spin 25s linear infinite;
  207. [/class]
  208.  
  209. [class=tabspinny4]
  210. animation: {post_id}spin 10s linear infinite;
  211. [/class]
  212.  
  213. [script class=tab on=click]
  214. hide tabsContent
  215. set currentTab (getText)
  216. if (eq ${currentTab} 1) (fadeIn 500 tabsContent1)
  217. if (eq ${currentTab} 2) (fadeIn 500 tabsContent2)
  218. if (eq ${currentTab} 3) (fadeIn 500 tabsContent3)
  219. if (eq ${currentTab} 4) (fadeIn 500 tabsContent4)
  220. [/script]
  221.  
  222. [animation=spin]
  223. [keyframe=0]transform: rotate(0deg);[/keyframe]
  224. [keyframe=100]transform: rotate(360deg);[/keyframe]
  225. [/animation]
  226.  
  227. [div class=bkgd]
  228. [div class=bkgdtrace style="transform: rotate(-2deg);"][/div]
  229. [div class=bkgdtrace style="transform: rotate(2deg);"][/div]
  230.  
  231. [div class=bkgdtrace style="border: 0px solid white;"]
  232. [div class="star spinny"][fa]far fa-star[/fa][/div]
  233. [div class=pic][/div]
  234. [div class=picdec][/div]
  235.  
  236. [div class=name][font=Ruthie]serendipity[/font][/div]
  237. [div class=role][font=Ruthie]i'm your calico cat[/font][/div]
  238.  
  239. [div class="tabstar tabspinny1" style="top:140px;"][fa]far fa-star[/fa][/div]
  240. [div class="tabstar tabspinny2" style="top:200px;"][fa]far fa-star[/fa][/div]
  241. [div class="tabstar tabspinny3" style="top:260px;"][fa]far fa-star[/fa][/div]
  242. [div class="tabstar tabspinny4" style="top:320px;"][fa]far fa-star[/fa][/div]
  243.  
  244. [div class=tab style="top:140px;"][fa]far fa-moon[/fa][div=opacity:0]1[/div][/div]
  245. [div class=tab style="top:200px;"][fa]far fa-rocket[/fa][div=opacity:0]2[/div][/div]
  246. [div class=tab style="top:260px;"][fa]far fa-sun[/fa][div=opacity:0]3[/div][/div]
  247. [div class=tab style="top:320px;"][fa]far fa-meteor[/fa][div=opacity:0]4[/div][/div]
  248.  
  249. [div class="star tabsContent tabsContent1 tabsContent2 tabsContent3 tabsContent4" style="top: 94px; left: 20px; font-size: 8px; color: var(--accent-color);"][fa]far fa-star[/fa][/div]
  250.  
  251. [div class="header tabsContent tabsContent1"][font=Ruthie]basics[/font][/div]
  252. [div class="header tabsContent tabsContent2 hidden"][font=Ruthie]persona[/font][/div]
  253. [div class="header tabsContent tabsContent3 hidden"][font=Ruthie]background[/font][/div]
  254. [div class="header tabsContent tabsContent4 hidden"][font=Ruthie]miscellaneous[/font][/div]
  255.  
  256. [div class="textcontainer tabsContent tabsContent1"][div class=text][font=Quicksand]
  257. [div class=tag][font=Patrick Hand]name:[/font][/div] all this is no coincidence
  258. [br][/br][br][/br]
  259. [div class=tag][font=Patrick Hand]nickname:[/font][/div] just by my feeling
  260. [br][/br][br][/br]
  261. [div class=tag][font=Patrick Hand]age:[/font][/div] the whole world is different from yesterday
  262. [br][/br][br][/br]
  263. [div class=tag][font=Patrick Hand]gender:[/font][/div] just with your joy
  264. [br][/br][br][/br]
  265. [div class=tag][font=Patrick Hand]sexuality:[/font][/div] when you called me
  266. [br][/br][br][/br]
  267. [div class=tag][font=Patrick Hand]role:[/font][/div] i became your flower
  268. [br][/br][br][/br]
  269. [div class=tag][font=Patrick Hand]faceclaim:[/font][/div] as if we were waiting
  270. [br][/br][br][/br]
  271. [div class=tag][font=Patrick Hand]d.o.b:[/font][/div] we bloom until we ache
  272. [br][/br][br][/br]
  273. [div class=tag][font=Patrick Hand]height:[/font][/div] maybe it’s the providence of the universe
  274. [br][/br][br][/br]
  275. [div class=tag][font=Patrick Hand]weight:[/font][/div] it just had to be that
  276. [br][/br][br][/br]
  277. [div class=tag][font=Patrick Hand]hair color:[/font][/div] you know, i know
  278. [br][/br][br][/br]
  279. [div class=tag][font=Patrick Hand]eye color:[/font][/div] you are me, i am you
  280. [br][/br][br][/br]
  281. [div class=tag][font=Patrick Hand]dist. marks:[/font][/div] as much as my heart flutters, I’m worried
  282. [br][/br][br][/br]
  283. [div class=tag][font=Patrick Hand]body mods:[/font][/div] destiny is jealous of us
  284. [/font][/div][/div]
  285.  
  286. [div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][font=Quicksand]
  287. [div class=tag][font=Patrick Hand]vices:[/font][/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere. Tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra. Imperdiet proin fermentum leo vel orci porta non. In arcu cursus euismod quis viverra nibh cras pulvinar. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Molestie nunc non blandit massa enim nec. Purus non enim praesent elementum. Mauris commodo quis imperdiet massa tincidunt nunc. Nunc aliquet bibendum enim facilisis gravida neque. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Imperdiet massa tincidunt nunc pulvinar sapien. Ipsum a arcu cursus vitae.
  288. [br][/br][br][/br]
  289. [div class=tag][font=Patrick Hand]virtues:[/font][/div] A cras semper auctor neque vitae tempus. Nunc mi ipsum faucibus vitae aliquet. Tempus iaculis urna id volutpat lacus laoreet non. Turpis egestas integer eget aliquet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. A iaculis at erat pellentesque adipiscing commodo. Duis at consectetur lorem donec massa sapien faucibus et molestie. Posuere morbi leo urna molestie at. Ridiculus mus mauris vitae ultricies leo. Porta nibh venenatis cras sed felis eget velit aliquet.
  290. [br][/br][br][/br]
  291. [div class=tag][font=Patrick Hand]strengths:[/font][/div] Purus faucibus ornare suspendisse sed nisi lacus sed. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Euismod in pellentesque massa placerat duis.
  292. [br][/br][br][/br]
  293. [div class=tag][font=Patrick Hand]weaknesses:[/font][/div] Id eu nisl nunc mi ipsum. Euismod elementum nisi quis eleifend quam adipiscing vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Lacus laoreet non curabitur gravida arcu ac tortor. Convallis aenean et tortor at risus viverra.
  294. [br][/br][br][/br]
  295. [div class=tag][font=Patrick Hand]fears:[/font][/div] Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Sapien pellentesque habitant morbi tristique senectus et.
  296. [br][/br][br][/br]
  297. [div class=tag][font=Patrick Hand]ambitions:[/font][/div] Mauris vitae ultricies leo integer malesuada nunc vel. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Malesuada fames ac turpis egestas sed. Sagittis eu volutpat odio facilisis mauris sit amet.
  298. [br][/br][br][/br]
  299. [div class=tag][font=Patrick Hand]likes:[/font][/div] Fringilla est ullamcorper eget nulla. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Molestie at elementum eu facilisis sed odio morbi. Arcu risus quis varius quam quisque id diam vel quam.
  300. [br][/br][br][/br]
  301. [div class=tag][font=Patrick Hand]dislikes:[/font][/div] Scelerisque felis imperdiet proin fermentum leo vel. Sit amet mauris commodo quis imperdiet massa tincidunt nunc. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Morbi tristique senectus et netus et malesuada. Sagittis nisl rhoncus mattis rhoncus urna neque.
  302. [br][/br][br][/br]
  303. [div class=tag][font=Patrick Hand]habits/quirks:[/font][/div] Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aenean pharetra magna ac placerat.
  304. [br][/br][br][/br]
  305. [div class=tag][font=Patrick Hand]ailments:[/font][/div] Sed augue lacus viverra vitae. Urna et pharetra pharetra massa massa ultricies. Senectus et netus et malesuada fames ac.
  306. [/font][/div][/div]
  307.  
  308. [div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][font=Quicksand]
  309. [div class=tag][font=Patrick Hand]family:[/font][/div] Turpis egestas integer eget aliquet. Amet luctus venenatis lectus magna.
  310. [br][/br][br][/br]
  311. [div class=tag][font=Patrick Hand]residence:[/font][/div] A cras semper auctor.
  312. [br][/br][br][/br]
  313. [div class=tag][font=Patrick Hand]education:[/font][/div] Purus faucibus ornare suspendisse.
  314. [br][/br][br][/br]
  315. [div class=tag][font=Patrick Hand]history:[/font][/div] Duis at consectetur lorem donec massa sapien faucibus et molestie. Posuere morbi leo urna molestie at. Ridiculus mus mauris vitae ultricies leo. Porta nibh venenatis cras sed felis eget velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere. Tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra. Imperdiet proin fermentum leo vel orci porta non. In arcu cursus euismod quis viverra nibh cras pulvinar. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Molestie nunc non blandit massa enim nec. Purus non enim praesent elementum. Mauris commodo quis imperdiet massa tincidunt nunc. Nunc aliquet bibendum enim facilisis gravida neque. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Imperdiet massa tincidunt nunc pulvinar sapien. Ipsum a arcu cursus vitae. Id eu nisl nunc mi ipsum. Euismod elementum nisi quis eleifend quam adipiscing vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Lacus laoreet non curabitur gravida arcu ac tortor. Convallis aenean et tortor at risus viverra.
  316. [br][/br][br][/br]
  317. [div class=tag][font=Patrick Hand]relationships:[/font][/div]
  318. [LIST]
  319. [*][div class=accentcolor]Vulputate:[/div] enim nulla aliquet porttitor
  320. [*]lacus: luctus accumsan tortor
  321. [*]Sapien: pellentesque habitant
  322. [*]morbi: tristique senectus et
  323. [/LIST]
  324. [/font][/div][/div]
  325.  
  326. [div class="textcontainer tabsContent tabsContent4 hidden"][div class=text][font=Quicksand]
  327. [div class=tag][font=Patrick Hand]theme song:[/font][/div]
  328. [URL='https://www.youtube.com/watch?v=BEMaH9Sm3lQ']serendipity by bts[/URL]
  329. [br][/br][br][/br]
  330. [div class=tag][font=Patrick Hand]enneagram type:[/font][/div] 2
  331. [br][/br][br][/br]
  332. [div class=tag][font=Patrick Hand]mbti type:[/font][/div] enfj
  333. [br][/br][br][/br]
  334. [div class=tag][font=Patrick Hand]gallery:[/font][/div] ↓ [br][/br][br][/br]
  335. [IMG]https://i.pinimg.com/originals/7a/f5/f1/7af5f1894509716d142be1d1b741405d.gif[/IMG]
  336. [IMG]https://i.pinimg.com/originals/9c/cc/4d/9ccc4daf24648666998d484c1a5cabf1.gif[/IMG]
  337. [IMG]https://i.pinimg.com/originals/2d/0f/54/2d0f548ab4dc95a4d28bd8ac9650434d.gif[/IMG]
  338. [IMG]https://i.pinimg.com/originals/2e/1b/02/2e1b02883c7370bf65fd54711c201d17.gif[/IMG]
  339. [IMG]https://i.pinimg.com/originals/26/1d/cb/261dcb7bb08182851cc5029c969547b4.gif[/IMG]
  340. [/font][/div][/div]
  341. [/div]
  342. [/div]
  343. [/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!