- Files
- Index
- Style
- Script
- README
- CDN Add
PLEASE WAIT...
<html>
<head>
<title>Spotify Side Bar</title>
</head>
<body>
<div class="top-bar">
<p class="n1">
TOCANDO DA PLAYLIST
</p>
<p class="song-name">
TV Girl
</p>
</div>
<div class="img">
<img src="https://i.scdn.co/image/ab67616d00001e0232f5fec7a879ed6ef28f0dfd" alt="Cover.png" width="310" height="310"/>
</div>
<div class="main">
<h1>Not Allowed</h1>
<h2>TV Girl</h2>
<button type="button" id="heart-btn">
<img src="#" id="heart" alt="heart-btn"/>
</button>
</div>
<div class="nav">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-player-container">
<button id="random-icon">
<img src="#" alt="Random-btn"/>
</button>
<button type="button" id="skip-left-btn">
<img src="#" alt="skip-left-btn" />
</button>
<button type="button" id="player">
<img src="#" id="player-btn" alt="player">
</button>
<button type="button" id="skip-right-btn">
<img src="#" alt="skip-right-btn" />
</button>
<footer></footer>
</div>
</body>
</html>body{
background-image: linear-gradient( rgba(171, 7, 102, 1),rgba(15, 1, 12, 1));
padding: 0;
margin: 0;
}
.top-bar {
display: flex;
justify-content: center;
flex-direction: column;
}
.n1 {
margin: 5px 0px 0px 0px;
padding: auto;
font-family: Arial;
font-weight: 500;
font-size: 11px;
text-align: center;
color: #fff;
letter-spacing: 1px;
}
.song-name{
margin: 5px;
padding: auto;
font-family: Arial;
font-weight: 600;
font-size: 11px;
text-align: center;
color: #fff;
letter-spacing: 1px;
}
.img {
margin: 12px;
padding: 50px 40px 30px 50px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */