diff options
| -rw-r--r-- | assets/css/style.css | 44 | ||||
| -rw-r--r-- | index.html | 13 |
2 files changed, 53 insertions, 4 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index df7d32b..d71c2a8 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -5,6 +5,16 @@ & Marco Alexander Fischer ######################### */ +@font-face { + font-family: Ubuntu-Regular; + src: url('../fonts/ubuntu/Ubuntu-Regular.ttf'); +} + +@font-face { + font-family: Ubuntu-Bold; + src: url('../fonts/ubuntu/Ubuntu-Bold.ttf'); +} + html, body { height: 100%; } @@ -39,17 +49,38 @@ body { } .loginform-box { + opacity: 0; text-align: center; background: white; width: 300px; height: 300px; border-radius: 20px; padding: 10px; - border: gray 4px solid; + animation-name: fade-in-custom; + animation-delay: 2s; + animation-duration: 1s; + animation-fill-mode: forwards; + color: dimgray; +} + +.input { + width: 70%; + height: 50px; + background: transparent; + padding: auto; + font-family: Ubuntu-Bold; + float: right; +} + +.lnr { + font-size: 60px; } .graytext { color: #282828; + font-family: Ubuntu-Bold; + text-transform: uppercase; + font-size: 18px; } @keyframes middle-to-top { @@ -57,7 +88,7 @@ body { margin-top: 50vh; } to { - margin-top: 20px; + margin-top: 5vh; } } @@ -70,3 +101,12 @@ body { from, to { border-color: transparent } 50% { border-color: white; } } + +@keyframes fade-in-custom { + from { + opacity: 0; + } + to { + opacity: 100; + } +}
\ No newline at end of file @@ -7,6 +7,7 @@ <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./assets/css/style.css"> <link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet"> + <link rel="stylesheet" href="./assets/fonts/Linearicons-Free-v1.0.0/icon-font.min.css"> <title>Texx Web</title> </head> <body> @@ -16,7 +17,15 @@ </div> </div> <div class="loginform-box"> - <p class="graytext">Please sign in to your account in order to use Texx-Web.</p> + <p class="graytext">Login</p> + <div class="input.validate-input" data-validate="Enter username"> + <span class="lnr lnr-user"></span> + <input type="text" name="username" class="input" placeholder="Username"><br/> + </div> + <span class="lnr lnr-lock"></span> + <input type="password" name="password" class="input" placeholder="Password"><br/> + <br> + <button>Login</button> </div> </body> -</html>
\ No newline at end of file +</html> |