Question

PLEASE HELP ME TO DO IT.....​

Answer 1

$<div class="loader"> <div class="load-text"> <div class="loaded-text">H</div> <div class="loading-text">ello</div> </div> </div> <main> <p>Hello <a href="//www.jemimaabu.com" target="_blank"></a> IAMSOCOOL IS SAD :( </main> <style> ​@import url('//fonts.googleapis.com/css?family=Staatliches'); body { margin: 0; font-family: 'Staatliches', cursive; } .loader { position: fixed; left: 0; top: 0; background: white; width: 100%; height: 150px; animation: backgroundChange .5s linear 3s forwards, fadeOut .5s linear 5s forwards } .load-text { left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; font-size: 10vmax; width: fit-content; display: flex; animation: colorChange .5s linear 3s forwards; } .loaded-text { transform: scale(1.5); animation: scaleText .5s linear .5s forwards; } .loading-text { width: 0; overflow: hidden; animation: expand .5s linear 1.5s forwards; } main { padding: 1em; box-sizing: border-box; background-color: black; color: white; min-height: 100vh; font-family: 'Open Sans', sans-serif; } @keyframes scaleText { from {transform: scale(1.5)} to {transform: scale(1)} } @keyframes expand { from {width: 0;} to {width: 17vmax;} } @keyframes backgroundChange { from {background-color: white} to {background-color: black} } @keyframes colorChange { from {color: black} to {color: white} } @keyframes fadeOut { from {opacity: 1} to { opacity: 0; z-index: -1; } } </style>$