dracslaura

multiple containers (idk lmao)

May 29th, 2021 (edited)
2,898
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.02 KB | None | 1 0
  1. <!---
  2.  
  3. (\ ∧♛∧ .+° °*.
  4. (ヾ( *・ω・) °・ cr viliarreai if used !
  5. `し( つ つ━✩* .+°
  6. (/しーJ
  7.  
  8. --->
  9.  
  10. <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico|Poppins:400,700'>
  11. <style>
  12. /*my credits! please dont remove, but you may the change the img to ur liking*/
  13. .dont-remove {
  14. position:fixed;
  15. z-index:99;
  16. bottom:0;margin-bottom:5px;
  17. left:0;margin-left:5px;
  18. }
  19.  
  20. * {
  21. margin: 0;
  22. padding: 0;
  23. box-sizing: border-box;
  24. font-family: "Poppins", sans-serif;
  25. transition: 1s cubic-bezier(0.59, -0.43, 0.17, 1.16);
  26. }
  27.  
  28. body {
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. height: 100vh;
  33. overflow: hidden;
  34. perspective: 800px;
  35. background: #ffc0e2;
  36. }
  37.  
  38. figure {
  39. width: 350px;
  40. box-shadow: 3px 3px 40px 0 rgba(0, 0, 0, 0.4);
  41. border-radius: 8px;
  42. position: relative;
  43. background: #ffc0e2;
  44. transition: 0.3s ease-in-out;
  45. }
  46. figure .img {
  47. width: 100%;
  48. height: 200px;
  49. border-radius: 8px 8px 0 0;
  50. background: url("https://data.whicdn.com/images/34202019/original.jpg");
  51. background-size: 350px auto;
  52. background-repeat: no-repeat;
  53. }
  54. figure .img:after {
  55. content: "";
  56. position: absolute;
  57. bottom: 0;
  58. left: 0;
  59. width: 100%;
  60. height: 150px;
  61. background: linear-gradient(transparent, #ecf0f1 44%);
  62. border-radius: 0 0 8px 8px;
  63. }
  64. figure figcaption {
  65. height: 80px;
  66. display: flex;
  67. align-items: center;
  68. justify-content: center;
  69. flex-wrap: wrap;
  70. position: relative;
  71. overflow: visible;
  72. background: #fff;
  73. border-radius: 0 0 8px 8px;
  74. }
  75. figure figcaption span {
  76. width: 100%;
  77. }
  78. figure figcaption span:nth-child(1) {
  79. position: absolute;
  80. font-family: "Pacifico", cursive;
  81. font-size: 30px;
  82. top: -40px;
  83. opacity: 0;
  84. left: 10;
  85. color: #000;
  86. text-shadow: 0 0 15px #FFCFE9;
  87. }
  88. figure figcaption span:nth-child(2) {
  89. filter: url("#outline");
  90. font-family: "Pacifico", cursive;
  91. font-size: 52px;
  92. overflow: visible;
  93. position: absolute;
  94. top: -42px;
  95. left: 1px;
  96. white-space: nowrap;
  97. color: #ffc0e2;
  98. z-index: 10px;
  99. transform: rotate(-2deg);
  100. text-shadow: 0 0 15px #FFCFE9;
  101. transition: top 0.3s ease-in-out;
  102. }
  103. figure figcaption span:nth-child(3) {
  104. opacity: 0;
  105. padding: 0 20px;
  106. height: 20px;
  107. overflow: hidden;
  108. cursor: text;
  109. }
  110. figure button {
  111. position: absolute;
  112. bottom: -10px;
  113. width: 130px;
  114. left: calc(50% - 65px);
  115. background: #FFBDE2;
  116. color: #fff;
  117. border: 0;
  118. height: 35px;
  119. border-radius: 4px;
  120. transform: rotate(1deg);
  121. box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  122. cursor: pointer;
  123. pointer-events: auto;
  124. transition: 0.3s ease-in-out;
  125. overflow: hidden;
  126. z-index: 20;
  127. }
  128. figure button:focus {
  129. outline: 0;
  130. }
  131. figure button:before {
  132. content: "more";
  133. position: absolute;
  134. top: 8px;
  135. left: 44px;
  136. opacity: 1;
  137. transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
  138. }
  139. figure button:after {
  140. content: "back";
  141. opacity: 0;
  142. top: 8px;
  143. left: 0;
  144. position: absolute;
  145. transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
  146. }
  147. figure:hover {
  148. transition: 0.3s ease-in-out;
  149. transform: rotateX(-2deg);
  150. box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.4);
  151. }
  152. figure:hover button {
  153. background: #FFADDA;
  154. bottom: -13px;
  155. transition: 0.3s ease-in-out;
  156. }
  157. figure:hover span:nth-child(2) {
  158. top: -39px;
  159. transition: top 0.3s ease-in-out;
  160. }
  161. figure.open .img {
  162. height: 0;
  163. }
  164. figure.open figcaption {
  165. height: 280px;
  166. border-radius: 8px;
  167. }
  168. figure.open figcaption span:nth-child(1) {
  169. top: -25px;
  170. opacity: 1;
  171. }
  172. figure.open figcaption span:nth-child(2) {
  173. top: -18px;
  174. }
  175. figure.open figcaption span:nth-child(3) {
  176. height: 100%;
  177. opacity: 1;
  178. padding: 80px 20px 40px 20px;
  179. }
  180. figure.open button:before {
  181. opacity: 0;
  182. left: 100%;
  183. }
  184. figure.open button:after {
  185. opacity: 1;
  186. left: 47px;
  187. }
  188. figure.open:hover figcaption span:nth-child(2) {
  189. top: -15px;
  190. transition: top 0.3s ease-in-out;
  191. }
  192. figure svg {
  193. position: absolute;
  194. bottom: 0;
  195. width: 350px;
  196. }
  197. </style>
  198.  
  199. <a href="https://twitter.com/vilIarreaI" title="container code created by ximena!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a>
  200.  
  201. <figure>
  202. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  203. <defs>
  204. <filter id="outline" mask="url(#mask)">
  205. <feFlood flood-color="#ecf0f1" result="base" />
  206. <feMorphology in="SourceGraphic" operator="dilate" radius="10" />
  207. <feComposite in="base" operator="in" />
  208. <feBlend in="SourceGraphic" mode="normal" />
  209. <feDropShadow stdDeviation="6" />
  210. </filter>
  211. </defs>
  212. </svg>
  213. <div class="img"></div>
  214. <figcaption>
  215. <span>About</span>
  216. <span>Gael or Blanca!</span>
  217. <span>info info info idk what to put here bc im dumb yeass</span>
  218. </figcaption>
  219. <button></button>
  220. </figure>
  221. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  222. <script id="rendered-js">
  223. $("button").click(function () {
  224. $("figure").toggleClass("open");
  225. });
  226. </script>
Add Comment
Please, Sign In to add comment