ityizhuo

lippies crd

Sep 7th, 2021 (edited)
4,998
-1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.58 KB | None | 0 1
  1. <!--- cr @itzhuo on twt, thankieeess! --->
  2.    
  3. <!--- google fonts, script etc. dont change the script--->
  4.    
  5.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  6.  
  7.     <head>
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Monda&display=swap" rel="stylesheet">
  11.     </head>
  12.    
  13. <!--- code start here! -->
  14.     <style>
  15. /* pronouns age etc info. you can change the fonts, color, size, etc */
  16.     @font-face {
  17. font-family: ink;
  18. src: url(https://dl.dropbox.com/s/tyhvew6jpuzr8zm/BubblegumInk-Regular.ttf);
  19. }
  20. #ink {
  21. font-family: ink;
  22. text-shadow: -1px 0 #F781D8, 0 1px #F781D8, 1px 0 #DF01A5, 0 -1px #DF01A5, 0 0;
  23. font-size:25px;
  24. text-align:center;
  25. color:white;
  26. line-height: 80%;
  27. }
  28.  
  29. /* hover and effects. change border only! */
  30. figure.blurfilter{
  31. margin: 10px;
  32. padding: 0;
  33. border-width:8px;
  34. border-style:solid;
  35. border-image: url("https://i.ibb.co/h1Q3bFn/83-B27704-CEA1-4-B8-F-BF79-90-D624-EDC6-F6.png") 8 fill round; /* you can use a lace border or a "normal" one */
  36. display: inline-block;
  37. position: relative;
  38. align-items: center;
  39. overflow: hidden; /
  40. }
  41. .figcaption img {
  42. width: 10px;
  43. }
  44. figure.blurfilter img{
  45. display: block;
  46. width: 250px;
  47. height: auto;
  48. transition: all 0.4s 0.4s;
  49. }
  50.  
  51. /* box that appear when hovered. just change the font, border and background */
  52. figure.blurfilter figcaption{
  53. position: absolute;
  54. display: block;
  55. text-align: left;
  56. line-height: 1.2;
  57. -webkit-box-sizing: border-box;
  58. -moz-box-sizing: border-box;
  59. box-sizing: border-box;
  60. border-radius:10px;
  61. background: linear-gradient(#F8E0F1 60%, white);
  62. border: 3px double #FE2EC8;
  63. padding: 10px;
  64. z-index: 100;
  65. width: 90%;
  66. height: 90%;
  67. overflow: auto;
  68. top: 5%;
  69. left: 5%;
  70. font-family: 'Monda', sans-serif;
  71. font-size: 14px;
  72. opacity: 0;
  73. -moz-transition: all 0.4s;
  74. -webkit-transition: all 0.4s;
  75. transition: all .4s;
  76. }
  77.  
  78. /* don't change this */
  79. figure.blurfilter figcaption h3{
  80. border-bottom: 1px solid red;
  81. text-align: left;
  82. width: 90%;
  83. margin: 0;
  84. }
  85. figure.blurfilter figcaption p{
  86. text-align: left;
  87. margin-top: 10px;
  88. line-height: 1.5;
  89. }
  90. figure.blurfilter figcaption a{
  91. text-decoration: none;
  92. }
  93. figure.blurfilter:hover img{
  94. -webkit-filter: blur(5px);
  95. filter: blur(5px);
  96. -webkit-transform: scale(1.3);
  97. transform: scale(1.3);
  98. -moz-transition: all 0.4s;
  99. -webkit-transition: all 0.4s;
  100. transition: all 0.4s;
  101. }
  102. figure.blurfilter:hover figcaption{
  103. opacity: 1;
  104. -moz-transition: all .4s .4s;
  105. -webkit-transition: all .4s .4s;
  106. transition: all .4s .4s;
  107. }
  108. figure.slidey figcaption{
  109. -webkit-transform: rotateY(90deg);
  110. transform: rotateY(90deg);
  111. }
  112. figure.slidey:hover figcaption{
  113. -webkit-transform: rotateY(0);
  114. transform: rotateY(0);
  115. }
  116. figcaption {
  117. overflow-y: scroll;
  118. }
  119.  
  120. @font-face { /* font for button/mark/highlight part. you can change it*/
  121. font-family: lumi;
  122. src: url(https://dl.dropbox.com/s/a3ftt66a9mzayi1/Luminauroit.ttf);
  123. }
  124.  
  125. /* button/highlight/mark wtv part. you can change basically anything here, go crazy go stupid! */
  126. mark {
  127. background-color: #F8E0F7;
  128. border: 1px solid #FE2EC8;
  129. border-radius: 15px;
  130. color: white;
  131. text-shadow: -1px 0 #FA58D0, 0 1px #FA58D0, 1px 0 #FA58D0, 0 -1px #FA58D0, 0 0;
  132. font-weight:normal;
  133. padding: 0px 5px;
  134. font-family: lumi;
  135. letter-spacing: 1.5px;
  136. text-align: center;
  137. text-decoration: none;
  138. display: inline-block;
  139. font-size: 15px;
  140. margin: 0px 1px;
  141. cursor: hidden; /* don't change this*/
  142. }
  143. </style>
  144.  
  145. <!--- content. the info inside the box that appeared when hovered --->
  146. <figure class="blurfilter slidey">
  147.  
  148. <img class=pinky src="https://64.media.tumblr.com/880bb9f831e346026e2baaf21b4ad8e6/a04862b65811d581-46/s400x600/dc043108c99800d28387932041e4e7b6ee5e8b56.gifv">
  149.  
  150. <figcaption><div id="ink">BASIC INFO</div>
  151.  
  152. <p><mark>about me</mark> text text text text </p>
  153.  
  154. <p><mark>interest</mark> text text text text </p>
  155.  
  156. <p> you can add more <u>mark</u> if you want between: &#60;mark&#62; and &#60;/mark&#62; and named it how you like it! </p>
  157.  
  158. <p><center><a href="YOUR.LINK">tittle</a> <font color="#FF00BF">❥</font> <a href="YOUR.LINK">tittle</a></center></p>
  159.  
  160. </figcaption>
  161. </figure>
  162.  
  163. <!--- music player start here --->
  164.  
  165. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  166. <style type="text/css">
  167.  
  168. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  169. #glenplayer02 {
  170. position:absolute; /* don't change the position */
  171. bottom:15px;
  172. margin-bottom:7px;
  173. left:6px;
  174. margin-left:20px;
  175. display:flex;
  176. z-index:100;
  177. }
  178. #glenplayer02 a {text-decoration:none;}
  179. #glenplayer02 > div {
  180. align-self:center;
  181. -webkit-align-self:center;
  182. }
  183. .music-controls {
  184. user-select:none;
  185. -webkit-user-select:none;
  186. width:13px;
  187. font-size:40px;
  188. cursor:pointer;
  189. text-shadow: -1px 0 #DF01A5, 0 1px #DF01A5, 1px 0 #DF01A5, 0 -1px #DF01A5, 0 0;
  190. }
  191. .playy, .pausee {color:#F6CEEC;} /* color of play & pause buttons */
  192. .pausee {display:none;}
  193. .sonata {
  194. margin-left:10px;
  195. color:#222; /* color of music note symbol */
  196. }
  197. .labeltext {
  198. margin-left:8px;
  199. font-family:courier new;
  200. font-size:9px;
  201. color:#222; /* color of song title */
  202. }
  203. </style>
  204. <body>
  205.  
  206. <!-------MUSIC PLAYER BY GLENTHEMES------->
  207. <div id="glenplayer02">
  208. <div class="music-controls" onclick="songstart();">
  209. <div class="playy">►</div>
  210. <div class="pausee">♪</div>
  211. </div>
  212. <div class="sonata"></div>
  213. <div class="labeltext"><div>
  214. </div><!--end music player-->
  215.  
  216. <audio id="tune" src="https://dl.dropbox.com/s/e1pw4feexdq279h/Get%20Up%20--%20%EB%B2%A0%EC%9D%B4%EB%B9%84%EB%B3%B5%EC%8A%A4.mp3"audio"></audio>
  217. </body>
Add Comment
Please, Sign In to add comment