API tools faq
paste
ityizhuo

lippies crd

ityizhuo
Sep 7th, 2021 (edited)
5,024
-1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.58 KB | None | 0 1
raw download clone embed print report
  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
Public Pastes
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!