Form by StarMarketPros

1.wrapper {
2  --input-focus: #2d8cf0;
3  --font-color: #323232;
4  --font-color-sub: #666;
5  --bg-color: #fff;
6  --bg-color-alt: #666;
7  --main-color: #323232;
8    /* display: flex; */
9    /* flex-direction: column; */
10    /* align-items: center; */
11}
12/* switch card */
13.switch {
14  transform: translateY(-200px);
15  position: relative;
16  display: flex;
17  flex-direction: column;
18  justify-content: center;
19  align-items: center;
20  gap: 30px;
21  width: 50px;
22  height: 20px;
23}
24
25.card-side::before {
26  position: absolute;
27  content: 'Log in';
28  left: -70px;
29  top: 0;
30  width: 100px;
31  text-decoration: underline;
32  color: var(--font-color);
33  font-weight: 600;
34}
35
36.card-side::after {
37  position: absolute;
38  content: 'Sign up';
39  left: 70px;
40  top: 0;
41  width: 100px;
42  text-decoration: none;
43  color: var(--font-color);
44  font-weight: 600;
45}
46
47.toggle {
48  opacity: 0;
49  width: 0;
50  height: 0;
51}
52
53.slider {
54  box-sizing: border-box;
55  border-radius: 5px;
56  border: 2px solid var(--main-color);
57  box-shadow: 4px 4px var(--main-color);
58  position: absolute;
59  cursor: pointer;
60  top: 0;
61  left: 0;
62  right: 0;
63  bottom: 0;
64  background-color: var(--bg-colorcolor);
65  transition: 0.3s;
66}
67
68.slider:before {
69  box-sizing: border-box;
70  position: absolute;
71  content: "";
72  height: 20px;
73  width: 20px;
74  border: 2px solid var(--main-color);
75  border-radius: 5px;
76  left: -2px;
77  bottom: 2px;
78  background-color: var(--bg-color);
79  box-shadow: 0 3px 0 var(--main-color);
80  transition: 0.3s;
81}
82
83.toggle:checked + .slider {
84  background-color: var(--input-focus);
85}
86
87.toggle:checked + .slider:before {
88  transform: translateX(30px);
89}
90
91.toggle:checked ~ .card-side:before {
92  text-decoration: none;
93}
94
95.toggle:checked ~ .card-side:after {
96  text-decoration: underline;
97}
98
99/* card */ 
100
101.flip-card__inner {
102  width: 300px;
103  height: 350px;
104  position: relative;
105  background-color: transparent;
106  perspective: 1000px;
107    /* width: 100%;
108    height: 100%; */
109  text-align: center;
110  transition: transform 0.8s;
111  transform-style: preserve-3d;
112}
113
114.toggle:checked ~ .flip-card__inner {
115  transform: rotateY(180deg);
116}
117
118.toggle:checked ~ .flip-card__front {
119  box-shadow: none;
120}
121
122.flip-card__front, .flip-card__back {
123  padding: 20px;
124  position: absolute;
125  display: flex;
126  flex-direction: column;
127  justify-content: center;
128  -webkit-backface-visibility: hidden;
129  backface-visibility: hidden;
130  background: lightgrey;
131  gap: 20px;
132  border-radius: 5px;
133  border: 2px solid var(--main-color);
134  box-shadow: 4px 4px var(--main-color);
135}
136
137.flip-card__back {
138  width: 100%;
139  transform: rotateY(180deg);
140}
141
142.flip-card__form {
143  display: flex;
144  flex-direction: column;
145  align-items: center;
146  gap: 20px;
147}
148
149.title {
150  margin: 20px 0 20px 0;
151  font-size: 25px;
152  font-weight: 900;
153  text-align: center;
154  color: var(--main-color);
155}
156
157.flip-card__input {
158  width: 250px;
159  height: 40px;
160  border-radius: 5px;
161  border: 2px solid var(--main-color);
162  background-color: var(--bg-color);
163  box-shadow: 4px 4px var(--main-color);
164  font-size: 15px;
165  font-weight: 600;
166  color: var(--font-color);
167  padding: 5px 10px;
168  outline: none;
169}
170
171.flip-card__input::placeholder {
172  color: var(--font-color-sub);
173  opacity: 0.8;
174}
175
176.flip-card__input:focus {
177  border: 2px solid var(--input-focus);
178}
179
180.flip-card__btn:active, .button-confirm:active {
181  box-shadow: 0px 0px var(--main-color);
182  transform: translate(3px, 3px);
183}
184
185.flip-card__btn {
186  margin: 20px 0 20px 0;
187  width: 120px;
188  height: 40px;
189  border-radius: 5px;
190  border: 2px solid var(--main-color);
191  background-color: var(--bg-color);
192  box-shadow: 4px 4px var(--main-color);
193  font-size: 17px;
194  font-weight: 600;
195  color: var(--font-color);
196  cursor: pointer;
197}