purple & green crditem carrd main code

<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=Inconsolata:wght@300;500;700&display=swap" rel="stylesheet">

<div class="flip-card-3D-wrapper">
<div id="flip-card">
<div class="flip-card-front">

<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">𓊕</div>
</div>
<div class="sonata"><img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif"> </div>
<div class="labeltext"></div>
</div><!--end music player-->

<audio id="tune" src="audio link""audio"></audio>

<div class="grid-container">
<div class="grid-item">

<img class=hearty src="image link">

</div>

<div class="grid-item">
<div id="name">Name</div>
<br></br>
info info info cr crditem
</div>

<div class="grid-item">
<br>
<mark>links</mark>
<br></br>
<span style="line-height:1;">
<a href="https://www.youtube.com/@dollcrds">youtube</a>
<br>
<a href="https://retrospring.net/@dollcrds">retrospring</a></span>
<br>
<a href="https://www.pinterest.com/dollcrds/">pinterest</a></span>
<br>
<a href="https://x.com/dollcrds?s=20">crd twitter</a></span>
</div>

<div class="grid-item">

<div id="scroll"> <strong><u>text goes here</u></strong> info info info info info
</div>

</div>

</div>

<button id="flip-card-btn-turn-to-back">more</button></div>

<div class="flip-card-back">

<img class=full src="image link">

<div class="grid-container2">
<div class="grid-item">
<div id="scroll2">

<mark><strong>before u follow</strong></mark> info info info
<br></br>

<mark><strong>do not follow if</strong></mark> info info info
</div>
</div>

<div class="grid-item"> </div>

<div class="grid-item">
<div id="scroll2">
<mark><strong>kpop</strong></mark> info info info
<br></br>

<mark><strong>text goes here</strong></mark> info info info
</div>
</div>

</div>

<button id="flip-card-btn-turn-to-front">back</button></div>

</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(event) {

document.getElementById('flip-card-btn-turn-to-back').style.visibility = 'visible';
document.getElementById('flip-card-btn-turn-to-front').style.visibility = 'visible';

document.getElementById('flip-card-btn-turn-to-back').onclick = function() {
document.getElementById('flip-card').classList.toggle('do-flip');
};

document.getElementById('flip-card-btn-turn-to-front').onclick = function() {
document.getElementById('flip-card').classList.toggle('do-flip');
};

});
</script>

<style>

@font-face { font-family: space ranger; src:url(https://dl.dropbox.com/s/eis23duz97yq7e1/spacerangerlaserital.ttf); }

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
width: 100%;
font-family: 'Inconsolata', monospace;
font-weight: 300;
background: white;
overflow: hidden;
}

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

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

.flip-card-3D-wrapper {

width: 25em;
height: 250px;
font-size: 14px;
max-width: 100%;
max-height: 240px;
position: relative;
-o-perspective: 900px;
-webkit-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
margin: 0 auto;
}
#flip-card {

width: 100%;
height: 100%;
text-align: center;
margin: 50px auto;
position: absolute;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
#flip-card-btn-turn-to-back, #flip-card-btn-turn-to-front {

position: absolute;
bottom: 8px;
right: 8px;
width: 60px;
height: 40px;
background: #fff;
cursor: pointer;
visibility: hidden;
font-family: 'Inconsolata', monospace;
font-weight: 600;
font-size: .8em;
padding: 0;
color: black;
border: 1px solid black;
border-radius: 6px;
}
#flip-card .flip-card-front, #flip-card .flip-card-back{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;

}
#flip-card .flip-card-front {
background: #color;
padding: 10px;
border:1px solid black;
border-radius: 6px;
}
#flip-card .flip-card-back {
padding: 12px;
border: 1px solid black;
border-radius: 6px;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
background: rgb(189, 174, 202);
background: radial-gradient(circle, rgb(189, 174, 202) 41%, rgb(130, 190, 96) 82%);

}
#flip-card .flip-card-front p, #flip-card .flip-card-back p {
color: grey;
display: block;
position: absolute;
top: 40%;
width: 100%;

}

.grid-container {
position: relative;
border: 1px solid black;
display: grid;
border-radius: 6px;
overflow: hidden;
grid-template-columns: 28% auto;
background: rgb(189, 174, 202);
background: radial-gradient(circle, rgb(189, 174, 202) 49%, rgba(255,255,255,1) 100%);
padding: 10px;
height: 100%;
line-height: 0.85;
}

.grid-container2 {
position: relative;
display: grid;
overflow: hidden;
grid-template-columns: 49% 2% 49%;
padding: 0px;
height: 100%;
line-height: 0.85;
margin-top: 5px;
height: 50%;
}

.hearty {
width: 100%; height: 100px; border-radius: 100%; border: 1px solid black; position: relative; object-fit: cover;
}

#name {
position: relative;
top: 10px;
font-family: space ranger;
color: #color;
font-size: 3.3em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

#scroll {
position: relative;
bottom: 10px;
height: 100px;
padding: 7px;
width: 100%;
border: 1px solid black;
border-radius: 4px;
background: repeating-linear-gradient(
45deg,
#color,
#color 10px,
#eaedde 10px,
#eaedde 20px
);
}

mark { border: 1px solid black; background: #color; padding-left: 5px; padding-right: 5px; border-radius: 5px; }

a:hover { letter-spacing:1.5px; }

a { text-decoration: none; transition: .3s ease; color: black; font-weight: 500 ;}

.tiny {
width: 0.8em;
height: auto;

}

#scroll2 {
height: 100px;
padding: 5px;
width: 100%;
position: relative;
overflow-y: scroll;
background: #FFFFFF99;
border: 1px solid black;
border-radius: 6px;
line-height: 1.05;
}

.full {
width: 100%;
border: 1px solid black;
border-radius: 2px;
height: 100px;
object-fit: cover;
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: absolute;
left: 0px;
top: -10%;
display:flex;
z-index:99;
}

#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:22px;
cursor:pointer;
}

.playy, .pausee { background: -webkit-linear-gradient(-90deg, #color 40%, #color 65%, #fff 95%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.5px #color; -webkit-filter: drop-shadow(0px 0px 2px #color); } /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left:10px;
color:#222; /* color of music note symbol */
}

.labeltext {
margin-left:8px;
font-family:courier new;
font-size:9px;
color:#222; /* color of song title */
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>