yeonjun crd co - standard

haiii and welcome to the pastebin for yeonjun crd co!! as always the positions are made to fit my personal devices so you may have to adjust them :3 for any questions you can dm me @ crrdcore or send me a retrospring @ soobinzz!! and pls credit dollbahi when remaking this carrd <33

--- CODES ---
<style>
@font-face {
font-family:'kiwi';
src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

#container01 >.wrapper {
height: 15em;
border-radius: 10px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

#text01, #text08 {
font-family: windows;
}

#text01, #text08 {
animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
0% {
color: #fff;
}

49% {
color: #fff;
}

60% {
color: #FFFFFF00;
}

99% {
color: #FFFFFF00;
}

100% {
color: #fff;
}
}

#container02 >.wrapper, #container13 >.wrapper {
height: 2em;
width: 11em;
border-radius: 10px 10px 0 0;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
transform: rotate(11rad);
position: absolute;
bottom: 6.3em;
left: -6.45em;
}

#text02, #text09 {
font-family:'kiwi';
-webkit-filter: drop-shadow(1px 0px 2px #262626);
}

#text02 mark, #text09 mark {
font-family: dreams;
}

#container03 >.wrapper {
height: 2.8em;
width: 2.8em;
border-radius: 100px;
position: absolute;
bottom: 11.3em;
left: 0.5em;
}

#icons01, #icons02 {
position: relative;
bottom: -0.1em;
}

#container04 >.wrapper {
height: 2.8em;
width: 2.8em;
border-radius: 100px;
position: absolute;
bottom: 7.3em;
left: 0.5em;
}

#container05 >.wrapper {
height: 5.7em;
width: 10em;
border-radius: 10px 10px 0 0;
box-shadow: inset 13px 0px 6px -10px rgb(190 190 190 / 60%), inset -13px 0px 6px -10px rgb(190 190 190 / 60%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(190 190 190 / 60%);
position: absolute;
bottom: 1em;
left: 0.5em;
}

#container05 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px);
}
50% { transform: translate(0, 12px); }
100% { transform: translate(0, -0px); }
}

#text03 {
font-family: windows;
padding: 5px;
background: #FFFFFFA1;
border: 1px dotted #5E5E5E;
border-radius: 5px 5px 0 0;
}

#container06 >.wrapper {
height: 4.5em;
width: 9em;
border-radius: 10px 0 0 10px;
position: absolute;
bottom: 3.3em;
left: 12.8em;
z-index: 1;
}

#text04 {
font-family: windows;
height: 4.6em;
padding-left: 3px;
padding-right: 3px;
overflow-y: scroll;
}

@media only screen and (max-width: 600px) {
#text04 {
font-size: 0.8em;
height: 5em;
}
}

#text04 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

@media only screen and (max-width: 600px) {
#text04 strong {
font-size: 1.2em;
letter-spacing: 1px;
}
}

#container07 >.wrapper {
height: 2em;
width: 2em;
border-radius: 10px;
position: absolute;
bottom: 0.8em;
left: 11em;
z-index: 1;
}

#container08 >.wrapper {
height: 2em;
width: 8.3em;
border-radius: 10px 0 0 10px;
position: absolute;
bottom: 0.8em;
left: 13.5em;
z-index: 1;
}

#text05 {
font-family: windows;
}

#text05 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

@media only screen and (max-width: 600px) {
#text05 strong {
letter-spacing: 1px;
}
}

#container09 >.wrapper {
height: 2em;
width: 2em;
border-radius: 10px;
position: absolute;
bottom: 7.4em;
left: 20em;
z-index: 1;
}

#container10 >.wrapper {
height: 6.6em;
width: 11em;
border-radius: 0 10px 10px 0;
position: absolute;
bottom: 0.5em;
left: 11em;
z-index: 1;
}

#text06 {
font-family: windows;
height: 7em;
padding-left: 3px;
padding-right: 3px;
overflow-y: scroll;
}

@media only screen and (max-width: 600px) {
#text06 {
font-size: 0.8em;
height: 7.6em;
}
}

#text06 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

@media only screen and (max-width: 600px) {
#text06 strong {
font-size: 1.2em;
letter-spacing: 1px;
}
}

#container11 >.wrapper {
height: 2em;
width: 8.9em;
border-radius: 0 0 10px 10px ;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
position: absolute;
bottom: -1.5em;
left: 12em;
z-index: 2;
}

#text07 {
font-family: windows;
}

#text07 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

#container12 >.wrapper {
height: 15em;
border-radius: 10px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

#container14 >.wrapper {
height: 5em;
width: 9em;
border-radius: 0 10px 10px 0;
position: absolute;
bottom: 9.4em;
left: 0.7em;
z-index: 1;
}

#text10 {
font-family: windows;
padding-left: 3px;
}

@media only screen and (max-width: 600px) {
#text10 {
font-size: 0.8em;
}
}

#text10 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

@media only screen and (max-width: 600px) {
#text10 strong {
font-size: 1.2em;
letter-spacing: 1px;
}
}

#text10 mark {
font-family: dreams;
}

#container15 >.wrapper {
height: 1.5em;
width: 6em;
border-radius: 0 0 10px 10px ;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
position: absolute;
bottom: 7.9em;
left: 2.2em;
z-index: 2;
}

