Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
492db51
·
verified ·
1 Parent(s): d2bfa26

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +60 -89
style.css CHANGED
@@ -1,126 +1,97 @@
1
- /* General Styles */
2
- body {
3
- font-family: Arial, sans-serif;
4
- margin: 0;
5
- padding: 0;
6
- background-color: #f4f4f4;
7
- color: #333;
8
- }
9
-
10
- /* Navbar Styles */
11
  .navbar {
12
- background-color: #006400;
13
- color: white;
14
- display: flex;
15
- justify-content: space-between;
16
- align-items: center;
17
- padding: 10px 20px;
18
- position: fixed;
19
- width: 100%;
20
- top: 0;
21
- z-index: 10;
22
- }
23
-
24
- .navbar h1 {
25
- margin: 0;
26
  }
27
 
28
- .welcome-message {
29
- font-size: 16px;
 
30
  }
31
 
32
- /* How to Use Section */
33
- .how-to-use {
34
- margin-top: 80px;
35
- padding: 20px;
36
  text-align: center;
37
- background-color: white;
38
- transition: background-color 0.5s ease;
39
- }
40
-
41
- .how-to-use.in-view {
42
- background-color: #006400;
43
- color: white;
44
  }
45
 
46
- .steps {
47
- display: flex;
48
- justify-content: space-around;
49
- margin-top: 20px;
50
  }
51
 
52
- .step {
53
- width: 30%;
54
- padding: 15px;
55
- background-color: #e0e0e0;
56
- border-radius: 10px;
57
  }
58
 
59
- .step h3 {
60
- font-weight: bold;
 
 
 
61
  }
62
 
63
- /* Currency Converter Section */
64
  .converter {
65
- margin: 20px auto;
66
- width: 80%;
67
- max-width: 600px;
68
- text-align: center;
69
- background-color: white;
70
  padding: 30px;
71
  border-radius: 10px;
72
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
73
  }
74
 
75
- .converter input, .converter select {
76
  padding: 10px;
77
- margin: 10px;
78
  font-size: 16px;
79
- width: 100%;
80
- border: 1px solid #ccc;
81
- border-radius: 5px;
82
  }
83
 
84
- .converter button {
85
- padding: 10px 20px;
86
- background-color: #006400;
87
  color: white;
 
88
  border: none;
89
- border-radius: 5px;
90
- font-size: 16px;
91
  cursor: pointer;
 
92
  }
93
 
94
- .converter button:hover {
95
- background-color: #004d00;
96
  }
97
 
98
- /* Footer Styles */
99
- footer {
100
- background-color: #f0f0f0;
101
- padding: 20px;
102
- text-align: center;
103
  }
104
 
105
- footer p {
106
- margin: 0;
 
 
 
 
107
  }
108
 
109
- .social-media a {
110
- margin: 0 10px;
111
- text-decoration: none;
112
  color: #333;
113
  }
114
 
115
- /* Responsive Design */
116
- @media screen and (max-width: 768px) {
117
- .steps {
118
- flex-direction: column;
119
- align-items: center;
120
- }
121
-
122
- .step {
123
- width: 80%;
124
- margin: 10px 0;
125
- }
126
- }
 
1
+ /* Style untuk Navbar */
 
 
 
 
 
 
 
 
 
2
  .navbar {
3
+ background-color: #4CAF50; /* Hijau */
4
+ padding: 10px;
5
+ text-align: center;
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
 
8
+ .navbar .logo {
9
+ width: 120px; /* Ukuran logo */
10
+ height: auto;
11
  }
12
 
13
+ /* Style untuk Headline */
14
+ .headline {
 
 
15
  text-align: center;
16
+ margin-top: 20px;
17
+ padding: 20px;
18
+ background-color: #f1f1f1; /* Latar belakang terang untuk headline */
 
 
 
 
19
  }
20
 
21
+ .headline h1 {
22
+ font-size: 36px;
23
+ color: #333;
 
24
  }
25
 
26
+ .headline p {
27
+ font-size: 18px;
28
+ color: #666;
 
 
29
  }
30
 
31
+ /* Style untuk Container dan Converter */
32
+ .container {
33
+ margin-top: 30px;
34
+ padding: 20px;
35
+ text-align: center;
36
  }
37
 
 
38
  .converter {
39
+ margin-top: 20px;
40
+ display: inline-block;
41
+ background-color: #ffffff;
 
 
42
  padding: 30px;
43
  border-radius: 10px;
44
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ /* Input dan select */
48
+ label, select, input {
49
+ margin: 10px 0;
50
+ font-size: 16px;
51
  }
52
 
53
+ input, select {
54
  padding: 10px;
55
+ width: 200px;
56
  font-size: 16px;
57
+ margin: 10px 0;
 
 
58
  }
59
 
60
+ button {
61
+ background-color: #4CAF50;
 
62
  color: white;
63
+ padding: 10px 20px;
64
  border: none;
 
 
65
  cursor: pointer;
66
+ font-size: 18px;
67
  }
68
 
69
+ button:hover {
70
+ background-color: #45a049;
71
  }
72
 
73
+ #result {
74
+ font-size: 18px;
75
+ margin-top: 20px;
76
+ color: #333;
 
77
  }
78
 
79
+ /* Style untuk How to Use */
80
+ .steps {
81
+ margin-top: 50px;
82
+ text-align: center;
83
+ padding: 20px;
84
+ background-color: #f9f9f9;
85
  }
86
 
87
+ .steps h2 {
88
+ font-size: 30px;
 
89
  color: #333;
90
  }
91
 
92
+ .step-box {
93
+ background-color: #f1f1f1;
94
+ margin: 20px;
95
+ padding: 20px;
96
+ border-radius: 8px;
97
+ display: inline-block;