Form by gharsh11032000

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}
16
17.form-container button:active {
18  scale: 0.95;
19}
20
21.form-container .form {
22  display: flex;
23  flex-direction: column;
24  gap: 20px;
25}
26
27.form-container .form-group {
28  display: flex;
29  flex-direction: column;
30  gap: 2px;
31}
32
33.form-container .form-group label {
34  display: block;
35  margin-bottom: 5px;
36  color: #717171;
37  font-weight: 600;
38  font-size: 12px;
39}
40
41.form-container .form-group input {
42  width: 100%;
43  padding: 12px 16px;
44  border-radius: 8px;
45  color: #fff;
46  font-family: inherit;
47  background-color: transparent;
48  border: 1px solid #414141;
49}
50
51.form-container .form-group textarea {
52  width: 100%;
53  padding: 12px 16px;
54  border-radius: 8px;
55  resize: none;
56  color: #fff;
57  height: 96px;
58  border: 1px solid #414141;
59  background-color: transparent;
60  font-family: inherit;
61}
62
63.form-container .form-group input::placeholder {
64  opacity: 0.5;
65}
66
67.form-container .form-group input:focus {
68  outline: none;
69  border-color: #e81cff;
70}
71
72.form-container .form-group textarea:focus {
73  outline: none;
74  border-color: #e81cff;
75}
76
77.form-container .form-submit-btn {
78  display: flex;
79  align-items: flex-start;
80  justify-content: center;
81  align-self: flex-start;
82  font-family: inherit;
83  color: #717171;
84  font-weight: 600;
85  width: 40%;
86  background: #313131;
87  border: 1px solid #414141;
88  padding: 12px 16px;
89  font-size: inherit;
90  gap: 8px;
91  margin-top: 8px;
92  cursor: pointer;
93  border-radius: 6px;
94}
95
96.form-container .form-submit-btn:hover {
97  background-color: #fff;
98  border-color: #fff;
99}
100
101
102
103