adding my new art (#2295)

* adding my animation

* create circle animation

* add immage

* Update include.js

I'm very sorry for my inattentiveness :/

* update fokredd

* complex animation

* add image

* test

* Update square.html

* Update square.css

---------

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>

Art/K-Wiczling/complex.css

@@ -0,0 +1,46 @@
+.inner {
+  background-color: red;
+  width: 100px;
+  height: 100px;
+  border-radius: 44%;
+  animation: box 15s infinite;
+}
+.box{
+  animation: rot 2s infinite;
+  background-color: black;
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  margin-top: 30vh;
+
+}
+#inner1{
+  background-color: red;
+
+}
+#inner2{
+  background-color: greenyellow;
+
+}
+#inner3{
+  background-color: goldenrod;
+
+}
+@keyframes box {
+    0%  {
+          background-color: red;
+        }
+
+    100%  {
+            background-color: green;
+          }
+ }
+ @keyframes rot {
+  0%,
+  100% {
+    transform: rotate(360deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+}

Art/K-Wiczling/complex.html

@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="complex.css" />
+
+<div class="animation-wrapper">
+<div class="box">
+    <div class="inner" id="inner1">
+
+    </div>
+    <div class="inner" id="inner2">
+
+    </div>
+    <div class="inner" id="inner3">
+
+    </div>
+</div>
+</div>

Art/K-Wiczling/square.css

@@ -12,7 +12,7 @@
   100% {
     transform: scale(1);
   }
-
+  
   50% {
     transform: scale(1.5);
   }

Art/K-Wiczling/square.html

@@ -1,5 +1,8 @@
 <link rel="stylesheet" href="square.css" />
 
 <div class="animation-wrapper">
-  <div class="box1"></div>
+
+<div class="box1">
+</div>
+
 </div>

include.js

@@ -2179,6 +2179,13 @@ let cards = [
     author: 'K-Wiczling',
     githubLink: 'https://github.com/K-Wiczling'
   },
+  {
+    artName: 'Complex',
+    pageLink: './Art/K-Wiczling/complex.html',
+    imageLink: './Art/K-Wiczling/complex.png',
+    author: 'K-Wiczling',
+    githubLink: 'https://github.com/K-Wiczling'
+  },
   {
     artName: 'Rolling Square Loader',
     pageLink: './Art/psykat1611/index.html',