simple pro standard carrd

-- CSS CODES --
1) set it to hidden head

<style>

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
src: url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
font-family: creamy;
}

@font-face {
font-family:'antre';
src: url(https://dl.dropbox.com/s/xaspbkonff6y9uf/antre.otf);
}

#container01 > .wrapper {
height: 15em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
}

#container02 > .wrapper {
height: 15em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
}

#container03 > .wrapper {
height: 15em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
}

#text01, #text04, #text07 {
font-family:'antre';
color: #d2dcc7;
filter: drop-shadow( 0 1px #a3adad) drop-shadow( 1px 0 #a3adad) drop-shadow( 0 -1px #a3adad) drop-shadow( -1px 0 #a3adad) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #a3adad);
}

#buttons01 li a {
font-family: creamy;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
border: 1px solid black;
}

#text02, #text05, #text08 {
height: 11em;
background: rgba(255,255,255,0.8);
border-radius: 10px;
padding: 10px;
font-family: windows;
overflow: auto;
}

#text02 mark, #text05 mark, #text08 mark {
background: #a3adad;
border: 1px solid black;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
font-family: creamy;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
border: 1px solid black;
}

#text03 mark, #text06 mark, #text09 mark {
background: white;
border: 1px solid black;
border-radius: 20px;
padding-left: 10px;
padding-right: 10px;
font-family: windows;
}

</style>

-- ANIMATIONS & POSITIONING --
1) set it to inline

<style>

#text01, #text04, #text07 {
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); }
}

#buttons01 {
position: absolute;
left: 4.5em;
bottom: -.25em;
}

#text03, #text06, #text09 {
animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
0%{ color: #000000; }
49%{ color: #000000; }
60%{ color: white; }
99%{ color:white; }
100%{ color: #000000; }
}

</style>