Form by gharsh11032000
#e8e8e8
1.form-container { 2 width: 350px; 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: 24px; 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 margin-bottom: 12px; 22 text-align: center; 23 font-weight: 700; 24 font-size: 20px; 25} 26 27.form-container .social-buttons { 28 display: flex; 29 justify-content: center; 30 margin-bottom: 20px; 31 flex-direction: column; 32 gap: 12px; 33 align-items: center; 34} 35 36.form-container .social-button { 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 width: 100%; 41 font-family: inherit; 42 color: #fff; 43 border: none; 44 padding: 12px 16px; 45 gap: 8px; 46 cursor: pointer; 47 border-radius: 6px; 48 box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); 49} 50 51.form-container .social-button svg { 52 width: 22px; 53 height: 22px; 54 fill: white; 55} 56 57.form-container .social-button.facebook { 58 background-color: #1778f2; 59} 60 61.form-container .social-button.apple { 62 background-color: #212121; 63} 64 65.form-container .form { 66 display: flex; 67 flex-direction: column; 68 gap: 12px; 69} 70 71.form-container .form-group { 72 display: flex; 73 flex-direction: column; 74 gap: 2px; 75} 76 77.form-container .form-group label { 78 display: block; 79 margin-bottom: 5px; 80} 81 82.form-container .form-group input[type="text"], 83.form-container .form-group input[type="password"] { 84 width: 100%; 85 padding: 12px 16px; 86 border-radius: 6px; 87 font-family: inherit; 88 border: 1px solid #ccc; 89} 90 91.form-container .form-group input::placeholder { 92 opacity: 0.5; 93} 94 95.form-container .form-group input[type="text"]:focus, 96.form-container .form-group input[type="password"]:focus { 97 outline: none; 98 border-color: #1778f2; 99} 100 101.form-container .form-submit-btn { 102 display: flex; 103 justify-content: center; 104 align-items: center; 105 font-family: inherit; 106 color: #fff; 107 background-color: #212121; 108 border: none; 109 width: 100%; 110 padding: 12px 16px; 111 font-size: inherit; 112 gap: 8px; 113 margin: 12px 0; 114 cursor: pointer; 115 border-radius: 6px; 116 box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168); 117} 118 119.form-container .form-submit-btn:hover { 120 background-color: #313131; 121} 122 123.form-container .link { 124 color: #1778f2; 125 text-decoration: none; 126} 127 128.form-container .forgot-password-link { 129 align-self: flex-end; 130 margin-top: -20px; 131} 132 133.form-container .signup-link { 134 align-self: center; 135 font-weight: 500; 136} 137 138.form-container .signup-link .link { 139 font-weight: 400; 140} 141 142.form-container .link:hover { 143 text-decoration: underline; 144} 145 146.form-container .line { 147 width: 100%; 148 height: 1px; 149 background-color: #212121; 150 opacity: 0.1; 151} 152
1.6K views
1.6K views
MIT License