Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter
Running

App Files Community
GarGerry commited on
Commit
d302e50
·
verified ·
1 Parent(s): 0bf4b41

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +129 -63
style.css CHANGED
@@ -1,95 +1,161 @@
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
  }
 
1
  /* General Styles */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
  body {
9
+ font-family: Arial, sans-serif;
10
+ line-height: 1.6;
11
  }
12
 
13
+ /* Navbar Styles */
14
  .navbar {
15
+ background-color: #006400; /* Dark Green */
16
+ padding: 15px 50px;
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: center;
 
 
20
  }
21
 
22
+ .navbar .logo {
23
+ color: white;
24
+ font-size: 24px;
25
+ font-weight: bold;
26
  }
27
 
28
+ .navbar .greeting {
29
+ color: white;
30
+ font-size: 18px;
31
  }
32
 
33
  /* Headline Section */
34
  .headline {
35
+ background-color: #006400; /* Dark Green */
36
+ color: white;
37
+ text-align: center;
38
+ padding: 50px 20px;
39
+ }
40
+
41
+ .headline h1 {
42
+ font-size: 36px;
43
+ }
44
+
45
+ .headline p {
46
+ font-size: 18px;
47
+ }
48
+
49
+ /* Main Content Section */
50
+ .main-content {
51
+ background-color: white;
52
+ padding: 20px 50px;
53
+ margin-top: 30px;
54
+ display: flex;
55
+ justify-content: center;
56
+ }
57
+
58
+ .converter {
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: center;
62
+ }
63
+
64
+ input, select, button {
65
+ margin: 10px;
66
+ padding: 10px;
67
+ font-size: 16px;
68
+ }
69
+
70
+ button {
71
+ background-color: #4CAF50; /* Green */
72
+ color: white;
73
+ border: none;
74
+ cursor: pointer;
75
  }
76
 
77
+ button:hover {
78
+ background-color: #45a049;
 
 
 
 
79
  }
80
 
81
+ #result {
82
+ margin-top: 20px;
83
+ font-size: 18px;
 
 
 
 
84
  }
85
 
86
+ /* Steps Section */
87
+ .steps {
88
+ background-color: #006400; /* Dark Green */
89
+ padding: 30px;
90
+ color: white;
91
+ text-align: center;
92
  }
93
 
94
+ .steps h2 {
95
+ font-size: 30px;
96
  }
97
 
98
+ .step-container {
99
+ display: flex;
100
+ justify-content: space-around;
101
+ margin-top: 20px;
 
 
 
 
102
  }
103
 
104
+ .step {
105
+ background-color: #e0e0e0; /* Light Gray */
106
+ padding: 20px;
107
+ width: 25%;
108
+ border-radius: 8px;
109
+ }
110
+
111
+ .step h3 {
112
+ font-weight: bold;
113
+ }
114
+
115
+ .step p {
116
+ font-size: 16px;
117
+ }
118
+
119
+ /* Footer Section */
120
  .footer {
121
+ background-color: #808080; /* Gray */
122
+ color: white;
123
+ padding: 20px;
124
+ text-align: center;
125
+ position: fixed;
126
+ bottom: 0;
127
+ width: 100%;
128
  }
129
 
130
  /* Responsive Design */
131
  @media (max-width: 768px) {
132
+ .navbar {
133
+ padding: 10px 20px;
134
+ }
135
 
136
+ .headline h1 {
137
+ font-size: 28px;
138
+ }
139
+
140
+ .main-content {
141
+ padding: 20px;
142
+ }
143
+
144
+ .converter {
145
+ width: 100%;
146
+ }
147
+
148
+ .step-container {
149
+ flex-direction: column;
150
+ align-items: center;
151
+ }
152
+
153
+ .step {
154
+ width: 80%;
155
+ margin-bottom: 20px;
156
+ }
157
+
158
+ .footer {
159
+ padding: 15px;
160
+ }
161
  }