Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
6da1f7e
·
verified ·
1 Parent(s): 2084031

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +65 -142
style.css CHANGED
@@ -1,172 +1,95 @@
1
- /* Basic Reset */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- }
7
-
8
- /* Body styling */
9
  body {
10
- font-family: Arial, sans-serif;
11
- background-color: #1b5e20; /* Dark Green */
12
- color: white;
13
- display: flex;
14
- flex-direction: column;
15
- align-items: center;
16
  }
17
 
18
- /* Navbar Styling */
19
  .navbar {
20
- background-color: #2c6e2f; /* Dark Green */
21
- width: 100%;
22
- position: fixed;
23
- top: 0;
24
- left: 0;
25
- padding: 10px 0;
26
- z-index: 1000;
27
- }
28
-
29
- .navbar-content {
30
- display: flex;
31
- justify-content: center;
32
- align-items: center;
33
- gap: 20px;
34
  }
35
 
36
- .navbar .logo {
37
- width: 50px;
38
- height: 50px;
 
39
  }
40
 
41
- .navbar .welcome-text {
42
- color: white;
43
- font-size: 18px;
44
  }
45
 
46
  /* Headline Section */
47
- .headline-section {
48
- background-color: #2c6e2f; /* Dark Green */
49
- text-align: center;
50
- padding: 50px 20px;
51
- width: 100%;
52
- }
53
-
54
  .headline {
55
- font-size: 36px;
56
- font-weight: bold;
57
- color: white;
58
- }
59
-
60
- .explanation {
61
- font-size: 18px;
62
- color: #ddd;
63
- }
64
-
65
- /* Currency Converter Section */
66
- .converter-container {
67
- width: 100%;
68
- max-width: 800px;
69
- background-color: white;
70
- margin-top: 150px;
71
- padding: 30px;
72
- border-radius: 10px;
73
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
74
- }
75
-
76
- .currency-container {
77
- display: flex;
78
- flex-direction: column;
79
- gap: 20px;
80
  }
81
 
82
- .currency-input {
83
- display: flex;
84
- flex-direction: column;
 
 
 
85
  }
86
 
87
- .currency-labels label {
88
- font-size: 16px;
89
- color: #333;
 
 
 
 
90
  }
91
 
92
- input, select {
93
- padding: 10px;
94
- border-radius: 5px;
95
- border: 1px solid #ddd;
96
- margin-bottom: 10px;
 
97
  }
98
 
99
- button {
100
- background-color: #2c6e2f;
101
- color: white;
102
- padding: 10px;
103
- border-radius: 5px;
104
- border: none;
105
- cursor: pointer;
106
- font-size: 16px;
107
  }
108
 
109
- button:hover {
110
- background-color: #1a4727;
111
- }
112
-
113
- button#swap-btn {
114
- width: 50px;
115
- height: 50px;
116
- border-radius: 50%;
117
- margin: 10px auto;
118
- }
119
-
120
- /* Steps Section */
121
- .steps-container {
122
- width: 100%;
123
- max-width: 800px;
124
- padding: 30px;
125
- background-color: #f0f0f0; /* Light Grey */
126
- margin-top: 40px;
127
- border-radius: 10px;
128
- }
129
-
130
- .steps {
131
- display: flex;
132
- flex-direction: column;
133
- gap: 20px;
134
- }
135
-
136
- .step {
137
- background-color: #dcdcdc; /* Grey */
138
- padding: 20px;
139
- border-radius: 10px;
140
- }
141
-
142
- .step h3 {
143
- font-weight: bold;
144
- color: #2c6e2f;
145
- }
146
-
147
- .step p {
148
- font-size: 16px;
149
- color: #333;
150
  }
151
 
152
  /* Footer */
153
- footer {
154
- background-color: #555;
155
- color: white;
156
- text-align: center;
157
- padding: 10px 0;
158
- width: 100%;
159
- margin-top: 40px;
160
  }
161
 
162
  /* Responsive Design */
163
- @media (max-width: 600px) {
164
- .navbar-content {
165
- flex-direction: column;
166
- gap: 10px;
167
- }
168
 
169
- .headline-section, .converter-container, .steps-container {
170
- padding: 20px;
171
- }
 
172
  }
 
1
+ /* General Styles */
 
 
 
 
 
 
 
2
  body {
3
+ margin: 0;
4
+ font-family: Arial, sans-serif;
 
 
 
 
5
  }
6
 
7
+ /* Navbar */
8
  .navbar {
9
+ background-color: #004d26;
10
+ color: #fff;
11
+ padding: 10px 20px;
12
+ position: fixed;
13
+ top: 0;
14
+ width: 100%;
15
+ z-index: 1000;
 
 
 
 
 
 
 
16
  }
17
 
18
+ .navbar .container {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
  }
23
 
24
+ .welcome-message {
25
+ font-size: 14px;
26
+ opacity: 0.8;
27
  }
28
 
29
  /* Headline Section */
 
 
 
 
 
 
 
30
  .headline {
31
+ background-color: #004d26;
32
+ color: #fff;
33
+ text-align: center;
34
+ padding: 40px 20px;
35
+ margin-top: 50px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
 
38
+ /* Converter Section */
39
+ .converter-section {
40
+ background-color: #fff;
41
+ padding: 20px;
42
+ display: flex;
43
+ justify-content: center;
44
  }
45
 
46
+ .converter-box {
47
+ background-color: #fff;
48
+ border: 2px solid #004d26;
49
+ padding: 20px;
50
+ border-radius: 10px;
51
+ text-align: center;
52
+ width: 300px;
53
  }
54
 
55
+ /* How to Use Section */
56
+ .how-to-use {
57
+ background-color: #004d26;
58
+ color: #fff;
59
+ padding: 40px 20px;
60
+ text-align: center;
61
  }
62
 
63
+ .how-to-use h2 {
64
+ font-weight: bold;
 
 
 
 
 
 
65
  }
66
 
67
+ .step-box {
68
+ background-color: #f0f0f0;
69
+ color: #000;
70
+ padding: 20px;
71
+ margin: 10px auto;
72
+ border-radius: 10px;
73
+ width: 250px;
74
+ text-align: left;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  }
76
 
77
  /* Footer */
78
+ .footer {
79
+ background-color: #ccc;
80
+ color: #000;
81
+ text-align: center;
82
+ padding: 10px 20px;
 
 
83
  }
84
 
85
  /* Responsive Design */
86
+ @media (max-width: 768px) {
87
+ .navbar .welcome-message {
88
+ display: none;
89
+ }
 
90
 
91
+ .converter-box,
92
+ .step-box {
93
+ width: 100%;
94
+ }
95
  }