public/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<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=Noto+Sans:wght@400;700&display=swap"
			rel="stylesheet"
		/>
		<link rel="stylesheet" href="/css/normalize.css" />
		<link rel="stylesheet" href="/css/style.css" />
		<title>Hits of the moment | Music player</title>
	</head>
	<body id="app-main">
		<div class="content-container">
			<main id="content-main">
				<section id="playlist-info">
					<img 
						src="/images/2098157264.jpeg"
						alt="Playlist cover picture"
						class="playlist-img"
					/>
					<div class="header">
						<span>Playlist</span>
						<h1 id="playlist-title" class="text-title">Hits of the moment</h1>
						<div id="playlist-details">
							<p class="author">By Fábio - Deezer Pop Editor</p>
							<p class="details">2016 · 60 songs · 162 minutes</p>
						</div>
					</div>
				</section>

				<ul id="playlist-songs" class="song-list">
					<li>
						<p class="text-subtitle-1">Stay</p>
						<p>The Kid Laroi</p>
					</li>
					<li>
						<p class="text-subtitle-1">INDUSTRY BABY</p>
						<p>Lil Nas X</p>
					</li>
					<li>
						<p class="text-subtitle-1">Woman</p>
						<p>Doja Cat</p>
					</li>
					<li>
						<p class="text-subtitle-1">Bad Habits</p>
						<p>Ed Sheeran</p>
					</li>
					<li>
						<p class="text-subtitle-1">Way 2 Sexy</p>
						<p>Drake</p>
					</li>
					<li>
						<p class="text-subtitle-1">Pepas</p>
						<p>Farruko</p>
					</li>
					<li>
						<p class="text-subtitle-1">Take My Breath</p>
						<p>The Weeknd</p>
					</li>
					<li>
						<p class="text-subtitle-1">Happier Than Ever</p>
						<p>Billie Eilish</p>
					</li>
				</ul>
			</main>

			<aside id="queue">
				<p>Play next · 0 tracks</p>
				<span class="empty-label">This queue is empty</span>
			</aside>
		</div>

		<aside id="player">
			<div class="content content-left">
				<img src="/images/242430582.jpeg" alt="Stay" class="album-image" />
				<div class="title-details">
					<p class="text-subtitle-2">STAY</p>
					<p class="text-body-2">The Kid Laroi</p>
				</div>
			</div>
			
			<div class="content content-controls">
				<img src="/icons/skip_previous.svg" alt="Skip Previous" />
				<img src="/icons/pause.svg" alt="Pause" />
				<img src="/icons/skip_next.svg" alt="Skip Next" />
			</div>
			
			<div class="content content-right">
				<div id="deezer-sponsor">
					<span class="text-overline">Powered by</span>
					<img src="/images/deezer-logo.svg" alt="Deezer logo" />
				</div>
			</div>
		</aside>
	</body>
</html>