Add files via upload

amartya1523 · Dec 13, 2023 · e0ad242 · e0ad242
1 parent 983e748
commit e0ad242
Show file tree

Hide file tree

Showing 25 changed files with 571 additions and 0 deletions.
diff --git a/All Out 2010s.jpg b/All Out 2010s.jpg
diff --git a/All Out 80s.jpg b/All Out 80s.jpg
diff --git a/Beats to think to.jpg b/Beats to think to.jpg
diff --git a/Chill Hits.jpg b/Chill Hits.jpg
diff --git a/Deep Focus.jpg b/Deep Focus.jpg
diff --git a/Focus Flow.jpg b/Focus Flow.jpg
diff --git a/Instrumental Study.jpg b/Instrumental Study.jpg
diff --git a/Peaceful Piano.jpg b/Peaceful Piano.jpg
diff --git a/RapCaviar.jpg b/RapCaviar.jpg
diff --git a/Reading Adventure.jpg b/Reading Adventure.jpg
diff --git a/Rock Classics.jpg b/Rock Classics.jpg
diff --git a/Spotify Logo.png b/Spotify Logo.png
diff --git a/SpotifyClone.png b/SpotifyClone.png
diff --git a/Spotify_favicon.png b/Spotify_favicon.png
diff --git a/The Sound of Bengaluru.jpg b/The Sound of Bengaluru.jpg
diff --git a/The Sound of Chennai.jpg b/The Sound of Chennai.jpg
diff --git a/The Sound of Delhi.jpg b/The Sound of Delhi.jpg
diff --git a/The Sound of Hyderabad.jpg b/The Sound of Hyderabad.jpg
diff --git a/The Sound of Kolkata.jpg b/The Sound of Kolkata.jpg
diff --git a/The Sound of Mumbai.jpg b/The Sound of Mumbai.jpg
diff --git a/Today's Top Hits.jpg b/Today's Top Hits.jpg
diff --git a/Viva Latino.jpg b/Viva Latino.jpg
diff --git a/Workday Lounge.jpg b/Workday Lounge.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spotify </title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="shortcut icon" href="./images/Spotify_favicon.png" type="image/x-icon">
+</head>
+
+<body>
+
+    <div class="sidebar">
+        <div class="logo">
+            <a href="">
+                <img src="Spotify Logo.png" alt="Logo">
+            </a>
+        </div>
+
+        <div class="navigation">
+            <ul>
+                <li>
+                    <a href="">
+                        <span class="fa fa-home"></span>
+                        <span>Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <span class="fa fa-search"></span>
+                        <span>Search</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <span class="fa fas fa-book"></span>
+                        <span>Your Library</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <div class="navigation">
+            <ul>
+                <li>
+                    <a href="">
+                        <span class="fa fa-home"></span>
+                        <span>Create Playlist</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <span class="fa fa-search"></span>
+                        <span>Liked Songs</span>
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+
+        <div class="policies">
+            <ul>
+                <li>
+                    <a href="">Cookies</a>
+                </li>
+                <li>
+                    <a href="">Privacy</a>
+                </li>
+            </ul>
+        </div>
+
+
+    </div>
+
+    <div class="main-container">
+        <div class="topbar">
+            <div class="prev-next-buttons">
+                <button type="button" class="fa fas fa-chevron-left"></button>
+                <button type="button" class="fa fas fa-chevron-right"></button>
+            </div>
+
+            <div class="navbar">
+                <ul>
+                    <li>
+                        <a href="">Sign Up</a>
+                    </li>
+                </ul>
+                <button type="button">Login</button>
+            </div>
+        </div>
+
+        <div class="spotify-playlists">
+            <h2>Spotify Playlists</h2>
+
+            <div class="list">
+                <div class="item">
+                    <img src="Today's Top Hits.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Today's Top Hits</h4>
+                    <p>Olivia Rodrigo is on top of the Hottest 50!</p>
+                </div>
+
+                <div class="item">
+                    <img src="RapCaviar.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>RapCaviar</h4>
+                    <p>New Music from Cardi B, Megan Thee Stallion an...</p>
+                </div>
+
+                <div class="item">
+                    <img src="All Out 2010s.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>All out 2010s</h4>
+                    <p>The biggest spmgs pf tje 2010s.</p>
+                </div>
+
+                <div class="item">
+                    <img src="Rock Classics.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Rock Classics</h4>
+                    <p>Rock Legends & epic songs that continue to...</p>
+                </div>
+
+                <div class="item">
+                    <img src="Chill Hits.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Chill Hits</h4>
+                    <p>Kick back to the best new and recent chill hits</p>
+                </div>
+
+                <div class="item">
+                    <img src="./images/Viva Latino.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Viva Latino</h4>
+                    <p>Today's top Latin hits elevando nuestra...</p>
+                </div>
+
+
+
+                <div class="item">
+                    <img src="All Out 80s.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>All out 80s</h4>
+                    <p>The biggest songs of the 1980s. Cover: Michael...</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="spotify-playlists">
+            <h2>Focus</h2>
+            <div class="list">
+                <div class="item">
+                    <img src="Peaceful Piano.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Peaceful Piano</h4>
+                    <p>Peaceful piano to help you slow down, breath...</p>
+                </div>
+
+                <div class="item">
+                    <img src="Deep Focus.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Deep Focus</h4>
+                    <p>Keep calm and focus with ambient and post-...</p>
+                </div>
+
+                <div class="item">
+                    <img src="Instrumental Study.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Instrumental Study</h4>
+                    <p>Focus with soft study music in the background.</p>
+                </div>
+
+
+
+                <div class="item">
+                    <img src="Focus Flow.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Focus Flow</h4>
+                    <p>Uptempo instrumental hip hop beats</p>
+                </div>
+
+                <div class="item">
+                    <img src="Beats to think to.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Beats to think to</h4>
+                    <p>Focus with melodic techno and tech house.</p>
+                </div>
+
+                <div class="item">
+                    <img src="Reading Adventure.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Reading Adventure</h4>
+                    <p>Scores and soundtracks for daring quests, epic...</p>
+                </div>
+
+                <div class="item">
+                    <img src="Workday Lounge.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>Workday Lounge</h4>
+                    <p>Lounge and chill out music for your workday</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="spotify-playlists">
+            <h2>Sound of India</h2>
+            <div class="list">
+                <div class="item">
+                    <img src="The Sound of Mumbai.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Mum...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+                <div class="item">
+                    <img src="The Sound of Kolkata.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Kolka...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+                <div class="item">
+                    <img src="The Sound of Delhi.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Delhi...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+                <div class="item">
+                    <img src="The Sound of Bengaluru.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Ben...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+                <div class="item">
+                    <img src="The Sound of Chennai.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Chen...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+                <div class="item">
+                    <img src="The Sound of Hyderabad.jpg" />
+                    <div class="play">
+                        <span class="fa fa-play"></span>
+                    </div>
+                    <h4>The Sound of Hyde...</h4>
+                    <p>The songs that define, unite and distinguish...</p>
+                </div>
+
+
+            </div>
+
+            <hr>
+        </div>
+
+    </div>
+
+    <div class="preview">
+        <div class="text">
+            <h6>Preview of Spotify</h6>
+            <p>Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed.     MADE BY AMARTYA</p>
+        </div>
+        <div class="button">
+            <button type="button">Sign up free</button>
+        </div>
+    </div>
+
+
+    <script src="https://kit.fontawesome.com/ef9a692198.js" crossorigin="anonymous"></script>
+</body>
+
+</html>