Form by zanina-yassine

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}