diff --git a/All Out 2010s.jpg b/All Out 2010s.jpg new file mode 100644 index 0000000..0ac7fc5 Binary files /dev/null and b/All Out 2010s.jpg differ diff --git a/All Out 80s.jpg b/All Out 80s.jpg new file mode 100644 index 0000000..e86b325 Binary files /dev/null and b/All Out 80s.jpg differ diff --git a/Beats to think to.jpg b/Beats to think to.jpg new file mode 100644 index 0000000..9bd2c5e Binary files /dev/null and b/Beats to think to.jpg differ diff --git a/Chill Hits.jpg b/Chill Hits.jpg new file mode 100644 index 0000000..62b0ef4 Binary files /dev/null and b/Chill Hits.jpg differ diff --git a/Deep Focus.jpg b/Deep Focus.jpg new file mode 100644 index 0000000..7ab0073 Binary files /dev/null and b/Deep Focus.jpg differ diff --git a/Focus Flow.jpg b/Focus Flow.jpg new file mode 100644 index 0000000..63c7184 Binary files /dev/null and b/Focus Flow.jpg differ diff --git a/Instrumental Study.jpg b/Instrumental Study.jpg new file mode 100644 index 0000000..9133891 Binary files /dev/null and b/Instrumental Study.jpg differ diff --git a/Peaceful Piano.jpg b/Peaceful Piano.jpg new file mode 100644 index 0000000..e7d3550 Binary files /dev/null and b/Peaceful Piano.jpg differ diff --git a/RapCaviar.jpg b/RapCaviar.jpg new file mode 100644 index 0000000..0440c0e Binary files /dev/null and b/RapCaviar.jpg differ diff --git a/Reading Adventure.jpg b/Reading Adventure.jpg new file mode 100644 index 0000000..e435c3f Binary files /dev/null and b/Reading Adventure.jpg differ diff --git a/Rock Classics.jpg b/Rock Classics.jpg new file mode 100644 index 0000000..bd7b989 Binary files /dev/null and b/Rock Classics.jpg differ diff --git a/Spotify Logo.png b/Spotify Logo.png new file mode 100644 index 0000000..1a0d451 Binary files /dev/null and b/Spotify Logo.png differ diff --git a/SpotifyClone.png b/SpotifyClone.png new file mode 100644 index 0000000..53724d3 Binary files /dev/null and b/SpotifyClone.png differ diff --git a/Spotify_favicon.png b/Spotify_favicon.png new file mode 100644 index 0000000..63d1f27 Binary files /dev/null and b/Spotify_favicon.png differ diff --git a/The Sound of Bengaluru.jpg b/The Sound of Bengaluru.jpg new file mode 100644 index 0000000..a7e2263 Binary files /dev/null and b/The Sound of Bengaluru.jpg differ diff --git a/The Sound of Chennai.jpg b/The Sound of Chennai.jpg new file mode 100644 index 0000000..0014b9d Binary files /dev/null and b/The Sound of Chennai.jpg differ diff --git a/The Sound of Delhi.jpg b/The Sound of Delhi.jpg new file mode 100644 index 0000000..7e0b1a6 Binary files /dev/null and b/The Sound of Delhi.jpg differ diff --git a/The Sound of Hyderabad.jpg b/The Sound of Hyderabad.jpg new file mode 100644 index 0000000..3c46b0d Binary files /dev/null and b/The Sound of Hyderabad.jpg differ diff --git a/The Sound of Kolkata.jpg b/The Sound of Kolkata.jpg new file mode 100644 index 0000000..5e50bdd Binary files /dev/null and b/The Sound of Kolkata.jpg differ diff --git a/The Sound of Mumbai.jpg b/The Sound of Mumbai.jpg new file mode 100644 index 0000000..170e23b Binary files /dev/null and b/The Sound of Mumbai.jpg differ diff --git a/Today's Top Hits.jpg b/Today's Top Hits.jpg new file mode 100644 index 0000000..4da3cf6 Binary files /dev/null and b/Today's Top Hits.jpg differ diff --git a/Viva Latino.jpg b/Viva Latino.jpg new file mode 100644 index 0000000..5809e19 Binary files /dev/null and b/Viva Latino.jpg differ diff --git a/Workday Lounge.jpg b/Workday Lounge.jpg new file mode 100644 index 0000000..c5315c9 Binary files /dev/null and b/Workday Lounge.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7fca44c --- /dev/null +++ b/index.html @@ -0,0 +1,313 @@ + + + + + + + Spotify + + + + + + +
+ + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+
+
+ + +
+ +
+ + +
+
+ +
+

Spotify Playlists

+ +
+
+ +
+ +
+

Today's Top Hits

+

Olivia Rodrigo is on top of the Hottest 50!

+
+ +
+ +
+ +
+

RapCaviar

+

New Music from Cardi B, Megan Thee Stallion an...

+
+ +
+ +
+ +
+

All out 2010s

+

The biggest spmgs pf tje 2010s.

+
+ +
+ +
+ +
+

Rock Classics

+

Rock Legends & epic songs that continue to...

+
+ +
+ +
+ +
+

Chill Hits

+

Kick back to the best new and recent chill hits

+
+ +
+ +
+ +
+

Viva Latino

+

Today's top Latin hits elevando nuestra...

+
+ + + +
+ +
+ +
+

All out 80s

+

The biggest songs of the 1980s. Cover: Michael...

+
+
+
+ +
+

Focus

+
+
+ +
+ +
+

Peaceful Piano

+

Peaceful piano to help you slow down, breath...

+
+ +
+ +
+ +
+

Deep Focus

+

Keep calm and focus with ambient and post-...

+
+ +
+ +
+ +
+

Instrumental Study

+

Focus with soft study music in the background.

+
+ + + +
+ +
+ +
+

