Hello! I'm a 

A free Carrd plugin template that shows a typewriter text animation.

Hello! I'm a 
Hey! You're a 

TUTORIAL FOR EMBEDDING 2 TYPEWRITER TEXT EMBEDS

In the 2nd embed, edit these:1. Find this HTML:
<div id="headline">
Hello! I'm a&nbsp;<span class="typewritertext"></span>
</div>
Change the id and class:<div id="headline2">
Hello! I'm a&nbsp;<span class="typewritertext2"></span>
</div>2. Scroll down and find this CSS code:
#headline {
font-size: 9vmin;
color: #FFFFFF;
...
Change the #headline:
#headline2 {
font-size: 9vmin;
color: #FFFFFF;
...
3. Find this CSS code:
@keyframes typingEffect {
0.0000%, 27.3488% { content: ""; }...
Change typeingEffect to typingEffect2
@keyframes typingEffect2 {
0.0000%, 27.3488% { content: ""; }...
4. Then for the keyframes, since you're using different words (with different character length), you got to adjust the %s accordingly. Warning: Might be painstakingly work-
0.0000%, 27.3488% { content: ""; }
1.1395%, 26.2093% { content: "d"; }
2.2791%, 25.0698% { content: "de"; }
3.4186%, 23.9302% { content: "dev"; }
4.5581%, 22.7907% { content: "deve"; }
5.6977%, 21.6512% { content: "devel"; }
...
5. Find this CSS code:
.typewritertext::before {
content: "";
animation: typingEffect 13.5s infinite;
}
Change typingEffect to typingEffect2
.typewritertext::before {
content: "";
animation: typingEffect2 13.5s infinite;
}
6. Find this code:
@keyframes wordSequence {
0%, 100% { content: "developer"; }
25% { content: "writer"; }
50% { content: "reader"; }
75% { content: "human"; }
}
Edit the wordSequence to wordSequence2, and edit the content values according to your new words:
@keyframes wordSequence2 {
0%, 100% { content: "developer"; }
25% { content: "writer"; }
50% { content: "reader"; }
75% { content: "human"; }
}7. Find this CSS code:.typewritertext::before {
content: "developer";
animation: wordSequence 12s linear infinite;
}
}Update wordSequence to wordSequence2, and the content value according to your new word:.typewritertext::before {
content: "developer";
animation: wordSequence2 12s linear infinite;
}
}8. Scroll back up and change all the .typewriter classes and psuedo-classes to .typewriter2, like this:
.typewritertext2 {
--caret: currentcolor;
}.typewritertext2::before {
content: "";
animation: typingEffect2 13.5s infinite;
}.typewritertext2::after {
content: "";
border-right: 1px solid var(--caret);
animation: blinkingEffect 0.5s linear infinite;
}.typewritertext2.thick::after {
border-right: 1ch solid var(--caret);
}.typewritertext2.nocaret::after {
border-right: 0;
}@media (prefers-reduced-motion) {
.typewritertext2::after {
animation: none;
}@keyframes wordSequence2 {
0%, 100% { content: "developer"; }
25% { content: "writer"; }
50% { content: "reader"; }
75% { content: "human"; }
}.typewritertext2::before {
content: "developer";
animation: wordSequence2 12s linear infinite;
}
}
9. Adjust the media queries for font-size if required:@media screen and (max-width: 480px) {
#headline {
font-size: 8vmin;
}
}