Form by mahbowal

1.container {
2  max-width: 350px;
3  background: #f8f9fd;
4  background: linear-gradient(
5    0deg,
6    rgb(255, 255, 255) 0%,
7    rgb(244, 247, 251) 100%
8  );
9  border-radius: 40px;
10  padding: 25px 35px;
11  border: 5px solid rgb(255, 255, 255);
12  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
13  margin: 20px;
14}
15
16.heading {
17  text-align: center;
18  font-weight: 900;
19  font-size: 30px;
20  color: rgb(16, 137, 211);
21}
22
23.form {
24  margin-top: 20px;
25}
26
27.form .input {
28  width: 100%;
29  background: white;
30  border: none;
31  padding: 15px 20px;
32  border-radius: 20px;
33  margin-top: 15px;
34  box-shadow: #cff0ff 0px 10px 10px -5px;
35  border-inline: 2px solid transparent;
36}
37
38.form .input::-moz-placeholder {
39  color: rgb(170, 170, 170);
40}
41
42.form .input::placeholder {
43  color: rgb(170, 170, 170);
44}
45
46.form .input:focus {
47  outline: none;
48  border-inline: 2px solid #12b1d1;
49}
50
51.form .forgot-password {
52  display: block;
53  margin-top: 10px;
54  margin-left: 10px;
55}
56
57.form .forgot-password a {
58  font-size: 11px;
59  color: #0099ff;
60  text-decoration: none;
61}
62
63.form .login-button {
64  display: block;
65  width: 100%;
66  font-weight: bold;
67  background: linear-gradient(
68    45deg,
69    rgb(16, 137, 211) 0%,
70    rgb(18, 177, 209) 100%
71  );
72  color: white;
73  padding-block: 15px;
74  margin: 20px auto;
75  border-radius: 20px;
76  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
77  border: none;
78  transition: all 0.2s ease-in-out;
79}
80
81.form .login-button:hover {
82  transform: scale(1.03);
83  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
84}
85
86.form .login-button:active {
87  transform: scale(0.95);
88  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
89}
90
91.social-account-container {
92  margin-top: 25px;
93}
94
95.social-account-container .title {
96  display: block;
97  text-align: center;
98  font-size: 10px;
99  color: rgb(170, 170, 170);
100}
101
102.social-account-container .social-accounts {
103  width: 100%;
104  display: flex;
105  justify-content: center;
106  gap: 15px;
107  margin-top: 5px;
108}
109
110.social-account-container .social-accounts .social-button {
111  background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
112  border: 5px solid white;
113  padding: 5px;
114  border-radius: 50%;
115  width: 40px;
116  aspect-ratio: 1;
117  display: grid;
118  place-content: center;
119  box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
120  transition: all 0.2s ease-in-out;
121}
122
123.social-account-container .social-accounts .social-button .svg {
124  fill: white;
125  margin: auto;
126}
127
128.social-account-container .social-accounts .social-button:hover {
129  transform: scale(1.2);
130}
131
132.social-account-container .social-accounts .social-button:active {
133  transform: scale(0.9);
134}
135
136.agreement {
137  display: block;
138  text-align: center;
139  margin-top: 15px;
140}
141
142.agreement a {
143  text-decoration: none;
144  color: #0099ff;
145  font-size: 9px;
146}
147