ukamori

music player for jibeomcito tut

Jul 9th, 2022 (edited)
324
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.11 KB | None | 0 0
  1. <head>
  2. <link rel="preconnect" href="https://fonts.googleapis.com">
  3. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  4. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  5. </head>
  6.  
  7. <div id="music-player">
  8. <div id="section01">
  9. <p>
  10. <img src="https://barbara.crd.co/assets/images/gallery21/2b2bdc93_original.gif?v=cbba7835" id="startOrStopImg" alt="Play Button">
  11. </p>
  12. </div>
  13. <div id="section02">
  14. <p style="font-family: 'Poppins', sans-serif; font-size: 0.875em; letter-spacing: 0px;">POP! by NAYEON</p>
  15. </div>
  16. </div>
  17.  
  18. <style>
  19. #music-player {
  20. position: absolute;
  21. background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(155,137,186,1) 100%);
  22. width: 6em;
  23. height: 1.5em;
  24. display: inline-flex;
  25. border-radius: 0.8em;
  26. padding: 0.125em;
  27. transition-delay: 0.75s;
  28. position: relative;
  29. bottom: -0.25em;
  30. left: 9.75em;
  31. }
  32.  
  33. @media only screen and (max-width: 600px) {
  34. #music-player {
  35. left: 9.5em;
  36. }
  37. }
  38.  
  39. @keyframes marquee {
  40. 0% {
  41. transform: translateX(100%);
  42. }
  43.  
  44. 100% {
  45. transform: translateX(-100%);
  46. }
  47. }
  48.  
  49. #holder:hover #music-player {
  50. transform: translate(-5.5em, 9em);
  51. }
  52.  
  53. #section01, #section02 {
  54. overflow: hidden;
  55. white-space: nowrap;
  56. height: 100%;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. }
  61.  
  62. #section01 {
  63. margin-right: 0.125em;
  64. flex: 33%;
  65. }
  66.  
  67. #section02 p {
  68. transform: translateX(100%);
  69. animation: marquee 6s linear infinite;
  70. font-family: good-time;
  71. letter-spacing: 0.1em;
  72. }
  73.  
  74. @keyframes rotating {
  75. 0% {
  76. transform: rotate(0);
  77. }
  78.  
  79. 33% {
  80. transform: rotate(-25deg);
  81. }
  82.  
  83. 66% {
  84. transform: rotate(25deg);
  85. }
  86.  
  87. 100% {
  88. transform: rotate(0);
  89. }
  90. }
  91.  
  92. #section02 {
  93. flex: 66%;
  94. }
  95.  
  96. #section01 img {
  97. height: 1.2em;
  98. }
  99.  
  100. #section01 img:hover {
  101. animation: rotating 0.3s linear infinite;
  102. }
  103. </style>
  104.  
  105. <script>
  106. document.getElementById("startOrStopImg").onclick = function() {
  107. var audio = document.getElementById("audio");
  108. if (audio.paused)
  109. audio.play();
  110. else
  111. audio.pause();
  112. };
  113. </script>
  114.  
  115. <audio id="audio" src="https://cdn.discordapp.com/attachments/916511538410569829/995173251787538573/NAYEON_POP.mp3"></audio>
Add Comment
Please, Sign In to add comment