Hugging Face's logo

Spaces:
GarGerry
/
Testinghh
Running

App Files Community
GarGerry commited on
Commit
25aafa1
·
verified ·
1 Parent(s): aade644

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +44 -64
style.css CHANGED
@@ -7,127 +7,107 @@
7
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
- background: linear-gradient(135deg, #001d4a, #04396e); /* Warna gradien biru gelap */
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
  height: 100vh;
15
- color: #fff;
16
- position: relative;
17
  }
18
 
19
- /* Container styles */
20
  .container {
21
  background: #ffffff;
22
  border-radius: 15px;
23
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Bayangan */
24
- padding: 30px;
25
  width: 100%;
26
- max-width: 450px;
27
  text-align: center;
28
- color: #333;
29
- }
30
-
31
- /* Header section */
32
- header h1 {
33
- font-size: 1.8rem;
34
- font-weight: bold;
35
- color: #001d4a;
36
- margin-bottom: 10px;
37
  }
38
 
39
- header p {
40
- font-size: 0.9rem;
41
- color: #555;
42
  margin-bottom: 20px;
43
  }
44
 
45
- /* Form styles */
46
- input {
47
- display: block;
48
- width: 100%;
49
  padding: 12px;
 
 
50
  font-size: 16px;
51
- margin-bottom: 15px;
52
- border: 1px solid #e0e0e0;
53
  border-radius: 8px;
 
54
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
 
55
  }
56
 
57
- select {
58
- width: 100%;
59
- padding: 12px;
60
- font-size: 16px;
61
- margin-bottom: 15px;
62
- border: 1px solid #e0e0e0;
63
- border-radius: 8px;
64
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
65
  }
66
 
67
- /* Currency selectors with swap button */
68
  .currency-selectors {
69
  display: flex;
70
  align-items: center;
71
- justify-content: space-between;
72
  gap: 10px;
73
- margin-bottom: 15px;
74
- }
75
-
76
- .currency-selectors select {
77
- width: 45%;
78
  }
79
 
80
- .swap-button {
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- background-color: #1e90ff;
85
- color: #ffffff;
86
  border: none;
87
  border-radius: 50%;
88
- width: 40px;
89
- height: 40px;
90
  cursor: pointer;
91
  transition: background-color 0.3s ease;
92
  }
93
 
94
- .swap-button:hover {
95
- background-color: #1c7ed6;
96
  }
97
 
98
- /* Button styles */
99
  button {
100
- width: 100%;
101
  background-color: #4CAF50;
102
  color: white;
103
- padding: 12px;
104
- font-size: 18px;
105
  border: none;
106
  border-radius: 8px;
 
 
 
107
  cursor: pointer;
108
  transition: background-color 0.3s ease;
109
- font-weight: bold;
110
  }
111
 
112
  button:hover {
113
  background-color: #45a049;
114
  }
115
 
116
- /* Result box */
117
  #result {
118
  margin-top: 20px;
 
 
 
 
119
  padding: 15px;
120
- font-size: 18px;
121
- background: #f4f4f4;
122
  border-radius: 8px;
123
- text-align: center;
124
- color: #333;
125
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
126
  }
127
 
128
- /* Footer */
129
- footer p {
130
- font-size: 0.8rem;
131
- color: #777;
132
  margin-top: 20px;
133
  }
 
 
 
 
 
 
 
 
7
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: linear-gradient(135deg, #D9E4EC, #F5F7FA);
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
  height: 100vh;
15
+ color: #333;
 
16
  }
17
 
 
18
  .container {
19
  background: #ffffff;
20
  border-radius: 15px;
21
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
22
+ padding: 40px;
23
  width: 100%;
24
+ max-width: 600px;
25
  text-align: center;
26
+ margin: 0 20px;
 
 
 
 
 
 
 
 
27
  }
28
 
29
+ header {
30
+ border-bottom: 2px solid #333;
31
+ padding-bottom: 15px;
32
  margin-bottom: 20px;
33
  }
34
 
35
+ input, select {
 
 
 
36
  padding: 12px;
37
+ margin: 10px 0;
38
+ width: 100%;
39
  font-size: 16px;
 
 
40
  border-radius: 8px;
41
+ border: 1px solid #E0E0E0;
42
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
43
+ transition: all 0.3s ease;
44
  }
45
 
46
+ input:focus, select:focus {
47
+ border: 1px solid #4CAF50;
48
+ outline: none;
49
+ box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
 
 
 
 
50
  }
51
 
 
52
  .currency-selectors {
53
  display: flex;
54
  align-items: center;
 
55
  gap: 10px;
 
 
 
 
 
56
  }
57
 
58
+ #swapButton {
59
+ background-color: #4CAF50;
60
+ color: white;
 
 
 
61
  border: none;
62
  border-radius: 50%;
63
+ padding: 10px;
64
+ font-size: 16px;
65
  cursor: pointer;
66
  transition: background-color 0.3s ease;
67
  }
68
 
69
+ #swapButton:hover {
70
+ background-color: #45a049;
71
  }
72
 
 
73
  button {
74
+ padding: 12px 20px;
75
  background-color: #4CAF50;
76
  color: white;
 
 
77
  border: none;
78
  border-radius: 8px;
79
+ width: 100%;
80
+ font-size: 18px;
81
+ font-weight: 600;
82
  cursor: pointer;
83
  transition: background-color 0.3s ease;
 
84
  }
85
 
86
  button:hover {
87
  background-color: #45a049;
88
  }
89
 
 
90
  #result {
91
  margin-top: 20px;
92
+ font-size: 20px;
93
+ font-weight: bold;
94
+ color: #333;
95
+ background-color: #f4f4f4;
96
  padding: 15px;
 
 
97
  border-radius: 8px;
98
+ text-transform: uppercase;
 
99
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
100
  }
101
 
102
+ footer {
103
+ border-top: 2px solid #333;
104
+ padding-top: 15px;
 
105
  margin-top: 20px;
106
  }
107
+
108
+ @media (max-width: 768px) {
109
+ .container {
110
+ padding: 30px;
111
+ max-width: 100%;
112
+ }
113
+ }