Created
May 6, 2019 07:55
-
-
Save DahlitzFlorian/7f08b831b70c21af89ef0c8063a26bfd to your computer and use it in GitHub Desktop.
Pretty nice login page
This file contains 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"> | |
| <head> | |
| <title>Pretty Nice Login Page</title> | |
| <link rel="stylesheet" href="style.css" type="text/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 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-image: url("https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: top; | |
| } | |
| .box{ | |
| width: 300px; | |
| padding: 40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%,-50%); | |
| background: #191919; | |
| text-align: center; | |
| box-shadow: -1px 92px 99px -62px rgba(3, 107, 255, 0.27), 0 1px 6px 0 rgba(10, 48, 255, 0.48); | |
| border-radius: 5px; | |
| } | |
| .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; | |
| -webkit-animation: 9s colorChange alternate; | |
| transition height 0.3s, width 0.3s 0.1s | |
| input:focus ~ .border | |
| } | |
| .box input[type = "submit"]{ | |
| border:0; | |
| background: none; | |
| display: block; | |
| margin: 20px auto; | |
| text-align: center; | |
| border: 2px solid #2ecc71; | |
| padding: 14px 40px; | |
| outline: none; | |
| color: white; | |
| border-radius: 24px; | |
| transition: 0.25s; | |
| cursor: pointer; | |
| } | |
| .box input[type = "submit"]:hover{ | |
| background: #2ecc71; | |
| } | |
| h1 { | |
| display: block; | |
| font-size: 2em; | |
| margin-block-start: 0.67em; | |
| margin-block-end: 0.67em; | |
| margin-inline-start: 0px; | |
| margin-inline-end: 0px; | |
| font-weight: bold; | |
| } | |
| @-webkit-keyframes colorChange { | |
| 0% { border-color: #007bff; } | |
| 5% { border-color: #6610f2; } | |
| 10% { border-color: #6f42c1;} | |
| 15% { border-color: #e83e8c; } | |
| 20% { border-color: #dc3545;} | |
| 25% { border-color: #fd7e14; } | |
| 30% { border-color: #ffc107; } | |
| 35% { border-color: #28a745;} | |
| 40% { border-color: #20c997; } | |
| 45% { border-color: #17a2b8;} | |
| 50% { border-color: #6c757d; } | |
| 55% { border-color: #343a40; } | |
| 60% { border-color: #007bff;} | |
| 65% { border-color: #6c757d; } | |
| 70% { border-color: #28a745;} | |
| 75% { border-color: #17a2b8;} | |
| 80% { border-color: #ffc107;} | |
| 85% { border-color: #dc3545;} | |
| 90% { border-color: #343a40;} | |
| 95% { border-color: #28a745;} | |
| 100% { border-color: #20c997;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment