Form by SyedShahzaib7
#e8e8e8
1.wrapper { 2 width: 420px; 3 background: rgb(2, 0, 36); 4 background: linear-gradient( 5 90deg, 6 rgba(2, 0, 36, 1) 9%, 7 rgba(9, 9, 121, 1) 68%, 8 rgba(0, 91, 255, 1) 97% 9 ); 10 backdrop-filter: blur(9px); 11 color: #fff; 12 border-radius: 12px; 13 padding: 30px 40px; 14} 15.form-login { 16 font-size: 36px; 17 text-align: center; 18} 19.wrapper .input-box { 20 position: relative; 21 width: 100%; 22 height: 50px; 23 24 margin: 30px 0; 25} 26.input-box input { 27 width: 100%; 28 height: 100%; 29 background: transparent; 30 border: none; 31 outline: none; 32 border: 2px solid rgba(255, 255, 255, 0.2); 33 border-radius: 40px; 34 font-size: 16px; 35 color: #fff; 36 padding: 20px 45px 20px 20px; 37} 38.input-box input::placeholder { 39 color: #fff; 40} 41 42.wrapper .remember-forgot { 43 display: flex; 44 justify-content: space-between; 45 font-size: 14.5px; 46 margin: -15px 0 15px; 47} 48.remember-forgot label input { 49 accent-color: #fff; 50 margin-right: 3px; 51} 52.remember-forgot a { 53 color: #fff; 54 text-decoration: none; 55} 56.remember-forgot a:hover { 57 text-decoration: underline; 58} 59.wrapper .btn { 60 width: 150px; 61 height: 45px; 62 background: #fff; 63 border: none; 64 outline: none; 65 border-radius: 40px; 66 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 67 cursor: pointer; 68 font-size: 16px; 69 color: #333; 70 font-weight: 600; 71 margin-left: 90px; 72 margin-top: 10px; 73} 74.wrapper .register-link { 75 font-size: 14.5px; 76 text-align: center; 77 margin: 20px 0 15px; 78} 79.register-link p a { 80 color: #fff; 81 text-decoration: none; 82 font-weight: 600; 83} 84.register-link p a:hover { 85 text-decoration: underline; 86} 87
514 views
514 views
MIT License