Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
6bf2ecf
·
verified ·
1 Parent(s): 0ad5a52

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +88 -33
style.css CHANGED
@@ -2,84 +2,139 @@ body {
2
  font-family: Arial, sans-serif;
3
  margin: 0;
4
  padding: 0;
5
- background-color: #f4f4f4;
6
  }
7
 
8
  .navbar {
9
- background-color: #006400; /* Green color */
10
- padding: 10px;
11
- color: white;
12
- text-align: center;
 
 
 
 
 
 
 
 
 
13
  }
14
 
15
  .headline {
16
- background-color: #006400;
17
- color: white;
18
  text-align: center;
19
- padding: 20px;
 
 
 
20
  }
21
 
22
- .converter {
23
- padding: 20px;
24
- text-align: center;
25
  }
26
 
27
- .amount-input, .currency-select {
28
- padding: 10px;
29
- margin: 10px;
30
- font-size: 16px;
31
  }
32
 
33
- #swap-btn {
34
- padding: 10px;
 
 
 
 
 
 
 
 
 
 
 
35
  margin: 10px;
36
- cursor: pointer;
 
 
 
37
  }
38
 
39
  #convert-btn {
40
- padding: 10px 20px;
41
  background-color: #006400;
42
  color: white;
43
- font-size: 16px;
44
  cursor: pointer;
45
  }
46
 
47
- #result {
48
- margin-top: 20px;
49
- font-size: 18px;
 
 
 
 
 
 
 
 
 
 
50
  }
51
 
52
  .how-to-use {
53
- padding: 30px;
54
- background-color: #f2f2f2;
 
 
 
 
 
 
 
55
  }
56
 
57
  .steps {
58
  display: flex;
59
- justify-content: space-around;
 
60
  flex-wrap: wrap;
61
  }
62
 
63
  .step {
64
- background-color: #ccc;
65
  padding: 20px;
66
  margin: 10px;
67
- border-radius: 10px;
 
68
  text-align: center;
69
- flex: 1;
70
- min-width: 250px;
 
 
71
  }
72
 
73
  .footer {
74
- background-color: #808080;
75
  color: white;
76
- padding: 10px;
77
  text-align: center;
 
 
 
 
 
78
  }
79
 
80
- /* Responsiveness */
81
  @media screen and (max-width: 768px) {
82
  .steps {
83
  flex-direction: column;
84
  }
 
 
 
 
 
 
 
 
 
 
85
  }
 
2
  font-family: Arial, sans-serif;
3
  margin: 0;
4
  padding: 0;
5
+ box-sizing: border-box;
6
  }
7
 
8
  .navbar {
9
+ position: fixed;
10
+ top: 0;
11
+ left: 0;
12
+ width: 100%;
13
+ background-color: #006400; /* Green */
14
+ padding: 10px 20px;
15
+ display: flex;
16
+ justify-content: flex-start;
17
+ align-items: center;
18
+ }
19
+
20
+ .navbar .logo img {
21
+ height: 40px;
22
  }
23
 
24
  .headline {
 
 
25
  text-align: center;
26
+ background-color: #004d00; /* Dark Green */
27
+ color: white;
28
+ padding: 50px 20px;
29
+ margin-top: 60px;
30
  }
31
 
32
+ .headline h1 {
33
+ font-size: 36px;
34
+ font-weight: bold;
35
  }
36
 
37
+ .headline p {
38
+ font-size: 18px;
 
 
39
  }
40
 
41
+ .content {
42
+ background-color: white;
43
+ padding: 40px 20px;
44
+ margin-top: 20px;
45
+ }
46
+
47
+ .converter-container {
48
+ display: flex;
49
+ flex-direction: column;
50
+ align-items: center;
51
+ }
52
+
53
+ .converter-container input, .converter-container select, .converter-container button {
54
  margin: 10px;
55
+ padding: 10px;
56
+ font-size: 16px;
57
+ width: 200px;
58
+ border: 1px solid #ccc;
59
  }
60
 
61
  #convert-btn {
 
62
  background-color: #006400;
63
  color: white;
 
64
  cursor: pointer;
65
  }
66
 
67
+ #convert-btn:hover {
68
+ background-color: #004d00;
69
+ }
70
+
71
+ #swap-btn {
72
+ background-color: #cccccc;
73
+ color: black;
74
+ cursor: pointer;
75
+ margin-top: 10px;
76
+ }
77
+
78
+ #swap-btn:hover {
79
+ background-color: #b3b3b3;
80
  }
81
 
82
  .how-to-use {
83
+ background-color: #004d00; /* Dark Green */
84
+ color: white;
85
+ padding: 30px 20px;
86
+ margin-top: 20px;
87
+ text-align: center;
88
+ }
89
+
90
+ .how-to-use h2 {
91
+ font-weight: bold;
92
  }
93
 
94
  .steps {
95
  display: flex;
96
+ justify-content: center;
97
+ margin-top: 20px;
98
  flex-wrap: wrap;
99
  }
100
 
101
  .step {
102
+ background-color: #e0e0e0; /* Gray */
103
  padding: 20px;
104
  margin: 10px;
105
+ width: 200px;
106
+ border-radius: 8px;
107
  text-align: center;
108
+ }
109
+
110
+ .step h3 {
111
+ font-weight: bold;
112
  }
113
 
114
  .footer {
115
+ background-color: #666666; /* Dark Gray */
116
  color: white;
117
+ padding: 20px 0;
118
  text-align: center;
119
+ margin-top: 40px;
120
+ }
121
+
122
+ .footer-content p {
123
+ margin: 5px 0;
124
  }
125
 
 
126
  @media screen and (max-width: 768px) {
127
  .steps {
128
  flex-direction: column;
129
  }
130
+ }
131
+
132
+ @media screen and (max-width: 480px) {
133
+ .converter-container {
134
+ width: 100%;
135
+ }
136
+
137
+ .footer-content p {
138
+ font-size: 14px;
139
+ }
140
  }