-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (87 loc) · 3.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>14 August</title>
</head>
<body>
<div id="loader">
<div class="top">
<h1>It's Fourteenth August</h1>
</div>
<div class="bottom">
<h1>It's Fourteenth August</h1>
</div>
</div>
<div id="main">
<div class="hero">
<div class="center-hero">
<div class="txt txt-1"><h1>Happy</h1></div>
<div class="txt txt-2">
<h1>Independence</h1>
<img src="./Media/pakistan-603.gif" alt="">
</div>
<div class="txt txt-3"><h1>Day</h1></div>
</div>
</div>
<!-- <div class="marq">
<div class="move">
<div class="marquee">
<h1>It's 14<sup>th</sup>August</h1>
<img src="./Media/right-arrow.png" alt="">
</div>
<div class="marquee">
<h1>It's 14<sup>th</sup>August</h1>
<img src="./Media/right-arrow.png" alt="">
</div>
<div class="marquee">
<h1>It's 14<sup>th</sup>August</h1>
<img src="./Media/right-arrow.png" alt="">
</div>
<div class="marquee">
<h1>It's 14<sup>th</sup>August</h1>
<img src="./Media/right-arrow.png" alt="">
</div>
<div class="marquee">
<h1>It's 14<sup>th</sup>August</h1>
<img src="./Media/right-arrow.png" alt="">
</div>
</div>
</div> -->
<div class="imgs-hover">
<h1>People Who Sacrificed Themselves</h1>
<div class="elems-container">
<div id="elem1" class="elem">
<h1>Muhammad Ali Jinnah</h1>
<img src="./Media/Quaid-e-azam.jpg" alt="">
</div>
<div id="elem2" class="elem">
<h1>Liaquat Ali Khan</h1>
<img src="./Media/Liaquat_Ali_Khan.jpg" alt="">
</div>
<div id="elem3" class="elem">
<h1>Fatima Jinnah</h1>
<img src="./Media/fatima_jinnah.png" alt="">
</div>
<div id="elem4" class="elem">
<h1>Allama Iqbal</h1>
<img src="./Media/allama-iqbal.png" alt="">
</div>
</div>
</div>
<div class="parent-canvas">
<div class="child-canvas">
<canvas id="frame"></canvas>
</div>
</div>
<div class="wish">
<p><span>"</span>Happy Independence Day, Pakistan! On this August 14th, 2024, we honor the sacrifices of those who secured our freedom and celebrate our nation's rich heritage. Let this day inspire us to strive for a brighter, united future. Long live Pakistan!<span>"</span></p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>