Advertisement
milkandcookies

cherry ju mp music player

Sep 5th, 2021
5,268
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.21 KB | None | 0 0
  1. <style>
  2. #music-player {
  3. height: 2.125em;
  4. width: 2.125em;
  5. border-radius: 50%;
  6. border: 3px double black;
  7. transition: all 0.35s ease;
  8. background: #FF78BC;
  9. display: inline-flex;
  10. overflow: hidden;
  11. align-items: center;
  12. justify-content: left;
  13. }
  14.  
  15. #music-player > div {
  16. margin: 0.25em;
  17. }
  18.  
  19. .pixel {
  20. flex: 66%;
  21. justify-content: left;
  22. }
  23.  
  24. .note {
  25. color: black;
  26. font-size: 1.5em;
  27. justify-content: center;
  28. flex: 33%;
  29. }
  30.  
  31. .note p {
  32. transform: rotate(20deg);
  33. }
  34.  
  35. #music-player:hover {
  36. border: 3px solid #A80402;
  37. width: 6.125em;
  38. border-radius: 0.625em;
  39. }
  40. </style>
  41.  
  42. <body>
  43.  
  44. <div id="music-player">
  45. <div class="pixel"> <img src="https://dl.dropbox.com/s/8utvn4n7itvjge9/F3D14112-AD68-427C-A757-0F0FEF6B073A.gif"> </div><div class="note"><p id="music-note">♪</p></div>
  46. </div>
  47.  
  48. <script>
  49. document.getElementById("music-note").onclick = function() {
  50. var audio = document.getElementById("audio");
  51. if (audio.paused) audio.play();
  52. else audio.pause();
  53. };
  54. </script>
  55.  
  56. <audio id="audio" src="https://dl.dropbox.com/s/z1vhj5ecqxzrmso/yt1s.com%20-%20%EB%82%98%EC%9D%B8%EB%AE%A4%EC%A7%80%EC%8A%A49MUSES%20%EA%B1%B4GUN%20%EC%95%88%EB%AC%B4%EC%97%B0%EC%8A%B5%20%EC%98%81%EC%83%81%EA%B3%B5%EA%B0%9C.mp3"></audio>
  57. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement