ikisschris crd codes

<style>

#image01 { /*circle pic*/
position: absolute;
left: 16.5em;
bottom: -4em;
z-index: 999;
}

#container01 { /* big white box */
border: 1px solid #808080;
border-radius: .375em;
height: 20.5em;
background: white;
}

#container02 { /* upper left box */
border: 1px solid #808080;
border-radius: 0px 0px 20px 20px;
background: rgb(0,0,0);
background: radial-gradient(circle, rgb(0,0,0) 0%, rgba(255,255,255,1) 100%);
width: 14em;
position: absolute;
bottom: 19.3em;
left: .5em;
}

#container04, #container05, #container06 { /* lower left boxes */
border: 1px solid #808080;
border-radius: 0px 20px 20px 20px;
background: rgb(0,0,0);
background: radial-gradient(circle, rgb(0,0,0) 0%, rgba(255,255,255,1) 100%);
width: 14em;
position: absolute;
left: .5em;
bottom: 6em;
height: 13em;
}

#container03 { /* lower right box */
border: 1px solid #808080;
border-radius: 20px 0px 20px 20px;
background: rgb(0,0,0);
background: radial-gradient(circle, rgb(0,0,0) 0%, rgba(255,255,255,1) 100%);
width: 9.5em;
height: 13em;
position: absolute;
bottom: 6em;
right: .5em;
}

#text01 { /* bar beside icon */
background: #000;
width: 7em;
color: transparent;
position: relative;
bottom: -1em;
left: 11.5em;
}

#text07, #text09, #text11, #text13, #text15 { /* the info parts */
background: white;
border: 1px solid #808080;
border-radius: 0px 10px 10px 10px;
padding: 5px;
}

#text04 { /* the blogger text */
color: white;
font-family:'kosmos';
z-index: 999;
border-radius: 50%;
background: white;
border: 1px solid black;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgb(0,0,0) 100%);
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
position: relative;
bottom: 0.7em;
}

#text05 { /* the search by tags */
position: relative;
bottom: 1em;
}

#text02 mark { /* blogger text */
color: white;
-webkit-text-stroke: 1px #000;
text-stroke: .3px #000;
font-family:'kosmos';
background: transparent;
font-size: 15px;
}

#text06, #text08, #text10, #text12, #text14 mark { /* section names */
background: #000;
color: white;
font-family:'money';
border: 1px solid black;
border-radius: 50%;
}

#container04, #container05, #container06 { /* animation u can change it in animista */
-webkit-animation: slide-in-elliptic-right-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-right-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2022-5-29 2:14:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-elliptic-right-fwd
* ----------------------------------------
*/
@-webkit-keyframes slide-in-elliptic-right-fwd {
0% {
-webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
transform: translateX(800px) rotateY(-30deg) scale(0);
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: -1800px 50%;
transform-origin: -1800px 50%;
opacity: 1;
}
}
@keyframes slide-in-elliptic-right-fwd {
0% {
-webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
transform: translateX(800px) rotateY(-30deg) scale(0);
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: -1800px 50%;
transform-origin: -1800px 50%;
opacity: 1;
}
}

</style>