Spotify-clone-/index.html at master · irenesaji/Spotify-clone- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spotify Clone</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="flex">

    <div class="sidebar w-60 p-6">
      <div class="mb-8">
        <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/3709a18b-04af-467c-b764-f6f6facd9b4f.png" alt="Spotify Logo" class="h-10" />
      </div>
      <ul class="space-y-5">
        <li class="text-gray-300 hover:text-white cursor-pointer"><i class="fas fa-home mr-4"></i> Home</li>
        <li class="text-gray-300 hover:text-white cursor-pointer"><i class="fas fa-search mr-4"></i> Search</li>
        <li class="text-gray-300 hover:text-white cursor-pointer"><i class="fas fa-book mr-4"></i> Your Library</li>
        <li class="mt-8 text-gray-300 hover:text-white cursor-pointer"><i class="fas fa-plus-square mr-4"></i> Create Playlist</li>
        <li class="text-gray-300 hover:text-white cursor-pointer"><i class="fas fa-heart mr-4"></i> Liked Songs</li>
      </ul>
      <div class="border-t border-gray-800 mt-4 pt-4 text-xs text-gray-400">
        <div class="hover:text-white cursor-pointer mb-2">Cookies</div>
        <div class="hover:text-white cursor-pointer">Privacy</div>
      </div>
    </div>


    <div class="main-content flex-grow pb-32">
      <section class="mb-10">
        <h2 class="text-2xl font-bold mb-6">Recently played</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6" id="music-container">

        </div>
      </section>
    </div>
  </div>

 <div class="player-bar">
  <div class="flex items-center justify-between px-4 h-full w-full">
    <div class="flex items-center gap-3">
      <img src="https://i.scdn.co/image/ab67616d00004851c04c13295b54df2b1b85af1f" alt="Song" class="h-12 w-12 rounded" />
      <div>
        <p class="text-sm font-bold">Blinding Lights</p>
        <p class="text-xs text-gray-400">The Weeknd</p>
      </div>
    </div>
    <div class="text-white text-lg">
      <i class="fas fa-backward mx-2 cursor-pointer"></i>
      <i class="fas fa-play-circle mx-2 text-2xl cursor-pointer"></i>
      <i class="fas fa-forward mx-2 cursor-pointer"></i>
    </div>
  </div>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

  <script src="script.js"></script>
</body>
</html>