Hugging Face's logo

Spaces:
HIMANSHU2737
/
anycoder-c058d3b7
Running

App Files Community
HIMANSHU2737 commited on
Commit
0fd6057
·
verified ·
1 Parent(s): 898e78d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +662 -614
index.html CHANGED
@@ -3,855 +3,903 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>YouTube Clone - Built with anycoder</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  * {
10
  margin: 0;
11
  padding: 0;
12
  box-sizing: border-box;
13
- font-family: 'Roboto', Arial, sans-serif;
14
  }
15
 
16
- :root {
17
- --primary-color: #ff0000;
18
- --secondary-color: #282828;
19
- --background-color: #0f0f0f;
20
- --surface-color: #212121;
21
- --text-primary: #ffffff;
22
- --text-secondary: #aaaaaa;
23
- --hover-color: #383838;
24
  }
25
 
26
  body {
27
- background-color: var(--background-color);
28
- color: var(--text-primary);
 
29
  overflow-x: hidden;
30
  }
31
 
 
 
 
 
 
 
 
32
  /* Header Styles */
33
- .header {
34
- display: flex;
35
- justify-content: space-between;
36
- align-items: center;
37
- padding: 0 16px;
38
- height: 56px;
39
- background-color: var(--background-color);
40
- position: sticky;
41
  top: 0;
42
- z-index: 100;
 
43
  }
44
 
45
- .header-left {
46
  display: flex;
 
47
  align-items: center;
48
- gap: 24px;
49
  }
50
 
51
  .logo {
52
- display: flex;
53
- align-items: center;
54
- gap: 4px;
55
- color: var(--text-primary);
56
  text-decoration: none;
57
- font-weight: bold;
58
- font-size: 20px;
59
  }
60
 
61
- .logo-icon {
62
  color: var(--primary-color);
63
- font-size: 24px;
64
  }
65
 
66
- .menu-icon, .search-icon, .voice-search-icon {
67
- font-size: 20px;
68
- padding: 8px;
69
- border-radius: 50%;
70
- cursor: pointer;
71
  }
72
 
73
- .menu-icon:hover, .search-icon:hover, .voice-search-icon:hover {
74
- background-color: var(--hover-color);
 
 
 
 
75
  }
76
 
77
- .header-center {
78
- display: flex;
79
- align-items: center;
80
- flex: 0 1 728px;
81
  }
82
 
83
- .search-container {
84
- display: flex;
85
- width: 100%;
 
 
 
 
 
 
86
  }
87
 
88
- .search-input {
89
- flex: 1;
90
- height: 40px;
91
- padding: 0 12px;
92
- border: 1px solid #303030;
93
- border-radius: 2px 0 0 2px;
94
- background-color: #121212;
95
- color: var(--text-primary);
96
- font-size: 16px;
97
  }
98
 
99
- .search-button {
100
- height: 40px;
101
- width: 64px;
102
- border: 1px solid #303030;
103
- border-left: none;
104
- border-radius: 0 2px 2px 0;
105
- background-color: #303030;
106
  cursor: pointer;
 
107
  }
108
 
109
- .voice-search-icon {
110
- margin-left: 12px;
111
- background-color: #181818;
 
 
 
 
112
  }
113
 
114
- .header-right {
115
- display: flex;
116
- align-items: center;
117
- gap: 16px;
 
 
 
 
 
118
  }
119
 
120
- .user-icon {
121
- width: 32px;
122
- height: 32px;
 
 
123
  border-radius: 50%;
124
- background-color: #065fd4;
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- color: white;
129
- font-weight: bold;
130
  }
131
 
132
- /* Main Content Styles */
133
- .main-content {
134
- display: flex;
135
- height: calc(100vh - 56px);
 
 
 
136
  }
137
 
138
- /* Sidebar Styles */
139
- .sidebar {
140
- width: 240px;
141
- background-color: var(--background-color);
142
- overflow-y: auto;
143
- padding: 12px 0;
144
- position: fixed;
145
- height: 100%;
146
- z-index: 90;
147
  }
148
 
149
- .sidebar-item {
150
- display: flex;
151
- align-items: center;
152
- padding: 0 24px;
153
- height: 40px;
154
- cursor: pointer;
155
- font-size: 14px;
156
  }
157
 
158
- .sidebar-item:hover {
159
- background-color: var(--hover-color);
 
 
160
  }
161
 
162
- .sidebar-item.active {
163
- background-color: var(--hover-color);
164
- font-weight: 500;
 
 
 
 
 
 
 
 
 
165
  }
166
 
167
- .sidebar-item i {
168
- margin-right: 24px;
169
- font-size: 18px;
170
  }
171
 
172
- .sidebar-divider {
173
- height: 1px;
174
- background-color: #303030;
175
- margin: 12px 0;
176
  }
177
 
178
- .sidebar-section-title {
179
- padding: 8px 24px;
180
- font-size: 14px;
181
- color: var(--text-secondary);
182
- text-transform: uppercase;
183
  }
184
 
185
- /* Content Area Styles */
186
- .content-area {
187
- flex: 1;
188
- margin-left: 240px;
189
- padding: 24px;
190
- overflow-y: auto;
191
  }
192
 
193
- .video-grid {
194
- display: grid;
195
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
196
- gap: 16px;
 
 
197
  }
198
 
199
- .video-card {
200
- cursor: pointer;
201
- transition: transform 0.2s;
202
  }
203
 
204
- .video-card:hover {
205
- transform: scale(1.03);
 
206
  }
207
 
208
- .thumbnail-container {
 
209
  position: relative;
210
- width: 100%;
211
- padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
212
- background-color: var(--surface-color);
213
- border-radius: 12px;
214
- overflow: hidden;
215
  }
216
 
217
- .thumbnail {
 
218
  position: absolute;
219
- top: 0;
220
- left: 0;
221
- width: 100%;
222
- height: 100%;
223
- object-fit: cover;
 
 
224
  }
225
 
226
- .video-duration {
227
- position: absolute;
228
- bottom: 8px;
229
- right: 8px;
230
- background-color: rgba(0, 0, 0, 0.8);
231
- color: white;
232
- padding: 2px 4px;
233
- border-radius: 4px;
234
- font-size: 12px;
235
  }
236
 
237
- .video-info {
238
- display: flex;
239
- margin-top: 12px;
240
- gap: 12px;
 
241
  }
242
 
243
- .channel-avatar {
244
- width: 36px;
245
- height: 36px;
246
- border-radius: 50%;
247
- background-color: #065fd4;
248
- flex-shrink: 0;
249
  }
250
 
