<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify – Web Player</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=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="utility.css">
<link rel="icon" href="img/favicon.ico">
</head>
<body>
<div class="container flex bg-black">
<div class="left">
<div class="close">
<img class="invert" src="img/close.svg" alt="">
</div>
<div class="home flex flex-direction gap bg-grey rounded m-1 font-16">
<div class="logo">
<img class="invert" src="img/logo.svg" alt="">
</div>
<ul class="ul flex flex-direction gap ">
<li><img class="invert" src="img/home.svg" alt="home">Home</li>
<li><img class="invert" src="img/search.svg" alt="home">Search</li>
</ul>
</div>
<div class="library rounded bg-grey m-1 p-1 font-16">
<div class="heading">
<img class="invert" src="img/playlist.svg" alt="">
<h2>
Your Library
</h2>
</div>
<div class="songList">
<ul>
</ul>
</div>
<div class="footer">
<div><a href="https://www.spotify.com/jp/legal/"><span>Legal</span></a></div>
<div><a href="https://www.spotify.com/jp/privacy/"><span>Privacy </span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/"><span>Protect </span></a>
</div>
<div><a href="https://www.spotify.com/jp/legal/cookies-policy/"><span>Cookies</span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/#s3"><span>About </span></a></div>
<div><a href="https://www.spotify.com/jp/accessibility/"><span>Accessibility</span></a></div>
</div>
</div>
</div>
<div class="right rounded bg-grey p-2">
<div class="header rounded m-1 p-1 p-2">
<div class="nav">
<img class="invert hamburger" src="img/hamburger.svg" alt="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 6L9.70711 11.2929C9.37377 11.6262 9.20711 11.7929 9.20711 12C9.20711 12.2071 9.37377 12.3738 9.70711 12.7071L15 18"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 18L14.2929 12.7071C14.6262 12.3738 14.7929 12.2071 14.7929 12C14.7929 11.7929 14.6262 11.6262 14.2929 11.2929L9 6"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="buttons">
<button class="btnn">Sign up</button>
<a href="login/index.html" target="_blank"><button class="btn">Log in</button></a>
</div>
</div>
<div class="spotifyPlayist m-1">
<h1>Spotify Playlist</h1>
<div class="cardContainer">
</div>
<div class="playCONT">
<div class="playBar">
<div class="seekar">
<div class="circle">
</div>
</div>
<div class="songsInfo">
</div>
<div class="songButtons">
<img id="previous" class="invert" src="img/prevsong.svg" imgalt="">
<img id="play" class="invert" src="img/play.svg" alt="">
<img id="next" class="invert" src="img/nextsong.svg" alt="">
</div>
<div class="volumne1">
<div class="songTime">
</div>
<div class="volume">
<img width="24" class="invert" src="img/volume.svg" alt="">
<div class="range invert">
<input type="range" name="volume" id="id">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>