diff options
| -rw-r--r-- | assets/css/style.css | 44 | ||||
| -rw-r--r-- | index.html | 9 |
2 files changed, 45 insertions, 8 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 07391ac..df7d32b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -11,24 +11,56 @@ html, body { body { background-color: #282828; - display: flex; - align-items: center; + font-family: 'Mukta', sans-serif; + color: white; + display: grid; + flex-direction: column; justify-content: center; + align-items: center; } .typewriter h1 { - font-family: 'Mukta', sans-serif; - color: white; overflow: hidden; border-right: .15em solid white; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: - typing 3.5s steps(40, end), + typing 1s steps(40, end), blink-caret .75s step-end infinite; } +.heading { + margin-top: 50vh; + animation-name: middle-to-top; + animation-delay: 1.5s; + animation-duration: .5s; + animation-fill-mode: forwards; +} + +.loginform-box { + text-align: center; + background: white; + width: 300px; + height: 300px; + border-radius: 20px; + padding: 10px; + border: gray 4px solid; +} + +.graytext { + color: #282828; +} + +@keyframes middle-to-top { + from { + margin-top: 50vh; + } + to { + margin-top: 20px; + } +} + @keyframes typing { from { width: 0 } to { width: 100% } @@ -37,4 +69,4 @@ body { @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: white; } -}
\ No newline at end of file +} @@ -10,8 +10,13 @@ <title>Texx Web</title> </head> <body> - <div class="typewriter"> - <h1>Welcome to Texx!</h1> + <div class="heading"> + <div class="typewriter"> + <h1>Welcome to Texx!</h1> + </div> + </div> + <div class="loginform-box"> + <p class="graytext">Please sign in to your account in order to use Texx-Web.</p> </div> </body> </html>
\ No newline at end of file |