Life Advice :)

HTML
<h1>BE <span id="typed" class="typed"></span></h1>
CSS
html { height: 100%; } body { background: #2980b9 url('https://goo.gl/0AjPm8') repeat 0 0; animation: 10s linear 0s normal none infinite animate; font-family: 'Oswald', sans-serif; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; } h1 { color: #ffffff; font-size: 8vw; letter-spacing: 6px; } .typed { border-bottom: 2px solid #ffffff; } .typed-cursor { opacity: 1; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes animate { from {background-position:0 0;} to {background-position: 500px 0;} }
JAVASCRIPT
$(function() { $("#typed").typed({ strings: ["HAPPY","BRIGHT","YOU"], typeSpeed: 200, backDelay: 1500, loop: true }); });
Expand for more options Login