-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
466 lines (441 loc) · 23.9 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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
<!DOCTYPE html>
<html lang="en">
<head>
<title>AppLab</title>
<!-- Start The Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- End The Meta -->
<!-- Start The Bootsrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- End The Bootsrap CDN -->
<!-- Start The Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- End The Font Awesome CDN-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Start Header section -->
<header>
<!-- Start Nav bar Section -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="index.html"><span>APP</span>Lab</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Key Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Testiminials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Try For Free</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Nav bar Section -->
<!-- Start header content section -->
<div class="header_content">
<div class="container">
<div class="row">
<div class="col-md-6 col-12 header_welcome">
<section>
<img src="images/tick icon.png" alt="">
<h6>#1 Editiors Choice App of 2020</h6>
</section>
<h1>Best app for you modern lifestyle</h1>
<p>Increase productivity with a simple to-do app. app for managing your personal budgets.</p>
<div class="header_buttons text-center">
<button type="button" class="btn btn-primary">Try for free</button>
<button type="button" class="btn btn-primary">Watch Demo Video</button>
</div>
</div>
<div class="col-md-6 header_phone text-center d-md-block d-none">
<img src="images/header_phone.png" alt="">
</div>
</div>
</div>
</div>
<!-- End Header content section -->
</header>
<!-- End Header section -->
<!-- Start Trust companies section -->
<div class="trust_companies">
<div class="container">
<div class="row justify-content-evenly align-items-center">
<h4 class="text-center">Trusted by companies like</h4>
<div class="col-lg-2 col-md-6 col-12 text-center company_item">
<img src="images/trust_icon_1.png" alt="">
</div>
<div class="col-lg-2 col-md-6 col-12 text-center company_item">
<img src="images/trust_icon_2.png" alt="">
</div>
<div class="col-lg-2 col-md-4 col-12 text-center company_item">
<img src="images/trust_icon_3.png" alt="">
</div>
<div class="col-lg-2 col-md-4 col-12 text-center company_item">
<img src="images/trust_icon_4.png" alt="">
</div>
<div class="col-lg-2 col-md-4 col-12 text-center company_item">
<img src="images/trust_icon_5.png" alt="">
</div>
</div>
</div>
</div>
<!-- End Trust companies section -->
<!-- Start Features Section -->
<div class="Features">
<div class="container">
<div class="row">
<div class="col-md-5 d-lg-block d-none Phone_bg">
<img src="images/bg_features.png" alt="">
</div>
<div class="col-lg-6 col-12 features_description offset-lg-1">
<div class="features_intro">
<h1>Awesome app Features</h1>
<p>Increase productivity with a simple to-do app. app for managing your personal budgets.</p>
</div>
<div class="features_item">
<div class="row">
<div class="col-3">
<img src="images/fast_performence.png" alt="">
</div>
<div class="col-9">
<h4>Fast Performance</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
</div>
<div class="features_item Prototyping">
<div class="row Prototyping">
<div class="col-3">
<img src="images/prototyping.png" alt="">
</div>
<div class="col-9">
<h4>Prototyping</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
</div>
<div class="features_item">
<div class="row Vector_Editing">
<div class="col-3">
<img src="images/vector.png" alt="">
</div>
<div class="col-9">
<h4>Vector Editing</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features Section -->
<!-- Start Jackpot Section -->
<div class="jackpot">
<div class="container">
<div class="row text-center justify-content-evenly jackpot_description">
<div class="col-lg-5 col-12">
<h1>Smart jackpots that you may love this anytime & anywhere</h1>
</div>
<div class="col-1 d-lg-block d-none Vertical_divider">
<hr class="divider ">
</div>
<div class="col-10 d-block d-lg-none horizental_divider">
<hr class="divider">
</div>
<div class="col-lg-5 col-12">
<p>The rise of mobile devices transforms the way we consume information entirely and the world's most elevant channels such as Facebook.</p>
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-lg-3 col-10 text-center automatic">
<img src="images/automatic.png" alt="">
<h4>Automatic Payouts</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-10 text-center network">
<img src="images/network.png" alt="">
<h4>Network Effect</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-10 text-center reward">
<img src="images/reward.png" alt="">
<h4>Biggest Rewards Method</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
</div>
</div>
<!-- End Jackpot section-->
<!-- Start Integration Section -->
<div class="integration">
<div class="container">
<div class="row">
<div class="col-5 d-lg-block d-none">
<img src="images/integration.png" alt="">
</div>
<div class="col-lg-6 col-12 offset-lg-1 integration_description">
<h1>Designed & built by the latest code integration
</h1>
<p>The rise of mobile devices transforms the way we consume information entirely and the world's most elevant channels such as Facebook.</p>
<button type="button" class="btn btn-primary">Try for free</button>
</div>
</div>
</div>
</div>
<!-- End Integration Section -->
<!-- Start Choose section-->
<div class="choose text-center">
<div class="container">
<div class="choose_intro">
<h1>Why you should choose <br> our app</h1>
<p>The rise of mobile devices transforms the way we consume information entirely and the world's most elevant channels such as Facebook.</p>
</div>
<div class="row justify-content-evenly">
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/app_developpement.png" alt="">
<h4>App Developpement</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/trophy.png" alt="">
<h4>10 Times Award</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/cloud_Storage.png" alt="">
<h4>Cloud Storage</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="w-100 d-lg-block d-none"></div>
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/customization.png" alt="">
<h4>Customization</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/ux.png" alt="">
<h4>UX Planning</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-lg-3 col-md-5 col-12 choice_item">
<img src="images/customer-support.png" alt="">
<h4>Customer Support</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
</div>
</div>
<!-- End Choose section -->
<!-- Start ultimate features section -->
<div class="ultimate_features">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<div class="ultimate_description">
<h1>Ultimate features that we built</h1>
<p>The rise of mobile devices transforms the way we consume information entirely.</p>
</div>
<div class="row ">
<div class="col-md-6 ultimate_features_item">
<img src="images/app_developpement.png" alt="">
<h4>App Developpement</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-md-6 ultimate_features_item">
<img src="images/ux.png" alt="">
<h4>UX Planning</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-md-6 ultimate_features_item">
<img src="images/cloud_Storage.png" alt="">
<h4>Cloud Storage</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
<div class="col-md-6 ultimate_features_item">
<img src="images/customer-support.png" alt="">
<h4>Customer Support</h4>
<p>Get your blood tests delivered at home collect a sample from the news your blood tests.</p>
</div>
</div>
<div class="ultimate_button">
<button type="button" class="btn btn-primary">Try for free</button>
</div>
</div>
<div class="col-5 offset-1 d-lg-block d-none ultimate_icons">
<img src="images/ultimate phone.png" alt="">
</div>
</div>
</div>
</div>
<!-- End ultimate features section -->
<!-- Start pricing section -->
<div class="pricing">
<div class="container">
<div class="pricing_intro text-center">
<h1>Get awesome features, without <br> extra charges</h1>
<p>The rise of mobile devices transforms the way we consume information entirely <br> and the world's most elevant channels such as Facebook.</p>
</div>
<div class="row justify-content-evenly">
<div class="col-md-3 col-7 pricing_item text-center">
<div class="price">
<h2>$0<span>/month</span></h2>
<h2>Business Class</h2>
<span>For small teams or office</span>
</div>
<div class="price_features text-center">
<span>Drag & Drop Builder</span> <br>
<div class="mb-3"></div>
<span>1,000's of Templates</span> <br>
<div class="mb-3"></div>
<span>Blog Support Tools</span> <br>
<div class="mb-3"></div>
<span>eCommerce Store</span> <br>
<div class="mb-3"></div>
<button type="button" class="btn btn-primary">Start free trail</button>
</div>
</div>
<div class="col-md-3 col-7 pricing_item text-center">
<div class="price">
<h2>$99<span>/month</span></h2>
<h2>Pro Master</h2>
<span>For Best Opportunities</span>
</div>
<div class="price_features text-center">
<span>Drag & Drop Builder</span> <br>
<div class="mb-3"></div>
<span>1,000's of Templates</span> <br>
<div class="mb-3"></div>
<span>Blog Support Tools</span> <br>
<div class="mb-3"></div>
<span>eCommerce Store</span> <br>
<div class="mb-3"></div>
<button type="button" class="btn btn-primary">Subscribe Now</button>
<h6>Or Start 14 Days trail</h6>
</div>
</div>
</div>
</div>
</div>
<!-- End Pricing section -->
<!-- Start Question Section-->
<div class="questions">
<div class="container">
<div class="questions_intro text-center">
<h1>Frequently asked questions</h1>
<p>The rise of mobile devices transforms the way we consume information entirely <br> and the world's most elevant channels such as Facebook.</p>
</div>
<div class="answer show">
<h4>App installation failed, how to update system information?</h4>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view
of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X
is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
</div>
<div class="answer hidden">
<h4>Website reponse taking time, how to improve?</h4>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view
of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X
is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
</div>
<div class="answer hidden">
<h4>New update fixed all bug and issues</h4>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view
of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X
is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
</div>
<div class="answer hidden">
<h4>How to contact with riders emergency?</h4>
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view
of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X
is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
</div>
<div class="questions_item">
<h4>App installation failed, how to update system information?</h4>
<button type="button" id="1" class="btn"><img src="images/Plus_icon.png" alt=""></button>
</div>
<div class="questions_item">
<h4>Website reponse taking time, how to improve?</h4>
<button type="button" id="2" class="btn"><img src="images/Plus_icon.png" alt=""></button>
</div>
<div class="questions_item">
<h4>New update fixed all bug and issues</h4>
<button type="button" id="3" class="btn"><img src="images/Plus_icon.png" alt=""></button>
</div>
<div class="questions_item">
<h4>How to contact with riders emergency?</h4>
<button type="button" id="4" class="btn"><img src="images/Plus_icon.png" alt=""></button>
</div>
</div>
</div>
<!-- end questions section -->
<!-- Start Download section -->
<div class="download">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6 download_description">
<h1>Download Our App Now !</h1>
<p>The rise of mobile devices transforms the way we consume information entirely and the world's most elevant channels such as Facebook.</p>
<a href="#"><img src="images/play_store.png" alt=""></a>
<a href="#"><img src="images/app_store.png" alt=""></a>
</div>
<div class="col-6 d-lg-block d-none download_phone">
<img src="images/download_phone.png" alt="">
</div>
</div>
</div>
</div>
<!-- End Download section -->
<!-- Start footer section -->
<footer>
<div class="container text-center">
<h1><a href="#"><span>App</span>Lab</a></h1>
<div class="row text-center justify-content-evenly footer_bar">
<div class="col-sm-2 col-12 footer_item">
<a href="#">Home</a>
</div>
<div class="col-sm-2 col-12 footer_item">
<a href="#">KeyFeatures</a>
</div>
<div class="col-sm-2 col-12 footer_item">
<a href="#">Pricing</a>
</div>
<div class="col-sm-2 col-12 footer_item">
<a href="#">testiminials</a>
</div>
<div class="col-sm-2 col-12 footer_item">
<a href="#">FAQ</a>
</div>
</div>
<div class="contact">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-hashtag"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
<p>Copyright© Arifur Rahman Tushar 2019. All rights reserved</p>
</div>
</footer>
<!-- Start Javascript file -->
<script src="script.js"></script>
</body>
</html>