Merge pull request #4 from MamataAgrawal/contribution

Added New Project: CSS Typewriter

Author: hridaya423

CREDITS.md

@@ -4,4 +4,5 @@
  <li>CSS Fancy Buttons: Brad Hussey</li>
  <li>Vampire: Alvaro Montoro</li>
  <li>Reptillian Eye: Josetxu</li>
+ <li>CSS Typewriter: Marko</li>
 </ol>

CSS Typewriter/index.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="styles.css" />
+<div class="wrapper">
+    <div class="typing-demo">
+      This is a typing demo.
+    </div>
+</div>

CSS Typewriter/styles.css

@@ -0,0 +1,28 @@
+.wrapper {
+  height: 100vh;
+  /*This part is important for centering*/
+  display: grid;
+  place-items: center;
+}
+
+.typing-demo {
+  width: 22ch;
+  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 3px solid;
+  font-family: monospace;
+  font-size: 2em;
+}
+
+@keyframes typing {
+  from {
+    width: 0
+  }
+}
+    
+@keyframes blink {
+  50% {
+    border-color: transparent
+  }
+}

README.md

@@ -5,4 +5,5 @@
 <li>CSS 3 Fancy Buttons</li>
 <li>Vampire with CSS</li>
 <li>Reptillian Eye</li>
+<li>CSS Typewriter</li>
 </ol>