Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
4f6b6be
·
verified ·
1 Parent(s): 80f3229

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +99 -81
style.css CHANGED
@@ -1,155 +1,173 @@
1
- /* General Reset */
2
- body, h1, h2, p, input, select, button {
 
3
  margin: 0;
4
  padding: 0;
5
- font-family: Arial, sans-serif;
6
- }
7
-
8
- body {
9
- background-color: #1b5e20; /* Green background */
10
  color: white;
11
  display: flex;
12
  flex-direction: column;
13
- align-items: center;
14
  min-height: 100vh;
15
- padding: 0 20px;
16
  }
17
 
18
  /* Navbar */
19
- .navbar {
20
- width: 100%;
21
- background-color: #1b5e20;
22
- color: white;
23
  text-align: center;
24
- padding: 15px 0;
25
- position: fixed;
26
- top: 0;
27
- left: 0;
28
- z-index: 100;
29
  }
30
 
31
- .navbar .logo img {
32
- height: 50px;
33
- vertical-align: middle;
34
  }
35
 
36
- .navbar .welcome-text {
37
- margin-top: 10px;
38
  }
39
 
40
  /* Headline */
41
- .headline {
 
 
42
  text-align: center;
43
- margin-top: 80px; /* To avoid overlap with fixed navbar */
44
- background-color: #1b5e20; /* Same green as navbar */
45
- padding: 20px 0;
46
- color: white;
47
  }
48
 
49
- .headline h1 {
50
- font-size: 2em;
51
  }
52
 
53
- .headline p {
54
- font-size: 1.2em;
55
  }
56
 
57
- /* Converter Content */
58
- .converter-content {
59
  background-color: white;
60
- width: 100%;
61
- max-width: 800px;
62
- margin-top: 20px;
63
- padding: 20px;
64
- border-radius: 10px;
65
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 
 
66
  }
67
 
68
  .currency-input {
69
- margin-bottom: 20px;
 
70
  }
71
 
72
  .currency-input label {
73
- display: block;
74
- font-size: 1em;
75
- margin-bottom: 5px;
76
  }
77
 
78
- .currency-input input, .currency-input select {
79
- width: 100%;
80
- padding: 12px;
81
- font-size: 1em;
 
82
  border-radius: 8px;
83
- border: 1px solid #ddd;
84
- background-color: #f5f5f5;
85
  }
86
 
87
- button#swap-btn {
88
- background-color: #4CAF50;
89
- color: white;
90
  border: none;
91
  padding: 12px;
92
- font-size: 20px;
93
  cursor: pointer;
 
94
  border-radius: 50%;
95
  margin: 10px auto;
96
  display: block;
 
 
 
 
 
 
97
  }
98
 
99
- button#convert-btn {
 
100
  background-color: #4CAF50;
101
  color: white;
102
  padding: 15px;
103
- font-size: 1em;
104
  border: none;
105
  border-radius: 8px;
106
  cursor: pointer;
107
  width: 100%;
108
  }
109
 
 
 
 
 
 
110
  #result {
111
- text-align: center;
112
  margin-top: 20px;
 
 
 
113
  }
114
 
115
- /* Instructions Section */
116
- .instructions {
117
- background-color: white;
118
- padding: 20px;
119
- width: 100%;
120
- max-width: 800px;
121
- margin-top: 30px;
122
- border-radius: 10px;
123
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
124
  }
125
 
126
- .instructions-box {
127
- background-color: #f5f5f5;
128
- padding: 20px;
129
- border-radius: 8px;
130
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
131
  }
132
 
133
- .instructions-box h2 {
134
- text-align: center;
135
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
136
  }
137
 
138
  /* Footer */
139
- .footer {
140
- width: 100%;
141
- background-color: #333;
142
  color: white;
143
  text-align: center;
144
- padding: 15px 0;
145
- margin-top: 40px;
146
  }
147
 
148
- .footer a {
149
  color: #4CAF50;
150
  text-decoration: none;
151
  }
152
 
153
- .footer a:hover {
154
  text-decoration: underline;
 
 
 
 
 
 
 
 
 
 
 
 
155
  }
 
