Merge pull request #146 from Shekhar-Raj/spotify_clone

Added SPotify Clone using HTML and CSS
iamrahulmahato · Oct 3, 2024 · 4a3881d · 4a3881d
2 parents e0688fd + 65e0a54
commit 4a3881d
Show file tree

Hide file tree

Showing 30 changed files with 649 additions and 0 deletions.
diff --git a/projects/spotify_clone/assets/Gabbar.jpg b/projects/spotify_clone/assets/Gabbar.jpg
diff --git a/projects/spotify_clone/assets/Raanjhanaa.jpg b/projects/spotify_clone/assets/Raanjhanaa.jpg
diff --git a/projects/spotify_clone/assets/backward_icon.png b/projects/spotify_clone/assets/backward_icon.png
diff --git a/projects/spotify_clone/assets/card10img.jpeg b/projects/spotify_clone/assets/card10img.jpeg
diff --git a/projects/spotify_clone/assets/card11img.jpeg b/projects/spotify_clone/assets/card11img.jpeg
diff --git a/projects/spotify_clone/assets/card12img.jpeg b/projects/spotify_clone/assets/card12img.jpeg
diff --git a/projects/spotify_clone/assets/card1img.jpeg b/projects/spotify_clone/assets/card1img.jpeg
diff --git a/projects/spotify_clone/assets/card2img.jpeg b/projects/spotify_clone/assets/card2img.jpeg
diff --git a/projects/spotify_clone/assets/card3img.jpeg b/projects/spotify_clone/assets/card3img.jpeg
diff --git a/projects/spotify_clone/assets/card4img.jpeg b/projects/spotify_clone/assets/card4img.jpeg
diff --git a/projects/spotify_clone/assets/card5img.jpeg b/projects/spotify_clone/assets/card5img.jpeg
diff --git a/projects/spotify_clone/assets/card6img.jpeg b/projects/spotify_clone/assets/card6img.jpeg
diff --git a/projects/spotify_clone/assets/card7img.jpeg b/projects/spotify_clone/assets/card7img.jpeg
diff --git a/projects/spotify_clone/assets/card8img.jpeg b/projects/spotify_clone/assets/card8img.jpeg
diff --git a/projects/spotify_clone/assets/card9img.jpeg b/projects/spotify_clone/assets/card9img.jpeg
diff --git a/projects/spotify_clone/assets/forward_icon.png b/projects/spotify_clone/assets/forward_icon.png
diff --git a/projects/spotify_clone/assets/jotum.jpeg b/projects/spotify_clone/assets/jotum.jpeg
diff --git a/projects/spotify_clone/assets/library_icon.png b/projects/spotify_clone/assets/library_icon.png
diff --git a/projects/spotify_clone/assets/logo.png b/projects/spotify_clone/assets/logo.png
diff --git a/projects/spotify_clone/assets/lover.jpeg b/projects/spotify_clone/assets/lover.jpeg
diff --git a/projects/spotify_clone/assets/millionaare.webp b/projects/spotify_clone/assets/millionaare.webp
diff --git a/projects/spotify_clone/assets/play_musicbar.png b/projects/spotify_clone/assets/play_musicbar.png
diff --git a/projects/spotify_clone/assets/playbutton.svg b/projects/spotify_clone/assets/playbutton.svg
diff --git a/projects/spotify_clone/assets/player_icon1.png b/projects/spotify_clone/assets/player_icon1.png
diff --git a/projects/spotify_clone/assets/player_icon2.png b/projects/spotify_clone/assets/player_icon2.png
diff --git a/projects/spotify_clone/assets/player_icon3.png b/projects/spotify_clone/assets/player_icon3.png
diff --git a/projects/spotify_clone/assets/player_icon4.png b/projects/spotify_clone/assets/player_icon4.png
diff --git a/projects/spotify_clone/assets/player_icon5.png b/projects/spotify_clone/assets/player_icon5.png
diff --git a/projects/spotify_clone/index.html b/projects/spotify_clone/index.html
@@ -0,0 +1,229 @@
+<!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.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="icon" href="./assets/logo.png"/>
+    <title>Spotify - Web Player: Music for everyone</title>
+    <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">
+
+    <link rel="stylesheet" href="style.css"/>
+
+</head>
+<body>
+    <div class="main">
+        <div class="sidebar">
+            <div class="nav">
+                <div class="nav-option" style="opacity:1">
+                    <i class="fa-solid fa-house"></i>
+                    <a href="#">Home</a>
+                </div>
+                <div class="nav-option">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                    <a href="#">Search</a>
+                </div>
+            </div>
+            <div class="library">
+                <div class="options">
+                    <div class="lib-option nav-option">
+                        <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="box-p1">Create your first playlist</p>
+                        <p class="box-p2">It's easy, we"ll help you</p>
+                        <button class="badge">Create Playlist</button> 
+
+                    </div>
+                    <div class="box">
+                        <p class="box-p1">Let's find some podcast to follow</p>
+                        <p class="box-p2">We"ll keep you updated on new episodes</p>
+                        <button class="badge">Browse Podcast</button>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="main-content">
+            <div class="sticky-nav">
+                <div class="sticky-nav-icons">
+                    <img src="./assets/backward_icon.png"/>
+                    <img src="./assets/forward_icon.png" class="hide"/>
+                </div>
+                <div class="sticky-nav-options">
+                    <button class="badge nav-item hide">Explore Premium</button>
+                    <button class="badge nav-item podcast"><i class="fa-regular fa-circle-down" style="margin-right:0.5rem"></i>Install App</button>
+                    <i class="fa-solid fa-bell nav-item bell "></i>
+                    <i class="fa-regular fa-user nav-item"></i>
+                </div>
+
+
+            </div>
+
+            <h2>Recently Played</h2>
+            <div class="card-container">
+                <div class="card">
+                    <img src="./assets/card1img.jpeg" class="card-img">
+                    <p class="card-title">Top 50 - Global</p>
+                    <p class="card-info">Your daily update of the most played tracks...</p>
+                </div>
+            </div>
+
+            <h2>Trending now near you</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./assets/millionaare.webp" class="card-img">
+                    <p class="card-title">Millionaire</p>
+                    <p class="card-info">Yo Yo Honey Singh. GLORY</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/lover.jpeg" class="card-img">
+                    <p class="card-title">Lover</p>
+                    <p class="card-info">Diljit Dosanjh</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/jotum.jpeg" class="card-img">
+                    <p class="card-title">Jo Tum Mere Ho</p>
+                    <p class="card-info">Anuv Jain</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/Raanjhanaa.jpg" class="card-img">
+                    <p class="card-title">Raanjhanaa</p>
+                    <p class="card-info">A.R.Rahman, Jaswinder, Shiraz Uppal</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/Gabbar.jpg" class="card-img">
+                    <p class="card-title">Teri Meri Kahani</p>
+                    <p class="card-info">Palak Muchhal,Arijit Singh</p>
+                </div>
+
+
+
+                <div class="card">
+                    <img src="./assets/card8img.jpeg" class="card-img">
+                    <p class="card-title">Nit Khair Manga</p>
+                    <p class="card-info">Rahat Fateh Ali Khan,Tanishk Bagchi</p>
+                </div>
+
+
+
+                <div class="card">
+                    <img src="./assets/card9img.jpeg" class="card-img">
+                    <p class="card-title">Zaalima</p>
+                    <p class="card-info">Arijit Singh, Harshdeep Kaur</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/card10img.jpeg" class="card-img">
+                    <p class="card-title">Duniyaa (From...</p>
+                    <p class="card-info">Akhil, Dhvani Bhanushali, Kunaal Vermaa</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/card11img.jpeg" class="card-img">
+                    <p class="card-title">Mai Dhoondne...</p>
+                    <p class="card-info">Arijit Singh</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/card7img.jpeg" class="card-img">
+                    <p class="card-title">Bekhayali (From...</p>
+                    <p class="card-info">Sachet Tondon,Sachet-Parampara</p>
+                </div>
+
+
+
+
+            </div>
+
+            <h2>Featured Charts</h2>
+            <div class="cards-container">
+                <div class="card">
+                    <img src="./assets/card5img.jpeg" class="card-img">
+                    <p class="card-title">Top Songs - Global</p>
+                    <p class="card-info">Your weekly update of the most played tracks right...</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/card6img.jpeg" class="card-img">
+                    <p class="card-title">Top Songs - India</p>
+                    <p class="card-info">Your daily update of the most played tracks right...</p>
+                </div>
+
+                <div class="card">
+                    <img src="./assets/card1img.jpeg" class="card-img">
+                    <p class="card-title">Top 50 - Global</p>
+                    <p class="card-info">Your daily update of the most played tracks right...</p>
+                </div>
+            </div>
+            <div class="footer">
+                <div class="line"></div>
+            </div>
+
+
+        </div>
+        <div class="music-player">
+            <div class="album">
+                <img src="./assets/card12img.jpeg" class="alb-img"/>
+                <div class="music-name">
+                    <a href="#" >Tum Se Hi</a>
+                    <div class="singer-name">
+                        <a href="#" class="name" class="name1">Pritam, </a>
+                        <a href="#" class="name">Mohit Chauhan</a>
+                    </div>
+                </div>
+
+                <div class="heart-icon">
+                    <i class="fa-solid fa-heart "></i>
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                </div>
+
+
+
+
+
+            </div>
+            <div class="player">
+                <div class="player-controls">
+                    <img src="./assets/player_icon1.png" class="player-control-icon"/>
+                    <img src="./assets/player_icon2.png" class="player-control-icon"/>
+                    <img src="./assets/player_icon3.png" class="player-control-icon" style="opacity:1 ;height:2rem ;"/>
+                    <img src="./assets/player_icon4.png" class="player-control-icon"/>
+                    <img src="./assets/player_icon5.png" class="player-control-icon"/>
+                </div>
+                <div class="playback-bar">
+                    <span class="curr-time">00:00</span>
+                    <input type="range" min="0" max="100" class="progress-bar">
+                    <span class="tot-time">3:33</span>
+                </div>
+
+            </div>
+            <div class="controls" >
+                <i class="fa-solid fa-play s-icon" ></i>
+                <i class="fa-solid fa-microphone-lines s-icon"></i>
+                <i class="fa-solid fa-bars s-icon"></i>
+                <i class="fa-solid fa-headphones-simple s-icon"></i>
+                <i class="fa-solid fa-volume-low s-icon"></i>
+                <input type="range" min="0" max="100" class="vol-bar">
+                <i class="fa-brands fa-screenpal s-icon"></i>
+                <i class="fa-solid fa-up-right-and-down-left-from-center s-icon"></i>
+            </div>
+        </div>
+    </div>
+</body>
+</html>