Form by ammarsaa

1.form {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5  max-width: 350px;
6  padding: 20px;
7  border-radius: 20px;
8  position: relative;
9  background-color: #1a1a1a;
10  color: #fff;
11  border: 1px solid #333;
12}
13
14.title {
15  font-size: 28px;
16  font-weight: 600;
17  letter-spacing: -1px;
18  position: relative;
19  display: flex;
20  align-items: center;
21  padding-left: 30px;
22  color: #00bfff;
23}
24
25.title::before {
26  width: 18px;
27  height: 18px;
28}
29
30.title::after {
31  width: 18px;
32  height: 18px;
33  animation: pulse 1s linear infinite;
34}
35
36.title::before,
37.title::after {
38  position: absolute;
39  content: "";
40  height: 16px;
41  width: 16px;
42  border-radius: 50%;
43  left: 0px;
44  background-color: #00bfff;
45}
46
47.message, 
48.signin {
49  font-size: 14.5px;
50  color: rgba(255, 255, 255, 0.7);
51}
52
53.signin {
54  text-align: center;
55}
56
57.signin a:hover {
58  text-decoration: underline royalblue;
59}
60
61.signin a {
62  color: #00bfff;
63}
64
65.flex {
66  display: flex;
67  width: 100%;
68  gap: 6px;
69}
70
71.form label {
72  position: relative;
73}
74
75.form label .input {
76  background-color: #333;
77  color: #fff;
78  width: 100%;
79  padding: 20px 05px 05px 10px;
80  outline: 0;
81  border: 1px solid rgba(105, 105, 105, 0.397);
82  border-radius: 10px;
83}
84
85.form label .input + span {
86  color: rgba(255, 255, 255, 0.5);
87  position: absolute;
88  left: 10px;
89  top: 0px;
90  font-size: 0.9em;
91  cursor: text;
92  transition: 0.3s ease;
93}
94
95.form label .input:placeholder-shown + span {
96  top: 12.5px;
97  font-size: 0.9em;
98}
99
100.form label .input:focus + span,
101.form label .input:valid + span {
102  color: #00bfff;
103  top: 0px;
104  font-size: 0.7em;
105  font-weight: 600;
106}
107
108.input {
109  font-size: medium;
110}
111
112.submit {
113  border: none;
114  outline: none;
115  padding: 10px;
116  border-radius: 10px;
117  color: #fff;
118  font-size: 16px;
119  transform: .3s ease;
120  background-color: #00bfff;
121}
122
123.submit:hover {
124  background-color: #00bfff96;
125}
126
127@keyframes pulse {
128  from {
129    transform: scale(0.9);
130    opacity: 1;
131  }
132
133  to {
134    transform: scale(1.8);
135    opacity: 0;
136  }
137}