251
- .video-details {
252
- flex: 1;
 
253
  }
254
 
255
- .video-title {
 
 
 
 
 
 
 
 
 
 
 
256
  font-weight: 500;
257
- font-size: 16px;
258
- margin-bottom: 4px;
259
- display: -webkit-box;
260
- -webkit-line-clamp: 2;
261
- -webkit-box-orient: vertical;
262
- overflow: hidden;
263
  }
264
 
265
- .channel-name {
266
- color: var(--text-secondary);
267
- font-size: 14px;
268
- margin-bottom: 4px;
269
  }
270
 
271
- .video-meta {
272
- color: var(--text-secondary);
273
- font-size: 14px;
274
  }
275
 
276
- /* Video Player Styles */
277
- .video-player-container {
278
- display: none;
279
- margin-bottom: 24px;
280
  }
281
 
282
- .video-player {
283
- width: 100%;
284
- height: 500px;
285
- background-color: black;
286
- border-radius: 12px;
287
- position: relative;
288
  }
289
 
290
- .video-placeholder {
291
- width: 100%;
292
- height: 100%;
 
 
 
 
293
  display: flex;
294
- flex-direction: column;
295
  align-items: center;
296
  justify-content: center;
297
  color: white;
298
- font-size: 18px;
 
299
  }
300
 
301
- .video-placeholder i {
302
- font-size: 64px;
303
- margin-bottom: 16px;
304
- color: var(--primary-color);
 
 
305
  }
306
 
307
- .video-player-controls {
 
 
 
 
 
308
  display: flex;
309
- align-items: center;
310
- justify-content: space-between;
311
- margin-top: 16px;
312
  }
313
 
314
- .video-title-large {
315
- font-size: 20px;
 
 
 
316
  font-weight: 500;
317
- margin-bottom: 12px;
318
  }
319
 
320
- .video-stats {
321
- color: var(--text-secondary);
322
- font-size: 14px;
323
- margin-bottom: 16px;
 
324
  }
325
 
326
- .video-actions {
327
  display: flex;
328
- gap: 16px;
 
329
  }
330
 
331
- .action-button {
332
  display: flex;
333
  align-items: center;
334
- gap: 8px;
335
- background: none;
336
- border: none;
337
- color: var(--text-primary);
338
- cursor: pointer;
339
- font-size: 14px;
340
- padding: 8px 16px;
341
- border-radius: 20px;
342
- transition: background-color 0.2s;
343
- }
344
-
345
- .action-button:hover {
346
- background-color: var(--hover-color);
347
  }
348
 
349
- .channel-info {
 
 
 
 
350
  display: flex;
351
  align-items: center;
352
- gap: 12px;
353
- padding: 16px 0;
354
- border-top: 1px solid #303030;
355
- border-bottom: 1px solid #303030;
356
- margin: 16px 0;
357
  }
358
 
359
- .channel-info-large {
360
- width: 48px;
361
- height: 48px;
362
- border-radius: 50%;
363
- background-color: #065fd4;
 
364
  }
365
 
366
- .channel-details {
367
- flex: 1;
 
 
 
368
  }
369
 
370
- .channel-name-large {
 
 
 
 
 
 
371
  font-weight: 500;
372
- margin-bottom: 4px;
373
  }
374
 
375
- .subscriber-count {
376
- color: var(--text-secondary);
377
- font-size: 14px;
 
 
 
 
 
 
 
 
 
 
378
  }
379
 
380
- .subscribe-button {
381
- background-color: var(--primary-color);
 
 
 
 
 
 
382
  color: white;
383
- border: none;
384
- padding: 10px 16px;
385
- border-radius: 20px;
386
- font-weight: 500;
387
- cursor: pointer;
388
  }
389
 
390
- /* Comments Section */
391
- .comments-section {
392
- margin-top: 24px;
 
393
  }
394
 
395
- .comments-title {
396
- font-size: 18px;
397
- margin-bottom: 16px;
398
  }
399
 
400
- .comment-input-container {
 
 
 
 
 
401
  display: flex;
402
- gap: 12px;
403
- margin-bottom: 24px;
404
  }
405
 
406
- .comment-avatar {
407
  width: 40px;
408
  height: 40px;
 
409
  border-radius: 50%;
410
- background-color: #065fd4;
411
- flex-shrink: 0;
 
 
 
 
412
  }
413
 
414
- .comment-input {
415
- flex: 1;
416
- border: none;
417
- border-bottom: 1px solid #303030;
418
- background: transparent;
419
- color: var(--text-primary);
420
- font-size: 14px;
421
- padding: 8px 0;
422
  }
423
 
424
- .comment-input:focus {
425
- outline: none;
426
- border-bottom: 1px solid var(--primary-color);
427
  }
428
 
429
- .comment {
430
- display: flex;
431
- gap: 12px;
432
- margin-bottom: 16px;
 
 
 
 
433
  }
434
 
435
- .comment-content {
436
- flex: 1;
437
  }
438
 
439
- .comment-author {
440
- font-weight: 500;
441
- font-size: 14px;
442
- margin-bottom: 4px;
443
  }
444
 
445
- .comment-text {
446
- font-size: 14px;
447
- margin-bottom: 4px;
 
448
  }
449
 
450
- .comment-actions {
451
- display: flex;
452
- gap: 16px;
453
- color: var(--text-secondary);
454
- font-size: 13px;
455
  }
456
 
457
- .comment-action {
458
- display: flex;
459
- align-items: center;
460
- gap: 4px;
461
- cursor: pointer;
 
 
462
  }
463
 
464
- /* Mobile Responsive */
465
- @media (max-width: 1200px) {
466
- .video-grid {
467
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
468
- }
469
  }
470
 
471
- @media (max-width: 900px) {
472
- .sidebar {
473
- width: 72px;
474
- }
475
-
476
- .content-area {
477
- margin-left: 72px;
478
- }
479
-
480
- .sidebar-item span {
481
- display: none;
482
- }
483
-
484
- .sidebar-section-title {
485
- display: none;
486
  }
487
 
488
- .sidebar-item {
489
- justify-content: center;
490
- padding: 0;
491
  }
492
 
493
- .sidebar-item i {
494
- margin-right: 0;
495
  }
496
  }
497
 
498
  @media (max-width: 768px) {
499
- .header-center {
500
- flex: 0 1 auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  }
502
 
503
- .search-container {
504
- display: none;
505
  }
506
 
507
- .video-grid {
508
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
509
  }
510
 
511
- .video-player {
512
- height: 300px;
513
  }
514
  }
515
 
