Merge pull request #27 from ananyapillai72/patch-2

Create MyStyle.css

MyStyle.css

@@ -0,0 +1,68 @@
+body{
+    margin: 0; 
+    width: 100vw; 
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+}
+
+.container{
+    perspective: 200px;
+    transform: preserve-3d;
+}
+.box{
+    --size: 12vmin;
+    width: var(--size); 
+    height: var(--size); 
+    background-color: hsla(170, 50%, 50%, 0.3);
+    transform: rotateZ(30deg) skew(-35deg);
+    position: relative;
+    animation: animate 800ms infinite ease-in-out both alternate;
+}
+.box:nth-of-type(1){
+    animation-delay: 0.1s;
+}
+.box:nth-of-type(2){
+    animation-delay: 0.2s;
+}
+.box:nth-of-type(3){
+    animation-delay: 0.3s;
+}
+.box:nth-of-type(4){
+    animation-delay: 0.4s;
+}
+
+.box::after, .box::before{
+    content: "";
+    width: inherit;
+    height: 5px;
+    position: absolute;
+    left: 0; 
+    bottom: 0; 
+}
+.box::before{
+    transform-origin: left bottom;
+    background-color: hsla(170, 50%, 50%, 0.7);
+    transform: translateX(var(--size)) rotateZ(180deg) skew(45deg);
+}
+.box::after{
+    background-color: hsla(170, 50%, 50%, 0.5);
+    transform-origin: right bottom;
+    transform: translateX(0) rotateZ(90deg) skew(-45deg);
+}
+
+/* bring them all togehter */
+.box + .box{
+    top: 0;
+    position: absolute;
+    transform: translateY(0) rotateZ(30deg) skew(-35deg);
+}
+
+@keyframes animate{
+    from{
+        transform: translateY(0) rotateZ(30deg) skew(-35deg);
+    }
+    to{
+        transform: translateY(calc(-1.2 * var(--size))) rotateZ(30deg) skew(-35deg);
+    }
+}