Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
e7524b4
·
verified ·
1 Parent(s): 5d9a119

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +62 -145
style.css CHANGED
@@ -1,145 +1,62 @@
1
- /* Resetting and global styles */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- }
7
-
8
- body {
9
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
- background: linear-gradient(135deg, #D9E4EC, #F5F7FA); /* Soft gradient background */
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
- color: #333;
16
- position: relative;
17
- }
18
-
19
- /* Container styles for the content */
20
- .container {
21
- background: #ffffff;
22
- border-radius: 15px;
23
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft shadow for elevation */
24
- padding: 40px;
25
- width: 100%;
26
- max-width: 600px;
27
- text-align: center;
28
- margin: 0 20px;
29
- }
30
-
31
- /* Header section */
32
- header {
33
- border-bottom: 2px solid #333; /* Header border */
34
- padding-bottom: 15px;
35
- margin-bottom: 20px;
36
- }
37
-
38
- /* Form styles */
39
- input, select {
40
- padding: 12px;
41
- margin: 10px 0;
42
- width: 100%;
43
- font-size: 16px;
44
- border-radius: 8px;
45
- border: 1px solid #E0E0E0;
46
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
47
- transition: all 0.3s ease;
48
- }
49
-
50
- input:focus, select:focus {
51
- border: 1px solid #4CAF50;
52
- outline: none;
53
- box-shadow: 0 0 8px rgba(0, 180, 50, 0.2);
54
- }
55
-
56
- /* Styling for currency selectors */
57
- .currency-selectors {
58
- display: flex;
59
- justify-content: center;
60
- align-items: center;
61
- gap: 10px;
62
- }
63
-
64
- span {
65
- font-size: 18px;
66
- font-weight: 500;
67
- color: #555;
68
- }
69
-
70
- /* Button styles */
71
- button {
72
- padding: 12px 20px;
73
- background-color: #4CAF50;
74
- color: white;
75
- border: none;
76
- border-radius: 8px;
77
- width: 100%;
78
- font-size: 18px;
79
- font-weight: 600;
80
- cursor: pointer;
81
- transition: background-color 0.3s ease;
82
- }
83
-
84
- button:hover {
85
- background-color: #45a049;
86
- }
87
-
88
- /* Result box styles */
89
- #result {
90
- margin-top: 20px;
91
- font-size: 20px;
92
- font-weight: bold;
93
- color: #333;
94
- background-color: #f4f4f4;
95
- padding: 15px;
96
- border-radius: 8px;
97
- text-transform: uppercase;
98
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
99
- }
100
-
101
- /* Footer section styles */
102
- footer {
103
- border-top: 2px solid #333; /* Footer border */
104
- padding-top: 15px;
105
- margin-top: 20px;
106
- }
107
-
108
- /* Responsiveness for mobile screens */
109
- @media (max-width: 768px) {
110
- .container {
111
- padding: 30px;
112
- max-width: 100%;
113
- }
114
-
115
- h1 {
116
- font-size: 1.5rem;
117
- }
118
-
119
- input, select {
120
- font-size: 14px;
121
- }
122
-
123
- button {
124
- font-size: 16px;
125
- }
126
- }
127
-
128
- /* Responsiveness for larger screens */
129
- @media (min-width: 769px) {
130
- .container {
131
- max-width: 700px;
132
- }
133
-
134
- h1 {
135
- font-size: 2.5rem;
136
- }
137
-
138
- input, select {
139
- font-size: 18px;
140
- }
141
-
142
- button {
143
- font-size: 20px;
144
- }
145
- }
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Currency Converter</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <!-- FontAwesome CDN untuk ikon -->
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+ <div class="container">
13
+ <header>
14
+ <h1>Currency Converter</h1>
15
+ </header>
16
+
17
+ <form id="currencyForm">
18
+ <input type="number" id="amount" placeholder="Enter amount" required>
19
+
20
+ <div class="currency-selectors">
21
+ <select id="fromCurrency" required>
22
+ <option value="USD">USD - US Dollar</option>
23
+ <option value="EUR">EUR - Euro</option>
24
+ <option value="GBP">GBP - British Pound</option>
25
+ <option value="IDR">IDR - Indonesian Rupiah</option>
26
+ <option value="JPY">JPY - Japanese Yen</option>
27
+ <option value="BRL">BRL - Brazilian Real</option>
28
+ <option value="KRW">KRW - South Korean Won</option>
29
+ <option value="AUD">AUD - Australian Dollar</option>
30
+ <option value="CAD">CAD - Canadian Dollar</option>
31
+ </select>
32
+ <span>to</span>
33
+ <select id="toCurrency" required>
34
+ <option value="USD">USD - US Dollar</option>
35
+ <option value="EUR">EUR - Euro</option>
36
+ <option value="GBP">GBP - British Pound</option>
37
+ <option value="IDR">IDR - Indonesian Rupiah</option>
38
+ <option value="JPY">JPY - Japanese Yen</option>
39
+ <option value="BRL">BRL - Brazilian Real</option>
40
+ <option value="KRW">KRW - South Korean Won</option>
41
+ <option value="AUD">AUD - Australian Dollar</option>
42
+ <option value="CAD">CAD - Canadian Dollar</option>
43
+ </select>
44
+ </div>
45
+
46
+ <button type="submit">Convert</button>
47
+ </form>
48
+
49
+ <div id="result">
50
+ <i id="fromCurrencyIcon" class="fas"></i>
51
+ <span id="conversionResult"></span>
52
+ <i id="toCurrencyIcon" class="fas"></i>
53
+ </div>
54
+
55
+ <footer>
56
+ <p>&copy; 2025 Teggar Eka Mustaqim Sitanggang. All Rights Reserved.</p>
57
+ </footer>
58
+ </div>
59
+
60
+ <script src="script.js"></script>
61
+ </body>
62
+ </html>