daily pastebin goal
40%
SHARE
TWEET

SUNFLOWER // code

water-nymph Jan 5th, 2019 (edited) 107 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [nobr]
  2. [class name=scaled]
  3. animation-name: {post_id}scaled;
  4. animation-direction: normal;
  5. animation-duration: 0.7s;
  6. animation-delay: 0.2s;
  7. animation-timing-function: ease-out;
  8. animation-iteration-count: 1;
  9. animation-fill-mode: both;
  10. [/class]
  11.  
  12. [animation=scaled]
  13. [keyframe=0]transform: scale(1.4); opacity: 0[/keyframe]
  14. [keyframe=100]transform: scale(1); opacity: 1[/keyframe]
  15. [/animation]
  16.  
  17. [class name=scalen]
  18. animation-name: {post_id}scalen;
  19. animation-direction: normal;
  20. animation-duration: 0.5s;
  21. animation-delay: 0s;
  22. animation-timing-function: ease-out;
  23. animation-iteration-count: 1;
  24. animation-fill-mode: both;
  25. [/class]
  26.  
  27. [animation=scalen]
  28. [keyframe=0]transform: scale(1); opacity: 1[/keyframe]
  29. [keyframe=100]transform: scale(1.4); opacity: 0[/keyframe]
  30. [/animation]
  31.  
  32. [class name=ir]
  33. animation-name: {post_id}ir;
  34. animation-direction: normal;
  35. animation-duration: 0.7s;
  36. animation-delay: 0.2s;
  37. animation-timing-function: ease-out;
  38. animation-iteration-count: 1;
  39. animation-fill-mode: both;
  40. [/class]
  41.  
  42. [animation=ir]
  43. [keyframe=0]left: 20px; opacity: 0[/keyframe]
  44. [keyframe=100]left: 100px; opacity: 1[/keyframe]
  45. [/animation]
  46.  
  47. [class name=pi]
  48. animation-name: {post_id}pi;
  49. animation-direction: normal;
  50. animation-duration: 0.7s;
  51. animation-delay: 0.2s;
  52. animation-timing-function: ease-out;
  53. animation-iteration-count: 1;
  54. animation-fill-mode: both;
  55. [/class]
  56.  
  57. [animation=pi]
  58. [keyframe=0]left: 100px; opacity: 1[/keyframe]
  59. [keyframe=100]left: 20px; opacity: 0[/keyframe]
  60. [/animation]
  61.  
  62. [script class=ff on=mouseenter]
  63. addClass le ffor
  64. removeClass ri ffor
  65. addClass ir outs
  66. removeClass pi outs
  67. [/script]
  68.  
  69. [script class=ff on=mouseleave]
  70. addClass ri ffor
  71. removeClass le ffor
  72. addClass "pi" "outs"
  73. removeClass "ir" "outs"
  74. [/script]
  75.  
  76. [script class=first on=click]
  77. hide tabsContent2
  78. hide tabsContent3
  79. hide tabsContent4
  80. fadeOut 600 tabsContent2
  81. fadeOut 600 tabsContent3
  82. fadeOut 600 tabsContent4
  83. fadeOut 600 tabsContent1
  84. fadeIn 800 tabsContent1[/script]
  85.  
  86. [script class=second on=click]
  87. hide tabsContent1
  88. hide tabsContent3
  89. hide tabsContent4
  90. fadeOut 600 tabsContent1
  91. fadeOut 600 tabsContent3
  92. fadeOut 600 tabsContent4
  93. fadeOut 600 tabsContent2
  94. fadeIn 800 tabsContent2[/script]
  95.  
  96. [script class=third on=click]
  97. hide tabsContent2
  98. hide tabsContent1
  99. hide tabsContent4
  100. fadeOut 600 tabsContent2
  101. fadeOut 600 tabsContent1
  102. fadeOut 600 tabsContent4
  103. fadeOut 600 tabsContent3
  104. fadeIn 800 tabsContent3[/script]
  105.  
  106. [script class=fourth on=click]
  107. hide tabsContent2
  108. hide tabsContent3
  109. hide tabsContent1
  110. fadeOut 600 tabsContent2
  111. fadeOut 600 tabsContent3
  112. fadeOut 600 tabsContent1
  113. fadeOut 600 tabsContent4
  114. fadeIn 800 tabsContent4[/script]
  115.  
  116. [class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px
  117. [/class]
  118.  
  119. [class=container]height: 380px;
  120. width: 530px;
  121. padding: 20px;
  122. background: #B96502;
  123. margin: auto;
  124. overflow: hidden;
  125. cursor: url(https://i.imgur.com/fkP02Jr.png), auto
  126. [/class]
  127.  
  128. [class=moon]width: 0px;
  129. height: 0px;
  130. border-top: 420px solid #A35200;
  131. border-left: 570px solid transparent;
  132. position: relative;
  133. top: -20px;
  134. left: -20px
  135. [/class]
  136.  
  137. [class=pic]height: 380px;
  138. width: 220px;
  139. background-image: url(https://scontent-amt2-1.cdninstagram.com/vp/65e39c59b4087c16117785c9eb163936/5CD79CE3/t51.2885-15/e35/47583260_206789930266878_8811243163902189933_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com); background-size: 170%; background-position: 40% 30%;
  140. position: relative; top: -420px;
  141. overflow: hidden;
  142. [/class]
  143.  
  144. [class=text]height: 370px;
  145. width: 200px;
  146. padding-left: 5px;
  147. margin: auto;
  148. font-size: 20px;
  149. font-family: 'Yesteryear';
  150. position: relative;
  151. top: 10px;
  152. left: 0px;
  153. text-align-last: justify;
  154. color: white;
  155. overflow: hidden;
  156. transition: 0.5s
  157. [/class]
  158.  
  159. [class=cloak]opacity: 0
  160. [/class]
  161.  
  162. [class=uncloak]transition-delay: 0.3s; opacity: 1
  163. [/class]
  164.  
  165. [class=spryt]height: 360px;
  166. width: 195px;
  167. padding-left: 5px;
  168. margin: auto;
  169. font-size: 12px;
  170. position: relative;
  171. top: -360px;
  172. left: 0px;
  173. color: white;
  174. opacity: 0
  175. [/class]
  176.  
  177. [class=ff]height: 100px; width: 100%;
  178. position: relative;
  179. top: 35px;
  180. left: 50px;
  181. transition: 0.5s
  182. [/class]
  183.  
  184. [class=ffor]height: 87px;
  185. width: 87px;
  186. padding: 5px;
  187. border-radius: 50%;
  188. border: 1px solid grey;
  189. position: relative;
  190. transition: 0.5s
  191. [/class]
  192.  
  193. [class=bor]height: 85px;
  194. width: 85px;
  195. border: 1px solid grey;
  196. border-radius: 50%;
  197. background-image: url(https://scontent-amt2-1.cdninstagram.com/vp/7ba526d1ade5d5e0c6714e25f99fe2d1/5CB38578/t51.2885-15/e35/47586321_2225886541021149_3936006676563661557_n.jpg?_nc_ht=scontent-amt2-1.cdninstagram.com); background-size: 100%; background-position: 40% 0%;
  198. position: relative;
  199. [/class]
  200.  
  201. [class=title]width: 100%;
  202. font-size: 22px;
  203. font-family: 'Yesteryear';
  204. color: white;
  205. text-transform: lowercase;
  206. text-align: center;
  207. position: relative;
  208. top: -20px;
  209. left: -55px
  210. [/class]
  211.  
  212. [class=stixt]height: 175px;
  213. width: 170px;
  214. font-size: 9px;
  215. font-family: 'Inconsolata', monospace;
  216. color: white;
  217. overflow: hidden;
  218. text-align: justify;
  219. text-transform: lowercase;
  220. position: relative; top: 55px; left: 10px;
  221. [/class]
  222.  
  223. [class=stixt]height: 170px;
  224. width: 170px;
  225. font-size: 9px;
  226. font-family: 'Inconsolata', monospace;
  227. color: white;
  228. overflow: hidden;
  229. text-align: justify;
  230. text-transform: lowercase;
  231. position: relative; top: 55px; left: 10px;
  232. [/class]
  233.  
  234. [script class=pic on=mouseenter version=2]
  235. (addClass "cloak" "text")
  236. (removeClass "uncloak" "text")
  237. (addClass "scaled" "spryt")
  238. (removeClass "scalen" "spryt")
  239. [/script]
  240.  
  241. [script class=pic on=mouseleave version=2]
  242. (addClass "uncloak" "text")
  243. (removeClass "cloak" "text")
  244. (addClass "scalen" "spryt")
  245. (removeClass "scaled" "spryt")
  246. [/script]
  247.  
  248. [class=ri]left: 0px
  249. [/class]
  250.  
  251. [class=le]left: -30px
  252. [/class]
  253.  
  254. [class=outs]padding-top: 5px; height: 55px;
  255. width: 60px;
  256. font-size: 35px;
  257. font-weight: 900;
  258. line-height: 15px;
  259. font-family: sans-serif;
  260. position: relative;
  261. top: -70px;
  262. left: 20px;
  263. opacity: 0;
  264. transition: 0.5s
  265. [/class]
  266.  
  267. [class=tabs]display: inline-block;
  268. font-size: 17px;
  269. cursor: pointer;
  270. color: white;
  271. font-size: 0.6em;
  272. font-weight: 700;
  273. font-family: 'Montserrat', sans-serif;
  274. position: relative
  275. [/class]
  276.  
  277. [class=gade]height: 350px;
  278. width: 280px;
  279. padding: 25px 5px 5px 5px;
  280. position: relative;
  281. top: -800px;
  282. left: 240px;
  283. color: #f2f2f2;
  284. overflow: hidden
  285. [/class]
  286.  
  287. [class=scroll]height: 100%;
  288. width: 100%;
  289. overflow-y: scroll;
  290. padding-right: 20px
  291. [/class]
  292.  
  293. [class=big]height: 50px;
  294. width: 280px;
  295. color: #fff;
  296. font-size: 30px;
  297. text-transform: uppercase;
  298. font-weight: 900;
  299. position: relative;
  300. left: 5px
  301. [/class]
  302.  
  303. [class=o]height: 185px;
  304. width: 270px;
  305. font-size: 10px;
  306. overflow: hidden;
  307. position: relative;
  308. margin: auto;
  309. text-align: justify
  310. [/class]
  311.  
  312. [class=firstword]height: 10px;
  313. display: inline-block;
  314. background: #844706;
  315. padding: 0px 5px 7px 5px;
  316. color: #fff;
  317. font-weight: 700
  318. [/class]
  319.  
  320. [class=columnhold]height: 75px;
  321. width: 100%;
  322. position: relative;
  323. font-size: 19px;
  324. color: transparent
  325. [/class]
  326.  
  327. [class=image]display: inline-block;
  328. height: 75px;
  329. width: 75px;
  330. background-image: url(https://data.whicdn.com/images/77895408/original.jpg);
  331. background-size: 155%;
  332. position: relative;
  333. filter: contrast(110%) brightness(95%);
  334. [/class]
  335.  
  336. [class=angle]width: 280px;
  337. font-size: 33px;
  338. text-align: center;
  339. position: relative;
  340. top: 10px
  341. [/class]
  342.  
  343. [class=round]border: 5px solid #7E4319;
  344. border-radius: 50%;
  345. height: 70px;
  346. width: 70px;
  347. background-image: url(https://66.media.tumblr.com/6a122393725aee36c0aa461419e235c2/tumblr_pfcho6wFlw1uwr6of_1280.jpg);
  348. background-size: 180%;
  349. background-position: 30% 100%;
  350. position: relative;
  351. filter: contrast(110%) brightness(95%);
  352. position: relative;
  353. top: 0px; left: 220px
  354. [/class]
  355.  
  356. [class=bigtext]width: 210px;
  357. position: relative;
  358. font-size: 21px;
  359. text-transform: uppercase;
  360. font-weight: 700;
  361. top: 10px;
  362. left: -215px
  363. [/class]
  364.  
  365. [div class=container][div class=moon][/div]
  366.  
  367. [div class=pic][div class=text][font=Yesteryear]go and smell the roses
  368. [br][/br]go and smell the roses
  369. [br][/br]go and smell the roses
  370. [br][/br]go and smell the roses
  371. [br][/br]go and smell the roses
  372. [br][/br]go and smell the roses
  373. [br][/br]go and smell the roses
  374. [br][/br]go and smell the roses
  375. [br][/br]go and smell the roses
  376. [br][/br]go and smell the roses
  377. [br][/br]go and smell the roses
  378. [br][/br]go and smell the roses [/font][/div]
  379.  
  380. [div class=spryt][div class=ff][div class=ffor][div class=bor][/div]
  381. [div class=outs][div class="tabs first"][font=Montserrat]1.[/font][/div]
  382.  
  383. [div class="tabs second"][font=Montserrat]2.[/font][/div]
  384.  
  385. [div class="tabs third" style="top: 5px"][font=Montserrat]3.[/font][/div]
  386.  
  387. [div class="tabs fourth" style="top: 5px"][font=Montserrat]4.[/font][/div][/div][/div]
  388. [div class=title][font=Yesteryear]the last of the real ones[/font][/div][/div]
  389. [div class=stixt]Begin with bullet, now add fire to the proof
  390. But I'm still not sure if fear's a rival or a close relative to truth
  391. Either way it helps to hear these words bounce off of you
  392. The softest echo could be enough for me to make it through
  393. [br][/br][br][/br]But I'm still not sure if fear's a rival or a close relative to truth
  394. Either way it helps to hear these words bounce off of you
  395. [/div][/div][/div]
  396.  
  397. [div class=gade]
  398. [div class="tabsContent tabsContent1"][div class=big][font=Reem Kufi]requisite[/font][/div]
  399.  
  400. [div class=o][div class=scroll]
  401. [div class=firstword]full name[/div] lorem ipsum dolor sit amet
  402. [br][/br][br][/br]
  403. [div class=firstword]alias[/div] lorem ipsum dolor sit amet
  404. [br][/br][br][/br]
  405. [div class=firstword]age[/div] lorem ipsum dolor sit amet
  406. [br][/br][br][/br]
  407. [div class=firstword]birthday[/div] lorem ipsum dolor sit amet
  408. [br][/br][br][/br]
  409. [div class=firstword]gender[/div] lorem ipsum dolor sit amet
  410. [br][/br][br][/br]
  411. [div class=firstword]sexuality[/div] lorem ipsum dolor sit amet
  412. [br][/br][br][/br]
  413. [div class=firstword]height[/div] lorem ipsum dolor sit amet
  414. [br][/br][br][/br]
  415. [div class=firstword]weight[/div] lorem ipsum dolor sit amet
  416. [br][/br][br][/br]
  417. [div class=firstword]faceclaim[/div] lorem ipsum dolor sit amet
  418.  
  419.  
  420. [/div][/div][/div]
  421.  
  422. [div class="tabsContent tabsContent2" style="display: none"][div class=big][font=Reem Kufi]persona[/font][/div]
  423.  
  424. [div class=o][div class=scroll]
  425. [div class=firstword]personality[/div]  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief,
  426.  
  427. [/div][/div][/div]
  428.  
  429. [div class="tabsContent tabsContent3" style="display: none"][div class=big][font=Reem Kufi]biography[/font][/div]
  430.  
  431. [div class=o][div class=scroll]
  432. [div class=firstword]biography[/div] What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief,
  433.  
  434. [/div][/div][/div]
  435.  
  436. [div class="tabsContent tabsContent4" style="display: none"][div class=big][font=Reem Kufi]gallery[/font][/div]
  437.  
  438. [div class=o][div class=scroll]
  439.  
  440. [div class=columnhold][div class=image][/div] . [div class=image][/div] . [div class=image][/div][/div]
  441. [br][/br]
  442. [div class=columnhold][div class=image][/div] . [div class=image][/div] . [div class=image][/div][/div]
  443.  
  444. [/div][/div][/div]
  445.  
  446. [div class=angle]▼▼▼▼▼▼▼▼
  447. [div class=round]
  448. [div class=bigtext][font=Reem Kufi]name goes here[/font][/div][/div][/div][/div][/div]
  449. [div class=c]@undine[/div][/nobr]
RAW Paste Data
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
 
Top