diff --git a/Art/arr199/index.html b/Art/arr199/index.html
new file mode 100644
index 000000000..a42fb2b67
--- /dev/null
+++ b/Art/arr199/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ Text Animation
+
+
+
+
+
+
+
+
diff --git a/Art/arr199/preview.gif b/Art/arr199/preview.gif
new file mode 100644
index 000000000..42aaa1bf3
Binary files /dev/null and b/Art/arr199/preview.gif differ
diff --git a/Art/arr199/styles.css b/Art/arr199/styles.css
new file mode 100644
index 000000000..25baf400b
--- /dev/null
+++ b/Art/arr199/styles.css
@@ -0,0 +1,105 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ background-color: black;
+ height: 100vh;
+ width: 100%;
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ display: flex;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+}
+
+div {
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ width: 700px;
+
+
+}
+
+h1 {
+ color: rgb(163, 155, 160);
+ margin-bottom: 200px;
+
+}
+
+/* CURSOR ANIMATION*/
+h1 span::after{
+ content: " ";
+ animation: cursor;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ padding-right: .1em;
+ color: white;
+
+}
+
+@keyframes cursor {
+
+ to { border-right: 2px solid rgb(216, 211, 211) ;opacity: .3; }
+}
+
+/* TYPING ANIMATION */
+
+h1 span::before{
+ content: "";
+ animation-name: type;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-delay: 1s;
+ text-shadow: 2px 2px 30px;
+ font-size: 40px;
+ letter-spacing: 8px;
+}
+
+@keyframes type {
+ 1% {content: "C";}
+ 3% {content: "CS";}
+ 5% {content: "CSS";}
+ 6% {content: "CSS ";}
+ 7% {content: "CSS I";}
+ 8% {content: "CSS IS "}
+ 9% {content: "CSS IS A"}
+ 10% {content: "CSS IS AW" ; color: rgb(67, 197, 153); }
+ 11% {content: "CSS IS AWE"}
+ 12% {content: "CSS IS AWES"}
+ 13% {content: "CSS IS AWESO"}
+ 14% {content: "CSS IS AWESOM"}
+ 15% {content: "CSS IS AWESOME"}
+ 34% {content: "CSS IS AWESOME"}
+ 35% {content: "CSS IS AWES";}
+ 36% {content: "CSS IS AW";}
+ 37% {content: "CSS IS ";}
+ 38% {content: "CSS IS G";}
+ 39% {content: "CSS IS GR";}
+ 40% {content: "CSS IS GRE"}
+ 42% {content: "CSS IS GREA"}
+ 43% {content: "CSS IS GREAT"}
+ 61% {content: "CSS IS GREAT" ; color: rgb(244, 251, 108);}
+ 62% {content: "CSS IS GRE"}
+ 63% {content: "CSS IS GR"}
+ 64% {content: "CSS IS "}
+ 65% {content: "CSS IS T"}
+ 66% {content: "CSS IS TH"}
+ 67% {content: "CSS IS THE"}
+ 68% {content: "CSS IS THE "}
+ 69% {content: "CSS IS THE B"}
+ 70% {content: "CSS IS THE BE"}
+ 71% {content: "CSS IS THE BES"}
+ 72% {content: "CSS IS THE BEST"}
+ 91% {content: "CSS IS THE BEST" ; color: rgb(85, 203, 56);}
+ 92% {content: "CSS IS THE BE"}
+ 93% {content: "CSS IS THE "}
+ 94% {content: "CSS IS TH"}
+ 95% {content: "CSS IS T"}
+ 96% {content: "CSS IS"}
+ 97% {content: "CSS I"}
+ 98% {content: "CSS"}
+ 98% {content: "C"}
+ 100% {content: "" ; color: rgb(85, 203, 56);}
+
+}
\ No newline at end of file
diff --git a/include.js b/include.js
index e87b31b97..448a0bf18 100644
--- a/include.js
+++ b/include.js
@@ -2935,6 +2935,13 @@ let cards = [
imageLink: './Art/Imaginario27/crazy-spinning-circles.gif',
author: 'Imaginario27',
githubLink: 'https://github.com/Imaginario27'
+ },
+ {
+ artName: 'Typing Animation',
+ pageLink: './Art/arr199/index.html',
+ imageLink: './Art/arr199/preview.gif',
+ author: 'Abiel',
+ githubLink: 'https://github.com/arr199'
}
];