Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link
  href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap"
  rel="stylesheet"
/>
<div class="container">
  <div class="bubble pink-bubble"></div>
  <div class="bubble blue-bubble"></div>
  <div class="bubble small-p-bubble"></div>
  <div class="bubble small-b-bubble"></div>
  <div class="wrapper">
    <div class="app-ui left-ui">
      <div class="header">
        <div class="discover">Discover</div>
        <div class="menu-line"></div>
      </div>
      <div class="left-menu-bar">
        <div class="playlist">
          <div class="playlist-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
              <g
                fill="#FFF"
                fill-rule="evenodd"
                stroke="#10335C"
                stroke-width="3"
              >
                <rect width="21" height="21" x="7" y="7" rx="5" />
                <rect width="21" height="21" x="1" y="1" rx="5" />
              </g>
            </svg>
          </div>
          <div class="ur-playlist">Your playlist</div>
        </div>
        <div class="like-recent">
          <div class="ur-playlist recent">Recent</div>
          <div class="recent-detail"></div>
          <div class="ur-playlist like">Like</div>
        </div>
      </div>
      <div class="album-img">
        <div class="relax">Relax</div>
        <button class="btn play-pause">
          <div class="icon-container">
            <div class="icon play">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 308.838 308.838"
              >
                <path
                  fill="#063064"
                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
                  class="active-path"
                  data-old_color="#000000"
                  data-original="#000000"
                />
              </svg>
            </div>
          </div>
          <div class="icon-container">
            <div class="icon pause">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 493.528 493.528"
              >
                <path
                  fill="#063064"
                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
                  class="active-path"
                  data-old_color="#000000"
                  data-original="#000000"
                />
              </svg>
            </div>
          </div>
        </button>
      </div>
      <div class="flowers-img"></div>
      <div class="music-list">
        <div class="song">
          <div class="song-img">
            <img
              src="https://images.unsplash.com/photo-1574281183650-14db8f28c259?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
            />
          </div>
          <div class="song-detail">
            <div class="song-name">Sunset</div>
            <div class="artist">The xx</div>
          </div>
        </div>
        <div class="song">
          <div class="song-img">
            <img
              src="https://images.unsplash.com/photo-1496324839965-d6281225d8eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80"
            />
          </div>
          <div class="song-detail">
            <div class="song-name">The pursuit of happiness</div>
            <div class="artist">Beyries</div>
          </div>
        </div>
        <div class="song">
          <div class="song-img">
            <img
              src="https://images.unsplash.com/photo-1506079619863-0bf287d459e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
            />
          </div>
          <div class="song-detail">
            <div class="song-name">Run</div>
            <div class="artist">Daughter</div>
          </div>
        </div>
      </div>
      <div class="player-bg">
        <button class="btn play-pause">
          <div class="icon-container">
            <div class="icon play small-play">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 308.838 308.838"
              >
                <path
                  fill="#063064"
                  d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
                  class="active-path"
                  data-old_color="#000000"
                  data-original="#000000"
                />
              </svg>
            </div>
          </div>
          <div class="icon-container">
            <div class="icon pause small-pause">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 493.528 493.528"
              >
                <path
                  fill="#063064"
                  d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
                  class="active-path"
                  data-old_color="#000000"
                  data-original="#000000"
                />
              </svg>
            </div>
          </div>
        </button>
      </div>
      <div class="player-info">
        <div class="player-cover">
          <img
            src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
          />
          <div class="pointer"></div>
        </div>
        <div class="song-detail">
          <div class="song-name">Tearing Me up</div>
          <div class="artist play-artist">Bob Moses</div>
        </div>
        <svg
          fill="none"
          stroke="#063064"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          class="blue-heart"
          viewBox="0 0 24 24"
        >
          <path
            d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
          />
        </svg>
      </div>
      <div class="nav">
        <div class="nav-first">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="feather feather-home"
            viewBox="0 0 24 24"
          >
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
          </svg>
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="css-i6dzq1"
            viewBox="0 0 24 24"
          >
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" />
          </svg>
          <svg
            style="width: 15px; height: 15px;"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 29 29"
          >
            <g
              fill="#FFF"
              fill-rule="evenodd"
              stroke="currentColor"
              stroke-width="3"
            >
              <rect width="21" height="21" x="7" y="7" rx="5" />
              <rect width="21" height="21" x="1" y="1" rx="5" />
            </g>
          </svg>
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            class="css-i6dzq1"
            viewBox="0 0 24 24"
          >
            <path
              d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="app-ui right-ui">
      <div class="play-action">
        <div class="half-arrow">
          <div class="line">
            <div class="other-line"></div>
          </div>
        </div>
        <div class="what-play">Now playing</div>
        <div class="double-dot">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
      <div class="app-ui inside-right">
        <div class="bigPlay">
          <img src="https://images.unsplash.com/photo-1521133573892-e44906baee46?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" />
          <div class="grey-detail"></div>
          <div class="grey-detail-sec"></div>
          <button class="btn play-pause">
            <div class="icon-container">
              <div class="icon play bigger-play">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 308.838 308.838"
                >
                  <path
                    fill="#063064"
                    d="M269.394 139.638c-.4-.8-.8-1.2-1.2-1.6-.8-1.2-1.6-2-2.8-3.2-1.2-1.2-2.8-2.4-4-3.2l-91.6-63.2-92-63.6c-6-4.4-13.6-5.6-20.4-4.4s-13.2 5.2-17.2 11.2c-1.6 2.4-2.8 4.8-3.6 7.2-.8 2-1.2 4-1.2 6.4v256.4c0 7.6 3.2 14.4 8 19.2 4.4 4.8 11.2 8 18.8 8 3.2 0 6.4-.4 9.2-1.6 2.8-.8 5.2-2.4 7.6-4.4l90.8-62.8 91.2-63.2c.4-.4 1.2-.8 1.6-1.2 5.6-4.4 9.2-10.4 10.4-16.8 1.2-6.4 0-13.6-3.6-19.2zm-20 20.4l-92 63.6-90.4 62.4c-.4 0-.8.4-.8.4-.4.4-1.2.8-2 1.2-.8.4-1.2.4-2 .4-1.6 0-3.2-.8-4.4-1.6-1.2-1.2-1.6-2.8-1.6-4.4v-127.6h-.4v-126-1.6c0-.4 0-.8.4-1.2 0-.4.4-.8.4-1.2.4-.4.4-.4.4-.8.8-1.2 2.4-2 3.6-2 1.6-.4 2.8 0 4.4.8.4.4.8.4 1.2.8l91.2 63.2 91.6 63.2c.4.4.8.4.8.8.4.4.4.8.8.8.8 1.6 1.2 3.2 1.2 4.8-.4 1.6-1.2 3.2-2.4 4z"
                    class="active-path"
                    data-old_color="#000000"
                    data-original="#000000"
                  />
                </svg>
              </div>
            </div>
            <div class="icon-container">
              <div class="icon pause bigger-pause">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 493.528 493.528"
                >
                  <path
                    fill="#063064"
                    d="M178.064 0L166.04.248c-14.876 0-27.236 12.112-27.236 26.992v439.664c0 14.876 13.396 26.624 28.272 26.624h.084l10.976-.072c14.892 0 26.22-11.92 26.22-26.808V26.996C204.352 12.116 193.028 0 178.064 0zM328.584 0l-12.092.248c-14.88 0-27.3 12.112-27.3 26.992v439.664c0 14.876 13.708 26.624 28.58 26.624h.084l10.816-.072c14.88 0 26.052-11.92 26.052-26.808V26.996C354.72 12.116 343.548 0 328.584 0z"
                    class="active-path"
                    data-old_color="#000000"
                    data-original="#000000"
                  />
                </svg>
              </div>
            </div>
          </button>
          <div class="song-detail right-detail">
          <div class="song-name right-song">Tearing Me Up</div>
          <div class="artist play-artist right-artist">Bob Moses</div>
       
        </div>
          <div class="line-wrapper">
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
        <div class="lines grey"></div>
       </div>
          <div class="second">
            <div class="listened">0:39</div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.88 477.88">
  <path fill="#063064" d="M468.46 1.8a17.06 17.06 0 00-15.3 0L9.44 223.69a17.07 17.07 0 004.58 32.05l176.1 32.03 32.04 176.11a17.07 17.07 0 0032.05 4.58L476.07 24.7a17.07 17.07 0 00-7.61-22.9z" class="active-path" data-old_color="#000000" data-original="#000000"/>
