Skip to content

Commit

Permalink
Merge pull request #873 from Bhumika-00/main
Browse files Browse the repository at this point in the history 
Added Spotify Clone
  • Loading branch information
@Ayushparikh-code
Ayushparikh-code authored Oct 29, 2024
2 parents 73d6971 + 9f24f85 commit 69bc5c0
Show file tree
Hide file tree
Showing 2 changed files with 514 additions and 0 deletions.
222 changes: 222 additions & 0 deletions SpotifyClone/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
<!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.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<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="icon" href="https://github.com/apna-college/Delta/blob/main/CSS/Project/assets/logo.png?raw=true">
<link rel="stylesheet" href="style.css">
<title>Spotify web application</title>
</head>
<body>
<div class="main">

<div class="sidebar">
<div class="nav">
<div class="nav-option">
<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="option">
<div class="lib-options nav-option">
<i class="fa-solid fa-book"></i>
<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">
<div class="box-p1">Create your first playlist</div>
<div class="box-p2">It's easy we'll help you</div>
<button class="badge">Create playlist</button>
</div>
<div class="box" style="height: 12rem;">
<div class="box-p1">Let's find some podcast to follow</div>
<div class="box-p2">We'll keep you uploading on new episodes</div>
<button class="badge">Browse podacst</button>
</div>
</div>
</div>
</div>

<div class="main-content">
<div class="sticky-nav">
<div class="sticky-nav-icons">
<img src="backward_icon.png">
<img src="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"><i class="fa-solid fa-download"></i>Install app</button>
<i class="fa-regular fa-user nav-item"></i>
</div>
</div>


<h2>Recently Played</h2>
<div class="card-container">
<div class="card">
<img class="card-image" src="ti.jpeg">
<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="card-container">
<div class="card">
<img class="card-image" src="week.jpg">
<p class="card-title">Weekend</p>
<p class="card-info">Listen to your favourite weekend's song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="images.jpeg">
<p class="card-title">Taylor's Trending</p>
<p class="card-info">Listen to your favourite Taylor's song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="selena.jpg">
<p class="card-title">Selena Gomez</p>
<p class="card-info">Listen to your favourite Selena's song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="ss.jpg">
<p class="card-title">Senorita Sunset</p>
<p class="card-info">Listen to your favourite song on loop......</p>
</div>
<div class="card">
<img class="card-image" src="mma.jpg">
<p class="card-title">Marshmallo</p>
<p class="card-info">Listen to your favourite Marshmallo's song on loop.....</p>
</div>


</div>
<h2>Featured Charts</h2>
<div class="card-container">
<div class="card">
<img class="card-image" src="fc1.webp">
<p class="card-title">Weekend Top 50</p>
<p class="card-info">Listen to your favourite weekend song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="fc2.webp">
<p class="card-title">Pop 50 Global</p>
<p class="card-info">Listen to your favourite pop music on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="fc3.jpg">
<p class="card-title">AP Dhillon Top 50 </p>
<p class="card-info">Listen to your favourite Dhillon's song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="fc4.jpeg">
<p class="card-title">The Rage Band</p>
<p class="card-info">Listen to your favourite Rage Band song on loop......</p>
</div>
<div class="card">
<img class="card-image" src="fc5.jpeg">
<p class="card-title">Drake Top 50</p>
<p class="card-info">Listen to your favourite Drake's song on loop.....</p>
</div>
<div class="card">
<img class="card-image" src="fc6.jpg">
<p class="card-title">Top 50 Black-Pink </p>
<p class="card-info">Listen to your favourite Band's song in loop.....</p>
</div>
</div>
<h2>Recently Visited</h2>
<div class="card-container">
<div class="card">
<img class="card-image" src="rp1.webp">
<p class="card-title">Mid night's</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
<div class="card">
<img class="card-image" src="rp2.jpeg">
<p class="card-title">Doja Cat</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
<div class="card">
<img class="card-image" src="rp3.webp">
<p class="card-title">God is a women</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
<div class="card">
<img class="card-image" src="rp4.jpeg">
<p class="card-title">Illusions</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
<div class="card">
<img class="card-image" src="rp5.webp">
<p class="card-title">We can't be friends</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
<div class="card">
<img class="card-image" src="rp6.jpg">
<p class="card-title">Positions</p>
<p class="card-info">Your daily update of the most played tracks.....</p>
</div>
</div>
<div class="footer">
<div class="line"></div>
</div>
</div>

</div>


<div class="music-player">
<div class="album">
<div class="first-line">
<img src="assh.jpg" class="image-inside" alt="Album Cover">
<p class="textm">Tu Aashiqui</p>
<i class="fa-regular fa-heart" id="first"></i>
<i class="fa-solid fa-music" id="second"></i>
</div>

</div>



<div class="player">
<div class="player-control">
<img src="player_icon1.png" class="player-control-icon">
<img src="player_icon2.png" class="player-control-icon">
<img src="player_icon3.png" class="player-control-icon" style="opacity: 1 ; height: 2rem;">
<img src="player_icon4.png" class="player-control-icon">
<img src="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.14</span>
</div>
</div>
<div class="controls">
<i class="fa-solid fa-play" id="f1"></i>
<i class="fa-solid fa-microphone" id="f2"></i>
<i class="fa-brands fa-pagelines " id="f3"></i>
<i class="fa-solid fa-box"id=f4 ></i>
<i class="fa-solid fa-volume-xmark" id="f5"></i>
<input type="range" min="0" max="100"class=volume>
</div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 69bc5c0

Please sign in to comment.