-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (316 loc) · 12.1 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" type="image/png" href="img/icon.png" />
<link
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Hyades | Simple and Honesty</title>
<script defer src="script.js"></script>
</head>
<body>
<header class="header">
<nav class="nav">
<img
src="img/logo.png"
alt="Bankist logo"
class="nav__logo"
id="logo"
/>
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#section--1">Features</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#section--2">Operations</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#section--3">Testimonials</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--btn btn--show-modal" href="#">Open account</a>
</li>
</ul>
</nav>
<div class="header__title">
<h1>
When
<!-- Green highlight effect -->
<span class="highlight">banking</span>
meets<br />
<span class="highlight">honesty</span>
</h1>
<h4>A reliable banking experience for a simpler life.</h4>
<h5>A reliable banking experience</h5>
<button class="btn--text btn--scroll-to">Learn more ↓</button>
<img
src="img/hero.png"
class="header__img"
alt="Minimalist bank items"
/>
</div>
</header>
<section class="section" id="section--1">
<div class="section__title">
<h2 class="section__description sf-h2">Features</h2>
<h3 class="section__header sf-h3">
Everything you need in a modern bank and more.
</h3>
</div>
<div class="features">
<div class="feature-info">
<img
src="img/digital-lazy.jpg"
data-src="img/digital.jpg"
alt="Computer"
class="features__img lazy-img"
/>
<div class="features__feature">
<div class="features__icon f1-i">
<svg>
<use xlink:href="img/icons.svg#icon-monitor"></use>
</svg>
</div>
<h5 class="features__header f1">100% digital bank</h5>
<p class="f1-p">
Important banking features and services via your bank’s
website from your computer. You may log into your account
to check your balance. You also can access additional banking
features, such as applying for a loan or credit card.
</p>
</div>
</div>
<div class="feature-info reverse">
<div class="features__feature">
<div class="features__icon f2-i">
<svg>
<use xlink:href="img/icons.svg#icon-trending-up"></use>
</svg>
</div>
<h5 class="features__header f2">Watch your money grow</h5>
<p class="f2-p">
Accounts designed specifically for saving will pay you
interest on the money you have in there. Interest is like
thank you money that the bank will pay you for keeping your money with them.
</p>
</div>
<img
src="img/grow-lazy.jpg"
data-src="img/grow.jpg"
alt="Plant"
class="features__img lazy-img"
/>
</div>
<div class="feature-info">
<img
src="img/card-lazy.jpg"
data-src="img/card.jpg"
alt="Credit card"
class="features__img lazy-img"
/>
<div class="features__feature">
<div class="features__icon f3-i">
<svg>
<use xlink:href="img/icons.svg#icon-credit-card"></use>
</svg>
</div>
<h5 class="features__header f3">Free debit card included</h5>
<p class="f3-p">
Open an account and get a free debit card and an online
checking account with no monthly fees or overdraft fees.
</p>
</div>
</div>
</div>
</section>
<section class="section" id="section--2">
<div class="section__title">
<h2 class="section__description">Operations</h2>
<h3 class="section__header">
Simplicity matters.
</h3>
</div>
<div class="operations">
<div class="operations__tab-container">
<button class="btn operations__tab operations__tab--1 operations__tab--active" data-tab="1">
<span>01</span>Instant Transfers
</button>
<button class="btn operations__tab operations__tab--2" data-tab="2">
<span>02</span>Instant Loans
</button>
<button class="btn operations__tab operations__tab--3" data-tab="3">
<span>03</span>Instant Closing
</button>
</div>
<div class="operations__content operations__content--1 operations__content--active">
<div class="operations__icon operations__icon--1">
<svg>
<use xlink:href="img/icons.svg#icon-upload"></use>
</svg>
</div>
<h5 class="operations__header">
Tranfser money to anyone, instantly with no fees!
</h5>
<p>
Out transfer system is one of the fastest ways to
transfer money electronically from one person to another
through our bank. International or national transactions,
just with a click.
</p>
</div>
<div class="operations__content operations__content--2">
<div class="operations__icon operations__icon--2">
<svg>
<use xlink:href="img/icons.svg#icon-home"></use>
</svg>
</div>
<h5 class="operations__header">
Get your dream house or vacations, with instant loans.
</h5>
<p>
Get an instant loan no matter where you are and why you need it.
We have a simple calculation on your balance to assess the maximum
amount of money we would lend you.
</p>
</div>
<div class="operations__content operations__content--3">
<div class="operations__icon operations__icon--3">
<svg>
<use xlink:href="img/icons.svg#icon-user-x"></use>
</svg>
</div>
<h5 class="operations__header">
Close and open accounts with one click.
</h5>
<p>
In most cases, closing a bank account can be finalized in one or two days.
But not for us, with just a click you can close your account when you want.
</p>
</div>
</div>
</section>
<section class="section" id="section--3">
<div class="section__title section__title--testimonials">
<h2 class="section__description">Not sure yet?</h2>
<h3 class="section__header">
Millions of people are already making their lifes simpler.
</h3>
</div>
<div class="slider">
<div class="slide slide--1">
<div class="testimonial">
<h5 class="testimonial__header">Best financial decision ever!</h5>
<blockquote class="testimonial__text">
I have been using Hyades for four years. It is the most trustful,
fastest, easiest bank to use. I am very satisfied with the service
which informs me on every step. On the top of that, amazing service
speed, smooth and fast transaction process in international transfers.
</blockquote>
<address class="testimonial__author">
<img src="img/user-1.jpg" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Aarav Lynn</h6>
<p class="testimonial__location">Minneapolis, USA</p>
</address>
</div>
</div>
<div class="slide slide--2">
<div class="testimonial">
<h5 class="testimonial__header">
Experts in the field
</h5>
<blockquote class="testimonial__text">
Of particular interest and concern to me is the transparent
manner in which it operates. It's every super clear on the website,
impossible to miss anything. I always know where I stand with my account.
The associated card can be extraordinarily useful too. Everything works
particularly smoothly and securely.
</blockquote>
<address class="testimonial__author">
<img src="img/user-2.jpg" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Miyah Miles</h6>
<p class="testimonial__location">London, UK</p>
</address>
</div>
</div>
<div class="slide slide--3">
<div class="testimonial">
<h5 class="testimonial__header">
Simple straight forward bank
</h5>
<blockquote class="testimonial__text">
Simple, useful and clear User Interface design.
Hyades does not charge any fees, which makes it extremely competitive
and its debit card is very useful, specially
if you travel and deal with several currency at the same time.
It's become the bank I use the most.
</blockquote>
<address class="testimonial__author">
<img src="img/user-3.jpg" alt="" class="testimonial__photo" />
<h6 class="testimonial__name">Ivar Gomes</h6>
<p class="testimonial__location">Paris, France</p>
</address>
</div>
</div>
<button class="slider__btn slider__btn--left">←</button>
<button class="slider__btn slider__btn--right">→</button>
<div class="dots"></div>
</div>
</section>
<section class="section section--sign-up">
<div class="section__title">
<h3 class="section__header">
The best moment to act will be always the present
</h3>
</div>
<button class="btn btn--show-modal">Open your free account!</button>
</section>
<footer class="footer">
<ul class="footer__nav">
<li class="footer__item">
<a class="footer__link" href="#">About</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Pricing</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Terms of Use</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Privacy Policy</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Careers</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Blog</a>
</li>
<li class="footer__item">
<a class="footer__link" href="#">Contact Us</a>
</li>
</ul>
<img src="img/icon.png" alt="Logo" class="footer__logo" />
</footer>
<div class="modal hidden">
<button class="btn--close-modal">×</button>
<h2 class="modal__header">
Open your bank account <br />
in just <span class="highlight">5 minutes</span>
</h2>
<form class="modal__form">
<label>First Name</label>
<input type="text" id="fName" />
<label>Last Name</label>
<input type="text" id="lName" />
<label>Email Address</label>
<input type="email" id="email" />
<button class="btn nextStep">Next step</button>
</form>
</div>
<div class="overlay hidden"></div>
</body>
</html>