</svg>
            <div class="listen">6:28</div>
          </div>
       <div class="left-bar-wrapper">
         <svg class="addTo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <path fill="#063064" d="M934 822H794v140c0 15.5-12.5 28-28 28s-28-12.5-28-28V822H598c-15.5 0-28-12.5-28-28s12.5-28 28-28h140V626c0-15.5 12.5-28 28-28s28 12.5 28 28v140h140c15.5 0 28 12.5 28 28s-12.5 28-28 28zM738 122c0-30.9-25.1-56-56-56H150c-30.9 0-56 25.1-56 56v756c0 30.9 25.1 56 56 56h364v56H122c-46.4 0-84-37.6-84-84V94c0-46.4 37.6-84 84-84h588c46.4 0 84 37.6 84 84v364h-56V122z"/>
</svg>
         <svg class="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <path d="M977.8 524.5H22.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.3 12.3-12.3h955.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.8-5.6 12.3-12.3 12.3zm-49.1-294H757.2c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h171.5c6.8 0 12.3 5.5 12.3 12.3v24.5c0 6.7-5.5 12.2-12.3 12.2zm-294 0H71.3c-6.8 0-12.3-5.5-12.3-12.2v-24.5c0-6.8 5.5-12.3 12.3-12.3h563.5c6.8 0 12.3 5.5 12.3 12.3v24.5c-.1 6.7-5.6 12.2-12.4 12.2zm-563.4 539h171.5c6.8 0 12.2 5.5 12.2 12.2v24.5c0 6.8-5.5 12.3-12.2 12.3H71.3c-6.8 0-12.3-5.5-12.3-12.3v-24.5c0-6.7 5.5-12.2 12.3-12.2zm293.9 0h563.5c6.8 0 12.3 5.5 12.3 12.2v24.5c0 6.8-5.5 12.3-12.3 12.3H365.2c-6.8 0-12.3-5.5-12.3-12.3v-24.5c.1-6.7 5.6-12.2 12.3-12.2z"/>
