<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.typewriter h1 {
font-family: monospace;/* Web-safe typewriter-like font */
overflow: hidden;/* Ensures the content is not revealed until the animation */
border-right: .17em solid pink;/* The typewriter cursor */
white-space: nowrap;/* Keeps the content on a single line */
margin: 0 auto;/* Gives that scrolling effect as the typing happens */
letter-spacing: .17em;/* Adjust as needed */
animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blinking-cursor {
from,
to {
border-color: transparent
}
50% {
border-color: pink;
}
}
</style>
</head>
<body>