<body>
	<div class="container">
<header id="main-header">
	<h3 class="text">weptim the <span class="dev"></span></h3>
		</header>
	</div>
	* {
			margin:0;
			padding:0;
			box-sizing:border-box;
		}
		#main-header {
			background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://images.pexels.com/photos/2412361/pexels-photo-2412361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
			background-position: center;
			background-size: cover;
			height: 100vh;
			width:100%;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.text {
			font-size:50px;
			color: #fff;
			text-transform:uppercase;
		}
		.dev {
			background:yellow;
			color:#111;
			
		}
var i = 0;
	var txt = "developer";
		var time = 200;
		function runEvent(){
		if(i < txt.length){
			document.querySelector('.dev').innerHTML +=  txt.charAt(i);
			i++;		
		}
			setTimeout('runEvent()', time);
		}
		window.onload = runEvent;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.