Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
8435d04
·
verified ·
1 Parent(s): a86ed8b

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +30 -35
style.css CHANGED
@@ -17,30 +17,31 @@ body {
17
 
18
  .container {
19
  background: #ffffff;
20
- border-radius: 20px;
21
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
22
  padding: 40px;
23
- width: 450px;
 
24
  text-align: center;
25
  position: relative;
26
- max-width: 500px; /* Lebar maksimal di desktop */
27
  }
28
 
29
  h1 {
30
- font-size: 30px;
31
- margin-bottom: 25px;
32
  color: #2D3A3A;
33
- font-weight: 700;
34
  }
35
 
36
  input, select {
37
- padding: 15px;
38
- margin: 12px 0;
39
  width: 100%;
40
- font-size: 18px;
41
- border-radius: 10px;
42
- border: 1px solid #D1D1D1;
43
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
44
  transition: all 0.3s ease;
45
  }
46
 
@@ -52,41 +53,37 @@ input:focus, select:focus {
52
 
53
  .currency-selectors {
54
  display: flex;
55
- justify-content: space-between;
56
- gap: 15px;
 
57
  }
58
 
59
  span {
60
- font-size: 20px;
61
- font-weight: 600;
62
  color: #555;
63
  }
64
 
65
  button {
66
- padding: 15px 25px;
67
  background-color: #4CAF50;
68
  color: white;
69
  border: none;
70
- border-radius: 10px;
71
  width: 100%;
72
- font-size: 20px;
73
  font-weight: 600;
74
  cursor: pointer;
75
- transition: background-color 0.3s ease, transform 0.2s;
76
  }
77
 
78
  button:hover {
79
  background-color: #45a049;
80
- transform: translateY(-2px); /* Efek hover tombol */
81
- }
82
-
83
- button:active {
84
- transform: translateY(0); /* Efek tombol ketika ditekan */
85
  }
86
 
87
  #result {
88
- margin-top: 30px;
89
- font-size: 24px;
90
  font-weight: bold;
91
  color: #333;
92
  text-transform: uppercase;
@@ -108,26 +105,24 @@ body::after {
108
  user-select: none;
109
  letter-spacing: 2px;
110
  text-transform: uppercase;
111
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
112
  }
113
 
114
- /* Media Query untuk Layar Lebih Kecil */
115
  @media (max-width: 768px) {
116
  .container {
117
  padding: 30px;
118
- width: 100%;
119
- max-width: 100%;
120
  }
121
 
122
  h1 {
123
- font-size: 24px;
124
  }
125
 
126
  input, select {
127
- font-size: 16px;
128
  }
129
 
130
  button {
131
- font-size: 18px;
132
  }
133
  }
 
17
 
18
  .container {
19
  background: #ffffff;
20
+ border-radius: 15px;
21
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
22
  padding: 40px;
23
+ width: 100%;
24
+ max-width: 600px; /* Membatasi lebar maksimum untuk desktop */
25
  text-align: center;
26
  position: relative;
27
+ margin: 0 20px; /* Memberikan margin kiri dan kanan agar tidak terlalu menempel di tepi layar */
28
  }
29
 
30
  h1 {
31
+ font-size: 2rem; /* Ukuran font lebih besar untuk desktop */
32
+ margin-bottom: 20px;
33
  color: #2D3A3A;
34
+ font-weight: 600;
35
  }
36
 
37
  input, select {
38
+ padding: 12px;
39
+ margin: 10px 0;
40
  width: 100%;
41
+ font-size: 16px;
42
+ border-radius: 8px;
43
+ border: 1px solid #E0E0E0;
44
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
45
  transition: all 0.3s ease;
46
  }
47
 
 
53
 
54
  .currency-selectors {
55
  display: flex;
56
+ justify-content: center;
57
+ align-items: center;
58
+ gap: 10px;
59
  }
60
 
61
  span {
62
+ font-size: 18px;
63
+ font-weight: 500;
64
  color: #555;
65
  }
66
 
67
  button {
68
+ padding: 12px 20px;
69
  background-color: #4CAF50;
70
  color: white;
71
  border: none;
72
+ border-radius: 8px;
73
  width: 100%;
74
+ font-size: 18px;
75
  font-weight: 600;
76
  cursor: pointer;
77
+ transition: background-color 0.3s ease;
78
  }
79
 
80
  button:hover {
81
  background-color: #45a049;
 
 
 
 
 
82
  }
83
 
84
  #result {
85
+ margin-top: 20px;
86
+ font-size: 20px;
87
  font-weight: bold;
88
  color: #333;
89
  text-transform: uppercase;
 
105
  user-select: none;
106
  letter-spacing: 2px;
107
  text-transform: uppercase;
 
108
  }
109
 
110
+ /* Responsif untuk Mobile */
111
  @media (max-width: 768px) {
112
  .container {
113
  padding: 30px;
114
+ max-width: 100%; /* Lebar penuh di layar kecil */
 
115
  }
116
 
117
  h1 {
118
+ font-size: 1.5rem; /* Ukuran font lebih kecil untuk mobile */
119
  }
120
 
121
  input, select {
122
+ font-size: 14px;
123
  }
124
 
125
  button {
126
+ font-size: 16px;
127
  }
128
  }