Hello everyone, I'm new to this and would greatly appreciate your assistance!
This is the look I am aiming for
How it should appear when the window size decreases
Below is the CSS code that I utilized:
.typeit {
overflow-x: auto; /* Allowing horizontal scrolling */
font-size: calc(45px + 2vw); /* Starting with a smaller base size and scaling responsively */
font-weight: bold;
padding: 2vh 4vw;
border-right: 2px solid #50bdb8;
white-space: nowrap; /* Keeping text on a single line */
text-align: center;
margin: 0 auto;
max-width: 90%;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; }
}
Here is the code block I added to my webpage:
<div class="typeit"> Growing Your Audience Begins Here.</div>
I attempted to make it responsive by using font-size: calc(45px + 2vw); however, it doesn't seem to be working as intended.