diff --git a/Art/webdesign4ever/animation.gif b/Art/webdesign4ever/animation.gif
new file mode 100644
index 00000000..768c2195
Binary files /dev/null and b/Art/webdesign4ever/animation.gif differ
diff --git a/Art/webdesign4ever/index.html b/Art/webdesign4ever/index.html
new file mode 100644
index 00000000..908f4656
--- /dev/null
+++ b/Art/webdesign4ever/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
diff --git a/Art/webdesign4ever/style.css b/Art/webdesign4ever/style.css
new file mode 100644
index 00000000..4cf599ad
--- /dev/null
+++ b/Art/webdesign4ever/style.css
@@ -0,0 +1,78 @@
+#ts3 {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ position: relative;
+ animation-name: example2;
+ animation-duration: 4s;
+ animation-delay: 1s;
+ animation-direction: alternate-reverse;
+ animation-iteration-count: infinite;
+}
+
+@keyframes example2 {
+ 0% {
+ background-color: red;
+ left: 0%;
+ top: 0px;
+ transform: rotate(360deg);
+ }
+
+ 25% {
+ background-color: yellow;
+ left: 90%;
+ top: 0px;
+ transform: rotate(270deg);
+ }
+
+ 50% {
+ background-color: black;
+ left: 90%;
+ top: 450px;
+ transform: rotate(180deg);
+ }
+
+ 75% {
+ background-color: aquamarine;
+ top: 450px;
+ left: 0px;
+ transform: rotate(90deg);
+ }
+
+ 100% {
+ background-color: red;
+ left: 0%;
+ top: 0px;
+ }
+}
+
+body {
+ animation-name: example;
+ animation-duration: 4s;
+ animation-delay: 1s;
+ background-color: blueviolet;
+ animation-direction: alternate-reverse;
+ animation-iteration-count: infinite;
+}
+
+@keyframes example {
+ 0% {
+ background-color: blueviolet;
+ }
+
+ 25% {
+ background-color: aquamarine;
+ }
+
+ 50% {
+ background-color: coral;
+ }
+
+ 75% {
+ background-color: gold;
+ }
+
+ 100% {
+ background-color: lightblue;
+ }
+}
diff --git a/include.js b/include.js
index a0f9904e..b3e48fa1 100644
--- a/include.js
+++ b/include.js
@@ -3475,6 +3475,13 @@ let cards = [
imageLink: './Art/Anrich/Portball.gif',
author: 'Anrich',
githubLink: 'https://github.com/AnrichV'
+ },
+ {
+ artName: 'webdesign4ever-animation',
+ pageLink: './Art/webdesign4ever/index.html',
+ imageLink: './Art/webdesign4ever/animation.gif',
+ author: 'webdesign4ever',
+ githubLink: 'https://github.com/webdesign4ever'
}
];