privateuserh commited on
Commit
cd366d1
·
verified ·
1 Parent(s): 83b7f41

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +125 -17
style.css CHANGED
@@ -1,28 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #00aaff;
3
+ --background-color: #1a202c;
4
+ --form-background: #2d3748;
5
+ --text-color: #e2e8f0;
6
+ --label-color: #a0aec0;
7
+ --border-color: #4a5568;
8
+ --success-color: #38a169;
9
+ --error-color: #e53e3e;
10
+ }
11
+
12
+ * {
13
+ box-sizing: border-box;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+
18
  body {
19
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
20
+ background-color: var(--background-color);
21
+ color: var(--text-color);
22
+ display: flex;
23
+ justify-content: center;
24
+ align-items: center;
25
+ min-height: 100vh;
26
+ padding: 20px;
27
+ }
28
+
29
+ .form-container {
30
+ background-color: var(--form-background);
31
+ padding: 40px;
32
+ border-radius: 8px;
33
+ width: 100%;
34
+ max-width: 600px;
35
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
36
  }
37
 
38
  h1 {
39
+ text-align: center;
40
+ margin-bottom: 30px;
41
+ color: #ffffff;
42
+ font-weight: 600;
43
  }
44
 
45
+ hr {
46
+ border: none;
47
+ border-top: 1px solid var(--border-color);
48
+ margin: 25px 0;
 
49
  }
50
 
51
+ .form-group {
52
+ margin-bottom: 20px;
 
 
 
 
53
  }
54
 
55
+ label {
56
+ display: block;
57
+ margin-bottom: 8px;
58
+ font-size: 0.9rem;
59
+ color: var(--label-color);
60
+ font-weight: 500;
61
  }
62
+
63
+ input[type="text"],
64
+ input[type="email"],
65
+ input[type="tel"],
66
+ input[type="number"],
67
+ textarea {
68
+ width: 100%;
69
+ padding: 12px;
70
+ background-color: var(--background-color);
71
+ border: 1px solid var(--border-color);
72
+ border-radius: 6px;
73
+ color: var(--text-color);
74
+ font-size: 1rem;
75
+ transition: border-color 0.3s, box-shadow 0.3s;
76
+ }
77
+
78
+ input:focus,
79
+ textarea:focus {
80
+ outline: none;
81
+ border-color: var(--primary-color);
82
+ box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.2);
83
+ }
84
+
85
+ textarea {
86
+ resize: vertical;
87
+ }
88
+
89
+ button[type="submit"] {
90
+ width: 100%;
91
+ padding: 15px;
92
+ background-color: var(--primary-color);
93
+ border: none;
94
+ border-radius: 6px;
95
+ color: #ffffff;
96
+ font-size: 1.1rem;
97
+ font-weight: 600;
98
+ cursor: pointer;
99
+ transition: background-color 0.3s, transform 0.1s;
100
+ }
101
+
102
+ button[type="submit"]:hover {
103
+ background-color: #0099e6;
104
+ }
105
+
106
+ button[type="submit"]:active {
107
+ transform: scale(0.99);
108
+ }
109
+
110
+ button[type="submit"]:disabled {
111
+ opacity: 0.5;
112
+ cursor: wait;
113
+ }
114
+
115
+ .status {
116
+ text-align: center;
117
+ margin-top: 20px;
118
+ padding: 12px;
119
+ border-radius: 6px;
120
+ font-weight: 500;
121
+ display: none; /* Hidden by default */
122
+ }
123
+
124
+ .status.success {
125
+ display: block;
126
+ background-color: rgba(56, 161, 105, 0.2);
127
+ color: var(--success-color);
128
+ border: 1px solid var(--success-color);
129
+ }
130
+
131
+ .status.error {
132
+ display: block;
133
+ background-color: rgba(229, 62, 62, 0.2);
134
+ color: var(--error-color);
135
+ border: 1px solid var(--error-color);
136
+ }