Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
d52423d
·
verified ·
1 Parent(s): d53e7dd

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +186 -69
style.css CHANGED
@@ -1,98 +1,215 @@
1
- /* Styling untuk Navbar */
2
- .navbar {
3
- background-color: #4CAF50; /* Warna hijau untuk navbar */
4
- padding: 10px 20px;
5
- display: flex;
6
- justify-content: center;
7
- align-items: center;
 
 
 
 
 
8
  }
9
 
10
- .navbar .logo {
11
- width: 100px; /* Sesuaikan ukuran logo */
 
 
 
 
 
 
 
 
12
  }
13
 
14
- /* Styling untuk Headline */
15
- .headline {
16
- background-color: #4CAF50; /* Warna hijau untuk headline */
17
- color: white;
18
- padding: 40px;
19
- text-align: center;
 
20
  }
21
 
22
- /* Styling untuk Konten Utama */
23
- .content-area {
24
- background-color: white; /* Latar belakang putih untuk konten */
25
- padding: 20px;
26
- border-radius: 10px;
27
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
28
- max-width: 800px;
29
- margin: 40px auto;
30
  }
31
 
32
- .content-area input,
33
- .content-area select,
34
- .content-area button {
35
- padding: 10px;
36
- margin: 10px 0;
37
- width: 100%;
38
- border: 1px solid #ddd;
39
- border-radius: 5px;
40
  }
41
 
42
- .content-area button {
43
- background-color: #4CAF50;
44
- color: white;
45
- cursor: pointer;
46
  }
47
 
48
- .content-area button:hover {
49
- background-color: #45a049;
 
 
 
50
  }
51
 
52
- /* Styling untuk Box Informasi */
53
- .info-box {
54
- background-color: white;
55
- border: 1px solid #ddd;
56
- padding: 20px;
57
- margin: 20px 0;
58
- border-radius: 8px;
59
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
60
  }
61
 
62
- .info-box h2 {
63
- color: #333;
64
- margin-bottom: 10px;
 
 
 
65
  }
66
 
67
- .info-box p {
68
- color: #555;
69
- line-height: 1.6;
 
70
  }
71
 
72
- /* Styling untuk Footer */
73
- .footer {
74
- background-color: #333; /* Latar belakang footer */
75
- color: white;
76
- padding: 20px 0;
77
- text-align: center;
 
 
 
 
78
  }
79
 
80
- .footer .social-icons {
81
- margin: 20px 0;
 
 
 
 
 
 
 
 
 
 
 
82
  }
83
 
84
- .footer .social-icons a {
85
- color: white;
86
- font-size: 24px;
87
- margin: 0 10px;
88
- text-decoration: none;
89
  }
90
 
91
- .footer .social-icons a:hover {
92
- color: #4CAF50;
 
 
 
 
 
 
 
 
93
  }
94
 
95
- .footer .copyright {
96
- font-size: 14px;
97
- margin-top: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  }
 
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
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ background-color: #4CAF50; /* Hijau navbar */
33
+ padding: 10px;
34
  }
35
 
36
+ header .logo img {
37
+ width: 150px; /* Ukuran logo */
 
 
 
 
 
 
38
  }
39
 
40
+ header h1 {
41
+ margin-top: 10px;
42
+ font-size: 32px;
43
+ color: #4CAF50;
 
 
 
 
44
  }
45
 
46
+ header p {
47
+ color: #777;
48
+ font-size: 16px;
 
49
  }
50
 
51
+ /* Menambahkan Flexbox pada kontainer form untuk menyusun secara teratur */
52
+ .currency-container {
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: 20px;
56
  }
57
 
58
+ /* Sejajarkan form elemen dengan ukuran lebar yang konsisten */
59
+ .currency-input {
60
+ display: flex;
61
+ flex-direction: column;
62
+ width: 100%;
 
 
 
63
  }
64
 
