nini crd co codes

notes: please don’t forget to credit abracitos on whi for this carrd! everything goes into separate embeds

---- image ----
<style>
.pic {
position:relative;
z-index:1;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
}
</style>

<img class=pic src="https://i.imgur.com/qJcQuWl.jpg" alt="." style="width:100px;height:auto;">

---- scrollbox ----
<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=Mali:wght@500&display=swap" rel="stylesheet">
<style>
#scroll1 {
height: 90px;
width: 85%;
padding: 7px;
border-radius:9px;
font-size: 13px;
font-family: 'Mali', cursive;
overflow: auto;
background-color:#fff;
position:relative;
left:27px;
top:5px;
transition: width 1s, height 1s;
}
#cont:hover #scroll1 {
height: 190px;
width: 120%;
transform-origin: 50% 50%;
z-index: 8;
position:absolute;
left:-35px;
background-color: white;
top:-37px;
border:double 8px #C9ECFF;
}
</style>
<div id="cont">
<div id="overlay"> </div>
<div id="scroll1">
<strong> about me</strong> hii i’m <strong>name</strong> info info info info info info info info info info info
<p></p>
<strong>notes</strong> info info info info info info info info info info info
<br></br>
<strong>before you follow</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br></br>
<strong>dont follow if</strong> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info
<br></br>
<strong>kpop</strong> info info info info info info info info info info info info info info info info
</div>

---- credit ----
<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=Mali:wght@500&display=swap" rel="stylesheet">
<style>
#credit {
font-family: 'Mali', cursive;
color:#000;
position:relative;
top:5px;
}
</style>

<div id="credit"> cr to abracitos on whi!</div>

---- name ----
<style>
@font-face {
font-family: lovely script;
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}

#lovely {
font-family: lovely script;
font-size: 2.3em;
color: #C9ECFF;
text-shadow: -2px 0 #9DD1ED, 0 2px #9DD1ED, 1px 0 #9DD1ED, 0 -1px #9DD1ED, 0 0;
position: absolute;
top: -20px;
right: 90px;
}
</style>

<div id="lovely">name</div>

---- hearts blur bg ----
<script type="text/javascript">
// <![CDATA[
var colour="#C9ECFF"; // what colour are the blobs
var speed=50; // speed of animation, lower is faster
var blobs=20; // how many blobs are in the jar
var charc='♡'; // a blob - can be changed to charc='hello' or charc='*' for a different effect

/***************************\
* Blobs in a Jar Effect *
* (c)2012 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/

window.onload=fill_the_jar;
var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array();
var swide=800;
var shigh=600;
function fill_the_jar() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='0px';
dvs.top='0px';
dvs.width='1px';
dvs.height='1px';
document.body.appendChild(div);
set_width();
for (i=0; i<blobs; i++) {
add_blob(i);
jamjar(i);
}
}

function add_blob(ref) {
var dv, sy;
dv=document.createElement('div');
dv.appendChild(document.createTextNode(charc));
sy=dv.style;
sy.position='absolute';
sy.textAlign="center";
if (navigator.appName=="Microsoft Internet Explorer") {
sy.fontSize="10px";
sy.width="100px";
sy.height="100px";
sy.paddingTop="40px";
sy.color=colour;
}
else sy.color='rgba(0,0,0,0)';
ypos[ref]=Math.floor(shigh*Math.random());
dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
xpos[ref]=Math.floor(swide*Math.random());
dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
zpos[ref]=Math.random()*20;
dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
blob[ref]=dv;
div.appendChild(blob[ref]);
set_blob(ref);
}
function rejig(ref, xy) {
if (xy=='y') {
dx[ref]=(0.5+Math.random())*sign(dx[ref]);
dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
}
else {
dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
dy[ref]=(0.5+Math.random())*sign(dy[ref]);
}
}
function sign(a) {
if (a<0) return (-2);
else if (a>0) return (2);
else return (0);
}
function set_blob(ref) {
var sy;
sy=blob[ref].style;
sy.top=ypos[ref]+'px';
sy.left=xpos[ref]+'px';
if (navigator.appName=="Microsoft Internet Explorer") {
sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
sy.fontSize=30-zpos[ref]+"px";
}
else {
sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
sy.fontSize=40+zpos[ref]+'px';
}
}
function jamjar(ref) {
if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
ypos[ref]+=dy[ref];
if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
xpos[ref]+=dx[ref];
if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
zpos[ref]+=dz[ref];
set_blob(ref);
setTimeout("jamjar("+ref+")", speed);
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>