1/12/22

<!DOCTYPE html>
<html>
<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=Audiowide&family=Lobster&display=swap" rel="stylesheet">

</head>
<style>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
width: 100vw;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}

.container {
margin: auto;
position: relative;
background: linear-gradient(#f9dbf2 60%, white);
height: fit-content;
width: 24em;
border-radius: 10px;
border: 1px solid #ee99da;;
display: flex;
flex-direction: column;
padding: 1.75em;
}

.divider {
margin-bottom: .875em;
}

.outer {
display: inline-flex;
height: 100%;
width: 100%;
}

.inner1 {
margin-right: .875em;
}

.inner1,
.inner2 {
height: 9.25em;
width: fit-content;
background: radial-gradient(#ee99da, 40%, white);
position: relative;
border-radius: 6px;
border: 2px solid #ee99da;
text-align: center;
overflow: hidden;
}

.picture {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: .75s ease-in-out;
border-radius: 4px;
}

.inner1:hover .picture1 {
height: 0;
}

.inner2:hover .picture2 {
height: 0;
}

.info {
height: 100%;
width: 100%;
overflow: auto;
padding: .25em;
}

mark {
background: white;
border: 1px solid black;
border-radius: 6px;
padding: .125em;
}

.music-player {
margin-top: .875em;
width: 100%;
height: 2.25em;
background: linear-gradient(#f9dbf2 60%, white);
border: 1px solid #ee99da;
border-radius: 10px;
display: flex;
flex-direction: row;
position: relative;
}

.note,
.title {
height: 100%;
display: flex;
align-items: center;
color: white;
text-shadow: 1px -1px 0 black, 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black;
font-family: audiowide;
font-size: 1.25em;
}

.note {
width: 10%;
justify-content: center;
cursor: pointer;
background: transparent;
border: 0;
}

.title {
width: 90%;
overflow: hidden;
white-space: nowrap;
}

.title-text {
animation: marquee 9s infinite ease-in-out;
}

@keyframes marquee {
0% { transform: translateX(120%); }
100% { transform: translateX(-120%); }
}

</style>
<body>

<div class="container">

<img class="divider" src="https://dl.dropbox.com/s/gywur0keoe0j9cl/pink-divider.png">

<div class="outer">

<div class="inner1">
<img class="picture1 picture" src="https://dl.dropbox.com/s/wxp6lytoz2qaqzz/0B482634-B73D-4ED7-9CB8-49A6340E48FE.jpeg">
<div class="info"><p><mark>about</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here <br> <mark>byf</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here </p></div>
</div>

<div class="inner2">
<img class="picture2 picture" src="https://dl.dropbox.com/s/if792fw9of5eg8c/A71A3CAE-23DC-4D2D-B68D-E07B384DC326.gif">
<div class="info"><p><mark>dni</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here <br> <mark>likes</mark> <br> info here info here info here info here info here info here info here info here info here info here info here info here info here</p>
</div></div>

</div>

<div class="music-player">

<button id="button" class="note">▶</button>
<div class="title"><p class="title-text">now playing Express 999 by 소녀시대</p></div>

</div></div>

<audio id="song">
<source src='https://dl.dropbox.com/s/kup2qzq5gfiwz41/yt1s.com%20-%20Express%20999.mp3' type='audio/mpeg'/>
</audio>

<script>
var button = document.getElementById("button");
var audio = document.getElementById("song");

button.addEventListener("click", function(){
if(audio.paused){
audio.play();
button.innerHTML = "♬";
} else {
audio.pause();
button.innerHTML = "▶";
}

});
</script>

</body>
</html>