pink pro plus crd

*CSS STYLING CODES*

--- SMALL CONTAINER ---
width: 14em;
height: 7em;
z-index: 99;

--- TEXT ---
padding-top: 20px;
padding-left: 30px;

(mobile)
padding-top: 15px;
padding-left: 20px;

(Text: Highlight)
padding-left: 11em;

--- FLOATING IMAGE ---
filter: drop-shadow(0px 0px 10px #000);
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

--- FLOAT CODES ---
<style>
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}
</style>

*POSITIONING CODES*

(please remember that these positioning codes are made to fit my devices, it may look different for you so please adjust it to fit your device)

--- SMALL CONTAINER ---
position: absolute;
bottom: 13.5em;
left: 0.5em;

--- BEFORE YOU FOLLOW TEXT ---
top: 6em;

--- BYF INFO ---
top: 8em;

--- DO NOT FOLLOW IF TEXT ---
top: 6.5em;

--- DNFI INFO ---
top: 8.8em;

--- FLOATING IMAGE ---
position: relative;
left: 10px;

--- FAVES TEXT ---
position: absolute;
left: -2.8em;
bottom: -1.2em;

--- FAVES INFO ---
top: 0.5em;

--- DIVIDER IMAGE ---
position: relative;
top: 5px;

--- OTHER INFO ---
top: -0.5em;

--- BRATZ DOLL IMAGE ---
position: absolute;
bottom: -4em;
right: -2em;

--- MORE TEXT ---
position: relative;
right: 15px;

--- SERIES TEXT ---
right: 40px;

--- SERIES INFO ---
left: 5.5em;

--- WINX FLORA IMAGE ---
position: absolute;
bottom: -3em;
left: -6em;

(mobile)
left: -3.5em;