|
|
<!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> |
|
|
|
|
|
<div class="navbar"> |
|
|
<div class="logo"> |
|
|
<img src="logo.png" alt="Logo"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="headline"> |
|
|
<h1>Currency Converter</h1> |
|
|
<p>Convert currencies easily and quickly</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content"> |
|
|
<div class="converter-container"> |
|
|
<div class="currency-box"> |
|
|
<label for="amount">Amount</label> |
|
|
<input type="number" id="amount" placeholder="Enter amount"> |
|
|
</div> |
|
|
<div class="currency-group"> |
|
|
<label for="from">From</label> |
|
|
<select id="from"> |
|
|
<option value="USD">USD</option> |
|
|
<option value="EUR">EUR</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="currency-group"> |
|
|
<label for="to">To</label> |
|
|
<select id="to"> |
|
|
<option value="EUR">EUR</option> |
|
|
<option value="USD">USD</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="swap-btn">Swap</button> |
|
|
<button id="convert-btn">Convert</button> |
|
|
<div id="result"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="how-to-use"> |
|
|
<h2>How to Convert</h2> |
|
|
<div class="steps"> |
|
|
<div class="step"> |
|
|
<h3>Step 1</h3> |
|
|
<p>Enter the amount you want to convert.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<h3>Step 2</h3> |
|
|
<p>Select your currencies.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<h3>Step 3</h3> |
|
|
<p>Click Convert and get your result.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer"> |
|
|
<div class="footer-content"> |
|
|
<p>About Us | Social Media | Copyright</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
