|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Currency Converter</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<nav class="navbar"> |
|
|
<div class="logo">My Currency Converter</div> |
|
|
<div class="greeting">Welcome to the Converter</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="headline"> |
|
|
<h1>Currency Conversion Made Simple</h1> |
|
|
<p>Easy steps to convert your currencies with the latest rates</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="main-content"> |
|
|
<div class="converter"> |
|
|
<input type="number" id="amount" placeholder="Amount to convert"> |
|
|
<select id="from-currency"> |
|
|
<option value="USD">USD</option> |
|
|
<option value="EUR">EUR</option> |
|
|
<option value="IDR">IDR</option> |
|
|
</select> |
|
|
<span>to</span> |
|
|
<select id="to-currency"> |
|
|
<option value="EUR">EUR</option> |
|
|
<option value="USD">USD</option> |
|
|
<option value="IDR">IDR</option> |
|
|
</select> |
|
|
<button id="convert-btn">Convert</button> |
|
|
<div id="result"></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="steps"> |
|
|
<h2>How to Use the Converter</h2> |
|
|
<div class="step-container"> |
|
|
<div class="step"> |
|
|
<h3>1. Enter Amount</h3> |
|
|
<p>Just type in the amount you want to convert.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<h3>2. Choose Your Currencies</h3> |
|
|
<p>Select the currencies you want to convert from and to.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<h3>3. Get Your Result</h3> |
|
|
<p>Your conversion result will appear below with the current exchange rate.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
<p>About Us | Social Media | Copyright</p> |
|
|
</footer> |
|
|
|
|
|
</body> |
|
|
</html> |
