<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>deadbeat apt.</title>
<style>
body {
margin: 0;
background: url('https://i.ibb.co/jLGm2vb/pixel-room-bg.png') no-repeat center center fixed;
background-size: cover;
cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym158.cur'), auto;
font-family: monospace;
color: #b6b6b6;
}
.clickable {
position: absolute;
cursor: pointer;
transition: transform 0.2s ease;
}
.clickable:hover {
transform: scale(1.1);
}
#cig {
top: 70%;
left: 30%;
width: 40px;
}
#walkman {
top: 60%;
left: 60%;
width: 50px;
}
#diary {
top: 75%;
left: 45%;
width: 60px;
}
.player {
display: none;
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
border: 1px solid #666;
}
.close {
position: absolute;
top: 5px;
right: 8px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cig" class="clickable">
<img src="https://i.ibb.co/kGRj8jq/cigarette.png" alt="cigarette" style="width:100%" onclick="openPlayer('player1')">
</div>
<div id="walkman" class="clickable">
<img src="https://i.ibb.co/vVzhP50/walkman.png" alt="walkman" style="width:100%" onclick="openPlayer('player2')">
</div>
<div id="diary" class="clickable">
<img src="https://i.ibb.co/2nN7BWx/diary.png" alt="diary" style="width:100%" onclick="openPlayer('player3')">
</div>
<div id="player1" class="player">
<span class="close" onclick="closePlayer('player1')">[X]</span>
<iframe width="300" height="100" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/lil-peep-archive/lil-peep-shelter-peep-only&color=%23969696&inverse=false&auto_play=true&show_user=true">
</iframe>
</div>
<div id="player2" class="player">
<span class="close" onclick="closePlayer('player2')">[X]</span>
<iframe width="300" height="100" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/quonzu/waste-of-time-lil-peep-without-bathsaltbryce&color=%23969696&inverse=false&auto_play=true&show_user=true">
</iframe>
</div>
<div id="player3" class="player">
<span class="close" onclick="closePlayer('player3')">[X]</span>
<iframe width="300" height="100" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/capturedtracks/mac-demarco-my-kind-of-woman&color=%23969696&inverse=false&auto_play=true&show_user=true">
</iframe>
</div>
<script>
function openPlayer(id) {
document.getElementById(id).style.display = 'block';
}
function closePlayer(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</body>
</html>