</svg>
          <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 -28 512 512">
  <path fill="#EBC7E5" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316-2.641 19.785-7.43 20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0" class="active-path" data-old_color="#000000" data-original="#000000"/>
</svg>
        </div>
        </div>  
      </div>
    </div>
  </div>
  <div></div>
</div>

<audio style="display: none;" controls id="audio">
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
              
            
!

CSS

              
                :root {
  --blue-bubble: #bbe6f3;
  --small-b-bubble: #bae5f2;
  --pink-bubble: #ebc7e5;
  --font-color: #063064;
}

* {
  box-sizing: border-box;
  &:focus {
    outline: none;
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #f4f4f4;
}

.container {
  background-color: #f3fcfd;
  width: 800px;
  height: 600px;
  margin: 60px auto;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  -webkit-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
  -moz-box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
  box-shadow: 1px 2px 29px 2px rgba(220, 244, 250, 1);
}

.bubble {
  position: absolute;
  border-radius: 50%;
}

.pink-bubble {
  width: 460px;
  height: 460px;
  right: -160px;
  top: -110px;
  background-color: var(--pink-bubble);
}

.blue-bubble {
  width: 520px;
  height: 520px;
  left: -30px;
  top: 345px;
  background-color: var(--blue-bubble);
}

.small-b-bubble {
  width: 50px;
  height: 50px;
  right: 40px;
  bottom: 85px;
  background-color: var(--small-b-bubble);
}

.small-p-bubble {
  width: 105px;
  height: 105px;
  left: -45px;
  top: 140px;
  background-color: var(--pink-bubble);
}

.app-ui {
  background-color: #fff;
  width: 235px;
  height: 500px;
  position: absolute;
  left: 140px;
  top: 35px;
  border-radius: 30px;
  box-shadow: 2px 14px 40px -20px rgba(0, 0, 0, 0.2);
}
.left-ui {
  overflow: hidden;
}

.right-ui {
  left: 435px;
  top: 60px;
  box-shadow: -6px 14px 40px -20px rgba(0, 0, 0, 0.2);
  background-color: #bbe6f3;
}

.inside-right {
  left: 0;
  top: 70px;
  height: 430px;
}

.header {
  font-family: "Fjalla One", sans-serif;
  color: var(--font-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 235px;
  padding: 27px 27px 21px 27px;
  font-size: 22px;
}

.menu-line {
  border: 1px solid var(--font-color);
  width: 25px;
  border-radius: 50px;
  &:before {
    content: "";
    position: absolute;
    top: 45px;
    left: 197px;
    border: 0.05em solid;
    width: 8px;
    border-radius: 50px;
  }
  &:after {
    content: "";
    position: absolute;
    top: 45px;
    left: 190px;
    border: 0.05em solid;
    width: 3px;
    border-radius: 50px;
  }
}

.left-menu-bar {
  position: relative;
  font-family: "Roboto", sans-serif;
  color: var(--font-color);
  left: -5px;
}
.ur-playlist {
  font-size: 11px;
  font-weight: 500;
  transform: rotate(270deg);
  position: absolute;
  left: 2px;
  top: 40px;
  cursor: pointer;
}

.playlist-icon {
  width: 11px;
  position: absolute;
  left: 28px;
  top: -6px;
  cursor: pointer;
}

.like-recent {
  position: absolute;
  top: 110px;
}

.recent {
  left: 18px;
  top: 90px;
}

.recent-detail {
  width: 4px;
  height: 4px;
  background-color: var(--font-color);
  position: absolute;
  top: 95px;
  left: 15px;
  border-radius: 50%;
}
.like {
  left: 25px;
  top: 140px;
  color: #aeb8cc;
  &:hover {
    color: var(--font-color);
  }
}

.album-img {
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1535392432937-a27c36ec07b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
  width: 130px;
  height: 165px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  margin-left: 58px;
  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  &:hover {
    transform: scale(1.02);
}
}

.relax {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.btn {
  background-color: #ffffff;
  position: absolute;
  width: 27px;
  height: 27px;
  right: 10px;
  bottom: 10px;
  border-radius: 9px;
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0px 1px 2px rgba(255, 255, 255, 1),
    0px 2px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border: none;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    z-index: 2;
  }
  &:active {
    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.02);
    &:after {
      box-shadow: inset 0px 2px 3px rgb(255, 255, 255),
        inset 0px 2px 0px rgba(0, 0, 0, 0.1);
    }
  }
  &.active {
    &.play-pause {
      .icon {
        &.pause {
          opacity: 1;
          transform: translate(-50%, -50%);
        }
        &.play {
          opacity: 0;
        }
      }
    }
  }
}

.play {
  width: 13px;
  position: absolute;
  top: 7px;
  left: 8px;
  svg {
    stroke-width: 5;
  }
}

.pause {
  width: 12px;
  opacity: 0;
  position: absolute;
  left: 14px;
  top: 15px;
}

.flowers-img {
  background-image: url("https://images.unsplash.com/photo-1490823670292-6699d9edbb7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  height: 135px;
  width: 120px;
  position: absolute;
  right: -88px;
  top: 90px;
  border-radius: 20px;
  transform: rotate(180deg);
  box-shadow: -10px 10px 30px -20px rgba(0, 0, 0, 0.5);
  &:hover {
    cursor: pointer;
    -webkit-transform: rotate(180deg) scale(1.03);
}
}

.music-list {
  cursor: pointer;
  margin-left: 50px;
  margin-top: 20px;
}

.song {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  &:hover {
    transform: scale(1.02);
    box-shadow: -8px 10px 3px -11px rgba(0, 0, 0, 0.4);
   }
}

.song-img > img {
  background-repeat: no-repeat;
  background-size: cover;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  margin-right: 10px;
}

.song-name {
  font-family: "Roboto", sans-serif;
  color: var(--font-color);
  font-weight: 500;
  font-size: 10px;
}

.song-detail {
  display: flex;
  flex-direction: column;
}

.artist {
  font-family: "Roboto", sans-serif;
  color: #d0d2e5;
  font-weight: 400;
  font-size: 9px;
  margin-top: 4px;
}

.nav svg {
  width: 17px;
}

.nav {
  position: absolute;
  bottom: 0;
  color: #c5c7da;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  height: 52px;
}

.nav-first {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 52px;
}

.player-bg {
  position: absolute;
  top: 394px;
  left: 0;
  background-color: #bae6f2;
  height: 80px;
  width: 100%;
  border-radius: 25px 25px 0 0;
}

.player-info {
  position: absolute;
  top: 394px;
  left: 0;
}

.player-cover img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: 10px 0 10px 25px;
  border: 2px solid #fff;
  box-shadow: 0px 15px 30px -6px rgba(0, 0, 0, 0.5);
}

.pointer {
  position: absolute;
  top: 27px;
  width: 9px;
  height: 9px;
  margin: -6px 0 0 37px;
  background-color: #a5c8e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.7px #fff;
}

.player-info .song-detail {
  margin: -42px 0 0 65px;
}

.play-artist {
  color: #6590ad;
  margin-top: 5px;
  font-size: 8px;
}

.player-info svg {
  width: 12px;
  position: absolute;
  right: -50px;
  top: 22px;
}

.player-bg .btn {
  bottom: 40px;
  width: 24px;
  height: 23px;
  right: 25px;
}

.small-play {
  width: 10px;
  top: 5px;
  left: 8px;
}

.small-pause {
  width: 10px;
  left: 12px;
  top: 13px;
}

@media only screen and (max-width: 768px) {
  .container {
    transform: scale(0.8);
    right: 60px;
    margin-top: -40px;
  }
}

@media only screen and (max-width: 480px) {
  .container {
    transform: scale(0.6);
    right: 200px;
  }
}

.play-action {
  display: flex;
  margin-top: 40px;
  justify-content: space-between;
  align-items: center;
}

.dot {
  border-radius: 50%;
  width: 3px;
  height: 3px;
  background-color: #043165;
  margin-right: 5px;
}

.what-play {
  font-family: "Roboto", sans-serif;
  color: var(--font-color);
  font-weight: 500;
  font-size: 10px;
}

.double-dot {
  display: flex;
  margin-right: 15px;
}

.line {
  width: 20px;
  height: 2px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: #043165;
}

.other-line {
  position: absolute;
  width: 10px;
  height: 2px;
  top: 44px;
  left: 19px;
  border-radius: 5px;
  background-color: #043165;
  transform: rotate(-30deg);
}

.half-arrow {
  margin-top: 2px;
}

.bigPlay img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid #fff;
  position: relative;
  left: 37px;
  top: 30px;
  object-fit: cover;
  object-position: top right;
  animation: rotateImg 3s linear 0s infinite forwards;
  animation-play-state: paused;
}

