Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

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

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +145 -62
style.css CHANGED
@@ -1,62 +1,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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ }