<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>Typewriter effect by Atul Prajapati</title>
<!-- Typed JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div class="header-area">
<h2>I'm a <span class="animate"></span></h2>
</div>
</body>
</html>
body{
background-image: url(https://images.pexels.com/photos/573238/pexels-photo-573238.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
-webkit-background-size:cover;
background-size:cover;
background-position: top center;
background-repeat:no-repeat;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.header-area h2
{
color: #fff;
font-size: 3.2rem;
font-family: "montserrat", sans-serif;
}
.header-area h2 span
{
color: yellow;
}
var typed = new Typed('.animate', {
strings: [
"Developer",
"Photographer",
"Marketer"
],
typeSpeed: 80,
backSpeed: 40,
// startDelay: 120,
loop: true
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.