Advertisement
milkandcookies

1/12/22

Jan 12th, 2022
448
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.01 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <link rel="preconnect" href="https://fonts.googleapis.com">
  6. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  7. <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Lobster&display=swap" rel="stylesheet">
  8.  
  9. </head>
  10. <style>
  11.  
  12. * {
  13. margin: 0;
  14. padding: 0;
  15. box-sizing: border-box;
  16. }
  17.  
  18. body {
  19. height: 100vh;
  20. width: 100vw;
  21. font-size: 16px;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center;
  25. }
  26.  
  27. .container {
  28. margin: auto;
  29. position: relative;
  30. background: linear-gradient(#f9dbf2 60%, white);
  31. height: fit-content;
  32. width: 24em;
  33. border-radius: 10px;
  34. border: 1px solid #ee99da;;
  35. display: flex;
  36. flex-direction: column;
  37. padding: 1.75em;
  38. }
  39.  
  40. .divider {
  41. margin-bottom: .875em;
  42. }
  43.  
  44. .outer {
  45. display: inline-flex;
  46. height: 100%;
  47. width: 100%;
  48. }
  49.  
  50. .inner1 {
  51. margin-right: .875em;
  52. }
  53.  
  54. .inner1,
  55. .inner2 {
  56. height: 9.25em;
  57. width: fit-content;
  58. background: radial-gradient(#ee99da, 40%, white);
  59. position: relative;
  60. border-radius: 6px;
  61. border: 2px solid #ee99da;
  62. text-align: center;
  63. overflow: hidden;
  64. }
  65.  
  66. .picture {
  67. height: 100%;
  68. width: 100%;
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. transition: .75s ease-in-out;
  73. border-radius: 4px;
  74. }
  75.  
  76. .inner1:hover .picture1 {
  77. height: 0;
  78. }
  79.  
  80. .inner2:hover .picture2 {
  81. height: 0;
  82. }
  83.  
  84. .info {
  85. height: 100%;
  86. width: 100%;
  87. overflow: auto;
  88. padding: .25em;
  89. }
  90.  
  91. mark {
  92. background: white;
  93. border: 1px solid black;
  94. border-radius: 6px;
  95. padding: .125em;
  96. }
  97.  
  98. .music-player {
  99. margin-top: .875em;
  100. width: 100%;
  101. height: 2.25em;
  102. background: linear-gradient(#f9dbf2 60%, white);
  103. border: 1px solid #ee99da;
  104. border-radius: 10px;
  105. display: flex;
  106. flex-direction: row;
  107. position: relative;
  108. }
  109.  
  110. .note,
  111. .title {
  112. height: 100%;
  113. display: flex;
  114. align-items: center;
  115. color: white;
  116. text-shadow: 1px -1px 0 black, 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black;
  117. font-family: audiowide;
  118. font-size: 1.25em;
  119. }
  120.  
  121. .note {
  122. width: 10%;
  123. justify-content: center;
  124. cursor: pointer;
  125. background: transparent;
  126. border: 0;
  127. }
  128.  
  129. .title {
  130. width: 90%;
  131. overflow: hidden;
  132. white-space: nowrap;
  133. }
  134.  
  135. .title-text {
  136. animation: marquee 9s infinite ease-in-out;
  137. }
  138.  
  139. @keyframes marquee {
  140. 0% { transform: translateX(120%); }
  141. 100% { transform: translateX(-120%); }
  142. }
  143.  
  144. </style>
  145. <body>
  146.  
  147. <div class="container">
  148.  
  149. <img class="divider" src="https://dl.dropbox.com/s/gywur0keoe0j9cl/pink-divider.png">
  150.  
  151. <div class="outer">
  152.  
  153. <div class="inner1">
  154. <img class="picture1 picture" src="https://dl.dropbox.com/s/wxp6lytoz2qaqzz/0B482634-B73D-4ED7-9CB8-49A6340E48FE.jpeg">
  155. <div class="info"><p><mark>about</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here <br> <mark>byf</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here </p></div>
  156. </div>
  157.  
  158. <div class="inner2">
  159. <img class="picture2 picture" src="https://dl.dropbox.com/s/if792fw9of5eg8c/A71A3CAE-23DC-4D2D-B68D-E07B384DC326.gif">
  160. <div class="info"><p><mark>dni</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here <br> <mark>likes</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here</p>
  161. </div></div>
  162.  
  163. </div>
  164.  
  165. <div class="music-player">
  166.  
  167. <button id="button" class="note">▶</button>
  168. <div class="title"><p class="title-text">now playing Express 999 by 소녀시대</p></div>
  169.  
  170. </div></div>
  171.  
  172. <audio id="song">
  173. <source src='https://dl.dropbox.com/s/kup2qzq5gfiwz41/yt1s.com%20-%20Express%20999.mp3' type='audio/mpeg'/>
  174. </audio>
  175.  
  176. <script>
  177. var button = document.getElementById("button");
  178. var audio = document.getElementById("song");
  179.  
  180. button.addEventListener("click", function(){
  181. if(audio.paused){
  182. audio.play();
  183. button.innerHTML = "♬";
  184. } else {
  185. audio.pause();
  186. button.innerHTML = "▶";
  187. }
  188.  
  189. });
  190. </script>
  191.  
  192. </body>
  193. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement