|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section class="login-form-wrap"> <h1>Facebook</h1> <form class="login-form" action="POST" action="#"> <label> <input type="email" name="email" required placeholder="Email"> </label> <label> <input type="password" name="password" required placeholder="Password"> </label> <input type="submit" value="Login"> </form> <h5><a href="#">Forgot password</a></h5> </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
* { box-sizing: border-box; } html { background: #E2E2E2; } body { background: #E2E2E2; margin:0; padding:0; font-family: 'Lato', sans-serif; } .login-form-wrap { background: radial-gradient(ellipse at center, rgba(81,112,173,1) 0%,rgba(53,84,147,1) 100%); border:1px solid #2d416d; box-shadow: 0 1px #5670A4 inset, 0 0 10px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; width: 360px; height: 380px; margin: 60px auto; padding: 50px 30px 0 30px; text-align: center; h1 { margin: 0 0 50px 0; padding: 0; font-size: 26px; color: #fff; } h5 { margin-top: 40px; } h5 > a { font-size: 14px; color: #fff; text-decoration: none; font-weight: 400; } } .login-form { & input[type="email"], input[type="password"], { width: 100%; border: 1px solid #314d89; outline: none; padding: 12px 20px; color: #afafaf; font-weight: 400; font-family: 'Lato', sans-serif; cursor:pointer; } & input[type="email"] { border-bottom: none; border-radius: 4px 4px 0 0; padding-bottom: 13px; box-shadow: 0 -1px 0 #E0E0E0 inset, 0 1px 2px rgba(0, 0, 0, 0.23) inset; } & input[type="password"] { border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.23) inset, 0 1px 2px rgba(255, 255, 255, 0.1); } & input[type="submit"] { font-family: 'Lato', sans-serif; font-weight: 400; background: linear-gradient(to bottom, rgba(224,224,224,1) 0%,rgba(206,206,206,1) 100%); display: block; margin: 20px auto 0 auto; width: 100%; border: none; border-radius: 3px; padding: 8px; font-size: 17px; color: #636363; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); font-weight: 700; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.17), 0 1px 0 rgba(255, 255, 255, 0.36) inset; &:hover { background: #DDD; } &:active { padding-top: 9px; padding-bottom: 7px; background: #C9C9C9; } } } |
