apna-college · Jash-1th · Aug 5, 2024 · Aug 5, 2024 · Aug 5, 2024 · Aug 9, 2024
diff --git a/Jaswanth-Kumar/Spotify/.vscode/settings.json b/Jaswanth-Kumar/Spotify/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Jaswanth-Kumar/Spotify/README.md b/Jaswanth-Kumar/Spotify/README.md
@@ -0,0 +1,2 @@
+# spotify
+spotify clone using HTML &amp; CSS
diff --git a/Jaswanth-Kumar/Spotify/assets/album_icon1.png b/Jaswanth-Kumar/Spotify/assets/album_icon1.png
diff --git a/Jaswanth-Kumar/Spotify/assets/album_icon2.png b/Jaswanth-Kumar/Spotify/assets/album_icon2.png
diff --git a/Jaswanth-Kumar/Spotify/assets/album_picture.jpeg b/Jaswanth-Kumar/Spotify/assets/album_picture.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/backward_icon.png b/Jaswanth-Kumar/Spotify/assets/backward_icon.png
diff --git a/Jaswanth-Kumar/Spotify/assets/card1img.jpeg b/Jaswanth-Kumar/Spotify/assets/card1img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/card2img.jpeg b/Jaswanth-Kumar/Spotify/assets/card2img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/card3img.jpeg b/Jaswanth-Kumar/Spotify/assets/card3img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/card4img.jpeg b/Jaswanth-Kumar/Spotify/assets/card4img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/card5img.jpeg b/Jaswanth-Kumar/Spotify/assets/card5img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/card6img.jpeg b/Jaswanth-Kumar/Spotify/assets/card6img.jpeg
diff --git a/Jaswanth-Kumar/Spotify/assets/controld_icon2.png b/Jaswanth-Kumar/Spotify/assets/controld_icon2.png
diff --git a/Jaswanth-Kumar/Spotify/assets/controls_icon1.png b/Jaswanth-Kumar/Spotify/assets/controls_icon1.png
diff --git a/Jaswanth-Kumar/Spotify/assets/controls_icon3.png b/Jaswanth-Kumar/Spotify/assets/controls_icon3.png
diff --git a/Jaswanth-Kumar/Spotify/assets/controls_icon4.png b/Jaswanth-Kumar/Spotify/assets/controls_icon4.png
diff --git a/Jaswanth-Kumar/Spotify/assets/controls_icon5.png b/Jaswanth-Kumar/Spotify/assets/controls_icon5.png
diff --git a/Jaswanth-Kumar/Spotify/assets/forward_icon.png b/Jaswanth-Kumar/Spotify/assets/forward_icon.png
diff --git a/Jaswanth-Kumar/Spotify/assets/library_icon.png b/Jaswanth-Kumar/Spotify/assets/library_icon.png
diff --git a/Jaswanth-Kumar/Spotify/assets/logo.png b/Jaswanth-Kumar/Spotify/assets/logo.png
diff --git a/Jaswanth-Kumar/Spotify/assets/play_musicbar.png b/Jaswanth-Kumar/Spotify/assets/play_musicbar.png
diff --git a/Jaswanth-Kumar/Spotify/assets/player_icon1.png b/Jaswanth-Kumar/Spotify/assets/player_icon1.png
diff --git a/Jaswanth-Kumar/Spotify/assets/player_icon2.png b/Jaswanth-Kumar/Spotify/assets/player_icon2.png
diff --git a/Jaswanth-Kumar/Spotify/assets/player_icon3.png b/Jaswanth-Kumar/Spotify/assets/player_icon3.png
diff --git a/Jaswanth-Kumar/Spotify/assets/player_icon4.png b/Jaswanth-Kumar/Spotify/assets/player_icon4.png
diff --git a/Jaswanth-Kumar/Spotify/assets/player_icon5.png b/Jaswanth-Kumar/Spotify/assets/player_icon5.png
diff --git a/Jaswanth-Kumar/Spotify/index.html b/Jaswanth-Kumar/Spotify/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- <link rel="icon" href="./assets/logo.png"> -->
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <title>Spotify - Web Player: Music for everyone</title>
+</head>
+<body>
+    <div class="main">
+        <div class="sidebar">
+            <div class="navbar">
+                <div class="nav-opt" style="opacity: 1;">
+                    <i class="fa-solid fa-house"></i>
+                    <a href="#">Home</a>
+                </div>
+                <div class="nav-opt">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                    <a href="#">Search</a>
+                </div>
+            </div>
+            <div class="library">
+                <div class="option">
+                    <div class="lib-opt nav-opt">
+                        <img src="./assets/library_icon.png">
+                        <a href="#">Your library</a>
+                    </div>
+                    <div class="icons">
+                        <i class="fa-solid fa-plus"></i>
+                        <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                </div>
+                <div class="lib-box">
+                    <div class="box">
+                        <p class="para-1">Create your first playlist</p>
+                        <p class="para-2">it's easy we'll help you</p>
+                        <button class="badge">Create Playlist</button>
+                    </div>
+                    <div class="box">
+                        <p class="para-1">Let's find some podcasts to follow</p>
+                        <p class="para-2">We'll keep you updates on new episodes</p>
+                        <button class="badge">Browse podcasts</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="sticky-nav">
+                <div class="left-sticky-nav">
+                    <img src="/assets/backward_icon.png">
+                    <img src="/assets/forward_icon.png " class="hide">
+                </div>
+                <div class="sticky-nav-badges">
+                    <button class="badge nav-items hide">Explore Premium</button>
+                    <button class="badge nav-items black-badge"><i class="fa-regular fa-circle-down download"></i>Install App</button>
+                    <i class="fa-regular fa-user nav-items "></i>
+                </div>
+            </div>
+            <h2>Recently Played</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./assets/card1img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+
+            </div>
+            <h2>Trending now near you</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./assets/card2img.jpeg" class="card-img">
+                    <p class="card-tittle">indie india</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card3img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card4img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card3img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card2img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+
+            </div>
+            <h2>Feautered charts</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./assets/card5img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card6img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+                <div class="card">
+                    <img src="./assets/card1img.jpeg" class="card-img">
+                    <p class="card-tittle">Top50-Global</p>
+                    <p class="card-info">Your dialy updats of the most played....</p>
+                </div>
+
+            </div>
+            <div class="footer">
+                <div class="line"></div>
+            </div>
+
+        </div>
+
+        <div class="music-player"> 
+            <div class="album">
+                <div class="playing-img">
+                    <img src="/assets/card4img.jpeg" class="play-img">
+                </div>
+                <div class="para">
+               <div class="play-name para1">
+                Daylight
+               </div>
+               <div class="play-name para2">
+                David Kumar
+               </div>
+               </div>
+                <div class="play-icons">
+                    <img src="./assets/album_icon1.png" class="one">
+                    <img src="./assets/album_icon2.png" class="two">
+                </div>
+            </div>
+            <div class="player">
+                <div class="player-controls">
+                    <img src="/assets/player_icon1.png" class="player-controls-icon">
+                    <img src="/assets/player_icon2.png" class="player-controls-icon">
+                    <img src="/assets/player_icon3.png" class="player-controls-icon" style="opacity: 1; height: 2rem;">
+                    <img src="/assets/player_icon4.png" class="player-controls-icon">
+                    <img src="/assets/player_icon5.png" class="player-controls-icon">
+                </div>
+                <div class="playback">
+                    <span class="curr-time">00:00</span>
+                    <input type="range" min="0" max="100" class="progress-bar" step="1">
+                    <span class="tot-time">4:43</span>
+                </div>
+            </div>
+            <div class="controls">
+                <div class="control-img"><img src="./assets/controls_icon1.png" ></div>
+                <div class="control-img"><img src="./assets/controld_icon2.png" ></div>
+                <div class="control-img"><img src="./assets/controls_icon3.png" ></div>
+                <div class="control-img"><img src="./assets/controls_icon4.png" ></div>
+                <div class="control-img"><img src="./assets/controls_icon5.png" id="last"></div>
+                <input type="range" min="0" max="100" class="progress-bar">
+            </div>
+        </div>
+    </div>
+</body>
+</html>