Hugging Face's logo

Spaces:
GarGerry
/
Testinghh
Running

App Files Community
GarGerry commited on
Commit
08fa787
·
verified ·
1 Parent(s): 5a2d8ac

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +54 -64
style.css CHANGED
@@ -1,107 +1,97 @@
1
- /* General */
2
  body {
3
- font-family: Arial, sans-serif;
 
 
4
  margin: 0;
5
  padding: 0;
6
  display: flex;
7
  justify-content: center;
8
  align-items: center;
9
- min-height: 100vh;
10
- background-color: #f5f5f5;
11
  }
12
 
13
- .container {
14
- background: white;
15
- padding: 20px;
16
- border-radius: 8px;
17
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
- width: 100%;
 
19
  max-width: 400px;
 
20
  }
21
 
22
- /* Header */
23
- header h1 {
 
 
24
  text-align: center;
25
- margin-bottom: 20px;
26
- color: #333;
27
- }
28
-
29
- /* Form Groups */
30
- .form-group {
31
- margin-bottom: 15px;
32
  }
33
 
34
- label {
35
- display: block;
36
- margin-bottom: 8px;
37
- color: #555;
38
- }
39
-
40
- input, select {
41
  width: 100%;
42
  padding: 10px;
 
 
 
43
  font-size: 16px;
44
- border: 1px solid #ddd;
45
- border-radius: 4px;
46
- }
47
-
48
- /* Swap Button */
49
- .swap-group {
50
- text-align: center;
51
- margin: 15px 0;
52
  }
53
 
 
54
  #swapButton {
55
- background-color: #87CEFA; /* Biru Langit */
56
  border: none;
57
  border-radius: 50%;
58
  padding: 10px;
59
- font-size: 18px;
60
- color: white;
 
 
 
 
61
  cursor: pointer;
62
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
63
- transition: background-color 0.3s ease;
64
  }
65
 
66
  #swapButton:hover {
67
- background-color: #5faad7; /* Biru Langit Gelap */
68
  }
69
 
70
- /* Convert Button */
71
- .convert-button {
72
- background-color: #87CEFA;
 
 
 
 
 
 
73
  border: none;
74
- border-radius: 8px;
75
- padding: 12px 20px;
76
- font-size: 18px;
77
  color: white;
78
- font-weight: bold;
 
 
79
  cursor: pointer;
80
- width: 100%;
81
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
82
- transition: background-color 0.3s ease;
83
  }
84
 
85
- .convert-button:hover {
86
- background-color: #5faad7;
87
  }
88
 
89
- /* Result Box */
90
- .result-box {
91
- margin-top: 15px;
92
- padding: 10px;
93
- font-size: 16px;
94
- color: #333;
95
  text-align: center;
96
- background-color: #f9f9f9;
97
- border: 1px solid #ddd;
98
- border-radius: 4px;
99
  }
100
 
101
  /* Footer */
102
  footer {
103
- text-align: center;
104
  margin-top: 20px;
105
- font-size: 14px;
106
- color: #aaa;
 
107
  }
 
1
+ /* General body styling */
2
  body {
3
+ font-family: 'Arial', sans-serif;
4
+ background-color: #001d57; /* Dark blue background */
5
+ color: #ffffff; /* White text */
6
  margin: 0;
7
  padding: 0;
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
+ height: 100vh;
 
12
  }
13
 
14
+ /* Card container */
15
+ .currency-converter {
16
+ background-color: #ffffff;
17
+ color: #001d57;
18
+ border-radius: 15px;
19
+ padding: 20px 25px;
20
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
21
  max-width: 400px;
22
+ width: 100%;
23
  }
24
 
25
+ /* Header styling */
26
+ .currency-converter h1 {
27
+ font-size: 24px;
28
+ margin-bottom: 10px;
29
  text-align: center;
 
 
 
 
 
 
 
30
  }
31
 
32
+ /* Input and select fields */
33
+ .currency-converter input,
34
+ .currency-converter select {
 
 
 
 
35
  width: 100%;
36
  padding: 10px;
37
+ margin: 10px 0;
38
+ border: 1px solid #ccc;
39
+ border-radius: 10px;
40
  font-size: 16px;
 
 
 
 
 
 
 
 
41
  }
42
 
43
+ /* Swap button styling */
44
  #swapButton {
45
+ background-color: #eaf3ff;
46
  border: none;
47
  border-radius: 50%;
48
  padding: 10px;
49
+ width: 40px;
50
+ height: 40px;
51
+ display: flex;
52
+ justify-content: center;
53
+ align-items: center;
54
+ margin: 10px auto;
55
  cursor: pointer;
 
 
56
  }
57
 
58
  #swapButton:hover {
59
+ background-color: #d3e6ff;
60
  }
61
 
62
+ #swapButton img {
63
+ width: 20px;
64
+ height: 20px;
65
+ }
66
+
67
+ /* Convert button */
68
+ .currency-converter button {
69
+ width: 100%;
70
+ background-color: #007bff;
71
  border: none;
 
 
 
72
  color: white;
73
+ padding: 10px;
74
+ border-radius: 10px;
75
+ font-size: 16px;
76
  cursor: pointer;
 
 
 
77
  }
78
 
79
+ .currency-converter button:hover {
80
+ background-color: #0056b3;
81
  }
82
 
83
+ /* Result styling */
84
+ #result {
85
+ margin-top: 20px;
86
+ font-size: 18px;
87
+ font-weight: bold;
 
88
  text-align: center;
 
 
 
89
  }
90
 
91
  /* Footer */
92
  footer {
 
93
  margin-top: 20px;
94
+ font-size: 12px;
95
+ text-align: center;
96
+ color: rgba(255, 255, 255, 0.7);
97
  }