forked from yuktabagdi/sac-revamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
myimprint.php
203 lines (189 loc) · 7.86 KB
/
myimprint.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>SAC</title>
<link rel="stylesheet" type="text/css" href="css/imprint.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<section class="section0">
<?php include'navbar.php' ?>
<header>
<div class="container-fluid img">
</div>
</header>
<section class="section-1">
<div class="container text-center">
<div class="row">
<div class="col-12">
<div class="panel text-left">
<h1 class="one text-center">MY IMPRINT</h1>
<div class="progress" style="height:0.4rem;">
<div id="one" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;" ></div>
</div>
<p class="pt-3 one">
Ever since its inception, IIT Kharagpur has given its students outstanding academic resources, a brand to
identify and reckon with, lasting friendships and countless memories over the years they have spent in its
colossal campus. And along the same lines, its alumni too have had a long and eventful history of giving
back to the institute for all it has done in making them what they are today. The My Imprint Class Gift
Programme is yet another chapter to be added to the legacy that the Alumni leave behind.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-1">
<div class="container text-center">
<div class="row">
<div class="col-12">
<div class="panel text-left">
<h1 class="one text-center">SENIOR CLASS GIFT</h1>
<div class="progress" style="height:0.4rem;">
<div id="one" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;" ></div>
</div>
<p class="pt-3 one">
Ever since its inception, IIT Kharagpur has given its students outstanding academic resources, a brand to
identify and reckon with, lasting friendships and countless memories over the years they have spent in its
colossal campus. And along the same lines, its alumni too have had a long and eventful history of giving
back to the institute for all it has done in making them what they are today. The My Imprint Class Gift
Programme is yet another chapter to be added to the legacy that the Alumni leave behind.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-2">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner container">
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<div class="panel text-center">
<h1 class="x">CLASS GIFT 2017</h1>
<div class="progress" style="height:0.4rem;">
<div id="three" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;"></div>
</div>
<div>
<img src="img/latest programs/cg17.jpg" class="img-fluid img-panel pt-3">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<div class="panel text-center">
<h1 class="x">CLASS GIFT 2016</h1>
<div class="progress" style="height:0.4rem;">
<div id="three" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;"></div>
</div>
<div>
<img src="img/latest programs/cg16.jpg" class="img-fluid img-panel pt-3">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<div class="panel text-center">
<h1 class="x">CLASS GIFT 2015</h1>
<div class="progress" style="height:0.4rem;">
<div id="three" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;"></div>
</div>
<div>
<img src="img/latest programs/CG15.jpg" class="img-fluid img-panel pt-3">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<div class="panel text-center">
<h1 class="x">CLASS GIFT 2014</h1>
<div class="progress" style="height:0.4rem;">
<div id="three" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="height:0.4rem;"></div>
</div>
<div>
<img src="img/latest programs/cg14.jpg" class="img-fluid img-panel pt-3">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<i class="fas fa-chevron-circle-left fa-2x"></i>
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<i class="fas fa-chevron-circle-right fa-2x"></i>
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<?php include'footer.php'?>
<?php include 'preloader.php' ?>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$( "#one,#two,#three,#four,#five,#six").each(function( ) {
$(this).addClass("progress-bar-purple");
});
gsap.from('.two', {
scrollTrigger: {
trigger: '.two',
toggleActions: "restart none none none"
},
opacity: 0,
duration: 1.5,
delay: 1.5,
x: 200
});
var arr = document.getElementsByClassName("x");
for (var i = 0; i < arr.length; i++) {
gsap.from(arr[i], {
scrollTrigger: {
trigger: arr[i],
toggleActions: "restart none none none"
},
opacity: 0,
duration: 1.5,
x: -200
});
}
var arr = document.getElementsByClassName(".img-panel");
for (var i = 0; i < arr.length; i++) {
gsap.from(arr[i], {
scrollTrigger: {
trigger: arr[i],
toggleActions: "restart none none none"
},
opacity: 0,
duration: 2
});
}
</script>
</body>
</html>