SHARE
TWEET

CARNATIONS // code

water-nymph Jan 5th, 2019 (edited) 156 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [nobr]
  2. [class name=big]
  3. animation-name: {post_id}big;
  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=big]
  13. [keyframe=0]height: 0px;[/keyframe]
  14. [keyframe=100]height: 130px[/keyframe]
  15. [/animation]
  16.  
  17. [class name=back]
  18. animation-name: {post_id}back;
  19. animation-direction: normal;
  20. animation-duration: 0.7s;
  21. animation-delay: 0.2s;
  22. animation-timing-function: ease-out;
  23. animation-iteration-count: 1;
  24. animation-fill-mode: both;
  25. [/class]
  26.  
  27. [animation=back]
  28. [keyframe=0]height: 130px;[/keyframe]
  29. [keyframe=100]height: 0px[/keyframe]
  30. [/animation]
  31.  
  32. [script class=second on=mouseenter]
  33. addClass big list
  34. removeClass back list
  35. [/script]
  36.  
  37. [script class=image on=click]
  38. addClass back list
  39. removeClass big list
  40. [/script]
  41.  
  42. [class=container]height: 330px;
  43. width: 480px;
  44. padding: 10px;
  45. background: #a2a297;
  46. margin: auto;
  47. cursor: url(https://i.imgur.com/fkP02Jr.png), auto
  48. [/class]
  49.  
  50. [class=bigname]height: 60px;
  51. width: 350px;
  52. padding: 0px 10px 0px 10px;
  53. font-size: 53px;
  54. color: #8D5C3C;
  55. text-transform: uppercase;
  56. text-align: left;
  57. letter-spacing: 1px;
  58. transform: rotate(90deg);
  59. position: relative;
  60. top: 155px;
  61. left: -150px
  62. [/class]
  63.  
  64. [class=image]height: 310px;
  65. width: 210px;
  66. background-image: url(https://contributormagazine.com/wp-content/uploads/2017/11/ROBERTA_HOLLIS_01.jpg);
  67. background-size: 320%;
  68. background-position: 15% 50%;
  69. position: relative;
  70. top: -50px;
  71. left: 50px
  72. [/class]
  73.  
  74. [class=little]height: 310px;
  75. width: 215px;
  76. position: relative;
  77. top: -360px;
  78. left: 260px
  79. [/class]
  80.  
  81. [class=second]height: 130px;
  82. width: 190px;
  83. padding: 10px;
  84. background-image: url(https://66.media.tumblr.com/00cfadbb9e9d0c4357fdd277afd12d6a/tumblr_p0e5krQBzQ1wc23v6o2_400.jpg);
  85. background-size: 100%;
  86. background-position: 35% 50%;
  87. filter: grayscale(50%) brightness(90%);
  88. position: relative;
  89. line-height: 18px
  90. [/class]
  91.  
  92. [class=list]height: 0px;
  93. width: 190px;
  94. transition: 0.5s;
  95. overflow: hidden
  96. [/class]
  97.  
  98. [class=code]display: inline-block;
  99. height: 30px;
  100. padding: 14px 5px 1px 5px;
  101. width: 180px;
  102. background: #91705B;
  103. border-radius: 3px;
  104. [/class]
  105.  
  106. [class=bignum]display: inline-block;
  107. font-size: 25px;
  108. color: white
  109. [/class]
  110.  
  111. [class=codename]line-height: 11px;
  112. font-weight: 700;
  113. font-size: 11px;
  114. color: white;
  115. letter-spacing: 0.3px;
  116. text-transform: uppercase;
  117. position: relative; top: -25px; left: 25px
  118. [/class]
  119.  
  120. [class=desc]font-size: 8px;
  121. font-weight: 300;
  122. display: inline-block;
  123. [/class]
  124.  
  125. [class=text]height: 150px;
  126. width: 200px;
  127. color: #f1f1f1;
  128. font-size: 9px;
  129. text-transform: uppercase;
  130. overflow: hidden;
  131. position: relative;
  132. letter-spacing: 0.3px;
  133. top: 10px;
  134. left: 10px;
  135. text-align: justify
  136. [/class]
  137.  
  138. [class=scroll]height: 100%;
  139. width: 100%;
  140. overflow-y: scroll;
  141. overflow-x: hidden;
  142. padding-right: 100px
  143. [/class]
  144.  
  145. [class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px
  146. [/class]
  147.  
  148. [div class=container]
  149. [div class=bigname][font=Rozha One]carnations[/font][/div]
  150. [div class=image][/div]
  151.  
  152. [div class=little][div class=second][div class=list][div class=scroll]
  153.  
  154. [div class=code][div class=bignum][font=Abril Fatface]1.[/font][/div]
  155. [div class=codename][font=Arimo]code name
  156. [br][/br][div class=desc][code description][/div][/font][/div][/div]
  157.  
  158. [br][/br]
  159. [div class=code][div class=bignum][font=Abril Fatface]2.[/font][/div]
  160. [div class=codename][font=Arimo]code name
  161. [br][/br][div class=desc][code description][/div][/font][/div][/div]
  162.  
  163. [br][/br]
  164. [div class=code][div class=bignum][font=Abril Fatface]3.[/font][/div]
  165. [div class=codename][font=Arimo]code name
  166. [br][/br][div class=desc][code description][/div][/font][/div][/div][/div][/div][/div]
  167. [div class=text][div class=scroll]
  168.  
  169. [font=Work Sans]hey, it's jack and i'm at it again with the freebies. this is my third code dump so far - you can find my first one here and my second one here! yes, these are freebies, so they are free to use as long as you keep the credit. hover over the picture above to find the list of codes in this thread. click the big image to close it. this code can be found here.[/font][/div][/div][/div][/div]
  170.  
  171. [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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top