516
- @media (max-width: 480px) {
517
- .header-right .icon-text {
518
- display: none;
519
  }
520
 
521
- .video-grid {
522
- grid-template-columns: 1fr;
523
  }
524
 
525
- .content-area {
526
- padding: 16px;
 
527
  }
528
  }
529
 
530
- /* Utility Classes */
531
- .hidden {
532
- display: none;
 
 
 
 
 
 
 
533
  }
534
 
535
- .show {
536
- display: block;
537
  }
538
 
539
- .anycoder-link {
540
- color: var(--primary-color);
541
- text-decoration: none;
542
- font-weight: 500;
543
  }
544
 
545
- .anycoder-link:hover {
546
- text-decoration: underline;
 
 
 
 
547
  }
548
  </style>
549
  </head>
550
  <body>
551
  <!-- Header -->
552
- <header class="header">
553
- <div class="header-left">
554
- <i class="fas fa-bars menu-icon"></i>
555
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo">
556
- <i class="fab fa-youtube logo-icon"></i>
557
- YouTube <span style="color: var(--text-secondary); font-size: 10px; margin-left: 4px;">Built with anycoder</span>
558
- </a>
559
- </div>
560
- <div class="header-center">
561
- <div class="search-container">
562
- <input type="text" class="search-input" placeholder="Search">
563
- <button class="search-button">
564
- <i class="fas fa-search search-icon"></i>
565
- </button>
566
  </div>
567
- <i class="fas fa-microphone voice-search-icon"></i>
568
- </div>
569
- <div class="header-right">
570
- <i class="fas fa-video"></i>
571
- <i class="fas fa-bell"></i>
572
- <div class="user-icon">A</div>
573
  </div>
574
  </header>
575
 
576
- <!-- Main Content -->
577
- <div class="main-content">
578
- <!-- Sidebar -->
579
- <nav class="sidebar">
580
- <div class="sidebar-item active">
581
- <i class="fas fa-home"></i>
582
- <span>Home</span>
583
- </div>
584
- <div class="sidebar-item">
585
- <i class="fas fa-fire"></i>
586
- <span>Trending</span>
587
- </div>
588
- <div class="sidebar-item">
589
- <i class="fas fa-film"></i>
590
- <span>Subscriptions</span>
591
- </div>
592
- <div class="sidebar-divider"></div>
593
- <div class="sidebar-item">
594
- <i class="fas fa-book"></i>
595
- <span>Library</span>
596
- </div>
597
- <div class="sidebar-item">
598
- <i class="fas fa-history"></i>
599
- <span>History</span>
600
- </div>
601
- <div class="sidebar-item">
602
- <i class="fas fa-clock"></i>
603
- <span>Watch later</span>
604
- </div>
605
- <div class="sidebar-item">
606
- <i class="fas fa-thumbs-up"></i>
607
- <span>Liked videos</span>
608
- </div>
609
- <div class="sidebar-divider"></div>
610
- <div class="sidebar-section-title">Subscriptions</div>
611
- <div class="sidebar-item">
612
- <i class="fas fa-user-circle"></i>
613
- <span>Channel 1</span>
614
- </div>
615
- <div class="sidebar-item">
616
- <i class="fas fa-user-circle"></i>
617
- <span>Channel 2</span>
618
  </div>
619
- <div class="sidebar-item">
620
- <i class="fas fa-user-circle"></i>
621
- <span>Channel 3</span>
622
  </div>
623
- <div class="sidebar-item">
624
- <i class="fas fa-user-circle"></i>
625
- <span>Channel 4</span>
 
 
 
 
 
 
626
  </div>
627
- </nav>
628
-
629
- <!-- Content Area -->
630
- <main class="content-area">
631
- <!-- Video Player (Initially Hidden) -->
632
- <div class="video-player-container" id="videoPlayer">
633
- <div class="video-player">
634
- <div class="video-placeholder">
635
- <i class="fas fa-play-circle"></i>
636
- <p>Click on a video to play</p>
 
 
 
 
637
  </div>
638
  </div>
639
- <h1 class="video-title-large">Video Title Goes Here</h1>
640
- <div class="video-stats">
641
- <span>1,234,567 views</span> • <span>Mar 15, 2023</span>
642
  </div>
643
- <div class="video-player-controls">
644
- <div class="video-actions">
645
- <button class="action-button">
646
- <i class="fas fa-thumbs-up"></i>
647
- <span>12K</span>
648
- </button>
649
- <button class="action-button">
650
- <i class="fas fa-thumbs-down"></i>
651
- <span>Dislike</span>
652
- </button>
653
- <button class="action-button">
654
- <i class="fas fa-share"></i>
655
- <span>Share</span>
656
- </button>
657
- <button class="action-button">
658
- <i class="fas fa-save"></i>
659
- <span>Save</span>
660
- </button>
 
 
 
 
 
 
 
 
661
  </div>
662
  </div>
663
- <div class="channel-info">
664
- <div class="channel-info-large"></div>
665
- <div class="channel-details">
666
- <div class="channel-name-large">Channel Name</div>
667
- <div class="subscriber-count">1.2M subscribers</div>
 
 
 
 
 
 
 
 
668
  </div>
669
- <button class="subscribe-button">SUBSCRIBE</button>
670
  </div>
671
- <div class="comments-section">
672
- <h3 class="comments-title">123 Comments</h3>
673
- <div class="comment-input-container">
674
- <div class="comment-avatar"></div>
675
- <input type="text" class="comment-input" placeholder="Add a public comment...">
676
  </div>
677
- <div class="comment">
678
- <div class="comment-avatar"></div>
679
- <div class="comment-content">
680
- <div class="comment-author">User Name <span style="color: var(--text-secondary); font-weight: normal;">2 days ago</span></div>
681
- <div class="comment-text">This is a sample comment on the video. Great content!</div>
682
- <div class="comment-actions">
683
- <div class="comment-action">
684
- <i class="fas fa-thumbs-up"></i>
685
- <span>24</span>
686
- </div>
687
- <div class="comment-action">
688
- <i class="fas fa-thumbs-down"></i>
689
- </div>
690
- <div class="comment-action">REPLY</div>
691
- </div>
692
  </div>
 
693
  </div>
694
  </div>
695
  </div>
696
-
697
- <!-- Video Grid -->
698
- <div class="video-grid" id="videoGrid">
699
- <!-- Video cards will be generated by JavaScript -->
 
 
 
 
 
700
  </div>
