-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
706 lines (571 loc) · 37.1 KB
/
portfolio.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
<!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">
<title>PORT-FOLIO</title>
<script src="https://kit.fontawesome.com/a4766ee8a9.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/portfolio.css">
<link rel="stylesheet" href="/portfolio-css2.css">
</head>
<body id="body">
<section class="main" id="home">
<div class="header">
<!-- -----------------------LOGO -->
<div class="logo">Hardik M.</div>
<!-- --------------------NAV_BAR -->
<div class="nav-bar">
<nav>
<ul class="nav-ul">
<li class="link-list"><a href="#home" class="link active"><svg class="active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg> Home</a></li>
<li class="link-list"><a href="#about" class="link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/></svg> About</a></li>
<li class="link-list"><a href="#projects" class="link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0v128h128L256 0zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM272 416h-160C103.2 416 96 408.8 96 400C96 391.2 103.2 384 112 384h160c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 352h-160C103.2 352 96 344.8 96 336C96 327.2 103.2 320 112 320h160c8.836 0 16 7.162 16 16C288 344.8 280.8 352 272 352zM288 272C288 280.8 280.8 288 272 288h-160C103.2 288 96 280.8 96 272C96 263.2 103.2 256 112 256h160C280.8 256 288 263.2 288 272z"/></svg> Projects</a></li>
<li class="link-list"><a href="#Skills" class="link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z"/></svg> Skills</a></li>
<li class="link-list"><a href="#testimonial" class="link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M416 176C416 78.8 322.9 0 208 0S0 78.8 0 176c0 39.57 15.62 75.96 41.67 105.4c-16.39 32.76-39.23 57.32-39.59 57.68c-2.1 2.205-2.67 5.475-1.441 8.354C1.9 350.3 4.602 352 7.66 352c38.35 0 70.76-11.12 95.74-24.04C134.2 343.1 169.8 352 208 352C322.9 352 416 273.2 416 176zM599.6 443.7C624.8 413.9 640 376.6 640 336C640 238.8 554 160 448 160c-.3145 0-.6191 .041-.9336 .043C447.5 165.3 448 170.6 448 176c0 98.62-79.68 181.2-186.1 202.5C282.7 455.1 357.1 512 448 512c33.69 0 65.32-8.008 92.85-21.98C565.2 502 596.1 512 632.3 512c3.059 0 5.76-1.725 7.02-4.605c1.229-2.879 .6582-6.148-1.441-8.354C637.6 498.7 615.9 475.3 599.6 443.7z"/></svg> Testimonial</a></li>
<li class="link-list"><a href="#contect" class="link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M285.6 444.1C279.8 458.3 264.8 466.3 249.8 463.4C234.8 460.4 223.1 447.3 223.1 432V256H47.1C32.71 256 19.55 245.2 16.6 230.2C13.65 215.2 21.73 200.2 35.88 194.4L387.9 50.38C399.8 45.5 413.5 48.26 422.6 57.37C431.7 66.49 434.5 80.19 429.6 92.12L285.6 444.1z"/></svg> Contect</a></li>
</ul>
</nav>
<div class="menu-btn">
<i class="fa-solid fa-bars"></i>
</div>
</div>
<!-- NAV_BAR __CLOSE -->
<!-- ------------DIV_ BTN CONTAINER -->
<div class="btn-container">
<div class="btn-box">
<!-- <div class="on-off-btn"></div> -->
<a href="https://mf-jobs-api.herokuapp.com/login" target="_blank" rel="noopener noreferrer">Log in</a>
<!-- <a href="https://mf-jobs-api.herokuapp.com/login">Log in</a> -->
</div>
</div>
<!-- ------------DIV_ BTN CONTAINER_____CLOSE -->
</div>
<!-- -------------DIV.HEADER CLOSE COMPLATE NAV-->
<!-- ---------------BACKGROUND SVG WAVE SET -->
<div class="bg-svg">
<svg width="1500" height="1000" xmlns="http://www.w3.org/2000/svg">
<g>
<!-- <title>Layer 1</title> -->
<path id="svg_1" d="m-8.34108,98.15371c51.19733,59.30846 18.96196,48.52511 62.57452,66.49736c43.61253,17.97227 255.98668,-62.90292 255.8061,-64.35782c0.18058,1.4549 282.71403,-88.40642 292.19501,40.99388c9.48098,129.40028 229.43992,-86.26685 314.7688,-39.53898c85.32891,46.72789 255.98668,-104.23913 297.70303,-37.74174c41.71635,66.49736 102.39468,62.90292 200.99696,37.74174c98.60227,-25.16116 85.32889,-43.13343 85.14831,-44.58832c0.18058,1.4549 -1.71563,-59.6508 -1.8962,-59.30846c0.18058,-0.34234 -1516.77752,1.4549 -1516.77752,1.4549" />
</g>
</svg>
</div>
<!-- ---------------BACKGROUND SVG WAVE SET -->
<!-- ---------------PROFILE SVG WITH BG DIV ABSOLUTE -->
<div class="blob-container">
<svg id="10015.io" viewBox="0 0 480 480" >
<mask mask-type="alpha" id="blob1">
<path fill="#474bff" d="M469,283Q461,326,430.5,356Q400,386,356.5,386Q313,386,285,403.5Q257,421,224,416Q191,411,156.5,404Q122,397,116.5,358.5Q111,320,100,294Q89,268,61.5,234.5Q34,201,60.5,173Q87,145,110,121.5Q133,98,156.5,63Q180,28,221,17Q262,6,300.5,24Q339,42,373,65Q407,88,422.5,125.5Q438,163,457.5,201.5Q477,240,469,283Z" />
</mask>
<g mask="url(#blob1)" id="blob-g">
<path d="M469,283Q461,326,430.5,356Q400,386,356.5,386Q313,386,285,403.5Q257,421,224,416Q191,411,156.5,404Q122,397,116.5,358.5Q111,320,100,294Q89,268,61.5,234.5Q34,201,60.5,173Q87,145,110,121.5Q133,98,156.5,63Q180,28,221,17Q262,6,300.5,24Q339,42,373,65Q407,88,422.5,125.5Q438,163,457.5,201.5Q477,240,469,283Z" />
<image class="hardik" x="20" y="20" width="100%" height="100%"
xlink:href="img/hardik-big-dp.png" ></image>
</g>
</svg>
</div>
<!-- ---------------PROFILE SVG WITH BG DIV ABSOLUTE -->
<!-- -----------------------PROFILE -- INFO NAME ETC -->
<div class="profile-info">
<h3 class="pre-name">Hey there, <span>I am</span></h3>
<h1 class="name">Hardik Mistry</h1>
<h3 class="profasion">Full-Stack Developer.</h3>
<!-- <p><span>Designer</span> & <span>API Developer.</span>
Give me paper with design I‘ll make it plane with functionality.</p> -->
<p>Let's mix our <span>skills</span> with Your <span>ideas</span> and create something beautiful.</p>
</div>
<div class="bottom-btn">
<div class="icons">
<a href="https://instagram.com/mistryus_hardik?utm_medium=copy_link"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-instagram-square"></i>
</a>
<a href="https://github.com/turtle-shelll"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github"></i>
</a>
<a href="mailto:hardik0.0mistry@gmail.com"
target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-envelope"></i>
</a>
<a href="https://www.linkedin.com/in/hardik-mistry-bb3770181"
target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-linkedin"></i>
</a>
</div>
<a class="scrollBtn" href="#contect"> Hire me</a>
<a href="/img/Hardik-RESUME-10.04.2022.pdf" class="DownloadBtn" download="hardik.mistry-resume-developer.pdf">
Download CV</a>
</div>
</section>
<!-- --------------MAIN SECTION CLOSED HERO CLOSED......... -->
<section class="about" id="about">
<h2 class="heading">About</h2>
<h3 class="sub-heading">And this is my story.</h3>
<div class="about-container">
<div class="about-image">
<img src="/img/3.jpg" alt="My Profile">
</div>
<div class="about-info">
<h3 class="paragraph-heading">My story</h3>
<p class="about-paragraph">I start learning codilng in mobile. in chat with my friend i got some name of HTML, CSS, JAVASCRIPT. And after chating I search some reafence about what is HTML. And then I wrote my first Hello World code to display it on mobile browser. At that point My testing got success. And then I do practice for styling mobile UI/UX.</p>
<h3 class="paragraph-heading">What I do Mostly</h3>
<p>I am good in photography and photo eddting. I like creating Art and learning new things. now i am <span>Fullstack Developer </span>.</p>
<p class="thnq">Thank You</p>
</div>
</div>
</section>
<!-- ---------------------------ABOUT SECTION CLOSED -->
<!-- ----------------------PROJECTS SECTION START ********************** -->
<section class="projects" id="projects">
<h2 class="heading">Projects</h2>
<h3 class="sub-heading">What I have did</h3>
<div class="projects-container">
<section class="main-container">
<section class="main-2">
<div class="container">
<div class="card-box">
<div class="card-image">
<span>01</span>
<div class="image">
<img src="/img/cafe-temp.png" alt="cafe-temp">
</div>
</div> <!-- card-image -->
<div class="card-content">
<div class="card-btn">
<div class="live"><a href="https://mf-jobs-api.herokuapp.com/cafe" target="_blank" rel="noopener noreferrer">Live</a></div>
<div class="source-code">Source Code</div>
</div>
<h2 class="login-option">Log in required.</h2>
<h2 class="card-heading">I love the coffee of this cafe</h2>
</div>
</div>
</div> <!-- card-container -->
<div class="container">
<div class="card-box">
<div class="card-image">
<span>02</span>
<div class="image">
<img src="/img/e-comshop-temp.png" alt="E_shop">
</div>
</div> <!-- card-image -->
<div class="card-content">
<div class="card-btn">
<div class="live"><a href="https://mf-jobs-api.herokuapp.com/famms" target="_blank" rel="noopener noreferrer">Live</a></div>
<div class="source-code">Source Code</div>
</div>
<h2 class="login-option">Log in required.</h2>
<h2 class="card-heading">I love the coffee of this cafe</h2>
</div>
</div>
</div> <!-- card-container -->
<div class="container">
<div class="card-box">
<div class="card-image">
<span>03</span>
<div class="image">
<img src="/img/restorent-temp.png" alt="restorent-temp">
</div>
</div> <!-- card-image -->
<div class="card-content">
<div class="card-btn">
<div class="live"><a href="https://myrestorent.000webhostapp.com/" target="_blank" rel="noopener noreferrer">Live</a></div>
<div class="source-code">Source Code</div>
</div>
<h2 class="login-option">Log in optional.</h2>
<h2 class="card-heading">I love the coffee of this cafe</h2>
</div>
</div>
</div> <!-- card-container -->
<div class="container">
<div class="card-box">
<div class="card-image">
<span>04</span>
<div class="image">
<img src="/img/my-todo-app.png" alt="restorent-temp">
</div>
</div> <!-- card-image -->
<div class="card-content">
<div class="card-btn">
<div class="live"><a href="https://my-todo-app-01.herokuapp.com/" target="_blank" rel="noopener noreferrer">Live</a></div>
<div class="source-code"><a href="https://github.com/turtle-shelll/My-todo-app" target="_blank" rel="noopener noreferrer">Source Code</a></div>
</div>
<h2 class="login-option">Log in optional.</h2>
<h2 class="card-heading">I love the coffee of this cafe</h2>
</div>
</div>
</div> <!-- card-container -->
<div class="container">
<div class="card-box">
<div class="card-image">
<span>05</span>
<div class="image">
<img src="/img/portfoliopic-2.png" alt="restorent-temp">
</div>
</div> <!-- card-image -->
<div class="card-content">
<div class="card-btn">
<!-- <div class="live"></div> -->
<div class="source-code"><a href="https://github.com/turtle-shelll/My-todo-app" target="_blank" rel="noopener noreferrer">Curent website Source Code</a></div>
</div>
<h2 class="login-option">Log in optional.</h2>
<h2 class="card-heading">I love the coffee of this cafe</h2>
</div>
</div>
</div> <!-- card-container -->
</section>
</section>
</div>
</section>
<!-- --------------------PROJECT CLOSED*************************************************** -->
<!-- SKILLLS SECTION START --************************************************************ -->
<section class="skills" id="Skills">
<h2 class="heading">Skills</h2>
<h3 class="sub-heading">Things I can do</h3>
<div class="container">
<div class="skills-card">
<h2 class="card-heading">Frontend Skills</h2>
<div class="skill-icon"><i class="fa-solid fa-pen-ruler"></i></div>
<div class="skill-set">
<ul>
<li>Web Design</li>
<li>Mobile Responsive Design</li>
<li>UI / UX design</li>
<li>CSS Animation</li>
<li>DOM Manipulation</li>
<li>JS API</li>
</ul>
</div>
</div> <!-- Skills Card div -->
<div class="skills-card">
<h2 class="card-heading">Backend Skills</h2>
<div class="skill-icon"><i class="fa-solid fa-microchip"></i></div>
<div class="skill-set">
<ul>
<li>API Development</li>
<li>Login System</li>
<li>Getting data with API</li>
<li>(UAM). User Access Management</li>
<li>MONGODB with Mongoose</li>
<li>JSON Data Modeling</li>
<li>Git and github</li>
</ul>
</div>
</div> <!-- Skills Card div -->
<div class="skills-card">
<h2 class="card-heading">Other Skills</h2>
<div class="skill-icon"><i class="fa-solid fa-icons"></i></div>
<div class="skill-set">
<ul>
<li>Photo Shop</li>
<li>Figma</li>
<li>Illutrator</li>
<li>adobe-lightroom</li>
<li>Playing chess</li>
</ul>
</div>
</div> <!-- Skills Card div -->
</div> <!-- CONTAINER DIV -->
<h2 class="heading-2">Tools I use mostly</h2>
<!-- -------------bottom DIV OF ICONS OF THAT I CAN DO PROGRAMING -->
<div class="skillset-icons">
<div class="icon"><img src="/img/html.png" alt="html-5"></div>
<div class="icon"><img src="/img/css.png" alt="css-3"></div>
<div class="icon"><img src="/img/js.png" alt="Java-Script"></div>
<div class="icon"><img src="/img/sass.png" alt="sass"></div>
<div class="icon"><img src="/img/node-js.png" alt="nodejs"></div>
<div class="icon"><img src="/img/expressjs.png" alt="expressjs"></div>
<div class="icon"><img src="/img/postman.png" alt="postman"></div>
<div class="icon"><img src="/img/json-code.png" alt="JSON"></div>
<div class="icon"><img src="/img/git.png" alt="git"></div>
<div class="icon"><img src="/img/heroku.png" alt="heroku"></div>
<!-- <div class="icon"><img src="./img/figma.png" alt="figma"></div> -->
<div class="icon"><img src="/img/mongodb.png" alt="MongoDB"></div>
<div class="icon"><img src="/img/github.png" alt="github"></div>
<div class="icon"><img src="/img/adobe-lightroom.png" alt="adobe-lightroom"></div>
<div class="icon"><img src="/img/adobe-photoshop.png" alt="adobe-photoshop"></div>
<!-- <div class="icon"><img src="./img/adobe-illustrator.png" alt="adobe-illustrator"></div> -->
</div>
</section>
<!-- ----------******* SECTION SKILLS ENDED *********************************************************************-->
<!-- --------------*************SECTION TESTIMONIAL STARTED -->
<section class="testimonial" id="testimonial">
<h2 class="heading">testimonial</h2>
<h3 class="sub-heading">reveiws of some experience people</h3>
<section class="main-3">
<div class="container-3">
<div class="btn-l btn"><i class="fa-solid fa-circle-arrow-left"></i></div>
<div class="reveiw-box">
<div class="reveiw">
<div class="image-container">
<div class="image">
<img src="/img/testimonial-1.jpg" alt="reveiwers-pic">
</div>
</div>
<div class="reveiw-content">
<div class="reveiw-header">
<h2 class="heading-3">sara dev</h2>
<h3 class="profation-3">frontend-developer</h3>
</div>
<div class="rating">
☆☆☆☆☆
<div class="reveiw-btn">reveiw</div>
</div>
<div class="reveiw-message">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati, sit expedita incidunt laudantium provident ullam. Ex neque rem quisquam quod earum nisi atque ipsa alias porro reprehenderit, vero consequuntur ipsum.
</div>
</div>
</div>
<div class="reveiw">
<div class="image-container">
<div class="image">
<img src="/img/testimonial-2.jpg" alt="reveiwers-pic">
</div>
</div>
<div class="reveiw-content">
<div class="reveiw-header">
<h2 class="heading-3">john doe</h2>
<h3 class="profation-3">backend-developer</h3>
</div>
<div class="rating">
☆☆☆☆☆
<div class="reveiw-btn">reveiw</div>
</div>
<div class="reveiw-message">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati, sit expedita incidunt laudantium provident ullam. Ex neque rem quisquam quod earum nisi atque ipsa alias porro reprehenderit, vero consequuntur ipsum.
</div>
</div>
</div>
<div class="reveiw">
<div class="image-container">
<div class="image">
<img src="/img/testimonial-3.jpg" alt="reveiwers-pic">
</div>
</div>
<div class="reveiw-content">
<div class="reveiw-header">
<h2 class="heading-3">iron man</h2>
<h3 class="profation-3">FullStack-developer</h3>
</div>
<div class="rating">
☆☆☆☆☆
<div class="reveiw-btn">reveiw</div>
</div>
<div class="reveiw-message">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati, sit expedita incidunt laudantium provident ullam. Ex neque rem quisquam quod earum nisi atque ipsa alias porro reprehenderit, vero consequuntur ipsum.
</div>
</div>
</div>
</div>
<div class="btn-r btn"><i class="fa-solid fa-circle-arrow-right"></i></div>
</div>
</section>
</section><!-- --------------*************SECTION TESTIMONIAL ENDED -->
<!-- ***********************************SECTION CONTECT STARTED -->
<section class="contect" id="contect">
<h2 class="heading">Contect</h2>
<h3 class="sub-heading">Let's talk something</h3>
<div class="main-container">
<!-- *************contect media started media some socail media link to connect -->
<div class="contect-media">
<div class="media-box">
<ul>
<li class="media-link"><a href="https://instagram.com/mistryus_hardik?utm_medium=copy_link"
target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram-square"></i> @mistryus_hardik</a></li>
<li class="media-link"><a href="mailto:hardik0.0mistry@gmail.com">
<i class="fa-solid fa-envelope"></i> hardik0.0mistry@gmail.com</a></li>
<li class="media-link"><a href="tel:+7498571890">
<i class="fa-solid fa-mobile-screen"></i>7498571890</a></li>
<li class="media-link"><a href="https://wa.me/917498571890" target="_blank" >
<i class="fa-brands fa-whatsapp"></i> WhatsApp</a></li>
</ul>
</div>
</div>
<div class="contect-form">
<div class="input-box">
<label for="name" class="label" >Name</label>
<input type="text" name="name" id="name" autocomplete="off" required>
</div>
<div class="input-box">
<label for="email" class="label" >Email</label>
<input type="text" name="email" id="email" autocomplete="off" required>
</div>
<div class="input-box">
<label for="phoneNo" class="label" >Phone No</label>
<input type="tel" name="phoneNo" id="phoneNo" autocomplete="off" required>
</div>
<div class="input-box">
<label for="message" class="label" >Message</label>
<textarea name="message" id="message" autocomplete="off" required></textarea>
</div>
<div class="sm-box">
<div class="sendmail-btn">send mail</div>
<div class="sm-message"></div>
</div>
</div>
</div>
<!-- *******************contect MAIN CONTAINER -->
</section>
<!-- *************section contect ended ******************-->
<section class="policy-container">
<div class="bottum-nav"><!-- *****bottum nav -->
<div class="nav-bar">
<nav>
<ul>
<li class="link-list"><a href="#home" class="link active">Home</a></li>
<li class="link-list"><a href="#about" class="link">About</a></li>
<li class="link-list"><a href="#projects" class="link">Projects</a></li>
<li class="link-list"><a href="#Skills" class="link">Skills</a></li>
<li class="link-list"><a href="#testimonial" class="link">Testimonial</a></li>
</ul>
</nav>
</div>
</div><!-- ***********botttum nav div closed -->
<div class="policy">
<h2 class="policy-heading">terms and condition.</h2>
<h2 class="copyWrite">all copy write reserv by @hardik_mistry</h2>
</div>
</section>
<div class="upArrow"><a href="#"><i class="fa-solid fa-arrow-up"></i></a></div>
<script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const label =document.querySelectorAll("label");
const inps = document.querySelectorAll("input");
const textArea = document.querySelector("textarea");
const sendmailbtn = document.querySelector(".sendmail-btn")
const reveiwMessage = document.querySelector(".reveiw-message");
const reveiwBtn = document.querySelectorAll(".reveiw-btn")
const sm_msg = document.querySelector(".sm-message");
const Name = document.querySelector("#name");
const Email = document.querySelector("#email");
const PhoneNo = document.querySelector("#phoneNo");
const Message = document.querySelector("#message");
reveiwBtn.forEach(reveiwbtn =>{
reveiwbtn.addEventListener('click',(e)=>{
const parent = e.target.parentElement;
const pofp = parent.parentElement;
const reveiwmsg = pofp.children[2];
// console.log("parent = ", reveiwmsg);
if (reveiwbtn.innerText == "X") {
reveiwmsg.classList = 'reveiw-message';
reveiwbtn.textContent = "reveiw";
}else{
reveiwmsg.classList = 'take-upper';
reveiwbtn.textContent = "X"
}
})
})
inps.forEach((inp)=>{
inp.addEventListener("focus",(e)=>{
const parent = e.target.parentElement;
const child = parent.firstElementChild;
child.classList = "upper"
})
});
inps.forEach(inp=>{
inp.addEventListener("focusout",(e)=>{
const parent = e.target.parentElement;
const child = parent.firstElementChild;
if (e.target.value == "" ) {
child.classList = "label";
}
})
})
textArea.addEventListener("focus",(e)=>{
const parent = e.target.parentElement;
const child = parent.firstElementChild;
child.classList = "upper";
})
textArea.addEventListener("focusout",(e)=>{
const parent = e.target.parentElement;
const child = parent.firstElementChild;
if (e.target.value === "") {
child.classList = "";
}
})
sendmailbtn.addEventListener("click", async ()=>{
try{
// const name = document.querySelector("#name").value;
// const email = document.querySelector("#email").value;
// const phoneNo = document.querySelector("#phoneNo").value;
// const message = document.querySelector("#message").value;
const name = Name.value;
const email = Email.value;
const phoneNo = PhoneNo.value;
const message = Message.value;
// console.log("data", name,email,phoneNo,message)
const {data} = await axios.post("https://mf-jobs-api.herokuapp.com/sendmail",{name,email,phoneNo,message});
// console.log("data from sennmail ==",data)
if (data && data.success) {
console.log("Success == ", data.success)
sm_msg.innerText = data.message;
Name.value = ""
Email.value = ''
PhoneNo.value = ''
Message.value = ''
}
}catch(err){
// console.log("erreo from sendmail ==", err.response.data);
sm_msg.innerText = err.response.data.message;
}
})
// ***************** below script for menu btn*************************************
const links = document.querySelectorAll(".link");
const navUl = document.querySelector(".nav-ul");
const menuBtn = document.querySelector(".menu-btn");
let menuStatus = false;
menuBtn.addEventListener("click",(e)=>{
if (menuStatus) {
navUl.classList = "";
menuBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
menuStatus = false;
// console.log("menu down");
}else{
navUl.classList = "ulup"
// console.log("menu up");
menuBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
menuStatus = true;
}
})
links.forEach(link =>{
link.addEventListener("click",(e)=>{
links.forEach(link=>{link.classList=''; link.firstChild.classList='';})
navUl.classList = "";
menuBtn.innerHTML = '<i class="fa-solid fa-bars"></i>';
menuStatus = false;
link.classList = "active";
link.firstChild.classList = "active";
})
})
// ************* corosal for testimonial ************************
let testimonialMargin = 0;
const lbtn = document.querySelector(".btn-l");
const rbtn = document.querySelector(".btn-r");
const reveiwBox = document.querySelector(".reveiw-box");
const reveiws = document.querySelectorAll(".reveiw");
const reveiwContainer = document.querySelector(".container-3");
lbtn.addEventListener("click",(e)=>{
if(testimonialMargin >= 100) return;
// reveiwContainer.style.background = "red";
// reveiwContainer.style.justifyContent = "start";
testimonialMargin += 200;
reveiwBox.style.marginLeft = `${testimonialMargin}%`;
});
rbtn.addEventListener("click",(e)=>{
if(testimonialMargin <= -100) return;
// reveiwContainer.style.background = "red";
// reveiwContainer.style.justifyContent = "start";
testimonialMargin -= 200;
reveiwBox.style.marginLeft = `${testimonialMargin}%`;
})
document.addEventListener('DOMContentLoaded',async (event) => {
console.log('DOM fully loaded and parsed');
try {
const{ data} = await axios.get("/check_status");
// const datajson = data.json();
console.log("data successfull == ", data);
} catch (error) {
console.log("error error == ", error);
}
});
</script>
</body>
</html>