Form by gharsh11032000
#212121
1.form-container { 2 max-width: 400px; 3 background-color: #fff; 4 padding: 32px 24px; 5 font-size: 14px; 6 font-family: inherit; 7 color: #212121; 8 display: flex; 9 flex-direction: column; 10 gap: 20px; 11 box-sizing: border-box; 12 border-radius: 10px; 13 box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); 14} 15 16.form-container button:active { 17 scale: 0.95; 18} 19 20.form-container .logo-container { 21 text-align: center; 22 font-weight: 600; 23 font-size: 18px; 24} 25 26.form-container .form { 27 display: flex; 28 flex-direction: column; 29} 30 31.form-container .form-group { 32 display: flex; 33 flex-direction: column; 34 gap: 2px; 35} 36 37.form-container .form-group label { 38 display: block; 39 margin-bottom: 5px; 40} 41 42.form-container .form-group input { 43 width: 100%; 44 padding: 12px 16px; 45 border-radius: 6px; 46 font-family: inherit; 47 border: 1px solid #ccc; 48} 49 50.form-container .form-group input::placeholder { 51 opacity: 0.5; 52} 53 54.form-container .form-group input:focus { 55 outline: none; 56 border-color: #1778f2; 57} 58 59.form-container .form-submit-btn { 60 display: flex; 61 justify-content: center; 62 align-items: center; 63 font-family: inherit; 64 color: #fff; 65 background-color: #212121; 66 border: none; 67 width: 100%; 68 padding: 12px 16px; 69 font-size: inherit; 70 gap: 8px; 71 margin: 12px 0; 72 cursor: pointer; 73 border-radius: 6px; 74 box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); 75} 76 77.form-container .form-submit-btn:hover { 78 background-color: #313131; 79} 80 81.form-container .link { 82 color: #1778f2; 83 text-decoration: none; 84} 85 86.form-container .signup-link { 87 align-self: center; 88 font-weight: 500; 89} 90 91.form-container .signup-link .link { 92 font-weight: 400; 93} 94 95.form-container .link:hover { 96 text-decoration: underline; 97} 98 99
6K views
6K views
MIT License