GarGerry commited on
Commit
a86345b
·
verified ·
1 Parent(s): fd49a35

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +53 -57
index.html CHANGED
@@ -1,68 +1,64 @@
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>
 
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>