Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +57 -53
index.html CHANGED
@@ -1,64 +1,68 @@
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
  </head>
9
  <body>
10
- <!-- Navbar -->
11
- <nav class="navbar">
12
- <div class="container">
13
- <span class="brand-logo">BrandLogo</span>
14
- <span class="welcome-message">Welcome to the Currency Converter</span>
15
- </div>
16
- </nav>
17
 
18
- <!-- Headline and Explanation -->
19
- <header class="headline">
20
- <h1>Currency Converter</h1>
21
- <p>Easily convert currencies in a matter of seconds.</p>
22
- </header>
23
 
24
- <!-- Converter Section -->
25
- <section class="converter-section">
26
- <div class="converter-box">
27
- <input type="number" id="amount" placeholder="Enter amount">
28
- <select id="from-currency">
29
- <option value="USD">USD</option>
30
- <option value="EUR">EUR</option>
31
- </select>
32
- <select id="to-currency">
33
- <option value="EUR">EUR</option>
34
- <option value="USD">USD</option>
35
- </select>
36
- <button id="swap-btn">Swap</button>
37
- <button id="convert-btn">Convert</button>
38
- <div id="result">Result will be displayed here</div>
39
- </div>
40
- </section>
41
 
42
- <!-- How to Use -->
43
- <section class="how-to-use">
44
- <h2>How to Use the Converter</h2>
45
- <div class="step-box">
46
- <h3>1</h3>
47
- <p>Enter the amount you want to convert.</p>
48
- </div>
49
- <div class="step-box">
50
- <h3>2</h3>
51
- <p>Select the currencies to convert from and to.</p>
52
- </div>
53
- <div class="step-box">
54
- <h3>3</h3>
55
- <p>See the result instantly.</p>
56
- </div>
57
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
- <!-- Footer -->
60
- <footer class="footer">
61
- <p>About | Social Media | © 2025 Your Website</p>
62
- </footer>
63
  </body>
64
  </html>
 
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="styles.css">
8
  </head>
9
  <body>
 
 
 
 
 
 
 
10
 
11
+ <!-- Navbar -->
12
+ <nav class="navbar">
13
+ <div class="logo">My Currency Converter</div>
14
+ <div class="greeting">Welcome to the Converter</div>
15
+ </nav>
16
 
17
+ <!-- Headline and Explanation -->
18
+ <section class="headline">
19
+ <h1>Currency Conversion Made Simple</h1>
20
+ <p>Easy steps to convert your currencies with the latest rates</p>
21
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
22
 
23
+ <!-- Content for Currency Conversion -->
24
+ <section class="main-content">
25
+ <div class="converter">
26
+ <input type="number" id="amount" placeholder="Amount to convert">
27
+ <select id="from-currency">
28
+ <option value="USD">USD</option>
29
+ <option value="EUR">EUR</option>
30
+ <option value="IDR">IDR</option>
31
+ </select>
32
+ <span>to</span>
33
+ <select id="to-currency">
34
+ <option value="EUR">EUR</option>
35
+ <option value="USD">USD</option>
36
+ <option value="IDR">IDR</option>
37
+ </select>
38
+ <button id="convert-btn">Convert</button>
39
+ <div id="result"></div>
40
+ </div>
41
+ </section>
42
+
43
+ <!-- Steps for How to Use Converter -->
44
+ <section class="steps">
45
+ <h2>How to Use the Converter</h2>
46
+ <div class="step-container">
47
+ <div class="step">
48
+ <h3>1. Enter Amount</h3>
49
+ <p>Just type in the amount you want to convert.</p>
50
+ </div>
51
+ <div class="step">
52
+ <h3>2. Choose Your Currencies</h3>
53
+ <p>Select the currencies you want to convert from and to.</p>
54
+ </div>
55
+ <div class="step">
56
+ <h3>3. Get Your Result</h3>
57
+ <p>Your conversion result will appear below with the current exchange rate.</p>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <!-- Footer -->
63
+ <footer class="footer">
64
+ <p>About Us | Social Media | Copyright</p>
65
+ </footer>
66
 
 
 
 
 
67
  </body>
68
  </html>