diff --git a/bihar-culture-landing/style.css b/bihar-culture-landing/style.css index 64124bb..43036de 100644 --- a/bihar-culture-landing/style.css +++ b/bihar-culture-landing/style.css @@ -78,7 +78,16 @@ header::before { background: url('data:image/svg+xml,'); opacity: 0.3; } +@keyframes typing { + from { width: 0 } + to { width: 100% } +} +/* The typewriter cursor effect */ +@keyframes blink-caret { + from, to { border-color: transparent } + 50% { border-color: orange; } +} .header-content { position: relative; z-index: 2; @@ -87,19 +96,26 @@ header::before { } .header-content h1 { - font-size: clamp(2.5rem, 6vw, 4.5rem); - font-weight: 700; - margin: 0 auto; - - /*margin-bottom: 0.5rem;*/ - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + overflow: hidden; + border-right: .15em solid orange; + white-space: nowrap; + margin: 0 auto; + letter-spacing: .15em; + animation: + typing 3.5s steps(40, end), + blink-caret .75s step-end infinite; + } .header-content h2 { - font-size: clamp(1.5rem, 3vw, 2.5rem); - font-weight: 400; - margin-bottom: 1rem; - opacity: 0.9; + overflow: hidden; + border-right: .15em solid orange; + white-space: nowrap; + margin: 0 auto; + letter-spacing: .15em; + animation: + typing 3.5s steps(40, end), + blink-caret .75s step-end infinite; } .tagline {