shocking.ju.mp tutorial

<!--This the embed for codes embed you saw on my shocking.ju.mp crd tutorial on google docs-->

1. Place all of this in one embed cause all boxes are absolute positioned with 4 embeds, placing it in one embed will have to re-adjust the positioning (i noticed this when making this carrd!)

2. please credit ikisschriss for the layout and finderqirl for the pro standard tutorial.

3. If you have questions reach me out on @qaisenka on twt, @kkyazucrd on twt, mist.drr.ac chatbox.


<style>

#image01 { /*circle pic*/
position: absolute;
left: 16.5em;
bottom: -3em;
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(141,169,220);
background: radial-gradient(circle, rgba(141,169,220,1) 0%, rgba(255,255,255,1) 100%);
width: 14em;
position: absolute;
bottom: 20.3em;
left: .5em;
}

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

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

#text01 { /* bar beside icon */
background: #8DA9DC;
width: 7em;
color: transparent;
position: relative;
left: 11.5em;
}

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

#text08 { /* 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%, rgba(141,169,220,1) 100%);
-webkit-text-stroke: 1px #393551;
text-stroke: 1px #393551;
position: relative;
bottom: 0.7em;
}

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

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

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

#container03, #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>