<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #71718c;
color: #ffffff;
font-size: 100px;
}
h1 {
font-size: 30px;
}
.text-1 {
animation: text1;
}
.text-2 {
animation: text2;
}
.text-1,
.text-2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text-1::after,
.text-2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;