cr seomplayer

READ BEFORE CODING:
1) credit properly I do not own any of the designs
2) if the positioning isn't right on your end then adjust it
3) always check your typos. your code is always supposed to be in between <style> and </style> if pro standard

___________________________________________________________

-- FONTS --
@font-face {
font-family: roman;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}

@font-face {
font-family: pixel;
src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}

@font-face {
font-family: bohemian;
src: url(https://dl.dropbox.com/s/h1893p3fu9ecwsx/Bohemian%20Soul.otf);
}

-- MAIN CONTAINER --
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
border-radius: 10px;
height: 15em;

-- PROFILE TEXT --
font-family: roman;
text-shadow: -1px 0 #ababab, 0 1px #ababab, 1px 0 #ababab, 0 -1px #ababab, 0 0;
background: radial-gradient(#fff 5%, #E3E9FF 65%);
border: 1px dotted #B5B5B5;
border-radius: 100% 100% 0 0;
padding-bottom: 5px;
z-index: 111;
position: absolute;
bottom: -0.2em;
right: 0.3em;
width: 7em;

MOBILE:
width: 7em;
right: .5em;

-- MY SITE CONTAINER --
background: radial-gradient(circle, #FFF 9%, #FFFCED 100%);
border-radius: 1px 1px 100px 100px;
filter: drop-shadow(0px 0px 3px #ddd);
width: 13em;
height: 2.5em;
border: 1px dotted #B0B0B0;
position: absolute;
z-index: 999;
left: -7.7em;
bottom: 6.1em;
transform: rotate(-11rad);
padding: 0px;

-- MY SITE TEXT --
font-family: roman;
text-shadow: -1px 0 #ababab, 0 1px #ababab, 1px 0 #ababab, 0 -1px #ababab, 0 0;
transform: rotate(22rad);

-- FLOATING CONTAINER --
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
border: 1.6px dotted #636363;
filter: drop-shadow(0px 0px 3px #ddd);
border-radius: 10px;
height: 16em;
width: 9em;
position: absolute;
bottom: 0.2em;
left: 0.4em;
z-index: 999;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

-- FLOATING CONTAINER TEXT --
font-family: pixel;
border-radius: 4px;
background: #FFFFFF;
padding: 6px;
border: 2px dotted #B5B5B5;

BOLD TEXT:
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999, 0 0;

-- ICONS CONTAINER --
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
border: 0.1px dotted #aaa;
filter: drop-shadow(0px 0px 3px #ddd);
border-radius: 4px;
height: 11em;
width: 14.5em;
position: absolute;
bottom: 2.8em;
right: -2em;

-- ICONS --
box-shadow: inset 0 0 6px lightgrey;
border: 1px solid #BFBFBF;

-- MUSIC PLAYER CONTAINER --
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
border: 0.1px dotted #aaa;
filter: drop-shadow(0px 0px 3px #ddd);
border-radius: 4px;
height: 2em;
width: 11.5em;
position: absolute;
bottom: 0.5em;
right: 1em;

-- SCROLLBOX --
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
border: 0.1px dotted #aaa;
filter: drop-shadow(0px 0px 3px #ddd);
border-radius: 0 12px 12px 0;
height: 10em;
width: 11em;
position: absolute;
bottom: 3.3em;
right: 1.4em;
z-index: 9;
overflow: auto;

-- BUTTONS --
position: absolute;
right: 6em;
border-radius: 0 0 20px 20px;
z-index: 99;
bottom: 3.4em;
border: 0.1px dotted #ababab;
text-shadow: 0px 0px 2px #8a8a8a;
font-family: bohemian;
box-shadow: inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;