방탄소년단 carrd codes (pro standard ver.)

notes: pls cr biogger99 when remaking this carrd

---- container border ----
<style>
#container01 {-webkit-filter: drop-shadow(0px 0px 2px #B5E2F5);
border: 2px solid white;
border-radius: 10px 10px 10px 10px;
}
</style>

---- alba font ----
<style>
@font-face {
font-family: ALBA;
src: url(https://dl.dropbox.com/s/0l4qryezh7ac9ls/ALBA____.TTF);
</style>

---- about & guidelines texts ----
<style>
#text01 {
font-family: ALBA;
-webkit-text-stroke: 0.5px #A6DFF7;
-webkit-filter: drop-shadow(0px 0px 1px #D9F4FF9C);
background-image: radial-gradient( #D9F4FF 20%, #D9F4FF9C 20% , transparent 60%);
}
#text02 {
font-family: ALBA;
-webkit-text-stroke: 0.5px #A6DFF7;
-webkit-filter: drop-shadow(0px 0px 1px #D9F4FF9C);
background-image: radial-gradient( #D9F4FF 20%, #D9F4FF9C 20% , transparent 60%);
}
</style>

---- container 2 white background ----
<style>
#container02 {
background: rgba(255, 255, 255, 0.9);
border-radius: 10px 10px 10px 10px;
height:12.5em;
width: 20em;
margin-bottom: 1.1em;
position: absolute;
bottom: 3.1em;
z-index:500;
}
</style>

---- for ⊠ in cont 2 ----
<style>
#text03 {
font-family: ALBA;
font-size: 1.5em;
-webkit-text-stroke: 0.5px #BEE7F7;
-webkit-filter: drop-shadow(0px 0px 1px #BEE7F7);
background: none;
position: absolute;
left: -0.7em;
top: 0.6em;
z-index: 1;
}
</style>

---- about & more header texts ----
<style>
#text04 {
font-family: ALBA;
font-size: 1.5em;
-webkit-text-stroke: 0.5px #B6D6E3;
-webkit-filter: drop-shadow(0px 0px 1px #B6D6E3);
background: none;
}
#text06 {
font-family: ALBA;
font-size: 1.5em;
-webkit-text-stroke: 0.5px #B6D6E3;
-webkit-filter: drop-shadow(0px 0px 1px #B6D6E3);
background: none;
</style>

 ---- color bg text in cont 2  ----
<style>
#text05 {
width: 100%;
margin: auto;
padding: .5em;
background: #DEF5FF;
box-shadow: 0 0 0.3em 0.3em #DEF5FF;
border-radius: 5px;
}
#text07 {
width: 100%;
margin: auto;
padding: .5em;
background: #DEF5FF;
box-shadow: 0 0 0.3em 0.3em #DEF5FF;
border-radius: 5px;
overflow: auto;
height: 4.5em;
}
</style>

 ---- container 3 white background ----
<style>
#container03 {
background: rgba(255, 255, 255, 0.9);
border-radius: 10px 10px 10px 10px;
height:12.5em;
width: 20em;
margin-bottom: 1.1em;
position: absolute;
bottom: 3.1em;
z-index:500;
}
</style>

---- for ⊠ in cont 3 ----
<style>
#text08 {
font-family: ALBA;
font-size: 1.5em;
-webkit-text-stroke: 0.5px #FAB9F1;
-webkit-filter: drop-shadow(0px 0px 1px #FAB9F1);
background: none;
position: absolute;
left: -0.7em;
top: 0.4em;
z-index: 1;
}
</style>

--- things to know header text ----
<style>
#text09 {
font-family: ALBA;
font-size: 1.5em;
-webkit-text-stroke: 0.5px #B6D6E3;
-webkit-filter: drop-shadow(0px 0px 1px #B6D6E3);
background: none;
position:absolute;
left: 0.5em;
top: 0.6em;
z-index: 100;
}
</style>

--- color bg text 2 ----
<style>
#text10 {
width: 100%;
margin: auto;
padding: .5em;
background: #DEF5FF;
box-shadow: 0 0 0.3em 0.3em #DEF5FF;
border-radius: 5px;
overflow: auto;
height: 10.7em;
position: absolute:
top: 50px;
z-index: 1;
}
</style>

--- background ----
<script type="text/javascript">
// <![CDATA[
var colours=new Array("#D9F4FF", "#8EDAFA", "#D9F4FF", "#D9F4FF", "#ADE7FF"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time
var over_or_under="over"; // set to "over" for bubbles to always be on top, or "under" to allow them to float behind other objects

/****************************
* JavaScript Bubble Bath *
*(c)2010-13 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/

var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
var boddie;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(bubba);

function bubba() { if (document.getElementById) {
var i, rats, div;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.overflow="visible";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.backgroundColor="transparent";
boddie.style.zIndex="0";
document.body.appendChild(boddie);
set_width();
for (i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
if (ie_version && ie_version<10) div.filter="alpha(opacity=50)";
else div.opacity=0.5;

boddie.appendChild(rats);
bubb[i]=rats.style;
bubb[i].zIndex=(over_or_under=="over")?"1001":"0";
}
bubble();
}}

function bubble() {
var c;
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
bubb[c].top=(bubby[c]=shigh)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>0 && bubbx[i]>0 && bubbx[i]<swide) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

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)=='number' && 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;
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
div.style.backgroundColor="transparent";
return (div);
}
// ]]>
</script>