-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
709 lines (582 loc) · 22.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
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
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
<!DOCTYPE html>
<html lang="en">
<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">
<!--======================= favicon =======================-->
<!-- Convert .svg to .ico, here https://convertio.co/svg-ico/ -->
<link rel="shortcut icon" href="img/logo-favicon.ico" type="image/x-icon">
<!--======================= css =======================-->
<link rel="stylesheet" href="css/style.css">
<!--======================= name =======================-->
<title>LaslesVPN</title>
</head>
<body>
<div class="wrapper">
<!--======================= header =======================-->
<header class="header" id="header">
<div class="header__container">
<a href="#" class="header__logo _logo">
<img src="img/logo.svg" alt="logo">
<span>Lasles<span>VPN</span></span>
</a>
<nav class="header__menu menu">
<div class="menu__body">
<ul class="menu__list">
<li class="menu__item">
<a href="#about" class="menu__link _active-link">About</a>
</li>
<li class="menu__item">
<a href="#features" class="menu__link">Features</a>
</li>
<li class="menu__item">
<a href="#pricing" class="menu__link">Pricing</a>
</li>
<li class="menu__item">
<a href="#testimonials" class="menu__link">Testimonials</a>
</li>
<li class="menu__item">
<a href="#help" class="menu__link">Help</a>
</li>
</ul>
<div class="menu__buttons">
<a href="#" class="menu__sign-in">Sign In</a>
<a href="#" class="menu__sign-up">Sign Up</a>
</div>
</div>
<!-- icon menu -->
<button class="menu__icon" type="button">
<span></span>
</button>
</nav>
</div>
</header>
<!--======================= main =======================-->
<main class="page">
<!--======================= home =======================-->
<section class="page__main main info" id="about">
<div class="main__container">
<div class="main__data">
<h1 class="main__title">
Want anything to be<br>
easy with <span>LaslesVPN.</span>
</h1>
<p class="main__description">
Provide a network for all your needs with ease and fun using <span>LaslesVPN</span><br>
discover interesting features from us.
</p>
<div class="main__action ">
<a href="#" class="main__btn _button">Get Started</a>
</div>
</div>
<div data-slide-left class="main__image">
<img src="img/main-man.png" alt="main image">
</div>
</div>
<div data-slide-up class="info__container">
<div class="info__content">
<div class="info__item">
<div class="info__icon">
<img src="img/info-icon-user.svg" alt="info icon">
</div>
<div class="info__data">
<h4 class="info__title">90+</h4>
<p class="info__subtitle">Users</p>
</div>
</div>
<div class="info__item">
<div class="info__icon">
<img src="img/info-icon-location.svg" alt="info icon">
</div>
<div class="info__data">
<h4 class="info__title">30+</h4>
<p class="info__subtitle">Locations</p>
</div>
</div>
<div class="info__item">
<div class="info__icon">
<img src="img/info-icon-server.svg" alt="info icon">
</div>
<div class="info__data">
<h4 class="info__title">50+</h4>
<p class="info__subtitle">Servers</p>
</div>
</div>
</div>
</div>
</section>
<!--======================= features =======================-->
<section class="page__features features" id="features">
<div class="features__container">
<div data-slide-right class="features__image">
<img src="img/features-man.png" alt="features image">
</div>
<div data-slide-left class="features__data">
<h2 class="features__title _title">
We Provide Many Features You Can Use
</h2>
<p data-slide-left class="features__description _description">
You can explore the features that we provide with fun and<br>
have their own functions each feature.
</p>
<ul class="features__items">
<li data-slide-left class="features__item">
Powerfull online protection.
</li>
<li data-slide-left class="features__item">
Internet without borders.
</li>
<li data-slide-left class="features__item">
Supercharged VPN
</li>
<li data-slide-left class="features__item">
No specific time limits.
</li>
</ul>
</div>
</div>
</section>
<!--======================= pricing =======================-->
<section class="page__pricing pricing" id="pricing">
<div class="pricing__container">
<div class="pricing__data">
<h2 data-slide-right class="pricing__title _title">
Choose Your Plan
</h2>
<p data-slide-right class="pricing__description _description">
Let's choose the package that is best for you and explore it happily and<br>
cheerfully.
</p>
</div>
<div class="pricing__cards cards">
<article data-slide-down class="cards__card">
<div class="cards__data">
<div class="cards__image">
<img src="img/pricing-free.png" alt="pricing image">
</div>
<h3 class="cards__title">Free Plan</h3>
<ul class="cards__items">
<li class="cards__item">
Unlimited Bandwitch
</li>
<li class="cards__item">
Encrypted Connection
</li>
<li class="cards__item">
No Traffic Logs
</li>
<li class="cards__item">
Works on All Devices
</li>
</ul>
</div>
<div class="cards__action">
<p class="cards__price">Free</p>
<a href="#" class="cards__btn">Select</a>
</div>
</article>
<article data-slide-down class="cards__card">
<div class="cards__data">
<div class="cards__image">
<img src="img/pricing-standart.png" alt="pricing image">
</div>
<h3 class="cards__title">Standard Plan</h3>
<ul class="cards__items">
<li class="cards__item">
Unlimited Bandwitch
</li>
<li class="cards__item">
Encrypted Connection
</li>
<li class="cards__item">
Yes Traffic Logs
</li>
<li class="cards__item">
Works on All Devices
</li>
<li class="cards__item">
Connect Anyware
</li>
</ul>
</div>
<div class="cards__action">
<p class="cards__price">Free</p>
<a href="#" class="cards__btn">Select</a>
</div>
</article>
<article data-slide-down class="cards__card">
<div class="cards__data">
<div class="cards__image">
<img src="img/pricing-premium.png" alt="pricing image">
</div>
<h3 class="cards__title">Premium Plan</h3>
<ul class="cards__items">
<li class="cards__item">
Unlimited Bandwitch
</li>
<li class="cards__item">
Encrypted Connection
</li>
<li class="cards__item">
Yes Traffic Logs
</li>
<li class="cards__item">
Works on All Devices
</li>
<li class="cards__item">
Connect Anyware
</li>
<li class="cards__item">
Get New Features
</li>
</ul>
</div>
<div class="cards__action">
<p class="cards__price">$12 <span>/ mo</span></p>
<a href="#" class="cards__btn">Select</a>
</div>
</article>
</div>
</div>
</section>
<!--======================= network =======================-->
<section class="page__network network">
<div class="network__container">
<div class="network__data">
<h2 data-slide-right class="network__title _title">
Huge Global Network
<br>of Fast VPN
</h2>
<p data-slide-right class="network__description _description">
See LaslesVPN everywhere to make it easier for you when you move<br>
locations.
</p>
</div>
<div data-slide-up class="network__image">
<img src="img/network-man.png" alt="network image">
</div>
</div>
<div class="partners__container">
<div class="partners__items">
<div class="partners__item">
<img src="img/partners-netflix.png" alt="partners image">
</div>
<div class="partners__item">
<img src="img/partners-reddit.png" alt="partners image">
</div>
<div class="partners__item">
<img src="img/partners-amazon.png" alt="partners image">
</div>
<div class="partners__item">
<img src="img/partners-discord.png" alt="partners image">
</div>
<div class="partners__item">
<img src="img/partners-spotify.png" alt="partners image">
</div>
</div>
</div>
</section>
<!--======================= testimonials =======================-->
<section class="page__testimonials testimonials" id="testimonials">
<div class="testimonials__container">
<div class="testimonials__data">
<h2 data-slide-right class="testimonials__title _title">
Trusted by Thousands of<br>
Happy Customer
</h2>
<p data-slide-right class="network__description _description">
These are the stories of our customers who have joined us with great<br>
pleasure when using this crazy feature.
</p>
</div>
<!-- Slider main container -->
<div data-slide-down class="testimonials__content swiper">
<!-- Additional required wrapper -->
<div class="swiper__wrapper">
<!-- Slides -->
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-1.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Viezh Robert</a>
<a href="#" class="author__location">Warsaw, Poland</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“Wow... I am very happy to use this VPN, it
turned out to be more than my expectations
and so far there have been no problems.
LaslesVPN always the best”.
</p>
</div>
</article>
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-2.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Yessica Christy</a>
<a href="#" class="author__location">Shanxi, China</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“I like it because I like to travel far and still can
connect with high speed.”.
</p>
</div>
</article>
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-3.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Kim Young Jou</a>
<a href="#" class="author__location">Seoul, South Korea</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“This is very unusual for my business that
currently requires a virtual private network
that has high security.”.
</p>
</div>
</article>
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-1.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Viezh Robert</a>
<a href="#" class="author__location">Warsaw, Poland</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“Wow... I am very happy to use this VPN, it
turned out to be more than my expectations
and so far there have been no problems.
LaslesVPN always the best”.
</p>
</div>
</article>
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-2.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Yessica Christy</a>
<a href="#" class="author__location">Shanxi, China</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“I like it because I like to travel far and still can
connect with high speed.”.
</p>
</div>
</article>
<article class="swiper__slide">
<div class="card__author author">
<div class="author__avatar">
<img src="img/testimonials-avatar-3.png" alt="testimonials image">
</div>
<div class="author__body">
<a href="#" class="author__title">Kim Young Jou</a>
<a href="#" class="author__location">Seoul, South Korea</a>
</div>
<div class="author__raiting">
<p>4.5</p>
<img src="img/testimonials-icon-star.svg" alt="testimonials image">
</div>
</div>
<div class="card__data">
<p class="card__text">
“This is very unusual for my business that
currently requires a virtual private network
that has high security.”.
</p>
</div>
</article>
</div>
<div class="swiper__navigation">
<!-- If we need pagination -->
<div class="swiper__pagination">
<span class="swiper__bullet"></span>
<span class="swiper__bullet _bullet-active"></span>
</div>
<div class="swiper__buttons">
<!-- If we need navigation buttons -->
<div class="swiper__button-prev">
<svg class="arrow-prev" xmlns="http://www.w3.org/2000/svg" width="30" height="31" viewBox="0 0 30 31"
fill="none">
<path
d="M23.75 14.0029H8.925L13.4625 8.55291C13.6747 8.29764 13.7768 7.96854 13.7463 7.638C13.7158 7.30747 13.5553 7.00258 13.3 6.79041C13.0447 6.57823 12.7156 6.47616 12.3851 6.50663C12.0546 6.53711 11.7497 6.69764 11.5375 6.95291L5.2875 14.4529C5.24545 14.5126 5.20785 14.5752 5.175 14.6404C5.175 14.7029 5.175 14.7404 5.0875 14.8029C5.03084 14.9462 5.00118 15.0988 5 15.2529C5.00118 15.407 5.03084 15.5596 5.0875 15.7029C5.0875 15.7654 5.0875 15.8029 5.175 15.8654C5.20785 15.9306 5.24545 15.9933 5.2875 16.0529L11.5375 23.5529C11.655 23.694 11.8022 23.8075 11.9686 23.8853C12.1349 23.963 12.3164 24.0032 12.5 24.0029C12.7921 24.0035 13.0751 23.9018 13.3 23.7154C13.4266 23.6105 13.5312 23.4816 13.6079 23.3362C13.6846 23.1907 13.7318 23.0316 13.7469 22.8679C13.762 22.7042 13.7447 22.5391 13.6959 22.3821C13.6471 22.2251 13.5678 22.0792 13.4625 21.9529L8.925 16.5029H23.75C24.0815 16.5029 24.3995 16.3712 24.6339 16.1368C24.8683 15.9024 25 15.5844 25 15.2529C25 14.9214 24.8683 14.6034 24.6339 14.369C24.3995 14.1346 24.0815 14.0029 23.75 14.0029Z"
fill="#f53838" />
</svg>
</div>
<div class="swiper__button-next">
<svg class="arrow-next" xmlns="http://www.w3.org/2000/svg" width="30" height="31" viewBox="0 0 30 31"
fill="none">
<path
d="M6.25 14.0029H21.075L16.5375 8.55291C16.3253 8.29764 16.2232 7.96854 16.2537 7.638C16.2842 7.30747 16.4447 7.00258 16.7 6.79041C16.9553 6.57823 17.2844 6.47616 17.6149 6.50663C17.9454 6.53711 18.2503 6.69764 18.4625 6.95291L24.7125 14.4529C24.7545 14.5126 24.7922 14.5752 24.825 14.6404C24.825 14.7029 24.825 14.7404 24.9125 14.8029C24.9692 14.9462 24.9988 15.0988 25 15.2529C24.9988 15.407 24.9692 15.5596 24.9125 15.7029C24.9125 15.7654 24.9125 15.8029 24.825 15.8654C24.7922 15.9306 24.7545 15.9933 24.7125 16.0529L18.4625 23.5529C18.345 23.694 18.1978 23.8075 18.0314 23.8853C17.8651 23.963 17.6836 24.0032 17.5 24.0029C17.2079 24.0035 16.9249 23.9018 16.7 23.7154C16.5734 23.6105 16.4688 23.4816 16.3921 23.3362C16.3154 23.1907 16.2682 23.0316 16.2531 22.8679C16.238 22.7042 16.2553 22.5391 16.3041 22.3821C16.3529 22.2251 16.4322 22.0792 16.5375 21.9529L21.075 16.5029H6.25C5.91848 16.5029 5.60054 16.3712 5.36612 16.1368C5.13169 15.9024 5 15.5844 5 15.2529C5 14.9214 5.13169 14.6034 5.36612 14.369C5.60054 14.1346 5.91848 14.0029 6.25 14.0029Z"
fill="white" />
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
<!--======================= help =======================-->
<section class="page__help help" id="help">
<div class="help__container">
<div data-slide-down class="help__content">
<div class="help__data">
<h2 class="help__title _title">
Subscribe Now for
<br>Get Special Features!
</h2>
<p class="help__discription _discription">
Let's subscribe with us and find the fun.
</p>
</div>
<a href="#" class="main__btn _button">Get Started</a>
</div>
</div>
</section>
</main>
<!--======================= footer =======================-->
<footer class="footer">
<div class="footer__container">
<div class="footer__content content-footer">
<a href="#" class="content-footer__logo _logo">
<img src="img/logo.svg" alt="logo">
<span>Lasles<span>VPN</span></span>
</a>
<p class="content-footer__description">
<span>LaslesVPN</span> is a private virtual network that
has unique features and has high security.
</p>
<div class="content-footer__social">
<a href="" class="content-footer__link">
<img src="img/footer-icon-facebook.svg" alt="footer image">
</a>
<a href="" class="content-footer__link">
<img src="img/footer-icon-twitter.svg" alt="footer image">
</a>
<a href="" class="content-footer__link">
<img src="img/footer-icon-instagram.svg" alt="footer image">
</a>
</div>
<p class="content-footer__copyright">
©2020LaslesVPN
</p>
</div>
<div class="footer__items">
<div class="footer__item">
<h3 class="footer__title">Product</h3>
<ul class="footer__links">
<li class="footer__link">
<a href="#">Download</a>
</li>
<li class="footer__link">
<a href="#">Pricing</a>
</li>
<li class="footer__link">
<a href="#">Locations</a>
</li>
<li class="footer__link">
<a href="#">Server</a>
</li>
<li class="footer__link">
<a href="#">Countries</a>
</li>
<li class="footer__link">
<a href="#">Blog</a>
</li>
</ul>
</div>
<div class="footer__item">
<h3 class="footer__title">Engage</h3>
<ul class="footer__links">
<li class="footer__link">
<a href="#">LaslesVPN ?</a>
</li>
<li class="footer__link">
<a href="#">FAQ</a>
</li>
<li class="footer__link">
<a href="#">Tutorials</a>
</li>
<li class="footer__link">
<a href="#">About Us</a>
</li>
<li class="footer__link">
<a href="#">Privacy Policy</a>
</li>
<li class="footer__link">
<a href="#">Terms of Service</a>
</li>
</ul>
</div>
<div class="footer__item">
<h3 class="footer__title">Earn Money</h3>
<ul class="footer__links">
<li class="footer__link">
<a href="#">Affiliate</a>
</li>
<li class="footer__link">
<a href="#">Become Partner</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!--======================= scroll-up =======================-->
<a href="#" class="scroll-up" id="scroll-up">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: #1f1f1f;">
<path
d="M12.9999 7.82843V20H10.9999V7.82843L5.63589 13.1924L4.22168 11.7782L11.9999 4L19.778 11.7782L18.3638 13.1924L12.9999 7.82843Z">
</path>
</svg>
</a>
<!--======================= swiper =======================-->
<!-- Connect the swiper library, here https://swiperjs.com/get-started -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!--======================= js =======================-->
<script src="js/script.js"></script>
</body>
</html>
<!-- end -->