Focus Flow

+

Uptempo instrumental hip hop beats

+
+ +
+ +
+ +
+

Beats to think to

+

Focus with melodic techno and tech house.

+
+ +
+ +
+ +
+

Reading Adventure

+

Scores and soundtracks for daring quests, epic...

+
+ +
+ +
+ +
+

Workday Lounge

+

Lounge and chill out music for your workday

+
+
+
+ +
+

Sound of India

+
+
+ +
+ +
+

The Sound of Mum...

+

The songs that define, unite and distinguish...

+
+ +
+ +
+ +
+

The Sound of Kolka...

+

The songs that define, unite and distinguish...

+
+ +
+ +
+ +
+

The Sound of Delhi...

+

The songs that define, unite and distinguish...

+
+ +
+ +
+ +
+

The Sound of Ben...

+

The songs that define, unite and distinguish...

+
+ +
+ +
+ +
+

The Sound of Chen...

+

The songs that define, unite and distinguish...

+
+ +
+ +
+ +
+

The Sound of Hyde...

+

The songs that define, unite and distinguish...

+
+ + +
+ +
+
+ +
+ +
+
+
Preview of Spotify
+

Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed. MADE BY AMARTYA

+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3ec10fc --- /dev/null +++ b/styles.css @@ -0,0 +1,258 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&family=Quicksand:wght@300;400;500;600;700&display=swap'); + +* { + padding: 0; + margin: 0; +} + +body { + background-color: #121212; + font-family: 'Montserrat', sans-serif; +} + +.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 300px; + background-color: black; + padding: 24px; +} + +.sidebar .logo img { + width: 130px; +} + +.sidebar .navigation ul { + list-style: none; + margin-top: 20px; +} + +.sidebar .navigation ul li { + padding: 10px 0px; +} + +.sidebar .navigation ul li a { + color: #b3b3b3; + text-decoration: none; + font-weight: 500; + font-size: 18px; +} + +.sidebar .navigation ul li .fa { + font-size: 20px; + margin-right: 10px; +} + +.sidebar .navigation ul li a:hover { + color: red; +} + +.sidebar .policies { + position: absolute; + bottom: 100px; +} + +.sidebar .policies ul { + list-style: none; +} + +.sidebar .policies ul li { + padding-bottom: 5px; +} + +.sidebar .policies ul li a { + color: #b3b3b3; + font-weight: 500; + text-decoration: none; + font-size: 10px; +} + +.sidebar .policies ul li a:hover { + text-decoration: underline; +} + +.main-container { + margin-left: 350px; + margin-bottom: 100px; +} + +.topbar { + display: flex; + justify-content: space-between; + background-color: #000; + padding: 14px 30px; +} + +.topbar .prev-next-buttons button { + color: #7a7a7a; + cursor: not-allowed; + width: 34px; + height: 34px; + border-radius: 100%; + font-size: 18px; + border: 0px; + background-color: #090909; + margin-right: 10px; +} + +.topbar .navbar { + display: flex; + align-items: center; +} + +.topbar .navbar ul { + list-style: none; +} + +.topbar .navbar ul li { + display: inline-block; + margin: 0px 8px; + width: 70px; +} + +.topbar .navbar ul li a { + color: #b3b3b3; + text-decoration: none; + font-weight: bold; + font-size: 14px; + letter-spacing: 1px; +} + +.topbar .navbar ul li a:hover { + color: #ffffff; + font-size: 15px; +} + +.topbar .navbar button { + background-color: #ffffff; + color: #000000; + font-size: 16px; + font-weight: bold; + padding: 14px 30px; + border: 0px; + border-radius: 40px; + cursor: pointer; + margin-left: 20px; +} + +.topbar .navbar button:hover { + background-color: #f2f2f2; +} + +.spotify-playlists { + padding: 20px 40px; +} + +.spotify-playlists h2 { + color: #ffffff; + font-size: 22px; + margin-bottom: 20px; +} + +.spotify-playlists .list { + display: flex; + gap: 20px; + overflow: hidden; +} + +.spotify-playlists .list .item { + min-width: 140px; + width: 160px; + padding: 15px; + background-color: #181818; + border-radius: 6px; + cursor: pointer; + transition: all ease 0.4s; +} + +.spotify-playlists .list .item:hover { + background-color: #252525; +} + + + +.spotify-playlists .list .item img { + width: 100%; + border-radius: 6px; + margin-bottom: 10px; +} + +.spotify-playlists .list .item .play { + position: relative; +} + +.spotify-playlists .list .item .play .fa { + position: absolute; + right: 10px; + top: -60px; + padding: 18px; + background-color: #1db954; + border-radius: 100%; + opacity: 0; + transition: all ease 0.4s; +} + +.spotify-playlists .list .item:hover .play .fa { + opacity: 1; + transform: translateY(-20px); +} + +.spotify-playlists .list .item h4 { + color: #ffffff; + font-size: 14px; + margin-bottom: 10px; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.spotify-playlists .list .item p { + color: #989898; + font-size: 12px; + line-height: 20px; + font-weight: 500; +} + +.spotify-playlists hr { + margin: 70px 0px 0px; + border-color: #636363; +} + +.preview { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(to right, #ae2896, #509bf5); + padding: 15px 40px; + display: flex; + justify-content: space-between; +} + +.preview h6 { + color: #ffffff; + text-transform: uppercase; + font-weight: 400; + font-size: 12px; + margin-bottom: 10px; +} + +.preview p { + color: #ffffff; + font-size: 14px; + font-weight: 500; +} + +.preview button { + background-color: #ffffff; + color: #000000; + font-size: 16px; + font-weight: bold; + padding: 14px 30px; + border: 0px; + border-radius: 40px; + cursor: pointer; +} \ No newline at end of file