.bigPlay img.active {
 animation-play-state: running;
}

@keyframes rotateImg
{
    0%{ transform: rotateZ(0); }
    100%{ transform: rotateZ(360deg); }
}

.bigPlay {
  position: absolute;
  & .btn {
    top: 90px;
    left: 96px;
    width: 44px;
    height: 44px;
    border-radius: 18px;
  }
}

.icon.play.bigger-play {
  width: 22px;
  top: 11px;
  left: 13px;
}

.icon.pause.bigger-pause {
  width: 20px;
  left: 22px;
  top: 23px;
}

.right-detail {
  margin: 50px 0;
  text-align: center;
}

.right-song {
  font-size: 20px;
  font-family: "Fjalla One", sans-serif;
}

.right-artist {
  font-size: 12px;
  color:#aeb8cc;
}


.lines {
  border-left: 2px solid var(--font-color);
  margin-left: -55px;
  height: 5px;
  transition: all .1s ease;
  &.grey {
    border-left: 2px solid #e8e9f4;
  }
}

.line-wrapper {
  margin-top: -20px;
  margin-left: 62px;
}

.lines:nth-child(1) {
  margin-left: -40px;
  margin-top: 60px;
}

.lines:nth-child(2) {
  margin-left: -35px;
  margin-top: -12px;
  height: 18px;
}

