-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
885 lines (868 loc) · 44.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
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
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/img/favicon/site.webmanifest">
<title>Home - DevFist</title>
<meta name="description" content="We are devfist, a group of talented and hardworking developers focused on delivering quality services to our customers.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/flickity.min.css">
<link rel="stylesheet" href="assets/css/style.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" defer
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<script src="assets/js/flickity.pkgd.min.js" defer></script>
<script src="assets/js/script.prod.js" defer></script>
</head>
<body>
<div class="overlay">
<svg id="logo" viewBox="0 0 441 141" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M106.376 42.872C106.376 54.872 103.4 66.296 97.448 77.144C91.496 87.896 83.288 96.584 72.824 103.208C62.456 109.736 50.888 113 38.12 113L29.768 112.856C24.392 112.664 20.456 112.568 17.96 112.568C10.184 112.568 4.42399 112.712 0.679993 113L1.11199 110.12C4.37599 109.928 6.82399 109.544 8.45599 108.968C10.184 108.392 11.528 107.288 12.488 105.656C13.544 103.928 14.552 101.288 15.512 97.736L34.376 26.312C35.24 22.664 35.672 20.312 35.672 19.256C35.672 17.336 34.952 15.992 33.512 15.224C32.168 14.456 29.672 14.024 26.024 13.928L26.456 11.048C29.72 11.336 34.376 11.48 40.424 11.48L52.664 11.336C59.192 11.144 63.56 11.048 65.768 11.048C79.304 11.048 89.432 13.736 96.152 19.112C102.968 24.488 106.376 32.408 106.376 42.872ZM36.392 110.408C48.296 110.408 58.472 107.192 66.92 100.76C75.368 94.232 81.752 85.544 86.072 74.696C90.392 63.848 92.552 52.04 92.552 39.272C92.552 30.536 90.104 24.104 85.208 19.976C80.312 15.752 72.488 13.64 61.736 13.64C58.76 13.64 56.408 13.976 54.68 14.648C53.048 15.32 51.704 16.52 50.648 18.248C49.592 19.976 48.632 22.568 47.768 26.024L28.904 98.024C28.04 101.48 27.608 103.832 27.608 105.08C27.608 106.904 28.232 108.248 29.48 109.112C30.824 109.976 33.128 110.408 36.392 110.408Z"
stroke="white" & stroke-width="4" />
<path
d="M169.248 46.472C169.248 54.248 164.88 61.064 156.144 66.92C147.408 72.776 137.424 77.528 126.192 81.176C125.136 85.976 124.608 90.632 124.608 95.144C124.608 104.36 127.92 108.968 134.544 108.968C142.8 108.968 150.192 104.168 156.72 94.568L159.024 95.72C155.952 101 151.776 105.56 146.496 109.4C141.312 113.144 135.84 115.016 130.08 115.016C124.128 115.016 119.472 113.288 116.112 109.832C112.752 106.376 111.072 101.336 111.072 94.712C111.072 87.416 113.184 79.208 117.408 70.088C121.728 60.872 127.536 53.048 134.832 46.616C142.128 40.184 150.048 36.968 158.592 36.968C161.664 36.968 164.208 37.784 166.224 39.416C168.24 41.048 169.248 43.4 169.248 46.472ZM155.424 39.704C152.352 39.704 148.896 41.528 145.056 45.176C141.312 48.728 137.76 53.48 134.4 59.432C131.136 65.384 128.64 71.72 126.912 78.44C136.032 75.272 142.56 72.2 146.496 69.224C150.048 66.44 152.784 63.08 154.704 59.144C156.72 55.112 157.728 50.792 157.728 46.184C157.728 43.592 157.536 41.864 157.152 41C156.768 40.136 156.192 39.704 155.424 39.704Z"
stroke="white" & stroke-width="4" />
<path
d="M239.334 58.424C236.358 56.984 233.862 55.016 231.846 52.52C229.83 50.024 228.822 47.144 228.822 43.88C228.822 41.48 229.446 39.704 230.694 38.552C232.038 37.4 233.526 36.824 235.158 36.824C237.846 36.824 239.862 38.12 241.206 40.712C242.55 43.304 243.222 46.856 243.222 51.368C243.222 53.864 243.126 55.784 242.934 57.128C241.782 67.016 239.238 76.376 235.302 85.208C231.462 94.04 226.278 101.24 219.75 106.808C213.318 112.28 205.878 115.016 197.43 115.016C191.382 115.016 187.062 113.288 184.47 109.832C181.878 106.376 180.726 102.152 181.014 97.16C181.59 89.288 184.854 80.504 190.806 70.808C196.854 61.112 204.726 51.656 214.422 42.44C212.022 43.4 209.286 44.84 206.214 46.76C203.814 48.296 201.75 49.496 200.022 50.36C198.294 51.128 196.758 51.512 195.414 51.512C194.358 51.512 193.35 51.224 192.39 50.648C191.43 50.072 190.806 49.736 190.518 49.64C188.79 48.488 187.398 47.912 186.342 47.912C184.806 47.912 183.51 48.584 182.454 49.928C181.494 51.176 180.438 53.48 179.286 56.84L177.702 62.168H174.966L178.134 51.656C180.822 41.864 185.334 36.968 191.67 36.968C192.918 36.968 193.974 37.208 194.838 37.688C195.702 38.072 196.806 38.744 198.15 39.704C199.398 40.664 200.502 41.384 201.462 41.864C202.422 42.344 203.526 42.584 204.774 42.584C209.574 42.584 213.606 41.096 216.87 38.12L218.31 35.384L221.334 36.824C213.558 46.424 207.51 55.976 203.19 65.48C198.87 74.984 196.278 84.728 195.414 94.712C195.318 95.576 195.27 96.728 195.27 98.168C195.27 106.232 197.382 110.264 201.606 110.264C208.614 110.264 214.95 107.336 220.614 101.48C226.278 95.624 230.742 88.616 234.006 80.456C237.27 72.2 239.046 64.856 239.334 58.424Z"
stroke="white" & stroke-width="4" />
<path
d="M333.395 6.584C334.259 7.73599 334.691 9.224 334.691 11.048C334.691 13.928 333.587 16.472 331.379 18.68C329.171 20.888 326.675 21.992 323.891 21.992C321.779 21.992 320.003 21.32 318.563 19.976C317.219 18.536 316.547 16.808 316.547 14.792C316.547 14.408 316.643 13.736 316.835 12.776C317.219 10.664 318.179 8.79199 319.715 7.16C321.347 5.432 323.219 4.328 325.331 3.848C323.123 2.984 320.003 2.552 315.971 2.552C310.691 2.552 305.651 4.088 300.851 7.16C297.011 9.65599 293.939 13.304 291.635 18.104C289.427 22.808 287.123 29.72 284.723 38.84V38.984H312.083C317.555 38.792 321.923 38.12 325.187 36.968L305.747 100.76C305.075 102.776 304.739 104.552 304.739 106.088C304.739 108.488 305.843 109.688 308.051 109.688C310.067 109.688 311.939 108.584 313.667 106.376C315.395 104.168 317.267 100.376 319.283 95L321.299 89.672H324.035L320.291 100.184C318.371 105.464 315.827 109.256 312.659 111.56C309.587 113.864 306.227 115.016 302.579 115.016C295.859 115.016 292.499 112.088 292.499 106.232C292.499 103.448 293.363 99.656 295.091 94.856L311.219 41.864H283.859L256.499 138.056C251.315 138.248 246.995 138.92 243.539 140.072L271.475 41.864H257.507L258.371 38.984H272.195C274.115 32.072 276.227 26.36 278.531 21.848C280.835 17.24 283.667 13.496 287.027 10.616C291.059 7.16 295.667 4.616 300.851 2.98399C306.131 1.25599 311.555 0.391991 317.123 0.391991C320.579 0.391991 323.747 0.919994 326.627 1.976C329.603 2.936 331.859 4.47199 333.395 6.584Z"
stroke="white" & stroke-width="4" />
<path
d="M339.746 110.84C340.706 111.32 341.618 111.656 342.482 111.848C343.442 112.04 344.738 112.136 346.37 112.136C350.69 112.136 354.194 110.84 356.882 108.248C359.57 105.656 360.914 102.008 360.914 97.304C360.914 94.232 360.338 91.256 359.186 88.376C358.034 85.4 356.114 82.04 353.426 78.296C350.162 73.88 347.762 70.28 346.226 67.496C344.786 64.616 344.066 61.256 344.066 57.416C344.066 53.48 345.074 49.976 347.09 46.904C349.106 43.736 351.794 41.288 355.154 39.56C358.61 37.832 362.354 36.968 366.386 36.968C371.378 36.968 375.554 37.928 378.914 39.848C382.274 41.672 383.954 44.888 383.954 49.496C383.954 51.224 383.378 52.904 382.226 54.536C381.17 56.168 379.538 56.984 377.33 56.984C375.698 56.984 374.306 56.408 373.154 55.256C372.098 54.104 371.57 52.664 371.57 50.936C371.57 47.864 372.914 44.648 375.602 41.288C373.778 40.136 371.378 39.56 368.402 39.56C364.754 39.56 361.73 40.808 359.33 43.304C357.026 45.704 355.874 49.016 355.874 53.24C355.874 55.736 356.306 57.896 357.17 59.72C358.034 61.448 359.618 64.04 361.922 67.496L364.514 71.24C367.394 75.656 369.506 79.448 370.85 82.616C372.29 85.784 373.01 89.048 373.01 92.408C373.01 96.728 371.858 100.616 369.554 104.072C367.346 107.528 364.322 110.216 360.482 112.136C356.738 114.056 352.658 115.016 348.242 115.016C342.77 115.016 338.162 113.864 334.418 111.56C330.674 109.16 328.802 105.56 328.802 100.76C328.802 99.128 329.282 97.64 330.242 96.296C331.106 94.952 332.498 94.28 334.418 94.28C336.53 94.28 338.114 95.144 339.17 96.872C340.226 98.6 340.754 100.76 340.754 103.352C340.754 104.984 340.418 107.48 339.746 110.84Z"
stroke="white" & stroke-width="4" />
<path
d="M403.518 100.76C403.23 101.912 403.086 102.968 403.086 103.928C403.086 105.848 403.662 107.288 404.814 108.248C405.966 109.208 407.454 109.688 409.278 109.688C411.678 109.688 413.886 108.68 415.902 106.664C418.014 104.552 420.078 100.76 422.094 95.288L424.11 89.672H426.846L423.822 98.744C421.806 104.696 419.166 108.92 415.902 111.416C412.734 113.816 408.798 115.016 404.094 115.016C399.774 115.016 396.558 113.96 394.446 111.848C392.334 109.736 391.278 106.808 391.278 103.064C391.278 100.568 391.71 97.832 392.574 94.856L407.838 41.864H394.878L395.598 38.984H408.558L414.894 17.096C420.078 16.904 424.398 16.232 427.854 15.08L421.086 38.984H440.094L439.662 41.864H420.222L403.518 100.76Z"
stroke="white" & stroke-width="4" />
</svg>
</div>
<header class="site-header">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12">
<a href="javascript:void(0)" class="site-logo" title="DevFist">
<h1 class="cursive text-white">Devfist</h1>
</a>
</div>
<div class="flex-row col-md-8 col-sm-12 d-flex justify-content-end align-items-center">
<div class="btn-menu">
<i class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
</path>
</svg>
</i>
</div>
<nav class="align-items-center mobile d-flex">
<ul class="hidden m-0 list-unstyled d-flex">
<li class="px-3"><a href="#section-services">Services</a></li>
<li class="px-3"><a href="#section-pricing">Our Pricing</a></li>
<li class="px-3"><a href="#contact-top">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container mx-auto">
<div class="mb-3 row">
<h2 class="hero-title">Welcome to <span class="cursive">DevFist</span></h2>
</div>
<div class="row">
<p>Your satsifaction is our top priority.</p>
</div>
</div>
</section>
<section class="container mx-auto about">
<div class="about-text" data-aos="fade-up">
<p class="text-uppercase text-blue font-weight-bold">About us</p>
<h2 class="text-black"><span class="cursive">DevFist</span> a team of talented individuals committed to
providing cost effective solutions <span class="cursive text-blue">quickly and effectively.</span></h2>
<p class="text-black-50 w-75">We believe that a relationship of mutual trust and loyalty with our clients is
essential and our number one priority.</p>
</div>
<div class="flex-wrap d-flex align-items-center">
<figure class="col-md-7 d-flex justify-content-center" data-aos="fade-right">
<img src="assets/img/about.webp" alt="Computer vector of guy looking at screen" class="img-fluid">
<figcaption class="position-absolute aboutCaption">
<a href='https://www.freepik.com/vectors/computer'>Designed by Freepik</a>
</figcaption>
</figure>
<div class="mt-3 col-md-5" data-aos="fade-left">
<div class="my-4">
<h6 class="font-weight-bold text-uppercase">Design</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="83" aria-valuemin="0"
aria-valuemax="100">83%</div>
</div>
</div>
<div class="mb-4">
<h6 class="font-weight-bold text-uppercase">Development</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="92" aria-valuemin="0"
aria-valuemax="100">92%</div>
</div>
</div>
<div class="mb-4">
<h6 class="font-weight-bold text-uppercase">Marketing</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="78" aria-valuemin="0"
aria-valuemax="100">78%</div>
</div>
</div>
<div class="mb-4">
<h6 class="font-weight-bold text-uppercase">Strategy</h6>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100">90%</div>
</div>
</div>
</div>
</div>
</section>
<section class="stats" data-aos="fade-up">
<div class="container py-2 w-85 text-center text-uppercase">
<div class="row py-3">
<div class="col-md-3 col-sm-12" data-aos="fade-up">
<div class="counter-wrapper pb-4">
<i class="fa fa-4x text-blue fa-pie-chart d-block"></i>
<p class="counter-count">10</p>
<p class="counter-text">Completed projects</p>
</div>
</div>
<div class="col-md-3 col-sm-12" data-aos="fade-up">
<div class="counter-wrapper pb-4">
<i class="fa fa-4x text-blue fa-heart d-block"></i>
<p class="counter-count">10</p>
<p class="counter-text">happy clients</p>
</div>
</div>
<div class="col-md-3 col-sm-12" data-aos="fade-up">
<div class="counter-wrapper pb-4">
<i class="fa fa-4x text-blue fa-trophy d-block"></i>
<p class="counter-count">5</p>
<p class="counter-text">Web awards</p>
</div>
</div>
<div class="col-md-3 col-sm-12" data-aos="fade-up">
<div class="counter-wrapper">
<i class="fa fa-4x text-blue fa-product-hunt d-block"></i>
<p class="counter-count">6</p>
<p class="counter-text">Products created</p>
</div>
</div>
</div>
</div>
</section>
<article>
<div class="modal fade" id="servicesModal" tabindex="-1" role="dialog" aria-labelledby="servicesModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="servicesModalLabel">Web Development</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row mt-0">
<div class="col-12 col-md-6 border-right-md border-bottom-sm pb-sm-3 mb-sm-3 d-flex align-items-center">
<img src="#" alt="" loading="lazy" class="img-fluid">
</div>
<div class="col-12 col-md-6 text-left right-content">
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<section class="container services text-center" id="section-services" data-aos="fade-up">
<h2 class="section-header">Our <span class="cursive text-blue">Services</span></h2>
<p class="mb-3 text-black-50">We provide the following services.</p>
<div class="row">
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 col-md-4 col-lg-3 pb-5 col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-spin fa-cog text-white webdev"></i>
<h4>Web Development</h4>
<p class="text-black-50">Increase your digital presence with a brand new website built from latest
technologies.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 pb-5 col-md-4 col-lg-3 col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-rocket text-white appdev"></i>
<h4>App development</h4>
<p class="text-black-50">Expand your business online or offline with custom made desktop and android
applications.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 col-md-4 col-lg-3 pb-5 col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-bullhorn text-white smm"></i>
<h4>Social Media Marketing</h4>
<p class="text-black-50">Online business is the future. Grow your business, boost your sales and get potential
customers.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 col-md-4 col-lg-3 pb-5 col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-image text-white design"></i>
<h4>Graphics Design</h4>
<p class="text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
ullamcorper mattis.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 pb-5 col-md-4 col-lg-3 mx-auto col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-video-camera text-white vedit"></i>
<h4>Video Editing</h4>
<p class="text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
ullamcorper mattis.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 pb-5 col-md-4 col-lg-3 mx-auto col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-mixcloud text-white iot"></i>
<h4>IOT Home Automation</h4>
<p class="text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
ullamcorper mattis.</p>
</div>
<div
class="box-shadow-hover service-item bounce anim-dur-4 anim-cycle-99 mb-5 pb-5 col-md-4 col-lg-3 mx-auto col-sm-6 col-12"
data-aos="fade-up">
<i class="fa fa-2x py-4 fa-keyboard-o text-white dataEntry"></i>
<h4>Data Entry</h4>
<p class="text-black-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
ullamcorper mattis.</p>
</div>
</div>
</section>
<section class="build" data-aos="fade-up">
<div class="container">
<div class="p-5 build-content-wrapper text-white">
<h2 class="text-capitalize pb-4">We offer you quality
<p class="pb-5"><span class="cursive element"></span>.</p>
<div class="row">
<div class="col-md-6 pb-4 col-sm-12">
<i class="fa mr-4 py-4 fa-star text-white bg-blue"></i>
<h4 class="d-inline">
Quality products
</h4>
</div>
<div class="col-md-6 pb-4 col-sm-12">
<i class="fa mr-4 py-4 fa-shield text-white bg-blue"></i>
<h4 class="d-inline">
True value
</h4>
</div>
<div class="col-md-6 pb-4 col-sm-12">
<i class="fa mr-4 py-4 fa-globe text-white bg-blue"></i>
<h4 class="d-inline">
Global Outreach
</h4>
</div>
<div class="col-md-6 col-sm-12">
<i class="fa mr-4 py-4 fa-rocket text-white bg-blue"></i>
<h4 class="d-inline">
Build faster
</h4>
</div>
</div>
</h2>
</div>
</div>
</section>
<section class="pricing text-center" id="section-pricing" data-aos="fade-up">
<div class="container">
<h2 class="section-header">Our <span class="cursive text-blue">Pricing</span></h2>
<p class="mb-3 text-black-50">Place your order now.</p>
<ul id="package-slides"
class="border-bottom flex-wrap pb-4 w-100 mx-auto list-unstyled d-flex justify-content-around">
<li class="px-2 pt-3"><a class="link-blue link-webdev active" href="javascript:void(0)" data-toggle="0">Web
Development</a>
</li>
<li class="px-2 pt-3"><a class="link-blue link-appdev" href="javascript:void(0)" data-toggle="1">App
Development</a></li>
<li class="px-2 pt-3"><a class="link-blue link-smm" href="javascript:void(0)" data-toggle="2">Social Media
Marketing</a>
</li>
<li class="px-2 pt-3"><a class="link-blue link-design" href="javascript:void(0)" data-toggle="3">Graphics
Design</a></li>
<li class="px-2 pt-3"><a class="link-blue link-vedit" href="javascript:void(0)" data-toggle="4">Video
Editing</a></li>
<li class="px-2 pt-3"><a class="link-blue link-iot" href="javascript:void(0)" data-toggle="5">IOT Home
Automation</a></li>
<li class="px-2 pt-3"><a class="link-blue link-dataEntry" href="javascript:void(0)" data-toggle="6">Data
Entry</a></li>
</ul>
<ul data-flickity='{ "wrapAround": true, "prevNextButtons": false, "pageDots": false }'
class="main-carousel pt-4 list-unstyled">
<li
class="webdev carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="appdev carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="smm carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="design carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="vedit carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="iot carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
<li
class="dataEntry carousel-cell bounce anim-dur-4 anim-cycle-99 w-100 flex-wrap d-flex flex-row justify-content-around">
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan middle">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
<div class="pricing-plan">
<div class="plan-inner">
<div class="plan-header">
<div class="plan-price">
<span>$</span>35<span class="text-black-50">/month</span>
</div>
<h4 class="text-uppercase">Personal plan</h4>
</div>
<div class="plan-text">
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
<div class="plan-feature">
Just a feature </div>
</div>
<a href="#contact-top" class="plan-btn">
Buy now
</a>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="contact" id="section-contact" data-aos="fade-up">
<iframe scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?q=university%20of%20engineering%20%26%20technology%20Taxila&t=&z=15&ie=UTF8&iwloc=&output=embed"
aria-label="UET Taxila, Punjab, Pakistan" frameborder="0"></iframe>
<div class="container" data-aos="fade-up">
<span id="contact-top" class="position-absolute">s</span>
<h2 class="text-center mt-5 pt-4 section-header">Contact Us</h2>
<div class="row mt-5 justify-content-center">
<div class="contact-details col-11 col-md-4">
<h2>Taxila Office</h2>
<div class="mb-3 d-flex address align-items-center">
<i class="fa fa-home mr-3"></i>
<p>Room 138, AB Hall, UET Taxila<br> Punjab, Pakistan</p>
</div>
<div class="d-flex flex-row">
<a href="mailto:[email protected]" class="mr-2 link-blue">
<i class="fa fa-envelope"></i></a>
<a href="https://wa.me/923116813021" target="_blank" class="mx-2 link-blue">
<i class="fa fa-whatsapp"></i></a>
<a href="https://twitter.com/DevFist/" target="_blank" class="mx-2 link-blue">
<i class="fa fa-twitter"></i></a>
<a href="https://www.reddit.com/user/devfist/" target="_blank" class="mx-2 link-blue">
<i class="fa fa-reddit"></i></a>
<a href="javascript:void(0);" class="mx-2 link-blue">
<i class="fa fa-linkedin"></i></a>
<a href="javascript:void(0);" class="mx-2 link-blue">
<i class="fa fa-github"></i></a>
</div>
</div>
<form class="contact-form col-md-8 col-12" id="contact-form">
<div class="row">
<div class="col-md-6 mb-4">
<input type="text" size="40" name="FirstName" id="FirstName" class="form-control"
placeholder="First Name" required>
</div>
<div class="col-md-6 mb-4">
<input type="text" size="40" name="LastName" id="LastName" class="form-control" placeholder="Last Name"
required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<input type="email" size="40" name="YourEmail" id="YourEmail" class="form-control"
placeholder="Your Email" required>
</div>
<div class="col-md-6 mb-4">
<input type="tel" size="40" name="PhoneNumber" id="PhoneNumber" class="form-control"
placeholder="Phone Number" required>
</div>
</div>
<div class="row">
<div class="col-12">
<textarea class="form-control" name="Message" cols="40" rows="10" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="col-12 mt-5">
<input type="submit" value="Send message" class="submit-btn">
</div>
</div>
</form>
</div>
</div>
</section>
</main>
<footer>
<a class="go-top">
<i class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z">
</path>
</svg>
</i>
</a>
<div class="border-top">
<p class="container py-4 my-0">©2020 <span class="cursive">DevFist</span> | All rights reserved.</p>
</div>
</footer>
</body>
</html>