Form by micaelgomestavares

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