Skip to content

Added spotify clone mini project #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 31, 2025
Merged

Added spotify clone mini project #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/Payment Status nptel genai.pdf
View file
Open in desktop
Binary file not shown.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/album_icon1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/album_icon2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/backward_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card1img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card2img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card3img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card4img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card5img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card6img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card7img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/card8img.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/controld_icon2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/controls_icon5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/forward_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/library_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/play_musicbar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/player_icon1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/player_icon2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/player_icon3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/player_icon4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Domains/Frontend/MiniProjects/Spotify clone/files/player_icon5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 168 additions & 0 deletions Domains/Frontend/MiniProjects/Spotify clone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!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="styles.css">
<link rel="icon" href="./files/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="nav">
<div class="nav-option" style="opacity: 1.5;">
<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="./files/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-option">
<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 podcasts to follow</p>
<p class="box-p2">we'll keep you updated on new episodes</p>
<button class="badge">Browse podcasts</button>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="sticky-nav">
<div class="nav-icons">
<img src="./files/backward_icon.png">
<img src="./files/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 dark-badge"><i class="fa-solid fa-circle-arrow-down" style="margin-right: 5px;"></i>Install App</button>
<i class="fa-solid fa-user nav-item"></i>
</div>
</div>
<h2>Recently Played</h2>
<div class="cards-container">
<div class="card">
<img src="./files/card1img.jpeg" class="card-img">
<p class="card-title">Top 50 - Global</p>
<p class="card-info">Your daily updates of the most played...</p>
</div>
<div class="card">
<img src="./files/card7img.jpeg" class="card-img">
<p class="card-title">Ye Waadiyan</p>
<p class="card-info">Navjot Ahuja</p>
</div>
</div>

<h2>Trending now near you</h2>
<div class="cards-container">
<div class="card">
<img src="./files/card2img.jpeg" class="card-img">
<p class="card-title">Mahiya Jinna Sohna</p>
<p class="card-info">Darshan Rawal</p>
</div>

<div class="card">
<img src="./files/card3img.jpeg" class="card-img">
<p class="card-title">Mere Pass Tum Ho</p>
<p class="card-info">Rahat Fateh Ali Khan (Lofi mix)</p>
</div>

<div class="card">
<img src="./files/card4img.jpeg" class="card-img">
<p class="card-title">Naa Ready</p>
<p class="card-info"> Anirudh Ravichander,Vijay,Asal Kolaar</p>
</div>
<div class="card">
<img src="./files/card7img.jpeg" class="card-img">
<p class="card-title">Ye Waadiyan</p>
<p class="card-info">Navjot Ahuja</p>
</div>
<div class="card">
<img src="./files/card8img.jpeg" class="card-img">
<p class="card-title">Is This Love</p>
<p class="card-info">Mohit Chauhan,Shreya Ghoshal,Pritam</p>
</div>
</div>

<h2>Featured Charts</h2>
<div class="cards-container">
<div class="card">
<img src="./files/card5img.jpeg" class="card-img">
<p class="card-title">Top songs - Global</p>
<p class="card-info">Your daily updates of the most played...</p>
</div>
<div class="card">
<img src="./files/card6img.jpeg" class="card-img">
<p class="card-title">Top songs - India</p>
<p class="card-info">Your daily updates of the most played...</p>
</div>
<div class="card">
<img src="./files/card1img.jpeg" class="card-img">
<p class="card-title">Top 50 - Global</p>
<p class="card-info">Your daily updates of the most played...</p>
</div>
</div>
<div class="footer">
<div class="line"></div>
</div>
</div>
<div class="music-player">
<div class="music-img">
<img src="./files/card8img.jpeg" class="music-imgs">
<div class="music">
<span class="music-title">Is This Love</span>
<span class="music-info">Mohit Chauhan,Shreya Ghoshal,Pritam</span>
</div>
</div>
<img src="./files/album_icon1.png" alt="" class="album-icon" >
<!--<img src="./files/album_icon2.png " alt="" class="album-icon2">-->
<div class="player">
<div class="player-control">
<img src="./files/player_icon1.png" class="player-control-icon">
<img src="./files/player_icon2.png" class="player-control-icon">
<img src="./files/player_icon3.png" class="player-control-icon" style="opacity: 1; height: 2rem;">
<img src="./files/player_icon4.png" class="player-control-icon">
<img src="./files/player_icon5.png" class="player-control-icon">
</div>
<div class="playback-bar">
<span class="current-time">00.00</span>
<input type="range" min="0" max="100" class="progress-bar" step="1"></input>
<span class="total-time">3.33</span>
</div>
</div>
<div class="controls">
<img src="./files/controls_icon1.png" alt="" class="control-icon" >
<img src="./files/controld_icon2.png" alt="" class="control-icon">
<img src="./files/controls_icon3.png" alt="" class="control-icon" style="height: 1.25rem; width: 0.9rem;">
<img src="./files/controls_icon4.png" alt="" class="control-icon" style="height: 1.25rem; width: 0.9rem;">
<img src="./files/controls_icon5.png" alt="" class="control-icon">
<input type="range" min="0" max="100" step="1" class="volume"></input>

</div>
</div>
</div>
</body>
</html>
Loading
Loading