I am trying this typewriter text effect but my words are cutting off and not continuing on the next line below is the css and images of what l am getting: html{ min-height: 100%; overflow: hidden; } body{ height: calc(100vh - 8em); padding: 4em; color: rgba(255,255,255,.75); font-family: 'Anonymous Pro', monospace; background-color: rgb(25,25,25); /*font-size:28.8px;*/ } .line-1{ position: relative; top: 50%; width: 20.18em; border-right: 2px solid rgba(255,255,255,.75); font-size: 180%; white-space: nowrap; overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-sizing:content-box; box-sizing:content-box; } .anim-typewriter{ width:0; animation: typewriter 4s steps(44) 1s 1 normal both,blinkTextCursor 500ms steps(44) infinite normal; } @keyframes typewriter{ from{width: 0;} to{width: 24em;} } @keyframes blinkTextCursor{ from{border-right-color: rgba(255,255,255,.75);} to{border-right-color: transparent;} }
I am trying this typewriter text effect but my words are cutting off and not continuing on the next line below is the css and images of what l am getting: html{ min-height: 100%; overflow: hidden; } body{ height: calc(100vh - 8em); padding: 4em; color: rgba(255,255,255,.75); font-family: 'Anonymous Pro', monospace; background-color: rgb(25,25,25); /*font-size:28.8px;*/ } .line-1{ position: relative; top: 50%; width: 20.18em; border-right: 2px solid rgba(255,255,255,.75); font-size: 180%; white-space: nowrap; overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-sizing:content-box; box-sizing:content-box; } .anim-typewriter{ width:0; animation: typewriter 4s steps(44) 1s 1 normal both,blinkTextCursor 500ms steps(44) infinite normal; } @keyframes typewriter{ from{width: 0;} to{width: 24em;} } @keyframes blinkTextCursor{ from{border-right-color: rgba(255,255,255,.75);} to{border-right-color: transparent;} }
Related questions
Question
I am trying this typewriter text effect but my words are cutting off and not continuing on the next line below is the css and images of what l am getting:
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255,255,255,.75);
font-family: 'Anonymous Pro', monospace;
background-color: rgb(25,25,25);
/*font-size:28.8px;*/
}
.line-1{
position: relative;
top: 50%;
width: 20.18em;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 180%;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
.anim-typewriter{
width:0;
animation: typewriter 4s steps(44) 1s 1 normal both,blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
from{width: 0;}
to{width: 24em;}
}
@keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
Transcribed Image Text:а
ge
4 to
8.9
»
File Edit Selection View Go Run Terminal Help
EXPLORER
✓ VSCODEPORTFOLIO
✓ .vscode
✓ New folder
# landing.css
<> landingPage.html
# main.css
<> practice.html
> OUTLINE
> TIMELINE
0A0 Live Share
<> landing Page.html ● # landing.css ●
New folder> <> landingPage.html > html > head > > title
1 <!DOCTYPE html>
2
<html>
3
<head>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 </html>
19
• landing Page.html - vscodePortfolio - Visual Studio Code
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="landing.css">
</head>
</body>
<body>
<p class="line-1 anim-typewriter">Salve! I'm, a software developer. Throughout my academic journey,
I have honed my skills in various programming languages, frameworks, and development methodologies. My expertise spans across areas such a
mobile app development, and database management, always focusing on delivering high-quality results while meeting project requirements an
PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL
No problems have been detected in the workspace.
Ln 8, Col 12 Spaces: 4
UTF-8
08
Filter (e.g. text, **/*.ts, !*... Y
CRLF {HTML Port: 3000
Go Live
69
8
<
x
X
W Prettier 8 ♫
Transcribed Image Text:←
Portfolio
X
+
с
Ⓒ File | C:/Users/tafad/Desktop/vscode Portfolio/New%20folder/landing Page.html
Salve! I'm, a software developer. Throughou
41
U
D.
x
:
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 4 steps with 2 images
