Created
July 20, 2019 19:41
-
-
Save beseidel/4cf7391bfa8969c522d8cca0ddc9473c to your computer and use it in GitHub Desktop.
Animated form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>َAnimated Login Form</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <form class="box" action="index.html" method="post"> | |
| <h1>Login</h1> | |
| <input type="text" name="" placeholder="Username"> | |
| <input type="password" name="" placeholder="Password"> | |
| <input type="submit" name="" value="Login"> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: sans-serif; | |
| background:#40187b; | |
| } | |
| .box{ | |
| border: 1px solid; | |
| width: 300px; | |
| padding: 40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%,-50%); | |
| background: #40187b; | |
| text-align: center; | |
| } | |
| .box h1{ | |
| color: white; | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| } | |
| .box input[type = "text"],.box input[type = "password"]{ | |
| border:0; | |
| background: none; | |
| display: block; | |
| margin: 20px auto; | |
| text-align: center; | |
| border: 2px solid #3498db; | |
| padding: 14px 10px; | |
| width: 200px; | |
| outline: none; | |
| color: white; | |
| border-radius: 24px; | |
| transition: 0.25s; | |
| } | |
| .box input[type = "text"]:focus,.box input[type = "password"]:focus{ | |
| width: 280px; | |
| border-color: #2ecc71; | |
| } | |
| .box input[type = "submit"]{ | |
| border:0; | |
| background: none; | |
| display: block; | |
| margin: 20px auto; | |
| text-align: center; | |
| border: 2px solid #f11692; | |
| padding: 14px 40px; | |
| outline: none; | |
| color: white; | |
| border-radius: 24px; | |
| transition: 0.25s; | |
| cursor: pointer; | |
| } | |
| .box input[type = "submit"]:hover{ | |
| background: #f11692; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment