Form by akshat-patel28
#e8e8e8
1.form-container { 2 width: 400px; 3 height: 254px; 4 background: #fff; 5 border-radius: 8px; 6 box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, 7 rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; 8 box-sizing: border-box; 9 position: relative; 10 overflow: hidden; 11} 12.lock-icon { 13 font-size: 20px; 14 color: #0e2954; 15} 16.form { 17 width: 100%; 18 height: 100%; 19 padding: 20px 15px; 20 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", 21 "Lucida Sans", Arial, sans-serif; 22 box-sizing: border-box; 23 color: #0e2954; 24 position: relative; 25} 26.toggle-input { 27 position: absolute; 28 top: 0; 29 left: 0; 30 opacity: 0; 31} 32.form-title { 33 margin-top: 10px; 34 margin-bottom: 5px; 35 font-size: 25px; 36 font-weight: 700; 37 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", 38 "Lucida Sans", Arial, sans-serif; 39} 40.form-sub-title { 41 margin: 0; 42 font-size: 15px; 43 font-weight: 500; 44 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", 45 "Lucida Sans", Arial, sans-serif; 46} 47.login-card, 48.password-card { 49 display: flex; 50 flex-direction: column; 51 box-sizing: border-box; 52 padding-top: 25px; 53 gap: 20px; 54 align-items: flex-end; 55 position: absolute; 56 width: calc(100% - 30px); 57 transition: all 0.3s ease-in-out; 58 bottom: 20px; 59} 60.login-card { 61 left: 15px; 62} 63.password-card { 64 left: 100%; 65} 66.field-container { 67 border: 1px solid #a7a7a7; 68 border-radius: 8px; 69 width: 100%; 70 height: 45px; 71 position: relative; 72 box-sizing: border-box; 73 overflow: hidden; 74 display: flex; 75 align-items: flex-end; 76 justify-content: flex-start; 77 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 78} 79.input { 80 width: 100%; 81 height: 100%; 82 padding: 5px 10px; 83 box-sizing: border-box; 84 border: none; 85 outline: none; 86 background: transparent; 87 position: relative; 88 z-index: 11; 89} 90.placeholder { 91 position: absolute; 92 top: 50%; 93 left: 10px; 94 transform: translateY(-50%); 95 color: #a7a7a7; 96 transition: all 0.3s ease; 97 font-size: 16px; 98} 99.input:focus ~ .placeholder, 100.input:not(:placeholder-shown) ~ .placeholder { 101 top: 5px; 102 transform: none; 103 font-size: 12px; 104} 105.input:focus, 106.input:not(:placeholder-shown) { 107 height: 68%; 108} 109.btn { 110 width: 100px; 111 height: 40px; 112 border-radius: 8px; 113 box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px; 114 background: #0e2954; 115 border: none; 116 outline: none; 117} 118.btn:focus { 119 box-shadow: none; 120} 121 122.btn-label { 123 font-size: 15px; 124 font-weight: 600; 125 color: #fff; 126 cursor: pointer; 127} 128.toggle-input:checked ~ .login-card { 129 left: -100%; 130} 131.toggle-input:checked ~ .password-card { 132 left: 15px; 133} 134
316 views
316 views
MIT License