-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
779 lines (770 loc) · 33.5 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
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;700&display=swap"
rel="stylesheet"
/>
<link href="./src/styles/index.css" rel="stylesheet" />
<title>Lasles clone project</title>
</head>
<body
class="mx-auto lg:w-11/12 body__class-container bg-brightWhiteBackground sm:w-full"
>
<nav class="relative w-full p-6 mx-auto bg-brightWhiteBackground">
<div
class="flex items-center justify-between sm:w-full sm:justify-between"
>
<div class="pt-2">
<img src="/src/images/logo.svg" alt="" />
</div>
<div class="hidden space-x-6 text-sm lg:flex">
<a href="#" class="text-darkGrayishBlue">About </a>
<a href="#" class="text-darkGrayishBlue">Features</a>
<a href="#" class="text-darkGrayishBlue">Pricing</a>
<a href="#" class="text-darkGrayishBlue">Testimonials</a>
<a href="#" class="text-darkGrayishBlue">Help</a>
</div>
<div class="hidden text-sm font-bold md:flex">
<a
href="#"
class="p-3 px-4 py-2 pt-2 text-black rounded-full baseline hover:bg-brightRedLight"
>Sign In</a
>
<a
href="#"
class="p-3 px-8 py-2 pt-2 border rounded-full text-brightRed border-brightRed hover:border-brightRed baseline hover:bg-brightRedLight md:block"
>Sign Up</a
>
</div>
<button
id="menu-btn"
class="block hamburger md:hidden focus:outline-none"
>
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div
id="menu"
class="absolute flex-col items-center self-end hidden py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md"
>
<a href="#">About</a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Testimonials</a>
<a href="#">Help</a>
</div>
</div>
</nav>
<!-- Feature Section -->
<section id="feature">
<div
class="flex flex-col-reverse items-center w-11/12 mx-auto mt-24 mb-24 space-y-0 px-18 md:space-y-0 md:flex-row"
>
<!-- Left item -->
<div
class="flex flex-col justify-center max-h-full space-y-12 md:w-1/2"
>
<h1
class="max-w-md text-2xl font-normal leading-8 text-center lg:max-w-full md:text-5xl md:text-left text-titleColor"
>
Want anything to be easy with
<span class="font-bold">LaslesVPN.</span>
</h1>
<p
class="max-w-sm leading-8 text-center lg:max-w-full text-textColor md:text-left"
>
Provide a network for all your needs with ease and fun using
LaslesVPN discover interesting features from us.
</p>
<div class="flex justify-center md:justify-start">
<a
href="#"
class="flex items-center p-4 text-center text-white rounded-lg drop-shadow-2xl px-14 bg-brightRed baseline hover:bg-brightRedLight"
>Get Started</a
>
</div>
</div>
<!-- Image -->
<div class="md:w-1/2 md:mb-6">
<img src="/src/images/Illustration 1.svg" alt="" />
</div>
</div>
</section>
<!-- Features Section -->
<div
class="grid w-11/12 gap-6 p-8 mx-auto mb-8 text-black bg-white rounded-lg md:grid-cols-3 xl:grid-cols-3"
>
<div
class="flex justify-center min-w-0 overflow-hidden bg-white shadow-xs"
>
<div class="flex items-center p-4">
<div class="mr-4 dark:text-orange-100">
<img src="/src/images/user.svg" alt="" />
</div>
<div>
<p
class="mb-2 text-2xl font-bold text-titleColor"
>
90 +
</p>
<p class="text-lg text-textColor">
Users
</p>
</div>
</div>
</div>
<div
class="flex justify-center min-w-0 overflow-hidden bg-white shadow-xs border-x"
>
<div class="flex items-center p-4">
<div class="mr-4 dark:text-green-100">
<img src="/src/images/location.svg" alt="" />
</div>
<div>
<p
class="mb-2 text-2xl font-bold text-titleColor"
>
30 +
</p>
<p class="text-lg text-textColor">
Locations
</p>
</div>
</div>
</div>
<div
class="flex justify-center min-w-0 overflow-hidden bg-white rounded-lg shadow-xs"
>
<div class="flex items-center p-4">
<div class="p-3 mr-4 dark:text-blue-100">
<img src="/src/images/Server.svg" alt="" />
</div>
<div>
<p
class="mb-2 text-2xl font-bold text-titleColor"
>
50 +
</p>
<p class="text-lg text-textColor">
Servers
</p>
</div>
</div>
</div>
</div>
<!-- Feature Section -->
<section
id="feature__provide--left"
class="items-center "
>
<div
class="flex flex-col-reverse items-center w-11/12 mx-auto mt-32 mb-10 space-y-0 px-18 md:space-y-0 md:flex-row lg:flex-row-reverse"
>
<!-- Left item -->
<div
class="flex flex-col justify-center space-y-6 max-h-1/2 md:w-1/2"
>
<h1
class="max-w-md text-2xl font-semibold text-center lg:max-w-full md:text-4xl md:text-left text-titleColor"
>
We Provide Many <br />
Features You Can Use
</h1>
<p
class="max-w-sm text-center lg:max-w-full text-textColor md:text-left"
>
You can explore the features that we provide with fun and have their
own functions each feature.
</p>
<div class="flex justify-center md:justify-start">
<ul>
<li class="flex w-full list__style--flex text-textColor">
<img src="/src/images/yes.svg" alt="" />
<p class="ml-2">Powerfull online protection</p>
</li>
<li class="flex w-full my-4 list__style--flex text-textColor">
<img src="/src/images/yes.svg" alt="" />
<p class="ml-2">Internet without borders.</p>
</li>
<li class="flex w-full my-4 list__style--flex text-textColor">
<img src="/src/images/yes.svg" alt="" />
<p class="ml-2">Supercharged VPN</p>
</li>
<li class="flex w-full my-4 list__style--flex text-textColor">
<img src="/src/images/yes.svg" alt="" />
<p class="ml-2">No specific time limits</p>
</li>
</ul>
</div>
</div>
<!-- Image -->
<div class=" md:w-4/5">
<img src="/src/images/Illustration 2.svg" alt="" />
</div>
</div>
</section>
<!-- Pricing feature -->
<!-- component -->
<div class="w-full h-full p-10 antialiased text-gray-400 font-inter">
<div class="container px-4 mx-auto">
<div>
<div id="title" class="my-10 text-center">
<h1 class="my-4 text-3xl font-bold text-black">Choose your plan</h1>
<p class="lg:text-sm text-textColor text-light">
Let's choose the package that is the best for you and explore it
happily and cheerfully
</p>
</div>
<div
class="grid grid-cols-1 gap-10 pt-10 md:grid-cols-2 lg:grid-cols-3 justify-evenly"
>
<div
id="plan"
class="w-full pt-12 pb-12 overflow-hidden text-center transition duration-200 ease-in transform bg-white border rounded-lg hover:shadow-2xl hover:scale-105 border-borderColors"
>
<div id="title" class="flex flex-col justify-center w-full py-5">
<img
src="/src/images/Standard.svg"
class="items-center w-40 mx-auto"
alt=""
/>
<h3 class="mt-2 text-xl font-normal text-black">Free Plan</h3>
</div>
<div id="content">
<div id="contain" class="mb-10 text-lg font-light leading-8">
<div class="flex justify-center text-sm lg:justify-center">
<ul>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Unlimited Bandwitch</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Encrypted connection.</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Yes Trafic Logs</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Works on All Devices</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Connect Anywhere</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Get New Features</p>
</li>
</ul>
</div>
<div id="select" class="w-full px-6 mt-10">
<h1 class="pb-6 text-2xl font-bold text-black">Free</h1>
<a
href="#"
class="block w-full py-2 text-sm font-medium transition duration-200 ease-in-out border rounded-full hover:shadow-lg hover:bg-brightRed hover:text-white text-brightRed border-brightRed"
>Select</a
>
</div>
</div>
</div>
</div>
<div
id="plan"
class="w-full pt-12 pb-12 overflow-hidden text-center transition duration-200 ease-in transform bg-white border rounded-lg hover:shadow-2xl hover:scale-105 border-borderColors"
>
<div id="title" class="flex flex-col justify-center w-full py-5">
<img
src="/src/images/Standard.svg"
class="items-center w-40 mx-auto"
alt=""
/>
<h3 class="mt-2 text-xl font-normal text-black">
Standard Plan
</h3>
</div>
<div id="content" class="">
<div id="contain" class="mb-10 text-lg font-light leading-8">
<div class="flex justify-center text-sm lg:justify-center">
<ul>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Unlimited Bandwitch</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Encrypted connection.</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Yes Trafic Logs</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Works on All Devices</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Connect Anywhere</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Get New Features</p>
</li>
</ul>
</div>
<div id="select" class="w-full px-6 mt-10">
<h1 class="pb-6 text-2xl font-semibold text-black">
$9 <span class="font-normal text-textColor">/mo</span>
</h1>
<a
href="#"
class="block w-full py-2 text-sm font-medium transition duration-200 ease-in-out border rounded-full hover:shadow-lg hover:bg-brightRed hover:text-white text-brightRed border-brightRed"
>Select</a
>
</div>
</div>
</div>
</div>
<div
id="plan"
class="w-full pt-12 pb-12 overflow-hidden text-center transition duration-200 ease-in transform bg-white border rounded-lg hover:shadow-2xl hover:scale-105 border-borderColors"
>
<div id="title" class="flex flex-col justify-center w-full py-5">
<img
src="/src/images/Standard.svg"
class="items-center w-40 mx-auto"
alt=""
/>
<h3 class="mt-2 text-xl font-normal text-black">
Premiun Plan
</h3>
</div>
<div id="content" class="">
<div id="contain" class="mb-10 text-lg font-light leading-8">
<div class="flex justify-center text-sm lg:justify-center">
<ul>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Unlimited Bandwitch</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Encrypted connection.</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Yes Trafic Logs</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Works on All Devices</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Connect Anywhere</p>
</li>
<li
class="flex w-full my-4 list__style--flex text-textColor"
>
<img src="/src/images/vecto.svg" alt="" />
<p class="ml-2">Get New Features</p>
</li>
</ul>
</div>
<div id="select" class="w-full px-6 mt-10">
<h1 class="pb-6 text-2xl font-semibold text-black">
$12 <span class="font-normal text-textColor">/mo</span>
</h1>
<a
href="#"
class="block w-full py-2 text-sm font-medium transition duration-200 ease-in-out border rounded-full hover:shadow-lg hover:bg-brightRed hover:text-white text-brightRed border-brightRed"
>Select</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full p-10 antialiased text-gray-400 font-inter">
<div class="container px-4 mx-auto">
<div>
<div id="title" class="mx-auto my-10 text-center lg:w-[420px]">
<h1 class="my-4 text-3xl font-bold text-black">
Huge Fast Neetwork of Fasy VPN
</h1>
<p class="lg:text-sm text-textColor text-light">
See LaslesVPN everywhere to make it easier for you when you move
locations.
</p>
</div>
<div class="flex justify-center image__container--world">
<img
src="/src/images/world.svg"
class="object-cover h-full pt-8 pb-6"
alt=""
/>
</div>
</div>
</div>
</div>
<!-- Sponsored -->
<div class="flex justify-center">
<img src="/src/images/sponsored.svg" alt= "world map picture" />
</div>
<div class="w-full h-full antialiased text-gray-400 font-inter">
<div class="container px-4 mx-auto">
<div>
<div id="title" class="mx-auto my-10 text-center lg:w-[420px]">
<h1 class="my-4 text-3xl font-bold text-black">
Trusted by Thousand of Happy Customers
</h1>
<p class="lg:text-sm text-textColor text-light">
These are the stories of our customers who have joined us with
great pleasure when using this crazy feature.
</p>
</div>
</div>
</div>
</div>
<!-- component -->
<section class="max-w-6xl px-4 py-12 mx-auto sm:px-6 lg:px-4">
<div
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3"
>
<div
class="flex flex-col w-full h-full p-6 bg-white border rounded-lg cursor-pointer border-borderColors hover:ring-2 hover:ring-brightRed hover:ring-offset-1 hover:border-none"
>
<div class="flex items-center justify-between mb-3">
<div class="flex text-center">
<img
class="object-cover object-center mr-2 rounded-full h-14 w-14"
src="https://images.pexels.com/photos/3954802/pexels-photo-3954802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="photo"
/>
<p class="text-lg font-bold text-gray-700">
Dany Bailey <br /><span
class="text-xs font-normal text-gray-500"
>Warsow, Poland</span
>
</p>
</div>
<div class="start__user--profile">
<img src="/src/images/etoile.svg" alt="" />
</div>
</div>
<div class="bg-transparent">
<p class="text-sm font-normal text-[#0B132A] leading-8">
“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>
</div>
<div
class="flex flex-col w-full h-full p-6 bg-white border rounded-lg cursor-pointer border-borderColors hover:ring-2 hover:ring-brightRed hover:ring-offset-1 hover:border-none"
>
<div class="flex items-center justify-between mb-3">
<div class="flex text-center">
<img
class="object-cover object-center mr-2 rounded-full h-14 w-14"
src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="photo"
/>
<p class="text-lg font-bold text-gray-700">
Jessicah Christy <br /><span
class="text-xs font-normal text-gray-500"
>Chanxi, China</span
>
</p>
</div>
<div class="start__user--profile">
<img src="/src/images/etoile.svg" alt="" />
</div>
</div>
<div class="bg-transparent">
<p class="text-sm font-normal text-[#0B132A] leading-8">
“I like it because I like to travel far and still can connect with
high speed.”.
</p>
</div>
</div>
<div
class="flex flex-col w-full h-full p-6 bg-white border rounded-lg cursor-pointer border-borderColors hover:ring-2 hover:ring-brightRed hover:ring-offset-1 hover:border-none"
>
<div class="flex items-center justify-between mb-3">
<div class="flex text-center">
<img
class="object-cover object-center mr-2 rounded-full h-14 w-14"
src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="photo"
/>
<p class="text-lg font-bold text-center text-gray-700">
Kim Young Jou <br /><span
class="text-xs font-normal text-gray-500"
>Seoul, North-Korea</span
>
</p>
</div>
<div class="start__user--profile">
<img src="/src/images/etoile.svg" alt="" />
</div>
</div>
<div class="bg-transparent">
<p class="text-sm font-normal text-[#0B132A] leading-8">
“This is very unusual for my business that currently requires a
virtual private network that has high security.”.
</p>
</div>
</div>
</div>
</section>
<div
class="flex items-center justify-between w-[95%] mx-auto Union__buttons--left mb-4"
>
<div class="flex union__left--flex">
<img
src="/src/images/union.svg"
class="mr-2 cursor-pointer"
alt="union image"
/>
<img
src="/src/images/elipse.svg"
class="mr-2 cursor-pointer"
alt="elipse image one"
/>
<img
src="/src/images/elipse.svg"
class="mr-2 cursor-pointer"
alt="elipse image two"
/>
<img
src="/src/images/elipse.svg"
class="mr-2"
alt="elipse image three"
/>
</div>
<div class="flex items-center justify-center union__right--flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1"
stroke="currentColor"
class="w-12 h-12 cursor-pointer text-brightRed hover:text-white hover:fill-brightRed"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.25 9l-3 3m0 0l3 3m-3-3h7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1"
stroke="currentColor"
class="w-12 h-12 cursor-pointer text-brightRed hover:text-white hover:fill-brightRed"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
<!-- component near footer -->
<div class="px-12 m-auto text-gray-600 md:px-12 xl:px-6">
<div
class="flex justify-between w-full p-12 space-x-6 bg-white rounded-xl sm:flex hover:rounded-2xl"
>
<div class="flex flex-col w-11/12 mx-auto sm:text-center lg:flex-row lg:text-start">
<div id="title" class=" mx-auto lg:w-[100%] flex flex-col">
<h1 class="mb-2 text-3xl font-bold text-black leading-18">
Subscribe Now for <br/> Get Special Features!
</h1>
<p class="lg:text-sm text-textColor text-light">
Let'us subscribe with us and get fun.
</p>
</div>
<div class="flex items-center lg:justify-end sm:justify-center sm:w-full">
<div class="flex ">
<a
href="#"
class="flex items-center p-4 text-center text-white rounded-lg drop-shadow-2xl px-14 bg-brightRed baseline hover:bg-brightRedLight hover:shadow-xl"
>Subscribe</a
>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="w-11/12 mx-auto mt-20 mb-20 ">
<footer class="">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0 sm:flex sm:flex-col sm:justify-start">
<a href="#" target="_blank" >
<img src="/src/images/logo.svg" class="h-10 mb-4" alt="lasles logo">
</a>
<p class="mb-6 text-m whitespace-nowrap dark:text-textColor"><span class="font-bold ">LaslesVPN</span> is a private virtual network that <br/> has unique features and has high security.</p>
<!-- ICONS SIDE -->
<div class="flex-col bg-indigo-40 lg:justify-start">
<div class="flex my-6 mt-4 space-x-6 sm:mt-0 lg:justify-start">
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-8 h-8 text-brightRed " fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-8 h-8 text-brightRed" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
</path>
</svg>
</a>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
<svg class="w-8 h-8 text-brightRed" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a href="#" target="_blank" class="hover:underline">LaslesVPN</a>
</span>
</div>
</div>
<div class="grid sm:w-[100%] grid-cols-2 sm:gap-6 sm:grid-cols-3 lg-flex lg:w-[56%]">
<div>
<h3 class="mb-6 font-semibold text-gray-900 text-m dark:text-textColor">Product</h3>
<ul>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Pricing</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Locations</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Server</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Countries</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Blog</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 font-semibold text-gray-900 text-m dark:text-textColor">Engage</h3>
<ul>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">LaslesVPN?</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">FAQ</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Tutorials</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">About Us</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" target="_blank"
class="text-gray-600 hover:underline dark:text-gray-400">Term of Service</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-6 font-semibold text-gray-900 text-m dark:text-textColor">Earn Money</h3>
<ul>
<li class="mb-4">
<a href="#" target="_blank" class="text-gray-600 hover:underline dark:text-gray-400">Affiliate</a>
</li>
<li>
<a href="#" target="_blank" class="text-gray-600 hover:underline dark:text-gray-400">Become Partner</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>