-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
771 lines (691 loc) · 36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BSCS-B 2021</title>
<script src="assets/js/index.js"></script>
<link rel="stylesheet" href="style.css">
<!-- designed by Abdullah -->
<link rel="stylesheet" href="./style//skillStyle.css">
<script src="https://cdn.tailwindcss.com/"></script>
<!-- favicon -->
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,latin-ext' rel='stylesheet'
type='text/css'>
</head>
<body class="bg-gray-100 text-black">
<!-- Vaneeza Noor's Code Starts here -->
<div class="bg-[#1d5b79] text-white ">
<header class="container mx-auto flex items-center justify-between p-4">
<!-- Logo -->
<div class="logo" href="#">
<img src="./Image/dark-mode-logo.png" alt="LOGO" class="w-12 h-12 rounded-full border-4 bg-black" />
</div>
<!-- Navigation Bar -->
<nav>
<ul class="flex">
<li class="mr-4">
<a href="#" class="text-white hover:bg-gray-700 rounded px-4 py-2">Carousel</a>
</li>
<li class="mr-4">
<a href="#" class="text-white hover:bg-gray-700 rounded px-4 py-2">About Us</a>
</li>
<li class="mr-4">
<a href="#" class="text-white hover:bg-gray-700 rounded px-4 py-2">Blog</a>
</li>
<li class="mr-4">
<a href="#" class="text-white hover:bg-gray-700 rounded px-4 py-2">Photo Gallery</a>
</li>
<li class="mr-4">
<a href="#" class="text-white hover:bg-gray-700 rounded px-4 py-2">Testimonials</a>
</li>
</ul>
</nav>
<!-- Login and Signup Buttons -->
<div class="auth-buttons flex items-center">
<a href="#"
class="login-btn inline-block bg-white text-gray-700 hover:bg-gray-300 px-4 py-2 rounded">Login</a>
<a href="#"
class="signup-btn inline-block bg-white text-gray-700 hover:bg-gray-300 px-4 py-2 rounded">Sign
Up</a>
</div>
</header>
</div>
<div class="text-center text-white bg-black">Created by Vaneeza Noor</div>
<!-- Vaneeza Noor's Code Ends here -->
<section class="h-[95vh] bg-yellow-300 py-8">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold">BSCS@2021__B</h1>
<p class="text-lg">Students | Aspiring Web Developers</p>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Noor Fatima Zafar</h1>
<p class="">Make the hero section awesome as you like
<ul class="list-inside">
<li>(i) make the text center</li>
<li>(ii) add technical image to background</li>
<li>(iii)Add overlay color on hover on whole background</li>
</ul>
</p>
</div>
</div>
</section>
<!-- Shahzaman's Code starts here -->
<div class="carousel">
<div class="slide">
<div class="slide-video">
<video autoplay loop muted>
<source src="assets/images/v3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="slide-content">
<h2 class="typed-out">The Evolution of Computing</h2>
<p class="typed-out"> Computing has come a long way since its inception, revolutionizing how we
interact with technology. From early mechanical computers to modern supercomputers and quantum
computing, computing has reshaped our world, enabling remarkable advancements in artificial
intelligence and other fields.</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-video">
<video autoplay loop muted>
<source src="assets/images/v2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="slide-content">
<h2 class="anim-typewriter">Artificial Intelligence: A New Era</h2>
<p class="anim-typewriter">Artificial Intelligence (AI) marks a paradigm shift in technology. AI
systems mimic human intelligence, learning from data and making decisions. This cutting-edge
field is empowering various industries, from self-driving cars to natural language processing,
pushing the boundaries of innovation and human-machine collaboration.</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-video">
<video autoplay loop muted>
<source src="assets/images/v1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="slide-content">
<h2 class="anim-typewriter">AI Ethics and Challenges</h2>
<p class="anim-typewriter">As AI continues to thrive, we must grapple with ethical considerations
and potential challenges. Issues such as bias in AI algorithms, data privacy, and the impact on
jobs warrant careful examination. Striking the right balance between technological progress and
societal well-being is vital for a sustainable AI-driven future.</p>
</div>
</div>
</div>
</div>
<div class="text-center text-white bg-black">Created by Shahzaman Mazhar</div>
<!-- Shahzaman's Code Ends here -->
<section id="" class="h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4">About US</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Areeba</h1>
<p class="">Make About Section awesome as you like
<ul class="list-inside">
<li>(i) Heading on the top</li>
<li>(ii) two sections, one on left and one on right</li>
<li>(iii)left section should have a heading and a paragraph about it,</li>
<li>(iv)right section should have an image with rounded and hover effect as well</li>
</ul>
</p>
</div>
</div>
</section>
<!-- Khadija's Code starts here -->
<section id="subjects-section">
<h2>Subjects:</h2>
<p class="sub">List of subjects:</p>
<!-- div with classes container and mx-auto Added by Zahoor Ahmad -->
<div class="container mx-auto">
<ul id="list">
<li>
<strong>Physics:</strong>
<p>
Physics is the branch of science that deals with the structure of matter and how the fundamental
constituents of the universe interact.
</p>
</li>
<li>
<strong>Math:</strong>
<p>
Mathematics is a subject that deals with numbers, shapes, logic, quantity and arrangements.
Mathematics
teaches to solve problems based on numerical calculations and find the solutions.
</p>
</li>
<li>
<strong>Chemistry:</strong>
<p>
Chemistry is the study of matter, analyzing its structure, properties and behavior to see what
happens
when they change in chemical reactions.
</p>
</li>
<li>
<strong>Biology:</strong>
<p>
Biology is a branch of science that deals with living organisms and their vital processes.
Biology
encompasses diverse fields, including botany, conservation, ecology, evolution, genetics, etc.
</p>
</li>
<li>
<strong>Urdu:</strong>
<p>
Urdu is an Indo-Aryan language spoken chiefly in South Asia. It is the national language and
lingua
franca of Pakistan, where it is also an official language alongside English.
</p>
</li>
<li>
<strong>Islamic Studies:</strong>
<p>
Many academic Islamic Studies programs include the historical study of Islam, Islamic
civilization,
history of the Muslim world, historiography, Islamic law, Islamic theology and Islamic
philosophy.
</p>
</li>
<li>
<strong>English:</strong>
<p>
English is the third-most widely spoken language in the world as of 2023 and the primary
language of
much of the developed world, including the United States, the United Kingdom, and other nations.
</p>
</li>
</ul>
</div>
</section>
<div class="text-center text-white bg-black">Created by khadija</div>
<!-- khadija's Code Ends here -->
<!-- Laiba's Code Start from here -->
<section>
<header>
<div>
<h1 class="text-2xl font-bold text-cent">Blog</h1>
</div>
</header>
<section class="section-block">
<!-- container and mx-auto classes are added by Zahoor Ahmad -->
<section class="blog-container container mx-auto">
<article class="blog-post">
<h1> Tips for Healthy Living</h1>
<p>
Living a healthy lifestyle is essential for both physical and mental well-being. Here are five
practical tips to help you maintain a healthy and balanced life:
</p>
<a href="./html_files/healthy.html">Read More</a>
</article>
<article class="blog-post">
<h1>The Art of Mindful Eating</h1>
<p>
Mindful eating is a practice that involves paying full attention to the act of eating. Here's
how it can benefit your relationship with food:
</p>
<a href="./html_files/mindful.html">Read More</a>
</article>
<article class="blog-post">
<h1>Exploring the Wonders of Nature</h1>
<p>
Spending time in nature offers a plethora of benefits for our well-being. Here are some reasons
why nature exploration is essential:
</p>
<a href="/html_files/nature.html">Read More</a>
</article>
<article class="blog-post">
<h1>The Joys of Traveling Solo</h1>
<p>
Traveling alone can be a transformative and enriching experience. Here are some reasons to
consider embarking on a solo journey:
</p>
<a href="./html_files/travelling.html">Read More</a>
</article>
<article class="blog-post">
<h1>The Benefits of Meditation</h1>
<p>
Meditation is a powerful practice that can have a profound impact on your mental and emotional
well-being.
</p>
<a href="./html_files/meditation.html">Read More</a>
</article>
<article class="blog-post">
<h1>The Art of Practicing Gratitude</h1>
<p>
Gratitude is a powerful practice that can transform your outlook on life. Here's why cultivating
gratitude is essential:
</p>
<a href="./html_files/gratitude.html">Read More</a>
</section>
</section>
<div class="text-center text-white bg-orange-400 ">Created by Laiba Khawar</div>
</section>
<!--laiba code end here-->
<!-- Zoha code start from here -->
<!-- changed h-[225vh] to min-h-[95vh] by Zahoor Ahmad-->
<section id="" class="bg-orange-200 min-h-[95vh] py-4">
<div class="container mx-auto px-2">
<h2 class="text-4xl font-bold text-center text-zinc-700">Photo Gallery</h2>
<div class="container">
<div class="gallery">
<div class="img">
<img src="./assets/images/a.jpeg">
</div>
<div class="img">
<img src="./assets/images/b.jpeg">
</div>
<div class="img">
<img src="./assets/images/c.jpeg">
</div>
<div class="img">
<img src="./assets/images/e.jpg">
</div>
<div class="img">
<img src="./assets/images/g.jpg">
</div>
<div class="img">
<img src="./assets/images/f.jpg">
</div>
<div class="img">
<img src="./assets/images/1.jpg">
</div>
<div class="img">
<img src="./assets/images/d.jpeg">
</div>
<div class="img">
<img src="./assets/images/10.jpg">
</div>
<div class="img">
<img src="./assets/images/2.jpg">
</div>
<div class="img">
<img src="./assets/images/3.jpg">
</div>
<div class="img">
<img src="./assets/images/4.jpg">
</div>
<div class="img">
<img src="./assets/images/5.jpg">
</div>
<div class="img">
<img src="./assets/images/6.jpg">
</div>
<!-- <div class="img">
<img src="/gallery/7.jpg">
</div> -->
<div class="img">
<img src="./assets/images/8.jpg">
</div>
<div class="img">
<img src="./assets/images/9.jpg">
</div>
<div class="img">
<img src="./assets/images/1.jpg">
</div>
</div>
</div>
<footer>
<p>Copyright 2023.All Right Reserved</p>
<p>Created By Zoha Asghar</p>
</footer>
</div>
</div>
</section>
<!-- Zoha's Code ends here -->
<section id="" class="bg-pink-200 h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold">Testimonials</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Zarnab Nadeem</h1>
<p class="">Make Testimonials Section awesome as you like
Use your creativity to make this section
</p>
</div>
</section>
<section id="" class="bg-green-200 h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold">Signup Form</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Waqar Akram Bhutta</h1>
<p class="">Make Signup Section awesome as you like
Use your creativity to make this section
</p>
</div>
</section>
<!-- Abdullah's code start from here -->
<section class="skills">
<div class="light-text">
<h1 style="color: black;font-size: 45px;">Our Motive</h1>
<div style="border-top: 5px solid black;width: 200px;margin: auto;height:2px;margin-bottom: 20px;">
</div>
<svg id="tagi" x="0px" y="0px" width="900px" height="324px" viewBox="0 0 900 324">
<text id="XMLID_2_" transform="matrix(1 0 0 1 433.0854 82.7407)" class="st17 st8">LEADS</text>
<text transform="matrix(1 0 0 1 188.187 144.3555)" class="st5 st17 st22">CLICKS</text>
<text transform="matrix(1 0 0 1 380.8301 145.1353)" class="st17 st29">Innovation</text>
<text transform="matrix(1 0 0 1 378.8799 54.6626)" class="st5 st28 st6">BING</text>
<text transform="matrix(1 0 0 1 247.0718 191.1514)" class="st5 st28 st18">YANDEX</text>
<text transform="matrix(1 0 0 1 0 129.9268)" class="st5 st28 st30">vKONTAKTE</text>
<text transform="matrix(1 0 0 1 250.9712 76.1118)" class="st5 st28 st14">REMARKETING</text>
<text transform="matrix(1 0 0 1 229.9131 169.5225)" class="st5 st28 st25">MARKETING</text>
<text transform="matrix(1 0 0 1 472.4722 105.3691)" class="st5 st28 st27">LOOKALIKE</text>
<text transform="matrix(1 0 0 1 735.7007 163.4639)" class="st5 st28 st1">BIG DATA</text>
<text transform="matrix(1 0 0 1 128.9111 264.4697)" class="st5 st28 st26">REKLAMA
EFEKTYWNOŚCIOWA</text>
<text transform="matrix(1 0 0 1 191.3057 102.2393)" class="st5 st28 st24">PERFORMANCE</text>
<text transform="matrix(1 0 0 1 318.4351 289.0342)" class="st5 st28 st1">AUTOMATION</text>
<text transform="matrix(1 0 0 1 740.77 211.4307)" class="st5 st28 st21">ATTRIBUTION</text>
<text transform="matrix(1 0 0 1 683.0542 230.5381)" class="st5 st28 st19">BEHAVIORAL</text>
<text transform="matrix(0.9244 0 0 1 632.7485 97.0288)" class="st5 st28 st16">E-COMMERCE</text>
<text transform="matrix(1 0 0 1 663.5552 139.2856)" class="st5 st28 st3">Efficiency</text>
<text transform="matrix(1 0 0 1 251.3608 240.4502)" class="st5 st17 st31">SHOPPING
CAMPAIGNS</text>
<text transform="matrix(1 0 0 1 217.0439 54.2744)" class="st5 st28 st11">Creativity</text>
<text transform="matrix(1 0 0 1 119.9526 240.2871)" class="st5 st28 st13">Curiosity</text>
<text transform="matrix(1 0 0 1 444.0044 34.7744)" class="st5 st17 st4">KEYWORDS</text>
<!-- <text transform="matrix(1 0 0 1 125.4019 129.147)" class="st5 st28 st15">Efficiency</text> -->
<text transform="matrix(1 0 0 1 350.8022 207.5303)" class="st17 st2">Learning</text>
<text transform="matrix(1 0 0 1 81.5249 212.6006)" class="st17 st9">FIT</text>
<text transform="matrix(1 0 0 1 545.0063 316.7061)" class="st5 st28 st23">Design by : Abdullah
Mirza</text>
<text transform="matrix(1 0 0 1 638.2075 66.7529)" class="st5 st28 st12">AD GROUPS</text>
<text transform="matrix(1 0 0 1 185.8467 282.4043)" class="st5 st28 st10">OPTIMIZATION</text>
<text transform="matrix(1 0 0 1 34.1494 150.5947)" class="st5 st28 st7">TARGETING</text>
</svg>
</div>
<div class="skill-lines">
<h1 style="color: black;font-size: 50px; margin-top: 10px;">OUR Skills</h1>
<div style="border-top: 5px solid black;width: 200px;margin: auto;height:2px;margin-bottom: 20px;">
</div>
<ul class="skill-bars">
<li>
<div class="progress percent90"><span>90%</span></div>
<strong>HTML5</strong>
</li>
<li>
<div class="progress percent85"><span>85%</span></div>
<strong>CSS3</strong>
</li>
<li>
<div class="progress percent70"><span>70%</span></div>
<strong>JavaScript</strong>
</li>
<li>
<div class="progress percent95"><span>95%</span></div>
<strong>.NET</strong>
</li>
<li>
<div class="progress percent75"><span>75%</span></div>
<strong>Python</strong>
</li>
</ul>
</div>
</section>
<div class="bg-black text-white text-center">Created by Muhammad Abdullah</div>
<!-- Abdullah's code ends here -->
<section id="" class="h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4">Programming Languages Cards</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Abubakar</h1>
<p class="">Make your Section awesome as you like
<li>Place images of some famous Programming languages</li>
<li>Below them, Write their Names</li>
<li>after that, write their usage in tech industry</li>
<li>also add a hover effect</li>
</p>
</div>
</div>
</section>
<!-- Zahoor Ahmad's code starts here -->
<section class="bg-white h-full py-8">
<section class="container mx-auto">
<h2 class="text-3xl font-bold mb-4 text-center">Time Table</h2>
<table class="border-collapse border border-black mt-4 w-full">
<thead>
<tr>
<th class="border border-black px-4 py-2 bg-gray-200 hover:bg-gray-300 transition-color">Time
</th>
<th class="border border-black px-4 py-2 bg-gray-200 hover:bg-gray-300 transition-color">Monday
</th>
<th class="border border-black px-4 py-2 bg-gray-200 hover:bg-gray-300 transition-color">Tuesday
</th>
<th class="border border-black px-4 py-2 bg-gray-200 hover:bg-gray-300 transition-color">
Wednesday</th>
<th class="border border-black px-4 py-2 bg-gray-200 hover:bg-gray-300 transition-color">
Thursday</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">8:00 AM - 9:00 AM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-513:
Web
Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">
CS-511: Artificial Intelligence
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">9:00 AM - 10:00 AM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-507:
System Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-509
Digital Signal Processing
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">10:00 AM - 11:00 AM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-513:
Web
Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">
CS-511: Artificial Intelligence
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">11:00 AM - 12:00 PM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-507:
System Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-509
Digital Signal Processing
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">12:00 PM - 1:00 PM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-513:
Web
Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">
CS-511: Artificial Intelligence
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">1:00 PM - 2:00 PM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-505:
Computer and Assembly Language
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-507:
System Programming
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">CS-509
Digital Signal Processing
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-300 transition-colors">
CS-503: Design and Analysis of Algorithms</td>
</tr>
<tr>
<td class="border border-black px-4 py-2 hover:bg-gray-200">2:00 PM - 3:00 PM</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">Leave
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">Leave
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">Leave
</td>
<td class="border border-black px-4 py-2 bg-white hover:bg-gray-100 transition-colors">Leave
</td>
</tr>
</tbody>
</table>
</div>
</section>
</section>
<div class="text-center text-white bg-black mt-1">Created by Zahoor Ahmad</div>
<!-- Zahoor Ahmad's Code ends here -->
<section id="" class="h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4">Students info</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Kashaf Noor</h1>
<p class="">Make your Section awesome as you like
<li>Make a form where students can submit their info</li>
<li>Form can take names,ag number,Phone Numbers as input</li>
<li>use the border/outline properties, placeholder,values as well.</li>
<li>also add a hover effect for scale(1.05) of input field.</li>
</p>
</div>
</div>
</section>
<section id="" class="h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-4">Student Profile Page</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Muhammad Adan</h1>
<p class="">Make awesome as you like
<li>Create another page.</li>
<li>Make it like a profile of students</li>
<li>Add it Navbar as a separate page</li>
<li>Link it, and add a backlink form profile page to home page as well.</li>
</p>
</div>
</div>
</section>
<!-- Nisha's Code Starts Here -->
<div class="social-media-section h-[50vh] flex flex-col justify-center">
<h3 class="font-bold text-4xl">Follow Us on Social Media</h3>
<div class="social-media-logos flex justify-center flex-wrap">
<a href="https://www.facebook.com/" class="social-media-icon" target="_blank">
<img src="https://www.edigitalagency.com.au/wp-content/uploads/Facebook-logo-blue-circle-large-white-f.png"
alt="Facebook">
<h3>Facebook</h3>
</a>
<a href="https://twitter.com/" class="social-media-icon" target="_blank">
<img src="https://static.vecteezy.com/system/resources/previews/002/534/045/original/social-media-twitter-logo-blue-isolated-free-vector.jpg"
alt="Twitter">
<h3>Twitter</h3>
</a>
<a href="https://www.whatsapp.com/" class="social-media-icon" target="_blank">
<img src="https://static.vecteezy.com/system/resources/previews/022/101/124/original/whatsapp-logo-transparent-free-png.png"
alt="WhatsApp">
<h3>Whatsapp</h3>
</a>
<a href="https://www.instagram.com/" class="social-media-icon" target="_blank">
<img src="https://img.freepik.com/premium-vector/purple-gradiend-social-media-logo_197792-1883.jpg?w=2000"
alt="Instagram">
<h3>Instagram</h3>
</a>
<a href="https://www.youtube.com/" class="social-media-icon" target="_blank">
<img src="https://img.freepik.com/premium-vector/red-youtube-logo-social-media-logo_197792-1803.jpg?w=2000"
alt="YouTube">
<h3>Youtube</h3>
</a>
<a href="https://www.snapchat.com/" class="social-media-icon" target="_blank">
<img src="https://static.vecteezy.com/system/resources/previews/002/432/911/original/social-media-snapchat-original-latest-logo-free-vector.jpg"
alt="Snapchat">
<h3>Snapchat</h3>
</a>
<a href="https://www.pinterest.com/" class="social-media-icon" target="_blank">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/744/original/pinterest-logo-pinterest-transparent-free-png.png"
alt="Pinterest">
<h3>Pinterest</h3>
</a>
<a href="https://www.skype.com/" class="social-media-icon" target="_blank">
<img src="https://w7.pngwing.com/pngs/335/671/png-transparent-computer-icons-skype-symbol-skype-blue-text-telephone-call-thumbnail.png"
alt="Skype">
<h3>Skype</h3>
</a>
<a href="https://www.linkedin.com/" class="social-media-icon" target="_blank">
<img src="https://static.vecteezy.com/system/resources/previews/018/930/587/original/linkedin-logo-linkedin-icon-transparent-free-png.png"
alt="LinkedIn">
<h3>Linkedin</h3>
</a>
</div>
</div>
<div class="text-center text-white bg-black ">Created by Nisha Sharif</div>
<!-- Nisha's Code Ends Here -->
<!-- Elsa's code starts here -->
<section id="" class="bg-red-300 h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold">Online Coding Schools</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Elsa</h1>
<p class="">Make your Section awesome as you like
<li>place logos of some famous Online Coding Schools</li>
<li>Logos should be scaled(1.05) on hover</li>
<li>Write their names</li>
<li>Write their info</li>
<li>logo should zoom on hover</li>
<li>logos should have hyperlinks behind them</li>
<li>link should open in new tab</li>
</p>
</div>
</section>
<!-- Elsa's Code Ends Here -->
<!-- Tanzila's code starts here -->
<section id="" class="bg-blue-200 h-[95vh] py-8">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold">Footer</h2>
<!-- Instructions -->
<div>
<h1 class="text-4xl">Assigned to Tanzila Arshad</h1>
<p class="">Make Footer Section awesome as you like
</p>
<p>Footer should contains links for sections and social media links dummy</p>
</div>
</section>
<!-- Tanzila's Code Ends Here -->
</body>
<script src="./assets//js//abdSkill.js"></script>
</html>