Spotify Player on Android
<html>
  <head>
    <title>Spotify Side Bar</title>
  </head>
  <body>
    <div class="top-bar">
      
      <p class="n1">
        TOCANDO DA PLAYLIST
      </p>
  
      <p class="song-name">
        TV Girl
      </p>
  
      </div>

    <div class="img">
      <img src="https://i.scdn.co/image/ab67616d00001e0232f5fec7a879ed6ef28f0dfd"  alt="Cover.png" width="310" height="310"/>
    </div>

    <div class="main">
      <h1>Not Allowed</h1>
      <h2>TV Girl</h2>
      <button type="button" id="heart-btn">
              <img src="#" id="heart" alt="heart-btn"/>
      </button>

    </div>

    <div class="nav">
      <audio controls>
          <source src="horse.ogg" type="audio/ogg">
          <source src="horse.mp3" type="audio/mpeg">
      </audio>
    </div>

      <div class="audio-player-container">
        <button id="random-icon">
          <img src="#"  alt="Random-btn"/>
        </button>

        <button type="button" id="skip-left-btn">
          <img src="#" alt="skip-left-btn" />
        </button>

        <button type="button" id="player">
          <img src="#" id="player-btn" alt="player">
        </button>

        <button type="button" id="skip-right-btn">
          <img src="#" alt="skip-right-btn" />
        </button>

      <footer></footer>
      </div>

  </body>
</html>
body{
  background-image: linear-gradient( rgba(171, 7, 102, 1),rgba(15, 1, 12, 1));

  padding: 0;
  margin: 0;
}

.top-bar {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.n1 {
  margin: 5px 0px 0px 0px;
  padding: auto;
  font-family: Arial;
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
}

.song-name{
  margin: 5px;
  padding: auto;
  font-family: Arial;
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
}

.img {
    margin: 12px;
    padding: 50px 40px 30px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Spotify Player on Android

  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...