Form by omriluz

1.form-container {
2  width: 400px;
3  background: linear-gradient(#212121, #212121) padding-box,
4              linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
5  border: 2px solid transparent;
6  padding: 32px 24px;
7  font-size: 14px;
8  font-family: inherit;
9  color: white;
10  display: flex;
11  flex-direction: column;
12  gap: 20px;
13  box-sizing: border-box;
14  border-radius: 16px;
15  background-size: 200% 100%;
16  animation: gradient 5s ease infinite;
17}
18
19@keyframes gradient {
20  0% {
21    background-position: 0% 50%;
22  }
23
24  50% {
25    background-position: 100% 50%;
26  }
27
28  100% {
29    background-position: 0% 50%;
30  }
31}
32
33.form-container button:active {
34  scale: 0.95;
35}
36
37.form-container .form {
38  display: flex;
39  flex-direction: column;
40  gap: 20px;
41}
42
43.form-container .form-group {
44  display: flex;
45  flex-direction: column;
46  gap: 2px;
47}
48
49.form-container .form-group label {
50  display: block;
51  margin-bottom: 5px;
52  color: #717171;
53  font-weight: 600;
54  font-size: 12px;
55}
56
57.form-container .form-group input {
58  width: 100%;
59  padding: 12px 16px;
60  border-radius: 8px;
61  color: #fff;
62  font-family: inherit;
63  background-color: transparent;
64  border: 1px solid #414141;
65}
66
67.form-container .form-group textarea {
68  width: 100%;
69  padding: 12px 16px;
70  border-radius: 8px;
71  resize: none;
72  color: #fff;
73  height: 96px;
74  border: 1px solid #414141;
75  background-color: transparent;
76  font-family: inherit;
77}
78
79.form-container .form-group input::placeholder {
80  opacity: 0.5;
81}
82
83.form-container .form-group input:focus {
84  outline: none;
85  border-color: #e81cff;
86}
87
88.form-container .form-group textarea:focus {
89  outline: none;
90  border-color: #e81cff;
91}
92
93.form-container .form-submit-btn {
94  display: flex;
95  align-items: flex-start;
96  justify-content: center;
97  align-self: flex-start;
98  font-family: inherit;
99  color: #717171;
100  font-weight: 600;
101  width: 40%;
102  background: #313131;
103  border: 1px solid #414141;
104  padding: 12px 16px;
105  font-size: inherit;
106  gap: 8px;
107  margin-top: 8px;
108  cursor: pointer;
109  border-radius: 6px;
110}
111
112.form-container .form-submit-btn:hover {
113  background-color: #fff;
114  border-color: #fff;
115}
116
117
118
119