API tools faq
paste
Advertisement
soxxx

strawberry milk

soxxx
Mar 28th, 2020
237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.26 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [class=bkgd]
  3. --highlight: #fff;
  4. --lowlight: #4A3F3D;
  5. --color1: #DEDEDE;
  6. --color2: #CCB7A6;
  7. --color3: #7F3B54;
  8. --color4: #A67F80;
  9. --color5: #9CA68E;
  10. position: relative;
  11. margin-left: auto;
  12. margin-right: auto;
  13. margin-bottom: 4px;
  14. width: 500px;
  15. height: 350px;
  16. background-color: var(--color2);
  17. overflow: hidden;
  18. border-radius: 10px;
  19. box-shadow: 5px 5px 0px var(--color3);
  20. cursor: url('https://i.imgur.com/FMvuswx.png'), auto;
  21. [/class]
  22.  
  23. [class=splash]
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. background-color: var(--color5);
  28. [/class]
  29.  
  30. [class=splashpic]
  31. position: absolute;
  32. width: 200px;
  33. height: 200px;
  34. top: 65px;
  35. left: 150px;
  36. background: url(https://i.pinimg.com/564x/c0/d2/bc/c0d2bcb6762ebf6335c9cbc714085a33.jpg);
  37. background-size: 100%;
  38. background-position: 50% 50%;
  39. border-radius: 10px;
  40. [/class]
  41.  
  42. [class=splashpicshadow]
  43. position: absolute;
  44. width: 195px;
  45. height: 195px;
  46. top: 75px;
  47. left: 160px;
  48. border: 5px solid var(--color1);
  49. border-radius: 10px;
  50. [/class]
  51.  
  52. [class=splashname]
  53. position: absolute;
  54. width: 100%;
  55. height: auto;
  56. top: 35px;
  57. padding-left: 80px;
  58. text-align: left;
  59. font-size: 30px;
  60. color: var(--highlight);
  61. text-shadow: 3px 3px 0px var(--color4);
  62. font-weight: 700;
  63. font-style: italic;
  64. text-transform: lowercase;
  65. [/class]
  66.  
  67. [class=splashrole]
  68. position: absolute;
  69. width: 85%;
  70. height: auto;
  71. top: 250px;
  72. text-align: right;
  73. font-size: 27px;
  74. color: var(--lowlight);
  75. text-shadow: 3px 3px 0px var(--color1);
  76. font-weight: 700;
  77. font-style: italic;
  78. text-transform: lowercase;
  79. [/class]
  80.  
  81. [class=pic]
  82. position: absolute;
  83. width: 150px;
  84. height: 150px;
  85. top: 25px;
  86. left: 30px;
  87. background: url(https://i.pinimg.com/564x/b8/38/d3/b838d3be80cf9b6ddfcd2f665099133f.jpg);
  88. background-size: 100%;
  89. background-position: 50% 50%;
  90. border-radius: 10px;
  91. transition-duration: 0.3s;
  92. [/class]
  93.  
  94. [class name=pic state=hover]
  95. background: url(https://i.pinimg.com/474x/4c/b1/00/4cb100f3ad424d3abafb7efa6cb54736.jpg);
  96. background-size: 100%;
  97. background-position: 100% 60%;
  98. transition-duration: 0.3s;
  99. [/class]
  100.  
  101. [class=picshadow]
  102. position: absolute;
  103. width: 145px;
  104. height: 145px;
  105. top: 30px;
  106. left: 35px;
  107. border: 4px solid var(--color1);
  108. border-radius: 10px;
  109. [/class]
  110.  
  111. [class=name]
  112. position: absolute;
  113. width: 150px;
  114. height: auto;
  115. top: 190px;
  116. left: 30px;
  117. text-align: center;
  118. font-size: 20px;
  119. line-height: 20px;
  120. color: var(--highlight);
  121. text-shadow: 3px 3px 0px var(--color4);
  122. font-weight: 700;
  123. font-style: italic;
  124. text-transform: lowercase;
  125. [/class]
  126.  
  127. [class=tab]
  128. position: absolute;
  129. width: 130px;
  130. height: 16px;
  131. background: var(--color5);
  132. border-radius: 5px;
  133. transition-duration: 0.3s;
  134. color: var(--highlight);
  135. font-size: 12px;
  136. line-height: 16px;
  137. font-weight: 700;
  138. text-transform: lowercase;
  139. text-align: center;
  140. font-style: italic;
  141. box-shadow: 2px 2px 0px var(--color1);
  142. [/class]
  143.  
  144. [class name=tab state=hover]
  145. background: var(--color3);
  146. transition-duration: 0.3s;
  147. [/class]
  148.  
  149. [class=textcontainer]
  150. position: absolute;
  151. width: 300px;
  152. height: 300px;
  153. left: 220px;
  154. top: 30px;
  155. overflow: hidden;
  156. [/class]
  157.  
  158. [class=text]
  159. position: relative;
  160. width: 260px;
  161. height: 100%;
  162. overflow: auto;
  163. color: var(--lowlight);
  164. font-size: 10px;
  165. line-height: 12px;
  166. text-align: justify;
  167. padding-right: 100px;
  168. white-space: pre-wrap;
  169. padding-top: 2px;
  170. [/class]
  171.  
  172. [class=tag]
  173. position: relative;
  174. overflow: visible;
  175. display: inline;
  176. width: auto;
  177. height: auto;
  178. font-size: 9px;
  179. text-align: center;
  180. margin-right: 5px;
  181. padding: 1px 3px 1px 3px;
  182. text-transform: lowercase;
  183. border: 2px solid var(--color1);
  184. border-radius: 3px;
  185. color: var(--color3);
  186. font-weight: 700;
  187. letter-spacing: 0px;
  188. [/class]
  189.  
  190. [class=credit]
  191. position: relative;
  192. overflow: hidden;
  193. width: 100%;
  194. height: 10px;
  195. text-align: center;
  196. font-style: normal;
  197. font-weight: normal;
  198. font-size: 8px;
  199. color: #dedede;
  200. opacity: 0.2;
  201. [/class]
  202.  
  203. [script class=button on=click]
  204. addClass slideleft splash
  205. [/script]
  206. [class=slideleft]
  207. animation-name: {post_id}sleft;
  208. animation-duration: 1.7s;
  209. animation-fill-mode: forwards;
  210. [/class]
  211. [animation=sleft]
  212. [keyframe=0]transform: translateX(0%);[/keyframe]
  213. [keyframe=100]transform: translateX(-100%);visibility:hidden;[/keyframe]
  214. [/animation]
  215.  
  216. [script class=tab on=click]
  217. hide tabsContent
  218. set currentTab (getText)
  219. if (eq ${currentTab} basics) (fadeIn 400 tabsContent1)
  220. if (eq ${currentTab} persona) (fadeIn 400 tabsContent2)
  221. if (eq ${currentTab} backstory) (fadeIn 400 tabsContent3)
  222. if (eq ${currentTab} extras) (fadeIn 400 tabsContent4)
  223. [/script]
  224.  
  225. [class=hidden]
  226. display:none;
  227. [/class]
  228.  
  229. [div class=bkgd]
  230. [div class=picshadow][/div]
  231. [div class=pic][/div]
  232. [div class=name][font=Hammersmith One]it's strawberry milk baby.[/font][/div]
  233.  
  234. [div class=tab style="top: 245px; left: 40px;"][font=Hammersmith One]basics[/font][/div]
  235. [div class=tab style="top: 267px; left: 40px;"][font=Hammersmith One]persona[/font][/div]
  236. [div class=tab style="top: 289px; left: 40px;"][font=Hammersmith One]backstory[/font][/div]
  237. [div class=tab style="top: 311px; left: 40px;"][font=Hammersmith One]extras[/font][/div]
  238.  
  239. [div class="textcontainer tabsContent tabsContent1"][div class=text][font=Maven Pro][div class=tag][font=Hammersmith One]name[/font][/div] phat babie
  240.  
  241. [div class=tag][font=Hammersmith One]age[/font][/div] 21
  242.  
  243. [div class=tag][font=Hammersmith One]gender[/font][/div] female
  244.  
  245. [div class=tag][font=Hammersmith One]sexuality[/font][/div] heterosexual
  246.  
  247. [div class=tag][font=Hammersmith One]d.o.b[/font][/div] march 28
  248.  
  249. [div class=tag][font=Hammersmith One]hometown[/font][/div] kyoto
  250.  
  251. [div class=tag][font=Hammersmith One]role[/font][/div] last sip thief
  252.  
  253. [div class=tag][font=Hammersmith One]faceclaim[/font][/div] a literal jar of milk
  254.  
  255. [div class=tag][font=Hammersmith One]hair color[/font][/div] pink
  256.  
  257. [div class=tag][font=Hammersmith One]eye color[/font][/div] red
  258.  
  259. [div class=tag][font=Hammersmith One]height/weight[/font][/div] 9 in. / 1 lb.
  260.  
  261. [div class=tag][font=Hammersmith One]body type[/font][/div] mesomorph
  262.  
  263. [div class=tag][font=Hammersmith One]dist. features[/font][/div] made of clear glass, aesthetically pleasing to look at, can't see or hear or talk to you because she's a literal jar of milk.
  264.  
  265. [div class=tag][font=Hammersmith One]body mods[/font][/div] she has a nice metal cap that screws off in order to access the milk. also she's $3 at the local fresh market.
  266.  
  267. [div class=tag][font=Hammersmith One]ailments[/font][/div] she's horribly apathetic, has no soul.
  268. [/font][/div][/div]
  269.  
  270.  
  271. [div class="textcontainer tabsContent tabsContent2 hidden"][div class=text][font=Maven Pro][div class=tag][font=Hammersmith One]vices[/font][/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Proin nibh nisl condimentum id venenatis. Erat nam at lectus urna duis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Neque vitae tempus quam pellentesque.
  272.  
  273. [div class=tag][font=Hammersmith One]virtues[/font][/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui. Amet luctus venenatis lectus magna fringilla urna. Augue neque gravida in fermentum et. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Ut diam quam nulla porttitor massa id. Enim blandit volutpat maecenas volutpat blandit aliquam etiam.
  274.  
  275. [div class=tag][font=Hammersmith One]likes[/font][/div] Risus nec feugiat in fermentum posuere urna nec. Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut.
  276.  
  277. [div class=tag][font=Hammersmith One]dislikes[/font][/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus.
  278.  
  279. [div class=tag][font=Hammersmith One]fears[/font][/div] Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque.
  280.  
  281. [div class=tag][font=Hammersmith One]habits/quirks[/font][/div] Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non.
  282. [/font][/div][/div]
  283.  
  284.  
  285. [div class="textcontainer tabsContent tabsContent3 hidden"][div class=text][font=Maven Pro][div class=tag][font=Hammersmith One]occupation[/font][/div] Neque vitae turpis tempus quam pellentesque.
  286.  
  287. [div class=tag][font=Hammersmith One]residence[/font][/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui.
  288.  
  289. [div class=tag][font=Hammersmith One]family[/font][/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut.
  290.  
  291. [div class=tag][font=Hammersmith One]history[/font][/div] Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Iaculis at erat pellentesque adipiscing commodo. Aenean pharetra magna ac placerat vestibulum lectus. Dui id ornare arcu odio ut sem nulla pharetra diam. Blandit aliquam etiam erat velit scelerisque. Netus et malesuada fames ac turpis. Aliquam etiam erat velit scelerisque. Dictum non consectetur a erat nam at lectus urna duis. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Ac orci phasellus egestas tellus rutrum tellus pellentesque. A pellentesque sit amet porttitor eget dolor morbi non.
  292.  
  293. Molestie nunc non blandit massa enim. Leo integer malesuada nunc vel risus commodo. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sem integer vitae justo eget magna fermentum iaculis. Nisl vel pretium lectus quam id leo. Dolor magna eget est lorem ipsum. Duis ut diam quam nulla. Consequat nisl vel pretium lectus quam id leo in. Nec sagittis aliquam malesuada bibendum arcu vitae. Orci a scelerisque purus semper eget duis at tellus. Cum sociis natoque penatibus et magnis dis parturient. Nullam non nisi est sit amet facilisis magna etiam.
  294.  
  295. [div class=tag][font=Hammersmith One]relationships[/font][/div][LIST]
  296. [*][B]one:[/B] Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  297. [*][B]two:[/B] Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  298. [*][B]three:[/B] Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  299. [*][B]four:[/B] Mi bibendum neque egestas congue. Molestie nunc non blandit massa enim nec dui. Velit ut tortor pretium viverra.
  300. [/LIST]
  301. [/font][/div][/div]
  302.  
  303.  
  304. [div class="textcontainer tabsContent tabsContent4 hidden"][div class=text][font=Maven Pro][div class=tag][font=Hammersmith One]theme song[/font][/div] Neque vitae turpis tempus quam pellentesque.
  305.  
  306. [div class=tag][font=Hammersmith One]favorite food[/font][/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui.
  307.  
  308. [div class=tag][font=Hammersmith One]hidden talents[/font][/div] Convallis tellus id interdum velit laoreet. Volutpat lacus laoreet non curabitur gravida arcu ac. Feugiat nibh sed pulvinar proin. Viverra justo nec ultrices dui.
  309.  
  310. [div class=tag][font=Hammersmith One]misc. info[/font][/div] Cursus sit amet dictum sit amet. Non tellus orci ac auctor augue mauris augue neque. Habitant morbi tristique senectus et. At quis risus sed vulputate odio ut.
  311.  
  312. [div class=tag style="display: block;"][font=Hammersmith One]gallery[/font][/div][div=white-space: normal;]
  313. [IMG]https://i.pinimg.com/474x/cf/6e/38/cf6e3814fd193f8536bf9364f76784bc.jpg[/IMG]
  314. [IMG]https://i.pinimg.com/474x/ee/ab/4a/eeab4ab10a365e6e18d62b9f5e6dd707.jpg[/IMG]
  315. [IMG]https://i.pinimg.com/474x/57/2e/c1/572ec19cc3b3e4c0b1df409dd1847ecf.jpg[/IMG]
  316. [IMG]https://i.pinimg.com/474x/59/ae/51/59ae517fe1badd8fa2ba909b199b01bf.jpg[/IMG]
  317. [IMG]https://i.pinimg.com/474x/a1/56/fc/a156fc9e3005b01f07e8121952f8194b.jpg[/IMG]
  318. [/div][/font][/div][/div]
  319.  
  320.  
  321.  
  322. [div class="splash button"]
  323. [div class=splashpicshadow][/div]
  324. [div class=splashpic][/div]
  325. [div class=splashname][font=Hammersmith One]strawberry milk[/font][/div]
  326. [div class=splashrole][font=Hammersmith One]the last sip[/font][/div]
  327. [/div]
  328. [/div]
  329. [/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!