PRO STANDARD #4 // chuwee carrd co codes

------------------ scrollbox ------------------

<style>
#scroll a{
text-decoration-style: dotted;
}

#SCROLL a:hover {
color: #6c7c74;
transition: .9s;
text-decoration: italic;
text-decoration-style: none;
}

html {
overflow: scroll;
overflow-x: hidden;
}

::-webkit-scrollbar {
width: 0;
background: transparent;
}

::-webkit-scrollbar-thumb {
background: transparent;
}

#scroll {
float:right;
MAX-HEIGHT:70PX;
height: 70px;
border-radius:0.875rem;
width: 15px;
padding: 3px;
text-align:left;
overflow: auto;
background-color: rgba(255,255,255,0.612);
transition: width 1s, height 1s;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#scroll:hover{
-moz-transition: all 2s;
-webkit-transition: all 1s;
width: 130%;
background-color:rgba(255, 255, 255, 0.90);
z-index:999;
cursor:help;
}

strong{
font-family: cheri;
font-size:2em;
text-align: left;
position: relative;
font-weight:900;
right: 0;
color:inherit;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: 1s;
}

#scroll:hover strong{
LINE-HEIGHT:0.1;
opacity: 0;
transition: 1s;
font-size: 0;
}

p{
font-size:0px;
text-align:left;
font-family:nintendo;
}

#scroll:hover p{
margin-top: -.125em; /* you can modify this part how much negative margin top so there would be no huge space above when hovering the scrollbox*/
font-size: 1.5em;
color:rgba(0, 0, 0, 0.78);
text-align:left;
font-family:nintendo;}

</style>
<div id="scroll">
<strong>

/*-- ADD HERE THE PATORJK FONT TAG--*/

</strong>
<p>information <a href="LINK">link name</a>.

/*--ADD <BR> or <BR><BR/> IF YOU WANT TO MOVE ANOTHER PARAGRAPH--*/

</p>
</div>

------------------ miscellaneous ------------------
@font-face {
font-family: Nintendo;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf); }

@font-face {
font-family: cheri;
src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);}

@font-face{
font-family:crystaluniverse;
src: url(https://dl.dropbox.com/s/9if02z4xh34q00d/CrystalUniverse-Regular.ttf);}

#tt{
font-family:crystaluniverse;
font-size:3em;
line-height:1.75em;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ffffff;
-webkit-text-fill-color: inherit;
text-align:left;}


------------------ image divider on top ------------------

#image01{
position:absolute;
top:0px;
left:0px;}


------------------ image bounce onhover ------------------

#image02{
position:absolute;
bottom:-15px;
right:-35px;
-webkit-transform: rotate(11deg);
transform: rotate(11deg);
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
display: inline-block;
filter: drop-shadow( 0 0px #b4a1f8) drop-shadow( 2px 3px 2px #cfbcd5) drop-shadow( 0 -1px #b4a1f8) drop-shadow( -1px 0 #b4a1f8);
z-index:9;}

#image02:hover{
animation-name: bounce;
-moz-animation-name: bounce;}

@keyframes bounce{
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)}

40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)}

60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)}


------------------ music player, credits to owner ------------------

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<head>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: absolute;
bottom:5px;
left:10px;
display:flex;
z-index:99; }

#glenplayer02 a {
text-decoration:none; }

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

.music-controls {
cursor: url(https://cur.cursors-4u.net/nature/nat-3/nat260.cur), auto !important; /*--CHANGE CURSOR--*/
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px; }

.playy, .pausee {
background: #cfbcd5;
-webkit-background-clip: text;
-webkit-text-fill-color:#cfbcd5;
-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #483d44; font-size: 22px; color: #ffffff; } .pausee { display:none; }

</style>
<body>
<div id="glenplayer02"><div class="music-controls" onclick="songstart();"><div class="playy" style="display: block;"><span>
<i class="fa-solid fa-volume-low" aria-hidden="true"></i></span></div><div class="pausee" style="display: none;"><span><i class="fa-solid fa-volume-high" aria-hidden="true"></i>
</span></div></div></div>

<audio id="tune" src="https://cdn.discordapp.com/attachments/890617367284027443/965530443401281546/LeeHi_-_ONLY_Lyrics.mp3"> /*--CHANGE YOUR MUSIC HERE--*/

</audio></body>