-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (308 loc) · 18.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silicon</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://kit.fontawesome.com/a576612222.css" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<header>
<div class="container">
<a href="index.html">
<img src="assets/solid.svg" alt="Silicon Logo">
</a>
<nav id="main-menu" class="navbar">
<a class="nav-link" href="#features">Features</a>
</nav>
<div id="darkmode-toggle-switch" class="btn-toggle-switch">
<span class="label">Dark mode</span>
<label for="darkmode-switch" class="toggle-switch">
<input id="darkmode-switch" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<a id="auth-signin" href="#" class="btn-primary">
<i class="fa-regular fa-user"></i>
<span>Sign in / up</span>
</a>
<button class="btn-mobile">
<i class="fa-regular fa-bars"></i>
</button>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">Manage All Your<br> Money in One App</h1>
<p class="hero-description">We offer you a new generation of the mobile banking.<br> Save, spend & manage money in your pocket.</p>
<div class="app-buttons">
<a href="#" class="app-store-button hover-effect-app">
<img src="assets/appstore.svg" alt="">
</a>
<a href="#" class="google-play-button hover-effect-app">
<img src="assets/googleplay.svg" alt="">
</a>
</div>
<div class="discover-more">
<a href="#how-it-works" class="arrow-button">
<img class="arrow-icon hover-effect-arrow" src="assets/chevron.svg" alt="Gå till funktioner">
</a>
<span class="arrow-text">Discover more</span>
</div>
</div>
<div class="hero-image">
<img src="assets/Iphone2x.svg" alt="">
</div>
</div>
</section>
<section id="brands">
<div class="container">
<div id="brand-1" class="brand-box hover-effect">
<img src="logos/logoipsum.svg" alt="">
</div>
<div id="brand-2" class="brand-box hover-effect">
<img src="logos/logoipsum1.svg" alt="">
</div>
<div id="brand-3" class="brand-box hover-effect">
<img src="logos/logoipsum2.svg" alt="">
</div>
<div id="brand-4" class="brand-box hover-effect">
<img src="logos/logoipsum3.svg" alt="">
</div>
<div id="brand-5" class="brand-box hover-effect">
<img src="logos/logoipsum4.svg" alt="">
</div>
<div id="brand-6" class="brand-box hover-effect">
<img src="logos/logoipsum6.svg" alt="">
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<div class="features-image">
<img src="assets/iphone-app-features.svg" alt="App Features">
</div>
<div class="features-content">
<h2>App Features</h2>
<p class="features-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat mollis egestas. Nam luctus facilisis ultrices. Pellentesque volutpat ligula est. Mattis fermentum, at nec lacus.</p>
<div class="feature-list">
<div class="feature-item">
<img src="assets/credit-card.svg" alt="Easy Payments">
<div>
<h3>Easy Payments</h3>
<p>Id mollis consectetur congue egestas egestas suspendisse blandit justo.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/shield.svg" alt="Data Security">
<div>
<h3>Data Security</h3>
<p>Augue pulvinar justo, fermentum fames aliquam accumsan vestibulum non.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/bars-graphic.svg" alt="Cost Statistics">
<div>
<h3>Cost Statistics</h3>
<p>Mattis urna ultricies non amet, purus in auctor non. Odio vulputate ac nibh.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/communication.svg" alt="Support 24/7">
<div>
<h3>Support 24/7</h3>
<p>A elementum, imperdiet enim, pretium etiam facilisi in aenean quam mauris.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/wallet.svg" alt="Regular Cashback">
<div>
<h3>Regular Cashback</h3>
<p>Sit facilisis dolor arcu, fermentum vestibulum arcu elementum imperdiet eleifend.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/happy.svg" alt="Top Standards">
<div>
<h3>Top Standards</h3>
<p>Faucibus cursus maecenas lorem cursus nibh. Sociis sit risus id. Sit facilisis dolor arcu.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="how-it-works">
<div class="container">
<h2 class="how-it-works-title">How Does It Work?</h2>
<div class="steps">
<div class="step">
<img src="assets/hwdiw1.svg" alt="Step 1">
</div>
<div class="step">
<img src="assets/iPhone 12 Pro5.png" alt="Step 2">
</div>
<div class="step">
<img src="assets/hwdiw3.svg" alt="Step 3">
</div>
</div>
<div class="transaction-history">
<h3 class="transaction-history-title">Latest transaction history</h3>
<p class="transaction-history-description">Enim, et amet praesent pharetra. Mi non ante hendrerit amet sed. Arcu sociis tristique quisque hac in consectetur condimentum.</p>
</div>
</div>
</section>
<section id="money-transfer" class="money-transfer">
<div class="container">
<div class="money-transfer-content">
<h2>Make your money<br> transfer simple and clear</h2>
<ul class="money-transfer-list">
<li><img src="assets/bx-check-circle.svg" alt="Check icon"> Banking transactions are free for you</li>
<li><img src="assets/bx-check-circle.svg" alt="Check icon"> No monthly cash commission</li>
<li><img src="assets/bx-check-circle.svg" alt="Check icon"> Manage payments and transactions online</li>
</ul>
<button class="btn btn-secondary hover-effect">
Learn more
<i class="fas fa-arrow-right"></i>
</button>
</div>
<div class="money-transfer-image">
<img src="assets/money-transfer.svg" alt="Money Transfer">
</div>
</div>
</section>
<section id="international-payments" class="international-payments">
<div class="container">
<div class="international-payments-image">
<img src="assets/international-payments.svg" alt="International Payments">
</div>
<div class="international-payments-content">
<h2>Receive payment from<br> international bank details</h2>
<div class="payment-features">
<div class="payment-feature">
<img src="assets/credit-card.svg" alt="Feature 1">
<p>Manage your payments online. Mollis congue egestas egestas fermentum fames.</p>
</div>
<div class="payment-feature">
<img src="assets/wallet.svg" alt="Feature 2">
<p>A elementum and imperdiet enim, pretium etiam facilisi aenean quam mauris.</p>
</div>
</div>
<button class="btn btn-secondary hover-effect">
Learn more
<i class="fas fa-arrow-right" id="arrow-right"></i>
</button>
</div>
</div>
</section>
<section id="reviews" class="reviews">
<div class="review-cards">
<h2 class="reviews-title">Clients Are<br>Loving Our App</h2>
<div class="review-card">
<img src="assets/quotes.svg" alt="Quote" class="quote-icon">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p class="review-text">Sit pretium aliquam tempor, orci dolor sed maecenas rutrum sagittis. Laoreet posuere rhoncus, egestas lacus, egestas justo aliquam vel. Nisi vitae lectus hac hendrerit. Montes justo turpis sit amet.</p>
<div class="reviewer">
<img src="assets/fanny.svg" alt="Fannie Summers">
<div>
<strong>Fannie Summers</strong>
<p>Designer</p>
</div>
</div>
</div>
<div class="review-card">
<img src="assets/quotes.svg" alt="Quote" class="quote-icon">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="review-text">Nunc senectus leo vel venenatis accumsan vestibulum sollicitudin amet porttitor. Nisl bibendum nulla tincidunt eu enim ornare dictumst sit amet. Dictum pretium dolor tincidunt egestas eget nunc.</p>
<div class="reviewer">
<img src="assets/albert.svg" alt="Albert Flores">
<div>
<strong>Albert Flores</strong>
<p>Developer</p>
</div>
</div>
</div>
</div>
</section>
<section id="faqs" class="faqs">
<div class="container">
<div class="faqs-content">
<h2>Any Questions?<br>Check out the FAQs</h2>
<p>Still have unanswered questions and need to get in touch?</p>
<div class="contact-options">
<div class="contact-option">
<img class="rotate-on-hover" src="assets/call-phone.svg" alt="Call">
<p>Still have questions?</p>
<a href="#" class="hover-effect">Contact us →</a>
</div>
<div class="contact-option">
<img class="rotate-on-hover" src="assets/text-sms.svg" alt="Chat">
<p>Don't like phone calls?</p>
<a href="#" class="hover-effect chat-with-us">Contact us →</a>
</div>
</div>
</div>
<div class="faq-list">
<div class="faq-item">
<h3>Is any of my personal information stored in the App?<i class="fas fa-chevron-down"></i></h3>
<p>The Banking App securely stores some personal information to provide services, including your name, account details, and transaction history. This data is encrypted and protected by industry-standard security measures. However, sensitive information like full credit card numbers or Social Security numbers is not stored within the app for your safety.</p>
</div>
<div class="faq-item">
<h3>What formats can I download my transaction history in?<i class="fas fa-chevron-down"></i></h3>
<p>You can download your transaction history in several formats for easy record-keeping and analysis. The app supports CSV (comma-separated values) for spreadsheet compatibility, PDF for printable statements, and OFX (Open Financial Exchange) for use with personal finance software. Simply navigate to the transaction history section and select your preferred format.</p>
</div>
<div class="faq-item">
<h3>Can I schedule future transfers?<i class="fas fa-chevron-down"></i></h3>
<p>Yes, the Banking App allows you to schedule future transfers. You can set up one-time or recurring transfers by specifying the amount, recipient, and date. This feature is perfect for paying regular bills or automating savings deposits. You can manage and modify scheduled transfers anytime through the app's transfer section./p>
</div>
<div class="faq-item">
<h3>When can I use Banking App services?<i class="fas fa-chevron-down"></i></h3>
<p>The Banking App services are available 24/7, allowing you to manage your finances anytime, anywhere. You can check balances, transfer funds, pay bills, and view transactions round the clock. However, some transactions may be processed on the next business day if initiated outside of banking hours or on weekends and holidays.</p>
</div>
<div class="faq-item">
<h3>Can I create my own password that is easy for me to remember?<i class="fas fa-chevron-down"></i></h3>
<p>While you can create your own password, we strongly recommend using a strong, unique password for security. The app provides guidelines for creating a robust password. Consider using a passphrase or a password manager for a balance of memorability and security. Avoid easily guessable information like birthdays or common words.</p>
</div>
<div class="faq-item">
<h3>What happens if I forget or lose my password?<i class="fas fa-chevron-down"></i></h3>
<p>If you forget your password, the app offers a secure password reset process. You'll need to verify your identity through registered contact information (email or phone). Once verified, you can create a new password. For added security, you may be required to answer security questions or provide additional identification in some cases.</p>
</div>
</div>
</div>
</section>
<section id="newsletter" class="newsletter container">
<img src="assets/notification.svg" alt="Newsletter" class="rotate-on-hover">
<h2>Subscribe to our newsletter to stay informed about latest updates</h2>
<form>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Your email">
</div>
<button type="submit" id="subscibe-btn"class="btn btn-primary">Subscribe</button>
</form>
</section>
</main>
<footer>
<div class="footer container">
<p class="footer-text">© 2024 Silicon. All rights reserved. Credit MadrasThemes</p>
</div>
</footer>
</body>
</html>