1
+ /* General Styling */
2
+ body {
3
+ font-family: Arial, sans-serif;
4
  margin: 0;
5
  padding: 0;
6
+ background-color: #1b5e20; /* Dark Green */
 
 
 
 
7
  color: white;
8
  display: flex;
9
  flex-direction: column;
 
10
  min-height: 100vh;
 
11
  }
12
 
13
  /* Navbar */
14
+ #navbar {
15
+ background-color: #2c6e1f; /* Dark Green */
16
+ padding: 20px;
 
17
  text-align: center;
 
 
 
 
 
18
  }
19
 
20
+ #navbar h1 {
21
+ margin: 0;
 
22
  }
23
 
24
+ #navbar p {
25
+ margin: 5px 0;
26
  }
27
 
28
  /* Headline */
29
+ #headline {
30
+ background-color: #2c6e1f; /* Dark Green */
31
+ padding: 30px;
32
  text-align: center;
 
 
 
 
33
  }
34
 
35
+ #headline h2 {
36
+ margin: 0;
37
  }
38
 
39
+ #headline p {
40
+ margin: 10px 0;
41
  }
42
 
43
+ /* Currency Converter Section */
44
+ #converter {
45
  background-color: white;
46
+ color: #333;
47
+ padding: 30px;
48
+ }
49
+
50
+ .currency-container {
51
+ display: flex;
52
+ flex-direction: column;
53
+ gap: 20px;
54
  }
55
 
56
  .currency-input {
57
+ display: flex;
58
+ flex-direction: column;
59
  }
60
 
61
  .currency-input label {
62
+ font-size: 16px;
63
+ margin-bottom: 8px;
 
64
  }
65
 
66
+ .currency-input input,
67
+ .currency-input select {
68
+ padding: 10px;
69
+ margin-bottom: 20px;
70
+ border: 1px solid #ccc;
71
  border-radius: 8px;
 
 
72
  }
73
 
74
+ /* Swap Button */
75
+ #swap-btn {
76
+ background-color: #4CAF50; /* Green */
77
  border: none;
78
  padding: 12px;
79
+ color: white;
80
  cursor: pointer;
81
+ font-size: 20px;
82
  border-radius: 50%;
83
  margin: 10px auto;
84
  display: block;
85
+ width: 50px;
86
+ height: 50px;
87
+ }
88
+
89
+ #swap-btn:hover {
90
+ background-color: #45a049;
91
  }
92
 
93
+ /* Convert Button */
94
+ #convert-btn {
95
  background-color: #4CAF50;
96
  color: white;
97
  padding: 15px;
98
+ font-size: 16px;
99
  border: none;
100
  border-radius: 8px;
101
  cursor: pointer;
102
  width: 100%;
103
  }
104
 
105
+ #convert-btn:hover {
106
+ background-color: #45a049;
107
+ }
108
+
109
+ /* Result Section */
110
  #result {
 
111
  margin-top: 20px;
112
+ font-size: 1.5em;
113
+ color: #333;
114
+ text-align: center;
115
  }
116
 
117
+ /* Step-by-Step Guide */
118
+ #how-to {
119
+ background-color: #2c6e1f; /* Dark Green */
120
+ padding: 30px;
121
+ color: white;
122
+ text-align: center;
 
 
 
123
  }
124
 
125
+ .steps {
126
+ display: flex;
127
+ justify-content: space-around;
128
+ gap: 20px;
 
129
  }
130
 
131
+ .step {
132
+ width: 30%;
133
+ }
134
+
135
+ .step h4 {
136
+ font-weight: bold;
137
+ margin: 10px 0;
138
+ }
139
+
140
+ .step-box {
141
+ background-color: #cccccc; /* Light Gray */
142
+ padding: 20px;
143
+ border-radius: 8px;
144
  }
145
 
146
  /* Footer */
147
+ footer {
148
+ background-color: #555;
 
149
  color: white;
150
  text-align: center;
151
+ padding: 10px;
 
152
  }
153
 
154
+ footer a {
155
  color: #4CAF50;
156
  text-decoration: none;
157
  }
158
 
159
+ footer a:hover {
160
  text-decoration: underline;
161
+ }
162
+
163
+ /* Responsiveness */
164
+ @media (max-width: 600px) {
165
+ .steps {
166
+ flex-direction: column;
167
+ gap: 10px;
168
+ }
169
+
170
+ .step {
171
+ width: 100%;
172
+ }
173
  }