.lines:nth-child(3) {
  margin-left: -30px;
  margin-top: -26px;
  height: 36px;
}

.lines:nth-child(4) {
  margin-left: -25px;
  margin-top: -40px;
  height: 48px;
}

.lines:nth-child(5) {
  margin-left: -20px;
  margin-top: -43px;
  height: 33px;
}

.lines:nth-child(6) {
  margin-left: -15px;
  margin-top: -30px;
  height: 25px;
}

.lines:nth-child(7) {
  margin-left: -10px;
  margin-top: -32px;
  height: 40px;
}

.lines:nth-child(8) {
  margin-left: -5px;
  margin-top: -40px;
  height: 48px;
}

.lines:nth-child(9) {
  margin-left: 0;
  margin-top: -43px;
  height: 33px;
}

.lines:nth-child(10) {
  margin-left: 5px;
  margin-top: -30px;
  height: 25px;
}

.lines:nth-child(11) {
  margin-left: 10px;
  margin-top: -32px;
  height: 40px;
}

.lines:nth-child(12) {
  margin-left: 15px;
  margin-top: -37px;
  height: 33px;
}

.lines:nth-child(13) {
  margin-left: 20px;
  margin-top: -30px;
  height: 25px;
}

.lines:nth-child(14) {
  margin-left: 25px;
  margin-top: -32px;
  height: 40px;
}

