CR CRDITEM (pro-standard code)

<div id="cont">
<img class=phone src="https://dl.dropbox.com/scl/fi/l01il5tyz7gxjw4ssxq6x/download-9.png?rlkey=z817tkdqn8md33o53szvc8ksi&st=u72e5i0k&dl=0.png">
<div id="phonein">dialing...</div>
<div id="scroll">

<strong>scroll! & credit crditem</strong> hai im <strong>name</strong> or <strong>name!</strong> text goes here info info info info info
<br></br>
<u>underlined text</u> text goes here info info info info info
<br></br>
text goes here info info info info info text goes here info info info info info text goes here info info info info info
<br></br>
<em>italicized text</em> <strong>bold text</strong> <u>more underlined text</u> text goes here info info info info info text goes here info info info info info
<br></br>
<a href="link goes here">name of link goes here (link title)</a>
</div>

<style>

@font-face {
font-family: 'Magica';
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}

@font-face {
font-family: jandas;
src: url(https://dl.dropbox.com/s/5s7za29vw66rgkk/11.20___.TTF);
}

#phonein {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: jandas;
position: absolute;
opacity: 0.8;
top: 15%;
z-index: 3;
font-size: 2em;
color: white;
transform: rotate(-10deg);
left: 10%;
opacity: 0;
transition: 1s ease;
}

#cont:hover #scroll {
width: 180px;
left: 55%;
opacity: 1;
}

#cont:hover #phonein {
left: 63%;
opacity: 1;
}

#cont:hover .phone { animation-play-state: paused; }

#scroll {
font-family: 'Magica';
transform: rotate(-10deg);
transition: 1s ease;
position: absolute;
top: 30%;
left: 35%;
height: 80px;
border-radius: 0 12px 12px 0;
width: 1px;
overflow: scroll;
border: 1px solid black;
padding: 5px;
padding-left: 19px;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 49%, #eecee6 100%);
text-align: right;
}

#cont {
left: -20px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 240px;
height: 260px;

}

.phone {
left: -35px;
z-index: 99;
position: relative;
width: auto;
object-fit: cover;
height: 250px;
-webkit-filter: drop-shadow(0px 0px 4px #000000);
-webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

@keyframes vibrate {
0.50%, 10%, 20%, 30%, 40%, 50%
{
-webkit-transform: translate3d(0.5px, 0, 0);
transform: translate3d(0.5px, 0, 0);
}
5%, 15%, 25%, 35%, 45%
{
-webkit-transform: translate3d(-0.5px, 0, 0);
transform: translate3d(-0.5px, 0, 0);
}
100% {
-webkit-transform: translate3d(0.5px, 0, 0);
transform: translate3d(0.5px, 0, 0);
}

}
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>
<script type="text/javascript">
// <![CDATA[
var bgcolour="#ffffff"; // background colour
var hlcolour="#a42c65"; // highlight colour
var speed=250; // speed colours change, 1 second = 1000

/****************************
* Phone-In Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var p_txt;
window.onload=function() { if (document.getElementById) {
var phoni;
var phone=document.getElementById("phonein");
p_txt=phone.firstChild.nodeValue;
while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]);
for (var i=0; i<p_txt.length; i++) {
phoni=document.createElement("div");
phoni.style.display="inline";
phoni.setAttribute("id", "phon"+i);
phoni.appendChild(document.createTextNode(p_txt.charAt(i)));
phone.appendChild(phoni);
}
phone_me((p_txt=p_txt.length)-1);
}}

function phone_me(p_cnt) {
var p_tmp=document.getElementById("phon"+p_cnt);
p_tmp.style.fontWeight="normal";
if (document.all) p_tmp.style.filter='';
p_tmp.style.backgroundColor=bgcolour;
p_cnt=++p_cnt%p_txt;
p_tmp=document.getElementById("phon"+p_cnt);
if (p_tmp.firstChild.nodeValue!=" ") {
p_tmp.style.fontWeight="bold";
if (document.all) p_tmp.style.filter="GLOW(strength=3, color=#"+bgcolour+")";
p_tmp.style.backgroundColor=hlcolour;
}
setTimeout("phone_me("+p_cnt+")", speed);
}
// ]]>
</script>

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

<script type="text/javascript">

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:fixed;visibility:visible;left:0px;top:0px;width:1px;height:1px;pointer-events:none;z-index:1000"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""

}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[0]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse

if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)

</script><div id="trailimageid" style="position: fixed; visibility: visible; left: 476px; top: 780px; width: 1px; height: 1px; pointer-events: none; z-index: 1000;"> </div>