vaporvee/destruction-of-legacy
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Yannik
2023-05-26 11:04:36 +02:00
parent eafce9c2ac
commit 473ebbcc93
5 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="text_horror/style.css">
<script src="text_horror/app.js"></script>
<title>TextHorror</title>
</head>
<body onpageshow="typeWriter()">
<div id="bubble"></div>
<img class="triangle" src="text_horror/assets/triangle.png">
</body>
</html>

11
text_horror/app.js Normal file
View File

@@ -0,0 +1,11 @@
var i = 0;
var txt = 'Hello welcome to TextHorror!';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("bubble").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}

BIN
text_horror/assets/pixel-font.ttf Normal file
View File

Binary file not shown.

BIN
text_horror/assets/triangle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

51
text_horror/style.css Normal file
View File

@@ -0,0 +1,51 @@
@font-face {
font-family: pixel-font;
src: url(assets/pixel-font.ttf);
}
body {
color-scheme: dark;
background-color: black;
color: white;
text-align: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#bubble {
font-family: pixel-font;
text-align: left;
font-size: 30px;
border-width: 5px;
border-style: solid;
border-color: white;
padding: 30px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 50%;
transform: translate(-50%, -50%);
}
.triangle {
fill: #fff;
position: absolute;
right: 17%;
bottom: 27%;
animation: float 1.5s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}