.lines:nth-child(15) {
  margin-left: 30px;
  margin-top: -40px;
  height: 48px;
}

.lines:nth-child(16) {
  margin-left: 35px;
  margin-top: -42px;
  height: 35px;
}

.lines:nth-child(17) {
  margin-left: 40px;
  margin-top: -33px;
  height: 25px;
}

.lines:nth-child(18) {
  margin-left: 45px;
  margin-top: -22px;
  height: 20px;
}

.lines:nth-child(19) {
  margin-left: 50px;
  margin-top: -18px;
  height: 16px;
}

.lines:nth-child(20) {
  margin-left: 55px;
  margin-top: -19px;
  height: 21px;
}

.lines:nth-child(21) {
  margin-left: 60px;
  margin-top: -27px;
  height: 32px;
}

.lines:nth-child(22) {
  margin-left: 65px;
  margin-top: -30px;
  height: 34px;
}

.lines:nth-child(23) {
  margin-left: 70px;
  margin-top: -38px;
  height: 48px;
}

.lines:nth-child(24) {
  margin-left: 75px;
  margin-top: -44px;
  height: 33px;
}

.lines:nth-child(25) {
  margin-left: 80px;
  margin-top: -35px;
  height: 40px;
}

.lines:nth-child(26) {
  margin-left: 85px;
  margin-top: -35px;
  height: 34px;
}

