Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
2d284c0
·
verified ·
1 Parent(s): 7a4d537

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +176 -113
style.css CHANGED
@@ -1,145 +1,208 @@
1
- /* Resetting and global styles */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- }
7
-
8
  body {
9
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
- background: linear-gradient(135deg, #D9E4EC, #F5F7FA); /* Soft gradient background */
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
- color: #333;
16
- position: relative;
 
 
17
  }
18
 
19
- /* Container styles for the content */
20
  .container {
21
- background: #ffffff;
22
- border-radius: 15px;
23
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft shadow for elevation */
24
- padding: 40px;
25
- width: 100%;
26
- max-width: 600px;
27
- text-align: center;
28
- margin: 0 20px;
29
  }
30
 
31
- /* Header section */
32
  header {
33
- border-bottom: 2px solid #333; /* Header border */
34
- padding-bottom: 15px;
35
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
 
38
- /* Form styles */
39
  input, select {
40
- padding: 12px;
41
- margin: 10px 0;
42
- width: 100%;
43
- font-size: 16px;
44
- border-radius: 8px;
45
- border: 1px solid #E0E0E0;
46
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
47
- transition: all 0.3s ease;
48
  }
49
 
50
- input:focus, select:focus {
51
- border: 1px solid #4CAF50;
52
- outline: none;
53
- box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
 
 
 
 
 
 
 
 
 
54
  }
55
 
56
- /* Styling for currency selectors */
57
- .currency-selectors {
58
- display: flex;
59
- justify-content: center;
60
- align-items: center;
61
- gap: 10px;
62
  }
63
 
64
- span {
65
- font-size: 18px;
66
- font-weight: 500;
67
- color: #555;
 
 
 
 
 
 
68
  }
69
 
70
- /* Button styles */
71
- button {
72
- padding: 12px 20px;
73
- background-color: #4CAF50;
74
- color: white;
75
- border: none;
76
- border-radius: 8px;
77
- width: 100%;
78
- font-size: 18px;
79
- font-weight: 600;
80
- cursor: pointer;
81
- transition: background-color 0.3s ease;
82
  }
83
 
84
- button:hover {
85
- background-color: #45a049;
86
  }
87
 
88
- /* Result box styles */
89
- #result {
90
- margin-top: 20px;
91
- font-size: 20px;
92
- font-weight: bold;
93
- color: #333;
94
- background-color: #f4f4f4;
95
- padding: 15px;
96
- border-radius: 8px;
97
- text-transform: uppercase;
98
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
99
- }
100
-
101
- /* Footer section styles */
102
  footer {
103
- border-top: 2px solid #333; /* Footer border */
104
- padding-top: 15px;
105
- margin-top: 20px;
 
106
  }
107
 
108
- /* Responsiveness for mobile screens */
109
- @media (max-width: 768px) {
110
- .container {
111
- padding: 30px;
112
- max-width: 100%;
113
- }
114
-
115
- h1 {
116
- font-size: 1.5rem;
117
- }
118
 
119
- input, select {
120
- font-size: 14px;
121
- }
122
 
123
- button {
124
- font-size: 16px;
125
- }
 
 
126
  }
127
 
128
- /* Responsiveness for larger screens */
129
- @media (min-width: 769px) {
130
- .container {
131
- max-width: 700px;
132
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
 
134
- h1 {
135
- font-size: 2.5rem;
136
- }
 
 
 
137
 
138
- input, select {
139
- font-size: 18px;
140
- }
141
 
142
- button {
143
- font-size: 20px;
144
- }
145
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Styling dasar untuk body */
 
 
 
 
 
 
2
  body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ background-color: #1b5e20; /* Hijau gelap */
7
+ color: white;
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: flex-start;
11
+ height: 100vh;
12
+ overflow-y: auto;
13
  }
14
 
15
+ /* Container dengan bentuk melengkung */
16
  .container {
17
+ width: 100%;
18
+ max-width: 800px;
19
+ background-color: #fafafa; /* Putih krem lembut */
20
+ border-radius: 30px; /* Sudut melengkung */
21
+ padding: 30px; /* Menambah padding untuk memberi ruang lebih */
22
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23
+ margin-top: 20px;
24
+ min-height: 600px; /* Menambah tinggi minimum kontainer */
25
  }
26
 
27
+ /* Styling untuk header */
28
  header {
29
+ text-align: center;
30
+ margin-bottom: 20px;
31
+ }
32
+
33
+ header h1 {
34
+ font-size: 32px;
35
+ color: #4CAF50; /* Hijau untuk header */
36
+ margin: 10px 0;
37
+ }
38
+
39
+ header p {
40
+ color: #777;
41
+ font-size: 16px;
42
+ }
43
+
44
+ /* Menambahkan Flexbox pada kontainer form untuk menyusun secara teratur */
45
+ .currency-container {
46
+ display: flex;
47
+ flex-direction: column;
48
+ gap: 20px;
49
+ }
50
+
51
+ /* Sejajarkan form elemen dengan ukuran lebar yang konsisten */
52
+ .currency-input {
53
+ display: flex;
54
+ flex-direction: column;
55
+ width: 100%;
56
+ }
57
+
58
+ /* Styling untuk label dan input */
59
+ .currency-labels {
60
+ display: flex;
61
+ flex-direction: column;
62
+ align-items: stretch;
63
+ margin-bottom: 15px;
64
+ }
65
+
66
+ .currency-labels label {
67
+ font-size: 16px;
68
+ color: #333;
69
+ display: block;
70
  }
71
 
72
+ /* Kotak input dan select (dropdown) */
73
  input, select {
74
+ padding: 15px;
75
+ width: 100%;
76
+ max-width: 100%;
77
+ margin-bottom: 20px;
78
+ border-radius: 8px;
79
+ border: 1px solid #ddd;
80
+ background-color: #f5f5f5;
81
+ color: #333;
82
  }
83
 
84
+ /* Tombol swap dengan model baru */
85
+ button#swap-btn {
86
+ background-color: #4CAF50; /* Hijau untuk tombol swap */
87
+ border: none;
88
+ padding: 12px;
89
+ color: white;
90
+ cursor: pointer;
91
+ font-size: 20px;
92
+ border-radius: 50%;
93
+ margin: 10px auto;
94
+ display: block;
95
+ width: 50px;
96
+ height: 50px;
97
  }
98
 
99
+ button#swap-btn:hover {
100
+ background-color: #45a049;
 
 
 
 
101
  }
