heejung.crd.co embeds

<!--- heejung crd co embeds since so many of you are asking for it. keep in mind that this crd look AWFUL on desktop. maybe i will try to remake the whole thing later~ cr. are appreciated to itzhuo on twt --->

<!--- container --->

<style>
#container#1 {
    border-width:7px;
    border-style:solid;
    border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
   }
</style>

<!--- scrollboxes ---->

   <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=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
</head>

<style>
#scroll1 { /* use this for all of the containers just change the number and if you want play around with the position */
height: 110px;
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
border-radius:8px;
font-family: 'Chakra Petch', sans-serif;
line-height: 1.3;
font-size:14px;
overflow: auto;
text-align:left;
position: absolute;
bottom: 4em;
left:10.5em;
z-index: 99;
}
</style>
<div id="scroll1">
<p>text text text text text text text text text text text text text text text text text text text </p>
</div>

<!--- img index --->

<style>
#image01 {
position: absolute;
top: -14.5em;
left: 11em;
z-index: 50;
   }
</style>

<!--- img index mask --->

<style>
.fogmask { /* if you had pro plus you can use this directly in the element class */
-webkit-mask-image: url(https://i.ibb.co/PTDHc2h/fogmask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: top;
-webkit-mask-size: 100%;
}
</style>
<div class="fogmask"><img src="URL"></div>

<!--- in the corner img --->

<style>
#image02 {
position: absolute;
top: 16em;
left: 20em;
z-index: 545;
}
</style>

<!--- name --->

<style>
@font-face {
font-family: hoollidday;
src: url(https://dl.dropbox.com/s/yj168cmfy2psfhd/Hoollidday.ttf);
}

#text02 {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #f4a1c5, 0 -1px #f4a1c5, 0 0;
font-family: hoolliday;
font-size:  40px;
transform: rotate(-15deg);
position:relative;
bottom:-65px;
z-index:1;
   }
</style>

<!--- repr. music --->

<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=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<style>
#musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 150px;
position:relative;container#05;
font-family: 'Chakra Petch', sans-serif;
font-size:15px;
font-weight:bold;
line-height:140%;
background:rgba(255, 188, 233, 0.25);
border: 1px solid #FF69B4;
}
#musictitle{
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}
#musicpixel{
width:150%;
padding:5px;
position:relative;
min-height: 20px;
background:#FFE6F6;
border-right: 1px solid #FF69B4;
}
.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
background:white;
}
#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}
.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align:center;
}
.playpause:hover{
cursor:help;
}
#musicpixel img{
display:block;
align:center;
}
.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}
@keyframes marquee{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
</style>
<div id='musicplayer'>
<div id='musicpixel'>
<img src='https://xyz.crd.co/assets/images/gallery12/1ad5e57b.gif?v=65834ec0'>
<div class='overlay'>
<div class='playpause'><i class="fas fa-play"></i></div>
</div>
</div>
<div id='musictitle'>
<span class='marquee'>DON'T open on desktop pls :cry: also this isn't draggable lol</span>
</div>
</div>
<audio id='musicsrc' loop src='https://dl.dropbox.com/s/e1pw4feexdq279h/Get%20Up%20--%20%EB%B2%A0%EC%9D%B4%EB%B9%84%EB%B3%B5%EC%8A%A4.mp3'></audio>
<script>
document.querySelector('.playpause').addEventListener('click', playpause);
function playpause(){
if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
document.querySelector('#musicsrc').play();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
} else{
document.querySelector('#musicsrc').pause();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
}
}
</script>

<!--- and I think thats all if u have any concerns abt this just send a dm through twt :D --->