.lines:nth-child(27) {
  margin-left: 90px;
  margin-top: -42px;
  height: 48px;
}

.lines:nth-child(28) {
  margin-left: 95px;
  margin-top: -44px;
  height: 33px;
}

.lines:nth-child(29) {
  margin-left: 100px;
  margin-top: -35px;
  height: 40px;
}

.lines:nth-child(30) {
  margin-left: 105px;
  margin-top: -35px;
  height: 40px;
}

.lines:nth-child(31) {
  margin-left: 110px;
  margin-top: -45px;
  height: 40px;
}

.lines:nth-child(32) {
  margin-left: 115px;
  margin-top: -38px;
  height: 48px;
}

.lines:nth-child(33) {
  margin-left: 120px;
  margin-top: -44px;
  height: 33px;
}

.lines:nth-child(34) {
  margin-left: 125px;
  margin-top: -35px;
  height: 40px;
}

.lines:nth-child(35) {
  margin-left: 130px;
  margin-top: -36px;
  height: 30px;
}

.lines:nth-child(36) {
  margin-left: 135px;
  margin-top: -25px;
  height: 22px;
}

.lines:nth-child(37) {
  margin-left: 140px;
  margin-top: -25px;
  height: 30px;
}

.lines:nth-child(38) {
  margin-left: 145px;
  margin-top: -39px;
  height: 48px;
}

.lines:nth-child(39) {
  margin-left: 150px;
  margin-top: -44px;
  height: 33px;
}

.lines:nth-child(40) {
  margin-left: 155px;
  margin-top: -36px;
  height: 41px;
}

.lines:nth-child(41) {
  margin-left: 160px;
  margin-top: -44px;
  height: 47px;
}

.lines:nth-child(42) {
  margin-left: 165px;
  margin-top: -44px;
  height: 40px;
}

.lines:nth-child(43) {
  margin-left: 170px;
  margin-top: -34px;
  height: 30px;
}

.heart {
  width: 18px;
  cursor: pointer;
  :hover {
   fill: #E52121; 
  }
  &:hover {
    transform: scale(1.2); 
  }
}

.addTo{
  width: 16px;
  cursor: pointer;
}

.menu {
  width: 16px;
  cursor: pointer;
}

.left-bar-wrapper {
  display: flex;
  justify-content: space-evenly;
  margin-top: 35px;
}

.blue-heart:hover {
  fill: #063064;
  cursor: pointer;
  transform: scale(1.2);
}

.second svg {
 width: 11px;
 transform: rotate(-45deg);
 margin: 0 4px 0 4px;
}

.second {
  margin: 20px 60px 0 90px;
  display: flex;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  color: #c9cade;
  & .listened {
    color: var(--font-color);
  }
}

.grey-detail {
  background-color: #eff3f8;
  width: 205px;
  height: 90px;
  border-radius: 50%;
  margin-top: -100px;
  margin-left: 13px;
}

.grey-detail-sec {
  background-color: #dae3f0;
  width: 176px;
  height: 130px;
  border-radius: 50%;
  margin-top: -110px;
  margin-left: 29px;
}

              
            
!

JS

              
                console.clear();
const buttons = Array.from(document.querySelectorAll("button"));

buttons.forEach(btn => {
	btn.addEventListener("click", () => {
		btn.classList.toggle("active");
	});
});

$('.btn').click( function() {
    $(".bigPlay img").toggleClass("active");
} );

const audio = document.querySelector('#audio');
let isPlay = false;

const allCibik = document.querySelectorAll('.lines.grey');
let index = 0;
let animation;

const bigButton = document.querySelector('.bigPlay');
bigButton.addEventListener('click', () => {
  if (!isPlay) {
    isPlay = true;
      audio.play();
      animation = setInterval(() => {
    allCibik[index].classList.remove('grey');
    index = index + 1;
  }, 1000);
  } else {
    isPlay = false;
      audio.pause();
    clearInterval(animation);
  }
 
});
              
            
!
999px

Console