-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (103 loc) · 5.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Exchange rates</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!--<link rel='stylesheet' type='text/css' href='./node_modules/bootstrap/dist/css/bootstrap.css'> -->
</head>
<body>
<div id="page-header">
<div id="logo">
<img src="src/img/logo.png" alt="">
</div>
<div>
<nav>
<a href="#about">Home</a>
<a href="#converter">Converter</a>
<a href="#newsletter-ad">Newsletter</a>
</nav>
<div id="app-download-container">
<a>Download app</a>
</div>
</div>
</div>
<div id="page-content">
<div id="about" class="section section-darker">
<div id="about-text" data-aos="fade-right">
<h1>The information you need <b>wherever you are</b></h1>
<div id="app-icons">
<img src="src/img/google_play_badge.png"/>
<img src="src/img/apple_store_badge.png"/>
</div>
</div>
<div id="about-graphics" data-aos="fade-down" class="animate__animated animate__rubberBand">
<img data-aos="zoom-in" id="secondary-1" class="secondary" src="src/img/clients-01.png"/>
<img data-aos="zoom-in" id="secondary-2" class="secondary" src="src/img/clients-02.png"/>
<img data-aos="zoom-in" id="secondary-3" class="secondary" src="src/img/clients-03.png"/>
</div>
</div>
<div style="height: 150px; overflow: hidden; background-color: #F0F0F0;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #0E0C16;"></path></svg></div>
<div id="converter" class="section">
<form id="converter-form" data-aos="fade-up" onsubmit="return false">
<div id="converter-data">
<div id="conversion-base">
<input type="number" id="base-number" min="1" minlength="1" step="any" required>
<select id="base-currency" name="base-currency">
</select>
</div>
<div id="conversion-decoration">
➜
</div>
<div id="conversion-target">
<select id="target-currency" name="target-currency">
</select>
</div>
</div>
<button id="convert-button" data-aos="fade-up">Convert</button>
</form>
<div id="conversion-box" class="not-display">
<div id="result-conversion-rate" class="conversion-info">
<h3>Conversion rate</h3>
<p id="insert-conversion-rate"></p>
</div>
<div id="result-conversion" class="conversion-info">
<h3>Conversion result</h3>
<p id="insert-conversion-result"></p>
</div>
</div>
</div>
<div style="height: 150px; overflow: hidden; background-color: #0E0C16;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #F0F0F0;"></path></svg></div>
<div id="newsletter-ad" class="section section-darker">
<div id="newsletter-graphics" data-aos="fade-up">
<img src="src/img/newsletter-prop.png">
</div>
<div id="newsletter-text">
<h2 data-aos="fade-up">Subscribe to our newsletter!</h2>
<form id="newsletter-form" data-aos="fade-up">
<input type="email">
<button>Subscribe</button>
</form>
</div>
</div>
</div>
<footer>
<div id="rights">© EZex, 2023. All rights reserved.</div>
<div id="footer-app">
<img src="src/img/google_play_badge.png"/>
<img src="src/img/apple_store_badge.png"/>
</div>
</footer>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script type="module" src='index.js'></script>
<script>
AOS.init();
</script>
</body>
</html>