djsubstance · June 9, 2022 03:27
diff --git a/css-typing-effect.markdown b/css-typing-effect.markdown
diff --git a/index.html b/index.html
 <div class="wrapper">
    <div class="typing-demo">
      This is a typing demo.
    </div>
 </div>
diff --git a/scripts b/scripts
 <script src="https://codepen.io/denic/pen/YzyPzKG"></script>
diff --git a/style.css b/style.css
 .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
  }
 }
diff --git a/styles b/styles
 <link href="https://codepen.io/denic/pen/YzyPzKG" rel="stylesheet" />
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
	.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
	}
	}
	<link href="https://codepen.io/denic/pen/YzyPzKG" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />