Hugging Face's logo

Spaces:
GarGerry
/
Testinghh
Running

App Files Community
GarGerry commited on
Commit
1b6268d
·
verified ·
1 Parent(s): 05d1a10

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +51 -84
style.css CHANGED
@@ -7,146 +7,113 @@
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
- header h1 {
39
- font-size: 2rem; /* Ukuran font tetap */
40
- font-weight: bold;
41
- color: #002d63; /* Warna biru tua untuk judul */
42
  }
43
 
44
  /* Form styles */
45
- input, select {
46
- padding: 12px;
47
- margin: 10px 0;
48
  width: 100%;
 
49
  font-size: 16px;
 
 
50
  border-radius: 8px;
51
- border: 1px solid #E0E0E0;
52
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
53
  transition: all 0.3s ease;
54
  }
55
 
56
- input:focus, select:focus {
57
- border: 1px solid #4CAF50;
58
- outline: none;
59
- box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
 
 
 
 
 
60
  }
61
 
62
- /* Styling for currency selectors */
63
  .currency-selectors {
64
  display: flex;
65
- justify-content: center;
66
  align-items: center;
 
67
  gap: 10px;
 
68
  }
69
 
70
- span {
71
- font-size: 18px;
72
- font-weight: 500;
73
- color: #555;
74
  }
75
 
76
  /* Button styles */
77
  button {
78
- padding: 12px 20px;
79
- background-color: #0056b3; /* Biru lebih gelap */
80
  color: white;
 
 
81
  border: none;
82
  border-radius: 8px;
83
- width: 100%;
84
- font-size: 18px;
85
- font-weight: 600;
86
  cursor: pointer;
87
  transition: background-color 0.3s ease;
 
88
  }
89
 
90
  button:hover {
91
- background-color: #003d80; /* Hover dengan warna biru tua */
92
  }
93
 
94
- /* Result box styles */
95
  #result {
96
  margin-top: 20px;
97
- font-size: 20px;
98
- font-weight: bold;
99
- color: #0056b3; /* Teks biru */
100
- background-color: #eef6ff; /* Latar belakang biru muda */
101
  padding: 15px;
 
 
102
  border-radius: 8px;
103
- text-transform: uppercase;
 
104
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
105
- border: 1px solid #d4eaff; /* Border biru muda */
106
  }
107
 
108
- /* Footer section styles */
109
- footer {
110
- border-top: 2px solid #333; /* Footer border */
111
- padding-top: 15px;
112
  margin-top: 20px;
113
  }
114
-
115
- /* Responsiveness for mobile screens */
116
- @media (max-width: 768px) {
117
- .container {
118
- padding: 30px;
119
- max-width: 100%;
120
- }
121
-
122
- h1 {
123
- font-size: 1.5rem;
124
- }
125
-
126
- input, select {
127
- font-size: 14px;
128
- }
129
-
130
- button {
131
- font-size: 16px;
132
- }
133
- }
134
-
135
- /* Responsiveness for larger screens */
136
- @media (min-width: 769px) {
137
- .container {
138
- max-width: 700px;
139
- }
140
-
141
- h1 {
142
- font-size: 2.5rem;
143
- }
144
-
145
- input, select {
146
- font-size: 18px;
147
- }
148
-
149
- button {
150
- font-size: 20px;
151
- }
152
- }
 
7
 
8
  body {
9
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: linear-gradient(135deg, #091227, #1E3A56); /* Warna gradien 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); /* Lebih gelap untuk memberikan kesan */
24
  padding: 40px;
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: 600;
35
+ color: #001d4a; /* Biru tua */
36
+ margin-bottom: 15px;
37
  }
38
 
39
+ header p {
40
+ font-size: 0.9rem;
41
+ color: #555; /* Abu-abu ringan */
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
  transition: all 0.3s ease;
56
  }
57
 
58
+ select {
59
+ width: 100%;
60
+ padding: 12px;
61
+ font-size: 16px;
62
+ margin-bottom: 15px;
63
+ border: 1px solid #e0e0e0;
64
+ border-radius: 8px;
65
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
66
+ transition: all 0.3s ease;
67
  }
68
 
69
+ /* Switch button between currencies */
70
  .currency-selectors {
71
  display: flex;
 
72
  align-items: center;
73
+ justify-content: center;
74
  gap: 10px;
75
+ margin-bottom: 15px;
76
  }
77
 
78
+ .currency-selectors span {
79
+ font-size: 24px;
80
+ color: #4caf50; /* Hijau untuk tanda panah */
81
+ cursor: pointer;
82
  }
83
 
84
  /* Button styles */
85
  button {
86
+ width: 100%;
87
+ background-color: #4caf50;
88
  color: white;
89
+ padding: 12px;
90
+ font-size: 18px;
91
  border: none;
92
  border-radius: 8px;
 
 
 
93
  cursor: pointer;
94
  transition: background-color 0.3s ease;
95
+ font-weight: bold;
96
  }
97
 
98
  button:hover {
99
+ background-color: #45a049;
100
  }
101
 
102
+ /* Result box */
103
  #result {
104
  margin-top: 20px;
 
 
 
 
105
  padding: 15px;
106
+ font-size: 18px;
107
+ background: #f4f4f4;
108
  border-radius: 8px;
109
+ text-align: center;
110
+ color: #333;
111
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
112
  }
113
 
114
+ /* Footer */
115
+ footer p {
116
+ font-size: 0.8rem;
117
+ color: #777;
118
  margin-top: 20px;
119
  }