Form by DavidTM96

1.form {
2  display: flex;
3  flex-direction: column;
4  align-self: center;
5  font-family: inherit;
6  gap: 10px;
7  padding-inline: 2em;
8  padding-bottom: 0.4em;
9  background-color: #171717;
10  //background-color: #0a192f;
11  border-radius: 20px;
12}
13
14.form-heading {
15  text-align: center;
16  margin: 2em;
17  color: #64ffda;
18  font-size: 1.2em;
19  background-color: transparent;
20  align-self: center;
21}
22
23.form-field {
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  gap: 0.5em;
28  border-radius: 10px;
29  padding: 0.6em;
30  border: none;
31  outline: none;
32  color: white;
33  background-color: #171717;
34  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
35}
36
37.input-field {
38  background: none;
39  border: none;
40  outline: none;
41  width: 100%;
42  color: #ccd6f6;
43  padding-inline: 1em;
44}
45
46.sendMessage-btn {
47  cursor: pointer;
48  margin-bottom: 3em;
49  padding: 1em;
50  border-radius: 10px;
51  border: none;
52  outline: none;
53  background-color: transparent;
54  color: #64ffda;
55  font-weight: bold;
56  outline: 1px solid #64ffda;
57  transition: all ease-in-out 0.3s;
58}
59
60.sendMessage-btn:hover {
61  transition: all ease-in-out 0.3s;
62  background-color: #64ffda;
63  color: #000;
64  cursor: pointer;
65  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
66}
67
68.form-card1 {
69  background-image: linear-gradient(163deg, #64ffda 0%, #64ffda 100%);
70  border-radius: 22px;
71  transition: all 0.3s;
72}
73
74.form-card1:hover {
75  box-shadow: 0px 0px 30px 1px rgba(100, 255, 218, 0.3);
76}
77
78.form-card2 {
79  border-radius: 0;
80  transition: all 0.2s;
81}
82
83.form-card2:hover {
84  transform: scale(0.98);
85  border-radius: 20px;
86}
87