#text11 {
font-family: windows;
}

#text11 mark {
font-family: dreams;
}

#container16 >.wrapper {
height: 6em;
width: 10em;
border-radius: 0 10px 10px 0;
position: absolute;
bottom: 0.8em;
left: 4.5em;
z-index: 1;
}

#text12 {
font-family: windows;
height: 6.3em;
padding-left: 3px;
padding-right: 3px;
overflow-y: scroll;
}

@media only screen and (max-width: 600px) {
#text12 {
font-size: 0.8em;
height: 6.9em;
}
}

#text12 strong {
font-size: 1.1em;
letter-spacing: 1.5px;
text-shadow: -1px 0 #808080, 0 1px #808080, 1px 0 #808080, 0 -1px #808080, 0 0;
}

@media only screen and (max-width: 600px) {
#text12 strong {
font-size: 1.2em;
letter-spacing: 1px;
}
}

#text12 mark {
font-family: dreams;
}

#container17 >.wrapper {
height: 1.5em;
width: 4.5em;
border-radius: 10px 10px 0 0;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
transform: rotate(11rad);
position: absolute;
bottom: 3em;
left: 1.5em;
z-index: 2;
}

#text13 {
font-family: windows;
}

#text13 mark {
font-family: dreams;
}

#container18 >.wrapper {
height: 1.3em;
width: 6.5em;
border-radius: 10px 10px 0 0;
position: absolute;
bottom: 7em;
left: 15.3em;
}

#text14 {
font-family: windows;
padding-left: 3px;
}

#container19 >.wrapper {
height: 6.5em;
width: 6.5em;
border-radius: 0 0 10px 10px;
position: absolute;
bottom: 0.5em;
left: 15.3em;
z-index: 1;
}

#image01 {
border: 1px solid #A3A3A3;
border-radius: 3px 3px 8px 8px;
overflow-x: hidden;
}

::-moz-selection { /* EDIT THIS ONE TOO */
color: #5E5E5E;
background: #C0C5F0;
}

::selection {
color: #5E5E5E;
background: #C0C5F0;
}

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}
</style>

<html>
<body oncontextmenu="return false;">
</html>
<script>
document.onkeydown = function(e) {
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){
return false;
}
}
</script>

--- TUNES ---

<!-- music player made by arsha~! cr appreciated @girisgoblog -->
<style>

lol {
}

lol, .img2 { /* album's cover image u can change the size! */
position: absolute;
left: 17.5em;
bottom: 0.7em;
width: 60px;
height: 60px;
background-color: black;
color: black;
z-index: 999;
}

.img1 { /* cd image u can change the size too */
position: absolute;
left: 19em;
bottom: 0.7em;
width: 60px;
height: 60px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}

.img1:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}

@media only screen and (max-width: 600px) {

.img1 {
width: 47px;
height: 47px;
}

.img2 {
width: 48px;
height: 48px;
}

}

</style>

<body>
<div id="lol"><img class="img2"src="https://dl.dropbox.com/scl/fi/7u29p7rf20579jah773by/cb04410de32def2211bf2b51c9c41142.jpg?rlkey=4vdpqnzhlihcjbknkopfvnifn&st=4yfigcdx&dl=0"><img class="img1" src="https://dl.dropbox.com/scl/fi/i1l2chqc8jalulqxdtl86/cd.png?rlkey=z152mgvkwxen4ag0p697cgnn9&dl=0" width="auto" height="45px"></div>

<script>
document.getElementById("lol").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>

<audio id="audio" src="https://dl.dropbox.com/scl/fi/3ggwzf1tfgoml4uivx867/Olivia-Rodrigo-obsessed-Official-Lyric-Video.mp3?rlkey=k3u2b62jcblz48r7eyl5848zw&st=5ehx6uqh&dl=0"></audio>
</body>

--- TUNES ---
<style>

lol {
}

lol, .img2 { /* album's cover image u can change the size! */
position: absolute;
left: 17.5em;
bottom: 0.7em;
width: 60px;
height: 60px;
background-color: black;
color: black;
z-index: 999;
}

.img1 { /* cd image u can change the size too */
position: absolute;
left: 19em;
bottom: 0.7em;
width: 60px;
height: 60px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}

.img1:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}

@media only screen and (max-width: 600px) {

.img1 {
width: 47px;
height: 47px;
}

.img2 {
width: 48px;
height: 48px;
}

}

</style>

<body>
<div id="lol"><img class="img2"src="https://dl.dropbox.com/scl/fi/7u29p7rf20579jah773by/cb04410de32def2211bf2b51c9c41142.jpg?rlkey=4vdpqnzhlihcjbknkopfvnifn&st=4yfigcdx&dl=0"><img class="img1" src="https://dl.dropbox.com/scl/fi/i1l2chqc8jalulqxdtl86/cd.png?rlkey=z152mgvkwxen4ag0p697cgnn9&dl=0" width="auto" height="45px"></div>

<script>
document.getElementById("lol").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>

<audio id="audio" src="https://dl.dropbox.com/scl/fi/3ggwzf1tfgoml4uivx867/Olivia-Rodrigo-obsessed-Official-Lyric-Video.mp3?rlkey=k3u2b62jcblz48r7eyl5848zw&st=5ehx6uqh&dl=0"></audio>
</body>