API tools faq
paste
Advertisement
dianakko

scorpion crd code no c

dianakko
Sep 8th, 2021
2,993
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.22 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  3. <link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  4.  
  5. <script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  6.  
  7. <!-------MUSIC PLAYER BY GLENTHEMES------->
  8. <script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
  9. <!-- scrollbox appear on hover effect made by dante~! cr appreciated @ciarispop pls dont repost on other pastebins tt__tt -->
  10.  
  11. <style>
  12. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  13. :root {
  14. --Music-Player-Vinyl:#000;
  15. --Vinyl-Icon-Size:17px;
  16. --Vinyl-Spin-Speed:3.5s;
  17. --Music-Controls:#000;
  18. --Music-Controls-Size:12px;
  19. --Music-Title-Font-Size:11px;
  20. --Music-Title-Color:#000;
  21. }
  22. .glenjams-06 {
  23. display:none;
  24. position:fixed;
  25. z-index:99;
  26. margin: auto;
  27. }
  28.  
  29. .pasta {
  30. display:flex;
  31. align-items:center;
  32. }
  33.  
  34. .vinyl-spin {
  35. animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  36. -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  37. -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  38. -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  39. }
  40.  
  41. .vinyl-pause {
  42. animation-play-state:paused;
  43. -webkit-animation-play-state:paused;
  44. -moz-animation-play-state:paused;
  45. -o-animation-play-state:paused;
  46. }
  47.  
  48. @-webkit-keyframes recordspin {
  49. from {
  50. -webkit-transform:rotate(0deg);
  51. -o-transform:rotate(0deg);
  52. transform:rotate(0deg);
  53. }
  54. to {
  55. -webkit-transform:rotate(360deg);
  56. -o-transform:rotate(360deg);
  57. transform:rotate(360deg);
  58. }
  59. }
  60.  
  61. @keyframes recordspin {
  62. from {
  63. -ms-transform:rotate(0deg);
  64. -moz-transform:rotate(0deg);
  65. -webkit-transform:rotate(0deg);
  66. -o-transform:rotate(0deg);
  67. transform:rotate(0deg);
  68. }
  69. to {
  70. -ms-transform:rotate(360deg);
  71. -moz-transform:rotate(360deg);
  72. -webkit-transform:rotate(360deg);
  73. -o-transform:rotate(360deg);
  74. transform:rotate(360deg);
  75. }
  76. }
  77.  
  78. .vinyl, .vinyl svg {
  79. width:var(--Vinyl-Icon-Size);
  80. height:var(--Vinyl-Icon-Size);
  81. }
  82.  
  83. .music-controls {
  84. margin-left:10px;
  85. width:var(--Music-Controls-Size);
  86. overflow:hidden;
  87. cursor:pointer;
  88. }
  89.  
  90. .music-controls svg {
  91. width:var(--Music-Controls-Size);
  92. height:var(--Music-Controls-Size);
  93. color:var(--Music-Controls);
  94. stroke-width:1.5px;
  95. }
  96.  
  97. .pausee {display:none;}
  98.  
  99. .beff {display:none;}
  100. .aff {display:block;}
  101.  
  102. .music-title {
  103. margin-left:8px;
  104. font-family:work sans;
  105. font-size:var(--Music-Title-Font-Size);
  106. color:var(--Music-Title-Color);
  107. }
  108.  
  109. @font-face {
  110. font-family: chicle;
  111. src: url(https://dl.dropbox.com/s/publbos1lnbeaf7/BUBBLEGUMS.TTF);
  112. }
  113.  
  114. #cont { /*container! i'd recommed u only change the border eheh */
  115. width: 240px;
  116. height: 240px;
  117. border-radius: 12px;
  118. position: relative;
  119. margin-left: auto;
  120. margin-right: auto;
  121. }
  122.  
  123. .imgbg { /* image made to fit no matter the size! */
  124. width: 100%;
  125. height: 100%;
  126. object-fit: cover;
  127. border-radius: 9px; /*for an image to fit make it -3px than the border-radius of the #cont*/
  128. }
  129.  
  130. #float { /* floating text, u can change this! */
  131. position: absolute;
  132. width: 100%;
  133. left: 0;
  134. top: -10px;
  135. text-align: center;
  136. z-index: 1;
  137. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  138. font-family: chicle;
  139. font-size:2em;
  140. font-weight:bold;
  141. color: #fff;
  142. animation-name: floating;
  143. animation-duration: 3s;
  144. animation-iteration-count: infinite;
  145. animation-timing-function: ease-in-out;
  146. }
  147.  
  148. mark { /* round stuff like highlight */
  149. background: #d4e3c8;
  150. border-radius:7px;
  151. border: 1px solid #000;
  152. padding-left: 5px;
  153. padding-right: 5px;
  154. color: ##41572e;
  155.  
  156. }
  157.  
  158. @keyframes floating {
  159. 0% { transform: translate(0, 0px); }
  160. 50% { transform: translate(0, 15px); }
  161. 100% { transform: translate(0, -0px); }
  162. }
  163.  
  164. #scroll {
  165. /* scrollbox! u can change this! note: mess around with the 'margin-left' depending on the width or if u change anything of the scrollbox bc it messes a bit */
  166. opacity: 0;
  167. position: absolute;
  168. margin-left: 4%;
  169. margin-right: 4%;
  170. width: 220px;
  171. top: 70px;
  172. border-radius: 10px;
  173. padding: 10px;
  174. height: 120px;
  175. overflow: scroll;
  176. background: #FFFFFF90;
  177. transition: opacity .35s ease;
  178. /* style of the text inside scrollbox */
  179. font-size: 14px;
  180. font-family: times;
  181. color: #000;
  182. text-align: justify;
  183. line-height: 16px;
  184. }
  185.  
  186. #cont:hover #scroll {
  187. opacity: 1;
  188.  
  189. }
  190.  
  191. #overlay { /* overlay! (blue in this case) (hidden without mouseover) */
  192. position: absolute;
  193. bottom: 0;
  194. left: 0;
  195. right: 0;
  196. background: rgba(199, 234, 252, 0); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
  197. overflow: hidden;
  198. width: 0;
  199. height: 100%;
  200. transition: background 0.5s ease;
  201. border-radius: 9px;
  202.  
  203. }
  204.  
  205. #cont:hover #overlay { /* overlay when hovered! (it appears) */
  206. width: 100%;
  207. background: rgba(199, 234, 252, .2); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
  208. transition: background 0.5s ease-out;
  209. }
  210.  
  211. </style>
  212.  
  213. <div id="cont">
  214.  
  215. <img class=imgbg src="https://i.imgur.com/D6yrVz0.jpeg">
  216. <div id="float"> dani </div>
  217. <div id="overlay"> </div>
  218. <div id="scroll"> <u>your text</u> goes here your text goes here your text goes here <i>your text goes here</i> <p>
  219. <mark>:)</mark> your text goes here your text goes here your text goes here your text goes here your text goes <p>
  220. <mark>:(</mark> here your text goes here your text goes here your text
  221. <p>
  222. <mark>byf</mark> goes here your text goes here your text goes here your text goes here
  223. <p>
  224. <mark>dfi</mark> goes here your text goes here your text goes here your text goes here your text goes here
  225. <p><img src="http://i748.photobucket.com/albums/xx122/luuuh/divisorias/barinhas29.gif" style:"width: 40%;">
  226. <p>
  227. <mark>stan</mark> goes here your text goes here your text goes here
  228. <p>
  229. <strong>support</strong> goes here your text goes here your text goes here
  230. </div>
  231. <br></br>
  232.  
  233. <!-------MUSIC PLAYER BY GLENTHEMES------->
  234. <div class="glenjams-06">
  235. <div class="pasta">
  236. <div class="vinyl"></div>
  237. <div class="music-controls">
  238. <div class="playy"><i data-feather="play"></i></div>
  239. <div class="pausee"><i data-feather="pause"></i></div>
  240. </div>
  241. <div class="music-title"></div>
  242. </div>
  243. <audio id="audio" src="https://dl.dropbox.com/s/myqskugtxm9byf4/Moonlit%20Night.mp3" type="audio"></audio>
  244. </div><!--pasta-->
  245. </div><!--glenjams-06-->
  246. <!----end music player---->
  247. <script>feather.replace()</script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!