102
 
103
+ /* Styling dropdown agar lebih modern */
104
+ select {
105
+ -webkit-appearance: none;
106
+ -moz-appearance: none;
107
+ appearance: none;
108
+ padding-right: 30px;
109
+ background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16%3E%3Cpath d="M3.646 5.646a.5.5 0 0 1 .708 0L8 9.293l3.646-3.647a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E');
110
+ background-position: right 10px center;
111
+ background-repeat: no-repeat;
112
+ background-size: 12px;
113
  }
114
 
115
+ /* Tombol Convert */
116
+ button#convert-btn {
117
+ background-color: #4CAF50;
118
+ color: white;
119
+ padding: 15px;
120
+ font-size: 16px;
121
+ border: none;
122
+ border-radius: 8px;
123
+ cursor: pointer;
124
+ width: 100%;
125
+ margin-top: 20px;
 
126
  }
127
 
128
+ button#convert-btn:hover {
129
+ background-color: #45a049;
130
  }
131
 
132
+ /* Styling footer */
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  footer {
134
+ text-align: center;
135
+ margin-top: 20px;
136
+ font-size: 0.9em;
137
+ color: #777;
138
  }
139
 
140
+ footer a {
141
+ color: #4CAF50;
142
+ text-decoration: none;
143
+ }
 
 
 
 
 
 
144
 
145
+ footer a:hover {
146
+ text-decoration: underline;
147
+ }
148
 
149
+ #result {
150
+ margin-top: 20px;
151
+ font-size: 1.5em;
152
+ color: #333;
153
+ text-align: center;
154
  }
155
 
156
+ /* Responsif untuk layar kecil (mobile) */
157
+ @media (max-width: 600px) {
158
+ .container {
159
+ width: 90%;
160
+ padding: 15px;
161
+ }
162
+
163
+ header h1 {
164
+ font-size: 24px;
165
+ }
166
+
167
+ header p {
168
+ font-size: 14px;
169
+ }
170
+
171
+ input, select, button {
172
+ padding: 12px;
173
+ font-size: 14px;
174
+ }
175
+
176
+ button#swap-btn {
177
+ width: 45px;
178
+ height: 45px;
179
+ }
180
+ }
181
 
182
+ /* Responsif untuk tablet */
183
+ @media (min-width: 601px) and (max-width: 900px) {
184
+ .container {
185
+ width: 80%;
186
+ padding: 20px;
187
+ }
188
 
189
+ header h1 {
190
+ font-size: 28px;
191
+ }
192
 
193
+ input, select, button {
194
+ padding: 14px;
195
+ }
196
+ }
197
+
198
+ /* Responsif untuk desktop */
199
+ @media (min-width: 901px) {
200
+ .container {
201
+ width: 70%;
202
+ padding: 30px;
203
+ }
204
+
205
+ header h1 {
206
+ font-size: 32px;
207
+ }
208
+ }