Form by Smit-Prajapati

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