-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (297 loc) · 15 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
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/favicon.svg" />
<link rel="stylesheet" href="css/general.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/queries.css" />
<!-- <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> -->
<script src="js/script.js" defer></script>
<title>Mowo</title>
</head>
<!-- BODY -->
<body>
<!-- HEADER SECTION -->
<header>
<div class="header">
<!-- NAVIGATION -->
<nav class="nav">
<img src="img/logo.svg" alt="Mowo logo" class="nav__logo" id="logo" designer="Onyemowo" data-version-number="3.0" />
<div class="nav__links--class">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#">About</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Personal <img src="img/arrow.svg"
/></a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Business <img src="img/arrow.svg"
/></a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Contact Us </a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--btn btn--outline" href="#">Login</a
>
</li>
</ul>
</div>
<!-- MOBILE NAVIGATION -->
<div id="menu-icon-wrapper" class="menu-icon-wrapper" >
<svg width="2000px" height="2000px">
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path>
<path class="path2" d="M 300 500 L 700 500"></path>
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path>
</svg>
<button id="menu-icon-trigger" class="menu-icon-trigger"></button>
</div>
</nav>
<!-- HERO SECTION -->
<main class="header__title">
<div class="header__title--primary" data-aos="fade-up">
Banking Made Easy and Accessible.
</div>
<div class="header__title--secondary header--container"data-aos="fade-up">
With Mowo Financials, you can send or <br class="hidden" />
receive money easily from any part of the globe, payment can be done
easily and smoothly with just a click away.
</div>
<div><a class="btns btn--text">Get Started</a></div>
<!-- HERO IMAGE -->
<picture class="header__img">
<!-- <source media="(max-width: 75em)"
srcset="img/hero-img.svg" alt="Phone App"> -->
<img src="img/hero-img.png" class="header__image" alt="Phone App" data-aos="fade-left">
</picture>
</main>
</div>
</header>
<!-- OTHER SECTIONS ON SCROLL -->
<main class="main">
<!-- FEATURES SECTION -->
<section class="features" data-aos="fade-up">
<div class="features--grid">
<div class="features--img">
<img src="img/security.svg" alt="security" />
</div>
<div class="features--text">
<div class="features--text__primary">Security</div>
<div class="features--text__secondary">
We secured users details and informations using one of the best security platform.
</div>
</div>
</div>
<div class="features--grid">
<div class="features--img">
<img src="img/all-in-one-app.svg" alt="security" />
</div>
<div class="features--text">
<div class="features--text__primary">All in one app</div>
<div class="features--text__secondary">
Do all you would need to in just an app, send or receive money, purchase airtime or take loan.
</div>
</div>
</div>
<div class="features--grid">
<div class="features--img">
<img src="img/accessible.svg" alt="security" />
</div>
<div class="features--text">
<div class="features--text__primary">Accessible</div>
<div class="features--text__secondary">
User friendly and easily accessible, don’t need no manual to get this going.
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION - HAD TO USE ARTICLE BEFORE SECTION TAG TO SET A COLOR OVER THE CONTAINER PADDING -->
<article class="services__color">
<section class="services">
<div class="services--title__primary" data-aos="fade-up">Services We Render</div>
<div class="services--grid">
<!-- STEP 01 -->
<div class="services--textbox" data-aos="fade-up">
<div class="services--title__secondary">
QR Code Payment Services
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
Mowo app enables users to pay for their goods in any store or other bank by using the scanner provided in the device.
</div>
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
Mowo app enables users to pay for their goods in any store or other bank by using the scanner provided in the device.
</div>
</div>
</div>
<div class="services--image__position" data-aos="fade-left">
<img class="services--image" src="img/qr-code.png" alt="qr-code" />
</div>
<!-- STEP 2 -->
<div class="services--image__position__2" data-aos="fade-left">
<img class="services--image" src="img/customer.png" alt="customer" />
</div>
<div class="services--textbox" data-aos="fade-up">
<div class="services--title__secondary">
24/7 Customer Service
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
With our 24/7 customer services provision, you won’t be stranded on any transaction you make.
</div>
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
We provide the best customer services to ease the process for you.
</div>
</div>
</div>
<!-- STEP 03 -->
<div class="services--textbox" data-aos="fade-up">
<div class="services--title__secondary">
Select What Card You Prefer
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
We have different card options to meet your needs and make spending easy.
</div>
</div>
<div class="services--contents">
<div class="services--icon">
<img src="img/tick.svg" alt="tick" />
</div>
<div class="services--paragraph">
Withdraw with any of our card either locally or internationally.
</div>
</div>
</div>
<div class="services--image__position__3" data-aos="fade-left">
<img class="services--image" src="img/cards.png" alt="cards" />
</div>
</div>
</section>
</article>
<!-- PARTNERS SECTION -->
<section class="partners">
<div class="partners--text">
<div class="partners--text__primary">Meet Our Lovely Partners</div>
<div class="partners--logo">
<div class="partners--logo__placed">
<img class="partners--logo__size" src="img/visa.png" alt="visa" />
</div>
<div class="partners--logo__placed">
<img class="partners--logo__size" src="img/mastercard.png" alt="mastercard" />
</div>
<div class="partners--logo__placed">
<img class="partners--logo__sized" src="img/paypal.png" alt="paypal" />
</div>
<div class="partners--logo__placed">
<img class="partners--logo__size" src="img/cirrus.png" alt="cirrus" />
</div>
<div class="partners--logo__placed">
<img class="partners--logo__size" src="img/american-express.png" alt="american-express" />
</div>
</div>
</div>
</section>
<!-- SUBSCRIBE SECTION -->
<section class="subscribe">
<div class="subscribe--text-box">
<div class="subscribe--title__primary" data-aos="fade-up">Subscribe Newsletter</div>
<div class="subscribe--paragraph" data-aos="fade-up">Be among the first to hear about the latest offers when you subscribe to our newsletter.</div>
<form class="subscribe--input" name="sign-up">
<div class="subscribe--input__format">
<input id="email" type="email" placeholder="Enter your email" name="email" required/>
<button class="btn btn--form">Subscribe</button>
</div>
</form>
</form>
</div>
</section>
<!-- FOOTER SECTION -->
<section class="footer--color">
<section class="footer" data-aos="fade-up">
<div class="footer--logo-column">
<img src="img/footer-logo.svg" class="footer--logo" alt="footer Logo" />
<p class="footer--text">With Mowo Financials, you can send or receive money easily from any part of the globe, payment can be done easily and smoothly with just a click away.</p>
</div>
<div class="footer--navigation-column">
<div class="footer--title">Company</div>
<div>
<ul class="footer--nav__links">
<li class="footer--nav__item">
<a class="footer--nav__link footer--text" href="#">About</a>
</li>
<li class="footer--nav__item">
<a class="footer--nav__link footer--text" href="#">Personal</a>
</li>
<li class="footer--nav__item">
<a class="footer--nav__link footer--text" href="#">Business</a>
</li>
<li class="footer--nav__item">
<a class="footer--nav__link footer--text" href="#">Get Started</a>
</li>
</ul>
</div>
</div>
<div class="footer--contact-column" data-aos="fade-up">
<div class="footer--title">Contact</div>
<div class="footer--contact-details">
<div class="footer--contacts">
<img src="img/email.svg" alt="email icon" class="footer--icon">
</div>
<div class="footer--contacts">
<img src="img/phone.svg" alt="phone icon" class="footer--icon">
<p class="footer--text">+234 0000 0000</p>
</div>
</div>
</div>
<div class="footer--social-column" data-aos="fade-up">
<div class="footer--title">Socials</div>
<div class="footer--socials">
<img src="img/linkedin.svg" alt="linkedin icon" class="footer--social-icon">
<img src="img/instagram.svg" alt="instagram icon" class="footer--social-icon">
<img src="img/twitter.svg" alt="twitter icon" class="footer--social-icon">
<img src="img/facebook.svg" alt="facebook icon" class="footer--social-icon">
</div>
</div>
</section>
<aside class="footer--foot-note">
<div class="footer--copyright">© 2021 Mowo Financials. All rights reserved. </div>
<div class="footer--privacy-policies">
<p class="footer--privacy">Privacy Policy</p>
<p class="footer--faqs">FAQS</p>
</div>
</aside>
</section>
</main>
<!-- <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script> -->
</body>
</html>