<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header id="home" class="vh-100"> <div class="overlay h-100"> <div class=" container h-100 d-flex align-items-center justify-content-center " > <div class="content text-white text-center"> <h6 class="fw-bolder mb-3">I am Morgan Freeman</h6> <p class="fs-1">f</p> </div> </div> </div> </header>

#home { background-image: url(../img/hero-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } header .overlay { position: relative; } header .overlay::before { content: ""; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100vh; position: absolute; bottom: 0; top: 0; } header .content.text-white { z-index: 999; } header h6 { font-size: 4.5rem; } .content.text-white.text-center p::after { content: "|"; animation-name: typing; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 1s; } @keyframes typing { 0% { content: "|"; } 10% { content: " re |"; } 20% { content: " ree |"; } 30% { content: "reel |"; } 40% { content: "reela |"; } 45% { content: "reelan |"; } 50% { content: "reelanc |"; } 55% { content: "reelance |"; } 60% { content: " reelancer |"; } 65% { content: "dev|"; } 70% { content: "devl |"; } 75% { content: "devlo|"; } 80% { content: "devlope |"; } 100% { content: "devloper |"; } }