elrisza

music player 4 carrd

Jan 16th, 2021
5,080
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
  3. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  4.  
  5. <!-------MUSIC PLAYER BY GLENTHEMES------->
  6. <script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
  7. <style>
  8. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  9. :root {
  10. --Circle-Size:38px;
  11. --Progress-Border-Size:2px;
  12. --Progress-Empty:#eee;
  13. --Progress-Fill:#FF8AD8;
  14. --Player-Background:#fbfbfb;
  15. --Play-Pause-Buttons-Size:14px;
  16. --Play-Pause-Buttons-Color:#FF8AD8;
  17. --Player-Text-Margin:16px;
  18.  
  19. --Song-Name-Font-Size:10px;
  20. --Song-Name-Color:#FF8AD8;
  21.  
  22. --Artist-Name-Font-Size:11px;
  23. --Artist-Name-Color:#FFDEF4;
  24. }
  25.  
  26. #glenplayer07 {
  27. position:fixed;
  28. bottom:0;margin-bottom:30px;
  29. left:0;margin-left:30px;
  30. z-index:99;
  31. }
  32.  
  33. .flamingo {
  34. display:flex;
  35. align-items:center;
  36. }
  37.  
  38. .circleofdeath {
  39. width:var(--Circle-Size);
  40. height:var(--Circle-Size);
  41. border-radius:100%;
  42. overflow:hidden;
  43. }
  44.  
  45. .tinfoil {
  46. width:var(--Circle-Size);
  47. height:var(--Circle-Size);
  48. background:var(--Progress-Empty);
  49. border-radius:100%;
  50. }
  51.  
  52. .oven {
  53. background:var(--Progress-Fill);
  54. }
  55.  
  56. .oliveoil {
  57. width:100%;
  58. height:100%;
  59. }
  60.  
  61. .crust {
  62. position:absolute;
  63. top:0;
  64. display:flex;
  65. align-items:center;
  66. justify-content:center;
  67. width:var(--Circle-Size);
  68. height:var(--Circle-Size);
  69. }
  70.  
  71. .cherry {
  72. display:flex;
  73. align-items:center;
  74. justify-content:center;
  75. width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  76. height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  77. background:var(--Player-Background);
  78. border-radius:100%;
  79. cursor:pointer;
  80. z-index:1;
  81. }
  82.  
  83. .music-controls {display:flex;align-items:center}
  84.  
  85. .music-controls .material-icons {
  86. font-size:var(--Play-Pause-Buttons-Size);
  87. color:var(--Play-Pause-Buttons-Color);
  88. }
  89.  
  90. .pausee {display:none;}
  91.  
  92. .beff {display:none;}
  93. .aff {display:block;}
  94.  
  95. .music-info {
  96. margin-left:var(--Player-Text-Margin);
  97. line-height:1em;
  98. }
  99.  
  100. .song-name {
  101. font-family:arial;
  102. font-size:var(--Song-Name-Font-Size);
  103. text-transform:uppercase;
  104. letter-spacing:0.3px;
  105. color:var(--Song-Name-Color);
  106. }
  107.  
  108. .artist-name {
  109. margin-top:3px;
  110. font-family:arial;
  111. font-size:var(--Artist-Name-Font-Size);
  112. letter-spacing:0.3px;
  113. color:var(--Artist-Name-Color);
  114. }
  115. </style>
  116.  
  117. <!-------MUSIC PLAYER BY GLENTHEMES------->
  118. <div id="glenplayer07">
  119. <div class="flamingo">
  120. <div class="circleofdeath">
  121. <div class="tinfoil">
  122. <div class="oliveoil"></div>
  123. </div>
  124. <div class="crust">
  125. <div class="cherry">
  126. <div class="music-controls">
  127. <i class="material-icons playy">play_arrow</i>
  128. <i class="material-icons pausee">pause</i>
  129. </div>
  130. </div><!--cherry-->
  131. </div><!--crust-->
  132. </div><!--circleofdeath-->
  133.  
  134. <div class="music-info">
  135. <div class="song-name">still with you</div>
  136. <div class="artist-name">jungkook</div>
  137. </div><!--music-info-->
  138. </div><!--flamingo-->
  139. </div><!--glenplayer07-->
  140.  
  141. <audio id="audio" src="https://dl.dropbox.com/s/qnhwm70op8fkv83/Still%20With%20You%20by%20JK%20of%20BTS%282%29.mp3="audio"></audio>
  142. <!----end music player---->
RAW Paste Data