diff --git a/www/anim.css b/www/anim.css new file mode 100644 index 0000000..e0733f2 --- /dev/null +++ b/www/anim.css @@ -0,0 +1,50 @@ +body { + background-color: #0e0d14; +} + +.heading { + font-family: monospace; + font-size: 2em; + font-weight: bold; + color: #ac4aed; +} + +.centered { + margin-top: 25%; /* terrible solution... */ +} + +/* =========================================================== * + * Type Writer Effect * +/* =========================================================== */ + +.typing-wrapper { + display: flex; + text-align: center; + justify-content: center; +} + +.typing-prompt { + display: inline-block; + text-align: center; +} + +.typing { + display: inline-block; + width: 36ch; + animation: typing 3s steps(36), blink 1s step-end infinite alternate; + white-space: nowrap; + overflow: hidden; + border-right: 1ch solid; +} + +@keyframes typing { + from { + width: 0 + } +} + +@keyframes blink { + 50% { + border-color: transparent + } +} diff --git a/www/anim.html b/www/anim.html new file mode 100644 index 0000000..55d2e36 --- /dev/null +++ b/www/anim.html @@ -0,0 +1,17 @@ + + + + + + +
+ +
+ $  +
+ Do butterflies cry when they're sad? +
+
+ +