65
+ /* Styling untuk label dan input */
66
+ .currency-labels {
67
+ display: flex;
68
+ flex-direction: column;
69
+ align-items: stretch;
70
+ margin-bottom: 15px;
71
  }
72
 
73
+ .currency-labels label {
74
+ font-size: 16px;
75
+ color: #333;
76
+ display: block;
77
  }
78
 
79
+ /* Kotak input dan select (dropdown) */
80
+ input, select {
81
+ padding: 15px;
82
+ width: 100%;
83
+ max-width: 100%;
84
+ margin-bottom: 20px;
85
+ border-radius: 8px;
86
+ border: 1px solid #ddd;
87
+ background-color: #f5f5f5;
88
+ color: #333;
89
  }
90
 
91
+ /* Tombol swap dengan model baru */
92
+ button#swap-btn {
93
+ background-color: #4CAF50; /* Hijau untuk tombol swap */
94
+ border: none;
95
+ padding: 12px;
96
+ color: white;
97
+ cursor: pointer;
98
+ font-size: 20px;
99
+ border-radius: 50%;
100
+ margin: 10px auto;
101
+ display: block;
102
+ width: 50px;
103
+ height: 50px;
104
  }
105
 
106
+ button#swap-btn:hover {
107
+ background-color: #45a049;
 
 
 
108
  }
109
 
110
+ /* Styling dropdown agar lebih modern */
111
+ select {
112
+ -webkit-appearance: none;
113
+ -moz-appearance: none;
114
+ appearance: none;
115
+ padding-right: 30px;
116
+ 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');
117
+ background-position: right 10px center;
118
+ background-repeat: no-repeat;
119
+ background-size: 12px;
120
  }
121
 
122
+ /* Tombol Convert */
123
+ button#convert-btn {
124
+ background-color: #4CAF50;
125
+ color: white;
126
+ padding: 15px;
127
+ font-size: 16px;
128
+ border: none;
129
+ border-radius: 8px;
130
+ cursor: pointer;
131
+ width: 100%;
132
+ margin-top: 20px;
133
+ }
134
+
135
+ button#convert-btn:hover {
136
+ background-color: #45a049;
137
+ }
138
+
139
+ /* Styling footer */
140
+ footer {
141
+ text-align: center;
142
+ margin-top: 20px;
143
+ font-size: 0.9em;
144
+ color: #777;
145
+ }
146
+
147
+ footer a {
148
+ color: #4CAF50;
149
+ text-decoration: none;
150
+ }
151
+
152
+ footer a:hover {
153
+ text-decoration: underline;
154
+ }
155
+
156
+ #result {
157
+ margin-top: 20px;
158
+ font-size: 1.5em;
159
+ color: #333;
160
+ text-align: center;
161
+ }
162
+
163
+ /* Responsif untuk layar kecil (mobile) */
164
+ @media (max-width: 600px) {
165
+ .container {
166
+ width: 90%;
167
+ padding: 15px;
168
+ }
169
+
170
+ header h1 {
171
+ font-size: 24px;
172
+ }
173
+
174
+ header p {
175
+ font-size: 14px;
176
+ }
177
+
178
+ input, select, button {
179
+ padding: 12px;
180
+ font-size: 14px;
181
+ }
182
+
183
+ button#swap-btn {
184
+ width: 45px;
185
+ height: 45px;
186
+ }
187
+ }
188
+
189
+ /* Responsif untuk tablet */
190
+ @media (min-width: 601px) and (max-width: 900px) {
191
+ .container {
192
+ width: 80%;
193
+ padding: 20px;
194
+ }
195
+
196
+ header h1 {
197
+ font-size: 28px;
198
+ }
199
+
200
+ input, select, button {
201
+ padding: 14px;
202
+ }
203
+ }
204
+
205
+ /* Responsif untuk desktop */
206
+ @media (min-width: 901px) {
207
+ .container {
208
+ width: 70%;
209
+ padding: 30px;
210
+ }
211
+
212
+ header h1 {
213
+ font-size: 32px;
214
+ }
215
  }