-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
569 lines (535 loc) · 26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/utilities.css" />
<!-- bootstrap css -->
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
/>
<!-- lottie script -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title>Portfolio</title>
</head>
<body>
<main>
<header class="nav-bar" id="scroll">
<div class="logo">PORTFOLIO</div>
<nav>
<ul>
<li><a href="#container" class="active">Home</a></li>
<li><a href="#container-skills">Skills</a></li>
<li><a href="#container-services">Services</a></li>
<li><a href="#container-about">About Us</a></li>
<li><a href="#container-contact">Contact Us</a></li>
</ul>
</nav>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
</header>
<!-- animating name -->
<div class="container" id="container">
<svg
id="home-logo"
width="1030"
height="122"
viewBox="0 0 1030 122"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_d)">
<mask
id="path-1-outside-1"
maskUnits="userSpaceOnUse"
x="3.20801"
y="0.415985"
width="1023"
height="113"
fill="black"
>
<rect
fill="white"
x="3.20801"
y="0.415985"
width="1023"
height="113"
/>
</mask>
<path
d="M39.912 112.008C33.288 112.008 27.336 110.856 22.056 108.552C16.872 106.152 12.792 102.888 9.81601 98.76C6.84001 94.536 5.30401 89.688 5.20801 84.216H19.176C19.656 88.92 21.576 92.904 24.936 96.168C28.392 99.336 33.384 100.92 39.912 100.92C46.152 100.92 51.048 99.384 54.6 96.312C58.248 93.144 60.072 89.112 60.072 84.216C60.072 80.376 59.016 77.256 56.904 74.856C54.792 72.456 52.152 70.632 48.984 69.384C45.816 68.136 41.544 66.792 36.168 65.352C29.544 63.624 24.216 61.896 20.184 60.168C16.248 58.44 12.84 55.752 9.96001 52.104C7.17601 48.36 5.78401 43.368 5.78401 37.128C5.78401 31.656 7.17601 26.808 9.96001 22.584C12.744 18.36 16.632 15.096 21.624 12.792C26.712 10.488 32.52 9.33599 39.048 9.33599C48.456 9.33599 56.136 11.688 62.088 16.392C68.136 21.096 71.544 27.336 72.312 35.112H57.912C57.432 31.272 55.416 27.912 51.864 25.032C48.312 22.056 43.608 20.568 37.752 20.568C32.28 20.568 27.816 22.008 24.36 24.888C20.904 27.672 19.176 31.608 19.176 36.696C19.176 40.344 20.184 43.32 22.2 45.624C24.312 47.928 26.856 49.704 29.832 50.952C32.904 52.104 37.176 53.448 42.648 54.984C49.272 56.808 54.6 58.632 58.632 60.456C62.664 62.184 66.12 64.92 69 68.664C71.88 72.312 73.32 77.304 73.32 83.64C73.32 88.536 72.024 93.144 69.432 97.464C66.84 101.784 63 105.288 57.912 107.976C52.824 110.664 46.824 112.008 39.912 112.008Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M99.3716 19.272C96.8756 19.272 94.7636 18.408 93.0356 16.68C91.3076 14.952 90.4436 12.84 90.4436 10.344C90.4436 7.84799 91.3076 5.73599 93.0356 4.00799C94.7636 2.27999 96.8756 1.41599 99.3716 1.41599C101.772 1.41599 103.788 2.27999 105.42 4.00799C107.148 5.73599 108.012 7.84799 108.012 10.344C108.012 12.84 107.148 14.952 105.42 16.68C103.788 18.408 101.772 19.272 99.3716 19.272ZM105.708 32.088V111H92.6036V32.088H105.708Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M172.105 111L141.145 76.152V111H128.041V4.43999H141.145V67.08L171.529 32.088H189.817L152.665 71.4L189.961 111H172.105Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M197.255 71.256C197.255 63.192 198.887 56.136 202.151 50.088C205.415 43.944 209.879 39.192 215.543 35.832C221.303 32.472 227.687 30.792 234.695 30.792C241.607 30.792 247.607 32.28 252.695 35.256C257.783 38.232 261.574 41.976 264.07 46.488V32.088H277.319V111H264.07V96.312C261.478 100.92 257.591 104.76 252.407 107.832C247.319 110.808 241.367 112.296 234.551 112.296C227.543 112.296 221.207 110.568 215.543 107.112C209.879 103.656 205.415 98.808 202.151 92.568C198.887 86.328 197.255 79.224 197.255 71.256ZM264.07 71.4C264.07 65.448 262.87 60.264 260.47 55.848C258.07 51.432 254.806 48.072 250.678 45.768C246.646 43.368 242.182 42.168 237.286 42.168C232.39 42.168 227.927 43.32 223.895 45.624C219.862 47.928 216.647 51.288 214.247 55.704C211.847 60.12 210.647 65.304 210.647 71.256C210.647 77.304 211.847 82.584 214.247 87.096C216.647 91.512 219.862 94.92 223.895 97.32C227.927 99.624 232.39 100.776 237.286 100.776C242.182 100.776 246.646 99.624 250.678 97.32C254.806 94.92 258.07 91.512 260.47 87.096C262.87 82.584 264.07 77.352 264.07 71.4Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M337.911 30.648C347.511 30.648 355.287 33.576 361.239 39.432C367.191 45.192 370.167 53.544 370.167 64.488V111H357.207V66.36C357.207 58.488 355.239 52.488 351.303 48.36C347.367 44.136 341.991 42.024 335.175 42.024C328.263 42.024 322.743 44.184 318.615 48.504C314.583 52.824 312.567 59.112 312.567 67.368V111H299.463V32.088H312.567V43.32C315.159 39.288 318.663 36.168 323.079 33.96C327.591 31.752 332.535 30.648 337.911 30.648Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M386.676 71.256C386.676 63.192 388.308 56.136 391.572 50.088C394.836 43.944 399.3 39.192 404.964 35.832C410.724 32.472 417.156 30.792 424.26 30.792C430.404 30.792 436.116 32.232 441.396 35.112C446.676 37.896 450.708 41.592 453.492 46.2V4.43999H466.74V111H453.492V96.168C450.9 100.872 447.06 104.76 441.972 107.832C436.884 110.808 430.932 112.296 424.116 112.296C417.108 112.296 410.724 110.568 404.964 107.112C399.3 103.656 394.836 98.808 391.572 92.568C388.308 86.328 386.676 79.224 386.676 71.256ZM453.492 71.4C453.492 65.448 452.292 60.264 449.892 55.848C447.492 51.432 444.228 48.072 440.1 45.768C436.068 43.368 431.604 42.168 426.708 42.168C421.812 42.168 417.348 43.32 413.316 45.624C409.284 47.928 406.068 51.288 403.668 55.704C401.268 60.12 400.068 65.304 400.068 71.256C400.068 77.304 401.268 82.584 403.668 87.096C406.068 91.512 409.284 94.92 413.316 97.32C417.348 99.624 421.812 100.776 426.708 100.776C431.604 100.776 436.068 99.624 440.1 97.32C444.228 94.92 447.492 91.512 449.892 87.096C452.292 82.584 453.492 77.352 453.492 71.4Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M483.989 71.256C483.989 63.192 485.621 56.136 488.885 50.088C492.149 43.944 496.613 39.192 502.277 35.832C508.037 32.472 514.421 30.792 521.429 30.792C528.341 30.792 534.341 32.28 539.429 35.256C544.517 38.232 548.309 41.976 550.805 46.488V32.088H564.053V111H550.805V96.312C548.213 100.92 544.325 104.76 539.141 107.832C534.053 110.808 528.101 112.296 521.285 112.296C514.277 112.296 507.941 110.568 502.277 107.112C496.613 103.656 492.149 98.808 488.885 92.568C485.621 86.328 483.989 79.224 483.989 71.256ZM550.805 71.4C550.805 65.448 549.605 60.264 547.205 55.848C544.805 51.432 541.541 48.072 537.413 45.768C533.381 43.368 528.917 42.168 524.021 42.168C519.125 42.168 514.661 43.32 510.629 45.624C506.597 47.928 503.381 51.288 500.981 55.704C498.581 60.12 497.381 65.304 497.381 71.256C497.381 77.304 498.581 82.584 500.981 87.096C503.381 91.512 506.597 94.92 510.629 97.32C514.661 99.624 519.125 100.776 524.021 100.776C528.917 100.776 533.381 99.624 537.413 97.32C541.541 94.92 544.805 91.512 547.205 87.096C549.605 82.584 550.805 77.352 550.805 71.4Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M599.301 44.904C601.605 40.392 604.869 36.888 609.093 34.392C613.413 31.896 618.645 30.648 624.789 30.648V44.184H621.333C606.645 44.184 599.301 52.152 599.301 68.088V111H586.197V32.088H599.301V44.904Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M732.739 111L691.411 65.208V111H678.307V10.632H691.411V57.144L732.883 10.632H749.443L703.939 60.888L749.875 111H732.739Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M803.678 30.648C809.63 30.648 815.006 31.944 819.806 34.536C824.606 37.032 828.35 40.824 831.038 45.912C833.822 51 835.214 57.192 835.214 64.488V111H822.254V66.36C822.254 58.488 820.286 52.488 816.35 48.36C812.414 44.136 807.038 42.024 800.222 42.024C793.31 42.024 787.79 44.184 783.662 48.504C779.63 52.824 777.614 59.112 777.614 67.368V111H764.51V4.43999H777.614V43.32C780.206 39.288 783.758 36.168 788.27 33.96C792.878 31.752 798.014 30.648 803.678 30.648Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M851.723 71.256C851.723 63.192 853.355 56.136 856.619 50.088C859.883 43.944 864.347 39.192 870.011 35.832C875.771 32.472 882.155 30.792 889.163 30.792C896.075 30.792 902.075 32.28 907.163 35.256C912.251 38.232 916.043 41.976 918.539 46.488V32.088H931.787V111H918.539V96.312C915.947 100.92 912.059 104.76 906.875 107.832C901.787 110.808 895.835 112.296 889.019 112.296C882.011 112.296 875.675 110.568 870.011 107.112C864.347 103.656 859.883 98.808 856.619 92.568C853.355 86.328 851.723 79.224 851.723 71.256ZM918.539 71.4C918.539 65.448 917.339 60.264 914.939 55.848C912.539 51.432 909.275 48.072 905.147 45.768C901.115 43.368 896.651 42.168 891.755 42.168C886.859 42.168 882.395 43.32 878.363 45.624C874.331 47.928 871.115 51.288 868.715 55.704C866.315 60.12 865.115 65.304 865.115 71.256C865.115 77.304 866.315 82.584 868.715 87.096C871.115 91.512 874.331 94.92 878.363 97.32C882.395 99.624 886.859 100.776 891.755 100.776C896.651 100.776 901.115 99.624 905.147 97.32C909.275 94.92 912.539 91.512 914.939 87.096C917.339 82.584 918.539 77.352 918.539 71.4Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
<path
d="M992.38 30.648C1001.98 30.648 1009.76 33.576 1015.71 39.432C1021.66 45.192 1024.64 53.544 1024.64 64.488V111H1011.68V66.36C1011.68 58.488 1009.71 52.488 1005.77 48.36C1001.84 44.136 996.46 42.024 989.644 42.024C982.732 42.024 977.212 44.184 973.084 48.504C969.052 52.824 967.036 59.112 967.036 67.368V111H953.932V32.088H967.036V43.32C969.628 39.288 973.132 36.168 977.548 33.96C982.06 31.752 987.004 30.648 992.38 30.648Z"
stroke="#FAFAFA"
stroke-width="2"
mask="url(#path-1-outside-1)"
/>
</g>
<defs>
<filter
id="filter0_d"
x="0.190308"
y="0.415985"
width="1029.45"
height="120.88"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="2" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow"
result="shape"
/>
</filter>
</defs>
</svg>
</div>
<!-- animating name ends here -->
<!-- eduation section starts here -->
<div class="container-eduation default" id="container-eduation">
<h3 class="def-heading">Eduation</h3>
<div class="ed-cards">
<div class="card">
<h2>Degree</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
aliquam quidem atque culpa earum illo.
</p>
<div class="content">
<span>Location</span>
<span>Date</span>
</div>
</div>
<div class="card">
<h2>Degree</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
aliquam quidem atque culpa earum illo.
</p>
<div class="content">
<span>Location</span>
<span>Date</span>
</div>
</div>
<div class="card">
<h2>Degree</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
aliquam quidem atque culpa earum illo.
</p>
<div class="content">
<span>Location</span>
<span>Date</span>
</div>
</div>
</div>
</div>
<!-- eduation section ends here -->
<!-- Skills sections starts here -->
<div class="container-skills default" id="container-skills">
<h3 class="def-heading">Skills</h3>
<div class="skills">
<div class="skill-card">
<div class="img">
<img src="imgs/html5.png" alt="" />
</div>
<div class="progress">
<h4>HTML5</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
<div class="skill-card">
<div class="img">
<img src="imgs/css.png" alt="" />
</div>
<div class="progress">
<h4>CSS3</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
<div class="skill-card">
<div class="img">
<img src="imgs/javascript1.png" alt="" />
</div>
<div class="progress">
<h4>JavaScript</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
<div class="skill-card">
<div class="img">
<img src="imgs/php.png" alt="" />
</div>
<div class="progress">
<h4>PHP</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
<div class="skill-card">
<div class="img">
<img src="imgs/mysql.png" alt="" />
</div>
<div class="progress">
<h4>MYSQL</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
<div class="skill-card">
<div class="img">
<img src="imgs/python.png" alt="" />
</div>
<div class="progress">
<h4>PYTHON</h4>
<div class="percent">
<div style="width: 60%"></div>
</div>
</div>
<div class="content">
<span>60%</span>
</div>
</div>
</div>
</div>
<!-- Skills sections ends here -->
<!-- service sections startss here -->
<div class="container-services default" id="container-services">
<h3 class="def-heading">Services</h3>
<div class="services">
<div class="service-card">
<div class="icons">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
<div class="service-card">
<div class="icons">
<i class="fa fa-laptop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
<div class="service-card">
<div class="icons">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
<div class="service-card">
<div class="icons">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
<div class="service-card">
<div class="icons">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
<div class="service-card">
<div class="icons">
<i class="fa fa-desktop" aria-hidden="true"></i>
</div>
<div class="content">
<h4>Web Development</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
tenetur dolorem, minus cum eaque rem?Lorem ipsum dolor sit amet
consectetur adipisicing elit. Qui sint inventore aspernatur?
Nobis, at quae!
</p>
</div>
</div>
</div>
</div>
<!-- service sections endss here -->
<!-- certificates section starts here -->
<div class="container-certificate default" id="container-certificate">
<h3 class="def-heading">Certificate</h3>
<div class="services certificate" id="certificate">
<div class="card-certificate">
<div class="img">
<img src="imgs/coursera.png" />
</div>
<div class="content">
<h4>certificate name</h4>
<div class="lottie-svg hide" id="lottie-svg"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laudantium, molestiae.
</p>
<span>Platform</span><br />
<span>Date:</span>
<button id="btn">Congrate</button>
</div>
</div>
<div class="card-certificate">
<div class="img">
<img src="imgs/udemy.png" />
</div>
<div class="content">
<h4>certificate name</h4>
<div class="lottie-svg hide" id="lottie-svg1"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laudantium, molestiae.
</p>
<span>Platform</span><br />
<span>Date:</span>
<button id="btn1">Congrate</button>
</div>
</div>
<div class="card-certificate">
<div class="img">
<img src="imgs/microsoft.jpg" />
</div>
<div class="content">
<h4>certificate name</h4>
<div class="lottie-svg hide" id="lottie-svg2"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laudantium, molestiae.
</p>
<span>Platform</span><br />
<span>Date:</span>
<button id="btn2">Congrate</button>
</div>
</div>
</div>
</div>
<!-- certificates section ends here -->
<!-- about sections starts here -->
<div class="container-about default" id="container-about">
<h3 class="def-heading">About Me</h3>
<div class="about">
<div class="img">
<img src="imgs/Profile.png" alt="">
</div>
<div class="about-content">
<h4>About Me</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nihil quidem, consectetur iste veniam soluta deserunt, voluptatum veritatis dolor, perspiciatis dignissimos dicta nisi! Nulla, dolorum ea aliquam, alias illo culpa cupiditate doloremque atque animi ducimus qui placeat et dolorem
aperiam autem similique adipisci eaque pariatur nostrum, a doloribus iure voluptatibus!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium et labore doloribus eius voluptatibus? Reprehenderit quia sapiente dolorem quod quae?</p>
<button>Download CV</button>
</div>
</div>
</div>
<!-- about sections ends here -->
<!-- contact section starts here -->
<div class="conttainer-contact default" id="container-contact">
<h3 class="def-heading">Contact</h3>
<div class="about">
<div class="contact-info">
<h3>Get in Touch</h3>
<div>
<h4>Name</h4>
<span>Sikandar khan</span>
</div>
<div>
<h4>Email</h4>
<span>[email protected]</span>
</div>
<div>
<h4>Number</h4>
<span>+92 3025879179</span>
</div>
<div>
<h4>location</h4>
<span>Peshawar</span>
</div>
<div class="social-icons">
<a href="#"></a><i class="fab fa-facebook-f"></i></a>
<a href="#"></a><i class="fab fa-instagram"></i></a>
<a href="$"></a><i class="fab fa-linkedin"></i></a>
<a href="#"></a><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d211749.4556407793!2d71.42538271591283!3d33.97749840932011!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzTCsDAxJzQ3LjIiTiA3McKwMzQnMTMuNyJF!5e0!3m2!1sen!2s!4v1610826689243!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
<!-- contact section ends here -->
<!-- footer -->
<div class="footer-continer">
<span>Alright || 2021</span>
</div>
</main>
<!-- bodymivin cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"
integrity="sha512-0bCDSnaX8FOD9Mq8WbHcDwshXwCB5V4EP+UBu87WQgga2b7lAsuEbaSmIZjH/XEmNhJuhrPbFHemre5HZwrk9w=="
crossorigin="anonymous"
></script>
<!-- bootstrap javascript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
<!-- javascript below -->
<script src="/js/main.js"></script>
<script src="/js/lottie.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu-toggle").click(function () {
$("nav").toggleClass("active");
$("header").toggleClass("increase");
});
});
</script>
</body>
</html>