5.8K views
1.form_container { 2 width: fit-content; 3 height: fit-content; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 gap: 15px; 9 padding: 50px 40px 20px 40px; 10 background-color: #ffffff; 11 box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01), 12 0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 13 0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 14 border-radius: 11px; 15 font-family: "Inter", sans-serif; 16} 17 18.logo_container { 19 box-sizing: border-box; 20 width: 80px; 21 height: 80px; 22 background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%); 23 border: 1px solid #F7F7F8; 24 filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 25 border-radius: 11px; 26} 27 28.title_container { 29 display: flex; 30 flex-direction: column; 31 align-items: center; 32 justify-content: center; 33 gap: 10px; 34} 35 36.title { 37 margin: 0; 38 font-size: 1.25rem; 39 font-weight: 700; 40 color: #212121; 41} 42 43.subtitle { 44 font-size: 0.725rem; 45 max-width: 80%; 46 text-align: center; 47 line-height: 1.1rem; 48 color: #8B8E98 49} 50 51.input_container { 52 width: 100%; 53 height: fit-content; 54 position: relative; 55 display: flex; 56 flex-direction: column; 57 gap: 5px; 58} 59 60.icon { 61 width: 20px; 62 position: absolute; 63 z-index: 99; 64 left: 12px; 65 bottom: 9px; 66} 67 68.input_label { 69 font-size: 0.75rem; 70 color: #8B8E98; 71 font-weight: 600; 72} 73 74.input_field { 75 width: auto; 76 height: 40px; 77 padding: 0 0 0 40px; 78 border-radius: 7px; 79 outline: none; 80 border: 1px solid #e5e5e5; 81 filter: drop-shadow(0px 1px 0px #efefef) 82 drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 83 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 84} 85 86.input_field:focus { 87 border: 1px solid transparent; 88 box-shadow: 0px 0px 0px 2px #242424; 89 background-color: transparent; 90} 91 92.sign-in_btn { 93 width: 100%; 94 height: 40px; 95 border: 0; 96 background: #115DFC; 97 border-radius: 7px; 98 outline: none; 99 color: #ffffff; 100 cursor: pointer; 101} 102 103.sign-in_ggl { 104 width: 100%; 105 height: 40px; 106 display: flex; 107 align-items: center; 108 justify-content: center; 109 gap: 10px; 110 background: #ffffff; 111 border-radius: 7px; 112 outline: none; 113 color: #242424; 114 border: 1px solid #e5e5e5; 115 filter: drop-shadow(0px 1px 0px #efefef) 116 drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 117 cursor: pointer; 118} 119 120.sign-in_apl { 121 width: 100%; 122 height: 40px; 123 display: flex; 124 align-items: center; 125 justify-content: center; 126 gap: 10px; 127 background: #212121; 128 border-radius: 7px; 129 outline: none; 130 color: #ffffff; 131 border: 1px solid #e5e5e5; 132 filter: drop-shadow(0px 1px 0px #efefef) 133 drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); 134 cursor: pointer; 135} 136 137.separator { 138 width: 100%; 139 display: flex; 140 align-items: center; 141 justify-content: center; 142 gap: 30px; 143 color: #8B8E98; 144} 145 146.separator .line { 147 display: block; 148 width: 100%; 149 height: 1px; 150 border: 0; 151 background-color: #e8e8e8; 152} 153 154.note { 155 font-size: 0.75rem; 156 color: #8B8E98; 157 text-decoration: underline; 158}
MIT License