gatitoz

nubes crd co menu !

Sep 1st, 2021 (edited)
2,118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.24 KB | None | 0 0
  1. <!-- by is4joon cr for the menu to resource.ju.mp admin jeje -->
  2.  
  3.  
  4. <link rel="preconnect" href="https://fonts.googleapis.com">
  5. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  6. <link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">
  7. <style>
  8.  
  9. @font-face {
  10. font-family: good-time;
  11. src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
  12. }
  13.  
  14. a.ayud {
  15. font-family: good-time;
  16. font-size:1.6em;
  17. text-shadow: -1px 0 #8a631b
  18. , 0 1px #8a631b, 1px 0 #8a631b, 0 -1px #8a631b, 0 0;
  19. color: #fccfcf;
  20. }
  21.  
  22. .rotate {
  23. animation: rotation 4s infinite linear;
  24. }
  25.  
  26. @keyframes rotation {
  27. from {
  28. transform: rotate(0deg);
  29. }
  30. to {
  31. transform: rotate(359deg);
  32. }
  33. }
  34.  
  35. figure.blurfilter{
  36. margin: 0;
  37. padding: 0;
  38. display: inline-block;
  39. position: relative;
  40. border-radius: 50%;
  41. overflow: hidden; /
  42. }
  43.  
  44. .figcaption img {
  45. width: 10px;
  46. }
  47.  
  48. figure.blurfilter img{
  49. display: block;
  50. width: 240px;
  51. height: auto;
  52. transition: all 0.4s 0.4s;
  53. }
  54.  
  55. figure.blurfilter figcaption{
  56. position: absolute;
  57. display: block;
  58. text-align: center;
  59. -webkit-box-sizing: border-box;
  60. -moz-box-sizing: border-box;
  61. box-sizing: border-box;
  62. text-align: center;
  63. background: white;
  64. border-radius: 50%;
  65. padding: 20px;
  66. z-index: 100;
  67. width: 90%;
  68. height: 90%;
  69. overflow: auto;
  70. top: 5%;
  71. left: 5%;
  72. font-family: 'Mali', cursive;
  73. font-size: 16px;
  74. opacity: 0;
  75. -moz-transition: all 0.4s;
  76. -webkit-transition: all 0.4s;
  77. transition: all .4s;
  78. }
  79.  
  80. figure.blurfilter figcaption h3{
  81. border-bottom: 1px solid red;
  82. text-align: left;
  83. width: 90%;
  84. margin: 0;
  85. }
  86.  
  87. figure.blurfilter figcaption p{
  88. text-align: left;
  89. margin-top: 10px;
  90. line-height: 1.5;
  91. }
  92.  
  93. figure.blurfilter figcaption a{
  94. text-decoration: none;
  95. }
  96.  
  97. figure.blurfilter:hover img{
  98. -webkit-filter: blur(5px);
  99. filter: blur(5px);
  100. -webkit-transform: scale(1.3);
  101. transform: scale(1.3);
  102. -moz-transition: all 0.4s;
  103. -webkit-transition: all 0.4s;
  104. transition: all 0.4s;
  105. }
  106.  
  107. figure.blurfilter:hover figcaption{
  108. opacity: 1;
  109. -moz-transition: all .4s .4s;
  110. -webkit-transition: all .4s .4s;
  111. transition: all .4s .4s;
  112. }
  113.  
  114. figure.slidey figcaption{
  115. -webkit-transform: rotateY(90deg);
  116. transform: rotateY(90deg);
  117. }
  118.  
  119. figure.slidey:hover figcaption{
  120. -webkit-transform: rotateY(0);
  121. transform: rotateY(0);
  122. }
  123. .pixel {
  124. width: 1em !important;
  125. filter: none !important;
  126. display: inline-block;
  127. }
  128. figcaption {
  129. overflow-y: scroll;
  130. }
  131. </style>
  132. <figure class="blurfilter slidey">
  133. <img src="https://64.media.tumblr.com/31262138748b2d1d12a2be77c7010a52/bd9ff758f6579532-7f/s1280x1920/a8fc014432622bbedba4f5dd6d4b965ad3e46769.png" class="rotate" />
  134. <figcaption>
  135. info info info info
  136. <br>info info info
  137. <br>info info info
  138. <br></br>
  139. <a class="ayud"> before you follow </a>
  140. <br>info info info info info info info info info info info info info info info info info info info info info info info info info info info
  141. <br></br>
  142. <a class="ayud"> dont follow if </a>
  143. <br>info info info info info info info info info info info info info info info info info info info info info info info info info info info
  144. <br></br>
  145. <a class="ayud"> music </a>
  146. <br>info info info info info info info info info info info info info info info info info info info info info info info info info info info
  147.  
  148. </figure>
Add Comment
Please, Sign In to add comment