diff --git a/Art/Color_Square_1Dragon/Index.html b/Art/Color_Square_1Dragon/Index.html
new file mode 100644
index 000000000..299d3f132
--- /dev/null
+++ b/Art/Color_Square_1Dragon/Index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Falling Square Animation
+
+
+
+
+
+
diff --git a/Art/Color_Square_1Dragon/colorSquare.gif b/Art/Color_Square_1Dragon/colorSquare.gif
new file mode 100644
index 000000000..53e9b7708
Binary files /dev/null and b/Art/Color_Square_1Dragon/colorSquare.gif differ
diff --git a/Art/Color_Square_1Dragon/styles.css b/Art/Color_Square_1Dragon/styles.css
new file mode 100644
index 000000000..970375f31
--- /dev/null
+++ b/Art/Color_Square_1Dragon/styles.css
@@ -0,0 +1,104 @@
+html,
+body {
+ background-color: #404456;
+}
+
+#loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -2.7em;
+ margin-left: -2.7em;
+ width: 5.4em;
+ height: 5.4em;
+ background-color: #404456;
+}
+
+#hill {
+ position: absolute;
+ width: 7.1em;
+ height: 7.1em;
+ top: 1.7em;
+ left: 1.7em;
+ background-color: transparent;
+ border-left: 0.25em solid whitesmoke;
+ transform: rotate(45deg);
+}
+
+#hill:after {
+ content: "";
+ position: absolute;
+ width: 7.1em;
+ height: 7.1em;
+ left: 0;
+ background-color: #404456;
+}
+
+#box {
+ position: absolute;
+ left: 0;
+ bottom: -0.1em;
+ width: 1em;
+ height: 1em;
+ background-color: transparent;
+ border: 0.25em solid whitesmoke;
+ border-radius: 15%;
+ transform: translate(0, -1em) rotate(-45deg);
+ animation: push 2.5s cubic-bezier(0.79, 0, 0.47, 0.97) infinite,
+ changeColor 2.5s linear infinite;
+}
+
+@keyframes push {
+ 0% {
+ transform: translate(0, -1em) rotate(-45deg);
+ }
+ 5% {
+ transform: translate(0, -1em) rotate(-50deg);
+ }
+ 20% {
+ transform: translate(1em, -2em) rotate(47deg);
+ }
+ 25% {
+ transform: translate(1em, -2em) rotate(45deg);
+ }
+ 30% {
+ transform: translate(1em, -2em) rotate(40deg);
+ }
+ 45% {
+ transform: translate(2em, -3em) rotate(137deg);
+ }
+ 50% {
+ transform: translate(2em, -3em) rotate(135deg);
+ }
+ 55% {
+ transform: translate(2em, -3em) rotate(130deg);
+ }
+ 70% {
+ transform: translate(3em, -4em) rotate(217deg);
+ }
+ 75% {
+ transform: translate(3em, -4em) rotate(220deg);
+ }
+ 100% {
+ transform: translate(0, -1em) rotate(-225deg);
+ }
+}
+
+@keyframes changeColor {
+ 0%,
+ 100% {
+ border-color: blue;
+ }
+ 20% {
+ border-color: red;
+ }
+ 40% {
+ border-color: yellow;
+ }
+ 60% {
+ border-color: green;
+ }
+ 80% {
+ border-color: orange;
+ }
+}
diff --git a/include.js b/include.js
index 06db1fd8c..a39f4ce88 100644
--- a/include.js
+++ b/include.js
@@ -2889,25 +2889,33 @@ let cards = [
author: 'Shazeen Thowfeek',
githubLink: 'https://github.com/shazeen-1990'
},
- {
+ {
artName: 'Moving Clouds Animation',
pageLink: './Art/artursniegowski/index.html',
imageLink: './Art/artursniegowski/moving_clouds.gif',
author: 'Artur Sniegowski',
githubLink: 'https://github.com/artursniegowski'
},
- {
+ {
artName: 'First Animation',
pageLink: './Art/Kalliran/index.html',
imageLink: './Art/Kalliran/Animation-Nation.gif',
author: 'Kalliran',
githubLink: 'https://github.com/Kalliran'
- },{
+ },
+ {
artName: 'Matrix',
pageLink: './Art/hamzakadd/index.html',
imageLink: './Art/hamzakadd/matrix.gif',
author: 'Hamza',
githubLink: 'https://github.com/hamzakadd'
+ },
+ {
+ artName: 'Color_Square_1Dragon',
+ pageLink: './Art/Color_Square_1Dragon /index.html',
+ imageLink: './Art/Color_Square_1Dragon/colorSquare.gif',
+ author: 'Dragon',
+ githubLink: 'https://github.com/OneDragon1'
}
];