<!
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="[Link]
awesome/6.4.0/css/[Link]"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/
E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-
referrer" />
<link rel="icon" href="d:\project spotify\[Link]"/>
<title>Spotify - Web Player: Music for everyone</title>
<link rel="stylesheet" href="Stylesheet [Link]">
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,
200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1
,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
</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="option">
<div class="Lib-option nav-option" >
<img src="d:\project spotify\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 eassy, 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">Browes podcaste</button>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="sticky-nav">
<div class="sticky-nav-icons">
<img src="d:\project spotify\backward_icon.png">
<img src="d:\project spotify\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-down" style="margin-right: 5px"></i>Instal 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="d:\project spotify\[Link]" 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>
<h2>Trending now near you</h2>
<div class="cards-container">
<div class="card">
<img src="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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>
<h2>Featured Charts</h2>
<div class="cards-container">
<div class="card">
<img src="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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="d:\project spotify\[Link]" 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="album">
<img src="d:\project spotify\album_picture.jpeg" class="album-
icon">
<div class="song-info">
<div class="song-name">Daylight</div>
<div class="artist-name">David Kushner</div>
</div>
<div class="album-imgs">
<img src="d:\project spotify\album_icon1.png" class="album-control-
img">
<img src="d:\project spotify\album_icon2.png" class="album-control-
img" >
</div>
</div>
<div class="player">
<div class="player-controls">
<img src="d:\project spotify\player_icon1.png" class="player-
control-icon">
<img src="d:\project spotify\player_icon2.png" class="player-
control-icon">
<img src="d:\project spotify\player_icon3.png" class="player-
control-icon" style="opacity: 1; height:2rem;">
<img src="d:\project spotify\player_icon4.png" class="player-
control-icon">
<img src="d:\project spotify\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="progrees-bar"
step="1">
<span class="tot-time">3:33</span>
</div>
</div>
<div class="controls">
<div class="side-controls">
<img src="d:\project spotify\controls_icon1.png" class="side-
control-icon">
<img src="d:\project spotify\controld_icon2.png" class="side-
control-icon">
<img src="d:\project spotify\controls_icon3.png" class="side-
control-icon" style=" opacity: 0.5; height: 1.8rem;">
<img src="d:\project spotify\controls_icon4.png" class="side-
control-icon" style=" opacity: 0.5; height: 1.8rem;">
<i class="fa-solid fa-volume-low" class="volume-icon"></i>"
<div class="range">
<span class="current-time"></span>
<input type="range" min="0" max="100" class="progrees-bar"
step="1">
<span class="tot-time"></span>
</div>
</div>
</dic>
</div>
</div>
</div>
</body>
</html>