701
- </main>
702
- </div>
703
-
704
- <script>
705
- // Sample video data
706
- const videos = [
707
- {
708
- id: 1,
709
- title: "How to Build a Modern Web Application",
710
- channel: "Web Dev Tutorials",
711
- views: "245K",
712
- time: "2 weeks ago",
713
- duration: "15:42",
714
- thumbnailColor: "#ff6b6b"
715
- },
716
- {
717
- id: 2,
718
- title: "Learn JavaScript in 1 Hour - Full Course for Beginners",
719
- channel: "Coding Masters",
720
- views: "1.2M",
721
- time: "1 month ago",
722
- duration: "58:16",
723
- thumbnailColor: "#4ecdc4"
724
- },
725
- {
726
- id: 3,
727
- title: "Building a YouTube Clone with HTML, CSS & JavaScript",
728
- channel: "Frontend Fun",
729
- views: "89K",
730
- time: "3 days ago",
731
- duration: "24:33",
732
- thumbnailColor: "#45b7d1"
733
- },
734
- {
735
- id: 4,
736
- title: "CSS Grid vs Flexbox - When to Use What",
737
- channel: "CSS Wizards",
738
- views: "156K",
739
- time: "1 week ago",
740
- duration: "18:07",
741
- thumbnailColor: "#96ceb4"
742
- },
743
- {
744
- id: 5,
745
- title: "10 React Projects to Build in 2023",
746
- channel: "React Rocks",
747
- views: "342K",
748
- time: "2 months ago",
749
- duration: "32:51",
750
- thumbnailColor: "#feca57"
751
- },
752
- {
753
- id: 6,
754
- title: "Node.js Tutorial for Beginners: Learn Node in 1 Hour",
755
- channel: "Backend Boss",
756
- views: "543K",
757
- time: "5 months ago",
758
- duration: "1:02:14",
759
- thumbnailColor: "#ff9ff3"
760
- },
761
- {
762
- id: 7,
763
- title: "Responsive Web Design Principles",
764
- channel: "Design Masters",
765
- views: "98K",
766
- time: "3 weeks ago",
767
- duration: "22:45",
768
- thumbnailColor: "#54a0ff"
769
- },
770
- {
771
- id: 8,
772
- title: "Build a Portfolio Website from Scratch",
773
- channel: "Portfolio Pro",
774
- views: "76K",
775
- time: "4 days ago",
776
- duration: "27:18",
777
- thumbnailColor: "#5f27cd"
778
- }
779
- ];
780
-
781
- // DOM Elements
782
- const videoGrid = document.getElementById('videoGrid');
783
- const videoPlayer = document.getElementById('videoPlayer');
784
- const sidebar = document.querySelector('.sidebar');
785
- const menuIcon = document.querySelector('.menu-icon');
786
-
787
- // Generate video cards
788
- function generateVideoCards() {
789
- videoGrid.innerHTML = '';
790
- videos.forEach(video => {
791
- const videoCard = document.createElement('div');
792
- videoCard.className = 'video-card';
793
- videoCard.innerHTML = `
794
- <div class="thumbnail-container">
795
- <div class="thumbnail" style="background-color: ${video.thumbnailColor};"></div>
796
- <div class="video-duration">${video.duration}</div>
797
  </div>
798
- <div class="video-info">
799
- <div class="channel-avatar"></div>
800
- <div class="video-details">
801
- <h3 class="video-title">${video.title}</h3>
802
- <div class="channel-name">${video.channel}</div>
803
- <div class="video-meta">${video.views} views • ${video.time}</div>
 
804
  </div>
805
  </div>
806
- `;
807
- videoCard.addEventListener('click', () => playVideo(video));
808
- videoGrid.appendChild(videoCard);
809
- });
810
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
811
 
812
- // Play video function
813
- function playVideo(video) {
814
- // Hide video grid and show video player
815
- videoGrid.style.display = 'none';
816
- videoPlayer.classList.add('show');
817
-
818
- // Update video player content
819
- const videoTitle = document.querySelector('.video-title-large');
820
- const videoStats = document.querySelector('.video-stats');
821
 
822
- videoTitle.textContent = video.title;
823
- videoStats.innerHTML = `<span>${video.views} views</span> • <span>${video.time}</span>`;
 
 
 
 
 
 
 
 
 
 
 
 
824
  }
825
 
826
- // Toggle sidebar on mobile
827
- menuIcon.addEventListener('click', () => {
828
- sidebar.classList.toggle('hidden');
 
 
 
 
829
  });
830
 
831
- // Initialize the app
832
- generateVideoCards();
833
-
834
- // Responsive sidebar behavior
835
- window.addEventListener('resize', () => {
836
- if (window.innerWidth > 900) {
837
- sidebar.classList.remove('hidden');
838
- } else {
839
- sidebar.classList.add('hidden');
840
- }
841
  });
842
 
843
- // Add click event to sidebar items
844
- const sidebarItems = document.querySelectorAll('.sidebar-item');
845
- sidebarItems.forEach(item => {
846
- item.addEventListener('click', () => {
847
- sidebarItems.forEach(i => i.classList.remove('active'));
848
- item.classList.add('active');
849
-
850
- // If on mobile, close sidebar after selection
851
- if (window.innerWidth <= 900) {
852
- sidebar.classList.add('hidden');
853
  }
854
  });
 
 
 
 
 
 
 
 
 
855
  });
856
  </script>
857
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Himanshu - Developer Portfolio</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
+ /* Modern CSS Variables and Reset */
10
+ :root {
11
+ --primary-color: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary-color: #10b981;
14
+ --dark-color: #1f2937;
15
+ --light-color: #f8fafc;
16
+ --gray-color: #6b7280;
17
+ --transition: all 0.3s ease;
18
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
19
+ --border-radius: 8px;
20
+ }
21
+
22
  * {
23
  margin: 0;
24
  padding: 0;
25
  box-sizing: border-box;
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
  }
28
 
29
+ html {
30
+ scroll-behavior: smooth;
 
 
 
 
 
 
31
  }
32
 
33
  body {
34
+ line-height: 1.6;
35
+ color: var(--dark-color);
36
+ background-color: var(--light-color);
37
  overflow-x: hidden;
38
  }
39
 
40
+ .container {
41
+ width: 90%;
42
+ max-width: 1200px;
43
+ margin: 0 auto;
44
+ padding: 0 20px;
45
+ }
46
+
47
  /* Header Styles */
48
+ header {
49
+ background-color: var(--dark-color);
50
+ color: white;
51
+ padding: 1rem 0;
52
+ position: fixed;
53
+ width: 100%;
 
 
54
  top: 0;
55
+ z-index: 1000;
56
+ box-shadow: var(--shadow);
57
  }
58
 
59
+ .nav-container {
60
  display: flex;
61
+ justify-content: space-between;
62
  align-items: center;
 
63
  }
64
 
65
  .logo {
66
+ font-size: 1.8rem;
67
+ font-weight: 700;
68
+ color: white;
 
69
  text-decoration: none;
 
 
70
  }
71
 
72
+ .logo span {
73
  color: var(--primary-color);
 
74
  }
75
 
76
+ .nav-links {
77
+ display: flex;
78
+ list-style: none;
79
+ gap: 2rem;
 
80
  }
81
 
82
+ .nav-links a {
83
+ color: white;
84
+ text-decoration: none;
85
+ font-weight: 500;
86
+ transition: var(--transition);
87
+ position: relative;
88
  }
89
 
90
+ .nav-links a:hover {
91
+ color: var(--primary-color);
 
 
92
  }
93
 
94
+ .nav-links a::after {
95
+ content: '';
96
+ position: absolute;
97
+ width: 0;
98
+ height: 2px;
99
+ bottom: -5px;
100
+ left: 0;
101
+ background-color: var(--primary-color);
102
+ transition: var(--transition);
103
  }
104
 
105
+ .nav-links a:hover::after {
106
+ width: 100%;
 
 
 
 
 
 
 
107
  }
108
 
109
+ .hamburger {
110
+ display: none;
 
 
 
 
 
111
  cursor: pointer;
112
+ font-size: 1.5rem;
113
  }
114
 
115
+ /* Hero Section */
116
+ .hero {
117
+ padding: 8rem 0 5rem;
118
+ background: linear-gradient(135deg, var(--dark-color) 0%, #374151 100%);
119
+ color: white;
120
+ position: relative;
121
+ overflow: hidden;
122
  }
123
 
124
+ .hero::before {
125
+ content: '';
126
+ position: absolute;
127
+ width: 300px;
128
+ height: 300px;
129
+ border-radius: 50%;
130
+ background: rgba(79, 70, 229, 0.1);
131
+ top: -150px;
132
+ right: -150px;
133
  }
134
 
135
+ .hero::after {
136
+ content: '';
137
+ position: absolute;
138
+ width: 200px;
139
+ height: 200px;
140
  border-radius: 50%;
141
+ background: rgba(16, 185, 129, 0.1);
142
+ bottom: -100px;
143
+ left: -100px;
 
 
 
144
  }
145
 
146
+ .hero-content {
147
+ display: grid;
148
+ grid-template-columns: 1fr 1fr;
149
+ gap: 3rem;
150
+ align-items: center;
151
+ position: relative;
152
+ z-index: 1;
153
  }
154
 
155
+ .hero-text h1 {
156
+ font-size: 3.5rem;
157
+ margin-bottom: 1rem;
158
+ line-height: 1.2;
 
 
 
 
 
159
  }
160
 
161
+ .hero-text h1 span {
162
+ color: var(--primary-color);
 
 
 
 
 
163
  }
164
 
165
+ .hero-text p {
166
+ font-size: 1.2rem;
167
+ margin-bottom: 2rem;
168
+ color: #d1d5db;
169
  }
170
 
171
+ .btn {
172
+ display: inline-block;
173
+ padding: 0.8rem 1.8rem;
174
+ background-color: var(--primary-color);
175
+ color: white;
176
+ border: none;
177
+ border-radius: var(--border-radius);
178
+ font-weight: 600;
179
+ text-decoration: none;
180
+ transition: var(--transition);
181
+ cursor: pointer;
182
+ box-shadow: var(--shadow);
183
  }
184
 
185
+ .btn:hover {
186
+ background-color: var(--primary-dark);
187
+ transform: translateY(-3px);
188
  }
189
 
190
+ .btn-outline {
191
+ background-color: transparent;
192
+ border: 2px solid var(--primary-color);
193
+ margin-left: 1rem;
194
  }
195
 
196
+ .btn-outline:hover {
197
+ background-color: var(--primary-color);
 
 
 
198
  }
199
 
200
+ .hero-image {
201
+ position: relative;
202
+ text-align: center;
 
 
 
203
  }
204
 
205
+ .hero-image img {
206
+ width: 100%;
207
+ max-width: 400px;
208
+ border-radius: 50%;
209
+ border: 8px solid rgba(255, 255, 255, 0.1);
210
+ box-shadow: var(--shadow);
211
  }
212
 
213
+ /* About Section */
214
+ .section {
215
+ padding: 5rem 0;
216
  }
217
 
218
+ .section-title {
219
+ text-align: center;
220
+ margin-bottom: 3rem;
221
  }
222
 
223
+ .section-title h2 {
224
+ font-size: 2.5rem;
225
  position: relative;
226
+ display: inline-block;
227
+ margin-bottom: 1rem;
 
 
 
228
  }
229
 
230
+ .section-title h2::after {
231
+ content: '';
232
  position: absolute;
233
+ width: 70px;
234
+ height: 4px;
235
+ background-color: var(--primary-color);
236
+ bottom: -10px;
237
+ left: 50%;
238
+ transform: translateX(-50%);
239
+ border-radius: 2px;
240
  }
241
 
242
+ .section-title p {
243
+ color: var(--gray-color);
244
+ max-width: 600px;
245
+ margin: 0 auto;
 
 
 
 
 
246
  }
247
 
248
+ .about-content {
249
+ display: grid;
250
+ grid-template-columns: 1fr 1fr;
251
+ gap: 3rem;
252
+ align-items: center;
253
  }
254
 
255
+ .about-text h3 {
256
+ font-size: 1.8rem;
257
+ margin-bottom: 1.5rem;
 
 
 
258
  }
259
 
260
+ .about-text p {
261
+ margin-bottom: 1.5rem;
262
+ color: var(--gray-color);
263
  }
264
 
265
+ .skills {
266
+ display: flex;
267
+ flex-wrap: wrap;
268
+ gap: 1rem;
269
+ margin-top: 2rem;
270
+ }
271
+
272
+ .skill {
273
+ background-color: white;
274
+ padding: 0.5rem 1rem;
275
+ border-radius: var(--border-radius);
276
+ box-shadow: var(--shadow);
277
  font-weight: 500;
278
+ color: var(--dark-color);
279
+ transition: var(--transition);
 
 
 
 
280
  }
281
 
282
+ .skill:hover {
283
+ transform: translateY(-5px);
284
+ background-color: var(--primary-color);
285
+ color: white;
286
  }
287
 
288
+ /* Projects Section */
289
+ .projects {
290
+ background-color: #f3f4f6;
291
  }
292
 
293
+ .projects-grid {
294
+ display: grid;
295
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
296
+ gap: 2rem;
297
  }
298
 
299
+ .project-card {
300
+ background-color: white;
301
+ border-radius: var(--border-radius);
302
+ overflow: hidden;
303
+ box-shadow: var(--shadow);
304
+ transition: var(--transition);
305
  }
306
 
307
+ .project-card:hover {
308
+ transform: translateY(-10px);
309
+ }
310
+
311
+ .project-image {
312
+ height: 200px;
313
+ background-color: var(--primary-color);
314
  display: flex;
 
315
  align-items: center;
316
  justify-content: center;
317
  color: white;
318
+ font-size: 1.5rem;
319
+ font-weight: 600;
320
  }
321
 
322
+ .project-content {
323
+ padding: 1.5rem;
324
+ }
325
+
326
+ .project-content h3 {
327
+ margin-bottom: 0.5rem;
328
  }
329
 
330
+ .project-content p {
331
+ color: var(--gray-color);
332
+ margin-bottom: 1rem;
333
+ }
334
+
335
+ .project-tech {
336
  display: flex;
337
+ flex-wrap: wrap;
338
+ gap: 0.5rem;
339
+ margin-bottom: 1rem;
340
  }
341
 
342
+ .tech {
343
+ background-color: #e5e7eb;
344
+ padding: 0.3rem 0.7rem;
345
+ border-radius: 20px;
346
+ font-size: 0.8rem;
347
  font-weight: 500;
 
348
  }
349
 
350
+ /* Contact Section */
351
+ .contact-content {
352
+ display: grid;
353
+ grid-template-columns: 1fr 1fr;
354
+ gap: 3rem;
355
  }
356
 
357
+ .contact-info {
358
  display: flex;
359
+ flex-direction: column;
360
+ gap: 1.5rem;
361
  }
362
 
363
+ .contact-item {
364
  display: flex;
365
  align-items: center;
366
+ gap: 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
367
  }
368
 
369
+ .contact-icon {
370
+ width: 50px;
371
+ height: 50px;
372
+ background-color: var(--primary-color);
373
+ border-radius: 50%;
374
  display: flex;
375
  align-items: center;
376
+ justify-content: center;
377
+ color: white;
378
+ font-size: 1.2rem;
 
 
379
  }
380
 
381
+ .contact-text h4 {
382
+ margin-bottom: 0.3rem;
383
+ }
384
+
385
+ .contact-text p {
386
+ color: var(--gray-color);
387
  }
388
 
389
+ .contact-form {
390
+ background-color: white;
391
+ padding: 2rem;
392
+ border-radius: var(--border-radius);
393
+ box-shadow: var(--shadow);
394
  }
395
 
396
+ .form-group {
397
+ margin-bottom: 1.5rem;
398
+ }
399
+
400
+ .form-group label {
401
+ display: block;
402
+ margin-bottom: 0.5rem;
403
  font-weight: 500;
 
404
  }
405
 
406
+ .form-control {
407
+ width: 100%;
408
+ padding: 0.8rem;
409
+ border: 1px solid #d1d5db;
410
+ border-radius: var(--border-radius);
411
+ font-size: 1rem;
412
+ transition: var(--transition);
413
+ }
414
+
415
+ .form-control:focus {
416
+ outline: none;
417
+ border-color: var(--primary-color);
418
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
419
  }
420
 
421
+ textarea.form-control {
422
+ resize: vertical;
423
+ min-height: 150px;
424
+ }
425
+
426
+ /* Footer */
427
+ footer {
428
+ background-color: var(--dark-color);
429
  color: white;
430
+ padding: 3rem 0;
 
 
 
 
431
  }
432
 
433
+ .footer-content {
434
+ display: grid;
435
+ grid-template-columns: 2fr 1fr 1fr;
436
+ gap: 3rem;
437
  }
438
 
439
+ .footer-about h3 {
440
+ margin-bottom: 1rem;
441
+ font-size: 1.5rem;
442
  }
443
 
444
+ .footer-about p {
445
+ color: #d1d5db;
446
+ margin-bottom: 1.5rem;
447
+ }
448
+
449
+ .social-links {
450
  display: flex;
451
+ gap: 1rem;
 
452
  }
453
 
454
+ .social-link {
455
  width: 40px;
456
  height: 40px;
457
+ background-color: rgba(255, 255, 255, 0.1);
458
  border-radius: 50%;
459
+ display: flex;
460
+ align-items: center;
461
+ justify-content: center;
462
+ color: white;
463
+ text-decoration: none;
464
+ transition: var(--transition);
465
  }
466
 
467
+ .social-link:hover {
468
+ background-color: var(--primary-color);
469
+ transform: translateY(-3px);
 
 
 
 
 
470
  }
471
 
472
+ .footer-links h4 {
473
+ margin-bottom: 1.5rem;
474
+ position: relative;
475
  }
476
 
477
+ .footer-links h4::after {
478
+ content: '';
479
+ position: absolute;
480
+ width: 30px;
481
+ height: 3px;
482
+ background-color: var(--primary-color);
483
+ bottom: -8px;
484
+ left: 0;
485
  }
486
 
487
+ .footer-links ul {
488
+ list-style: none;
489
  }
490
 
491
+ .footer-links li {
492
+ margin-bottom: 0.8rem;
 
 
493
  }
494
 
495
+ .footer-links a {
496
+ color: #d1d5db;
497
+ text-decoration: none;
498
+ transition: var(--transition);
499
  }
500
 
501
+ .footer-links a:hover {
502
+ color: var(--primary-color);
503
+ padding-left: 5px;
 
 
504
  }
505
 
506
+ .copyright {
507
+ text-align: center;
508
+ padding-top: 2rem;
509
+ margin-top: 2rem;
510
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
511
+ color: #9ca3af;
512
+ font-size: 0.9rem;
513
  }
514
 
515
+ .copyright a {
516
+ color: var(--primary-color);
517
+ text-decoration: none;
 
 
518
  }
519
 
520
+ /* Responsive Design */
521
+ @media (max-width: 992px) {
522
+ .hero-content, .about-content, .contact-content {
523
+ grid-template-columns: 1fr;
 
 
 
 
 
 
 
 
 
 
 
524
  }
525
 
526
+ .hero-text h1 {
527
+ font-size: 2.8rem;
 
528
  }
529
 
530
+ .footer-content {
531
+ grid-template-columns: 1fr 1fr;
532
  }
533
  }
534
 
535
  @media (max-width: 768px) {
536
+ .nav-links {
537
+ position: fixed;
538
+ top: 70px;
539
+ right: -100%;
540
+ width: 70%;
541
+ height: 100vh;
542
+ background-color: var(--dark-color);
543
+ flex-direction: column;
544
+ align-items: center;
545
+ padding-top: 2rem;
546
+ transition: var(--transition);
547
+ }
548
+
549
+ .nav-links.active {
550
+ right: 0;
551
  }
552
 
553
+ .hamburger {
554
+ display: block;
555
  }
556
 
557
+ .hero-text h1 {
558
+ font-size: 2.3rem;
559
  }
560
 
561
+ .footer-content {
562
+ grid-template-columns: 1fr;
563
  }
564
  }
565
 
566
+ @media (max-width: 576px) {
567
+ .hero-text h1 {
568
+ font-size: 2rem;
569
  }
570
 
571
+ .section-title h2 {
572
+ font-size: 2rem;
573
  }
574
 
575
+ .btn {
576
+ padding: 0.7rem 1.5rem;
577
+ font-size: 0.9rem;
578
  }
579
  }
580
 
581
+ /* Animation */
582
+ @keyframes fadeIn {
583
+ from {
584
+ opacity: 0;
585
+ transform: translateY(20px);
586
+ }
587
+ to {
588
+ opacity: 1;
589
+ transform: translateY(0);
590
+ }
591
  }
592
 
593
+ .fade-in {
594
+ animation: fadeIn 1s ease forwards;
595
  }
596
 
597
+ .delay-1 {
598
+ animation-delay: 0.2s;
 
 
599
  }
600
 
601
+ .delay-2 {
602
+ animation-delay: 0.4s;
603
+ }
604
+
605
+ .delay-3 {
606
+ animation-delay: 0.6s;
607
  }
608
  </style>
609
  </head>
610
  <body>
611
  <!-- Header -->
612
+ <header>
613
+ <div class="container nav-container">
614
+ <a href="#" class="logo">Himanshu<span>.</span></a>
615
+ <div class="hamburger" id="hamburger">
616
+ <i class="fas fa-bars"></i>
 
 
 
 
 
 
 
 
 
617
  </div>
618
+ <ul class="nav-links" id="navLinks">
619
+ <li><a href="#home">Home</a></li>
620
+ <li><a href="#about">About</a></li>
621
+ <li><a href="#projects">Projects</a></li>
622
+ <li><a href="#contact">Contact</a></li>
623
+ </ul>
624
  </div>
625
  </header>
626
 
627
+ <!-- Hero Section -->
628
+ <section class="hero" id="home">
629
+ <div class="container hero-content">
630
+ <div class="hero-text fade-in">
631
+ <h1>Hi, I'm <span>Himanshu</span><br>Full Stack Developer</h1>
632
+ <p>I build exceptional and accessible digital experiences for the web.</p>
633
+ <div>
634
+ <a href="#projects" class="btn">View My Work</a>
635
+ <a href="#contact" class="btn btn-outline">Get In Touch</a>
636
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
637
  </div>
638
+ <div class="hero-image fade-in delay-1">
639
+ <img src="https://via.placeholder.com/400x400/6366f1/FFFFFF?text=Himanshu" alt="Himanshu Developer">
 
640
  </div>
641
+ </div>
642
+ </section>
643
+
644
+ <!-- About Section -->
645
+ <section class="section" id="about">
646
+ <div class="container">
647
+ <div class="section-title fade-in">
648
+ <h2>About Me</h2>
649
+ <p>I'm a passionate developer with a love for creating innovative web solutions</p>
650
  </div>
651
+ <div class="about-content">
652
+ <div class="about-text fade-in">
653
+ <h3>Creating digital solutions that make a difference</h3>
654
+ <p>I'm a full stack developer with expertise in modern web technologies. I enjoy building everything from small business sites to rich interactive web applications.</p>
655
+ <p>When I'm not coding, you can find me exploring new technologies, contributing to open source projects, or sharing knowledge with the developer community.</p>
656
+ <div class="skills">
657
+ <div class="skill">JavaScript</div>
658
+ <div class="skill">React</div>
659
+ <div class="skill">Node.js</div>
660
+ <div class="skill">Python</div>
661
+ <div class="skill">MongoDB</div>
662
+ <div class="skill">CSS3</div>
663
+ <div class="skill">HTML5</div>
664
+ <div class="skill">Git</div>
665
  </div>
666
  </div>
667
+ <div class="about-image fade-in delay-1">
668
+ <img src="https://via.placeholder.com/500x400/10b981/FFFFFF?text=About+Me" alt="About Himanshu">
 
669
  </div>
670
+ </div>
671
+ </div>
672
+ </section>
673
+
674
+ <!-- Projects Section -->
675
+ <section class="section projects" id="projects">
676
+ <div class="container">
677
+ <div class="section-title fade-in">
678
+ <h2>My Projects</h2>
679
+ <p>Here are some of my recent projects that showcase my skills and experience</p>
680
+ </div>
681
+ <div class="projects-grid">
682
+ <div class="project-card fade-in">
683
+ <div class="project-image" style="background-color: #6366f1;">
684
+ E-Commerce Platform
685
+ </div>
686
+ <div class="project-content">
687
+ <h3>ShopEasy</h3>
688
+ <p>A full-featured e-commerce platform with user authentication, payment integration, and admin dashboard.</p>
689
+ <div class="project-tech">
690
+ <span class="tech">React</span>
691
+ <span class="tech">Node.js</span>
692
+ <span class="tech">MongoDB</span>
693
+ <span class="tech">Stripe</span>
694
+ </div>
695
+ <a href="#" class="btn">View Project</a>
696
  </div>
697
  </div>
698
+ <div class="project-card fade-in delay-1">
699
+ <div class="project-image" style="background-color: #10b981;">
700
+ Task Management
701
+ </div>
702
+ <div class="project-content">
703
+ <h3>TaskFlow</h3>
704
+ <p>A collaborative task management application with real-time updates and team collaboration features.</p>
705
+ <div class="project-tech">
706
+ <span class="tech">Vue.js</span>
707
+ <span class="tech">Firebase</span>
708
+ <span class="tech">Sass</span>
709
+ </div>
710
+ <a href="#" class="btn">View Project</a>
711
  </div>
 
712
  </div>
713
+ <div class="project-card fade-in delay-2">
714
+ <div class="project-image" style="background-color: #f59e0b;">
715
+ Weather App
 
 
716
  </div>
717
+ <div class="project-content">
718
+ <h3>Weatherly</h3>
719
+ <p>A responsive weather application that provides detailed forecasts and weather alerts for any location.</p>
720
+ <div class="project-tech">
721
+ <span class="tech">JavaScript</span>
722
+ <span class="tech">API</span>
723
+ <span class="tech">CSS Grid</span>
 
 
 
 
 
 
 
 
724
  </div>
725
+ <a href="#" class="btn">View Project</a>
726
  </div>
727
  </div>
728
  </div>
729
+ </div>
730
+ </section>
731
+
732
+ <!-- Contact Section -->
733
+ <section class="section" id="contact">
734
+ <div class="container">
735
+ <div class="section-title fade-in">
736
+ <h2>Get In Touch</h2>
737
+ <p>Feel free to reach out if you're looking for a developer, have a question, or just want to connect.</p>
738
  </div>
739
+ <div class="contact-content">
740
+ <div class="contact-info fade-in">
741
+ <div class="contact-item">
742
+ <div class="contact-icon">
743
+ <i class="fas fa-envelope"></i>
744
+ </div>
745
+ <div class="contact-text">
746
+ <h4>Email</h4>
747
+ <p>himanshu@example.com</p>
748
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
749
  </div>
750
+ <div class="contact-item">
751
+ <div class="contact-icon">
752
+ <i class="fas fa-phone"></i>
753
+ </div>
754
+ <div class="contact-text">
755
+ <h4>Phone</h4>
756
+ <p>+91 98765 43210</p>
757
  </div>
758
  </div>
759
+ <div class="contact-item">
760
+ <div class="contact-icon">
761
+ <i class="fas fa-map-marker-alt"></i>
762
+ </div>
763
+ <div class="contact-text">
764
+ <h4>Location</h4>
765
+ <p>New Delhi, India</p>
766
+ </div>
767
+ </div>
768
+ <div class="contact-item">
769
+ <div class="contact-icon">
770
+ <i class="fas fa-globe"></i>
771
+ </div>
772
+ <div class="contact-text">
773
+ <h4>Website</h4>
774
+ <p>www.himanshudev.com</p>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ <div class="contact-form fade-in delay-1">
779
+ <form id="contactForm">
780
+ <div class="form-group">
781
+ <label for="name">Your Name</label>
782
+ <input type="text" id="name" class="form-control" required>
783
+ </div>
784
+ <div class="form-group">
785
+ <label for="email">Your Email</label>
786
+ <input type="email" id="email" class="form-control" required>
787
+ </div>
788
+ <div class="form-group">
789
+ <label for="subject">Subject</label>
790
+ <input type="text" id="subject" class="form-control" required>
791
+ </div>
792
+ <div class="form-group">
793
+ <label for="message">Your Message</label>
794
+ <textarea id="message" class="form-control" required></textarea>
795
+ </div>
796
+ <button type="submit" class="btn">Send Message</button>
797
+ </form>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </section>
802
+
803
+ <!-- Footer -->
804
+ <footer>
805
+ <div class="container">
806
+ <div class="footer-content">
807
+ <div class="footer-about">
808
+ <h3>Himanshu<span>.</span></h3>
809
+ <p>Full stack developer creating beautiful, functional, and user-centered digital experiences.</p>
810
+ <div class="social-links">
811
+ <a href="#" class="social-link"><i class="fab fa-github"></i></a>
812
+ <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
813
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
814
+ <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
815
+ </div>
816
+ </div>
817
+ <div class="footer-links">
818
+ <h4>Quick Links</h4>
819
+ <ul>
820
+ <li><a href="#home">Home</a></li>
821
+ <li><a href="#about">About</a></li>
822
+ <li><a href="#projects">Projects</a></li>
823
+ <li><a href="#contact">Contact</a></li>
824
+ </ul>
825
+ </div>
826
+ <div class="footer-links">
827
+ <h4>Services</h4>
828
+ <ul>
829
+ <li><a href="#">Web Development</a></li>
830
+ <li><a href="#">App Development</a></li>
831
+ <li><a href="#">UI/UX Design</a></li>
832
+ <li><a href="#">Consulting</a></li>
833
+ </ul>
834
+ </div>
835
+ </div>
836
+ <div class="copyright">
837
+ <p>&copy; 2023 Himanshu. All rights reserved. <a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a></p>
838
+ </div>
839
+ </div>
840
+ </footer>
841
 
842
+ <script>
843
+ // Mobile Navigation Toggle
844
+ const hamburger = document.getElementById('hamburger');
845
+ const navLinks = document.getElementById('navLinks');
846
+
847
+ hamburger.addEventListener('click', () => {
848
+ navLinks.classList.toggle('active');
 
 
849
 
850
+ // Change hamburger icon
851
+ if (navLinks.classList.contains('active')) {
852
+ hamburger.innerHTML = '<i class="fas fa-times"></i>';
853
+ document.body.style.overflow = 'hidden';
854
+ document.addEventListener('click', closeMenuOnOutsideClick);
855
+ });
856
+
857
+ function closeMenuOnOutsideClick(e) {
858
+ if (!navLinks.contains(e.target) && !hamburger.contains(e.target)) {
859
+ navLinks.classList.remove('active');
860
+ hamburger.innerHTML = '<i class="fas fa-bars"></i>';
861
+ document.body.style.overflow = 'auto';
862
+ document.removeEventListener('click', closeMenuOnOutsideClick);
863
+ }
864
  }
865
 
866
+ // Close mobile menu when clicking on a link
867
+ document.querySelectorAll('.nav-links a').forEach(link => {
868
+ link.addEventListener('click', () => {
869
+ navLinks.classList.remove('active');
870
+ hamburger.innerHTML = '<i class="fas fa-bars"></i>';
871
+ document.body.style.overflow = 'auto';
872
+ });
873
  });
874
 
875
+ // Form Submission
876
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
877
+ e.preventDefault();
878
+ alert('Thank you for your message! I will get back to you soon.');
879
+ this.reset();
 
 
 
 
 
880
  });
881
 
882
+ // Scroll Animation
883
+ const observerOptions = {
884
+ threshold: 0.1,
885
+ rootMargin: '0px 0px -50px 0px'
886
+ };
887
+
888
+ const observer = new IntersectionObserver((entries) => {
889
+ entries.forEach(entry => {
890
+ if (entry.isIntersecting) {
891
+ entry.target.classList.add('fade-in');
892
  }
893
  });
894
+ }, observerOptions);
895
+
896
+ // Observe elements for animation
897
+ document.addEventListener('DOMContentLoaded', () => {
898
+ const elementsToAnimate = document.querySelectorAll('.section-title, .about-text, .about-image, .project-card, .contact-info, .contact-form');
899
+
900
+ elementsToAnimate.forEach(el => {
901
+ observer.observe(el);
902
+ });
903
  });
904
  </script>
905
  </body>