-
Notifications
You must be signed in to change notification settings - Fork 23
/
year20.html
202 lines (190 loc) · 9.85 KB
/
year20.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Activities(2020)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="year21.css">
<link rel="shortcut icon" href="img1/favicon-16x16.png" type="image/x-icon">
<style>
/* width */
::-webkit-scrollbar {
width: 18px;
cursor: pointer;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white;
}
</style>
</head>
<body>
<section>
<nav class="navbar navbar-expand-custom navbar-mainbg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi-list ham1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<div class="hori-selector">
<div class="left"></div>
<div class="right"></div>
</div>
<li class="nav-item ">
<a class="nav-link" href="index.html"> <i class="bi-house"></i>Home</a>
</li>
<li class="nav-item itemabout">
<a class="nav-link" href="index.html#about"><i class="bi-person"></i>About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="yearwise.html"><i class="bi-card-checklist"></i>Activities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html"><i class="bi bi-images"></i>Gallery</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="mentor.html"><i class="bi-people"></i>Mentor</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="all_teams.html"><i class="bi-people"></i>Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="alumini.html"><i class="bi-people"></i>Alumini</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contactus"><i class="bi-telephone-inbound"></i>Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<section id="about" class="about section-bg">
<div class="container" data-aos="fade-up">
<div class="about-us">
<h1>20<span id="year" id="E120">20</span></h1>
<br><br>
<!-- <h3>Who We Are</h3> -->
<!-- <p>Established in September of 2017, the JIIT-OSA Student Chapter is Jaypee Institute of Information Technology’s only internationally recognised scientific body. We are a group of science enthusiasts that are hungry for impact. We conduct workshops on the latest skills in STEM, go for industry visits, compete in hackathons, do some research and attend international conferences.</p> -->
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<img src="img1/3.png" class="img-fluid image-stl" alt="">
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" id="E220" data-aos="fade-up" data-aos-delay="100">
<h2>JSCOP 3</h2>
<!-- <h4></h4> -->
<p class="fst-italic">
JIIT OPTICA STUDENT CHAPTER organizes one of the most prestigious events of the college, JSCOP that captures not only the much saught after coding competitiveness among the students but also brings out the scientists among all of us, with its powerful webinars and workshops on optics, photonics and ever evolving technology.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="100">
<h2>Spectrum</h2>
<h4>(May 1st 2020)</h4>
<p class="fst-italic">
JIIT OPTICA STUDENT CHAPTER, the only known for its multitude of competitions and events ranging from academic to non-academic fortes and fields, conducts online scientific photography contest, uniquely termed “SPECTRUM”. This competition awakens the inner Jimmy Nelson from within all of us and help students find the eye for the spark in the nature and share it with our target audience. Photography events not only pushes the already skilled photographers of the youth but also incentivises the amateurs and the first-timers to step out of their comfort zones and conquer fields which are not their fortes.
</p>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="80">
<img loading="lazy" src="img1/aperture_optimized.jpg" class="img-fluid image-stl" alt="">
</div>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<img loading="lazy" src="img1/pslogo.jpg" class="img-fluid image-stl" alt="">
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" id="E320" data-aos="fade-up" data-aos-delay="100">
<h2>Photoshop Workshop</h2>
<!-- <h4>Date</h4> -->
<p class="fst-italic">
Photoshop has become such a huge part of modern culture that even those who have never used it have often heard of it. This one-day Photoshop workshop organized by JIIT OPTICA STUDENT CHAPTER taught the skills needed to successfully use Photoshop for both online and print imagery.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" id="E420" data-aos="fade-up" data-aos-delay="100">
<h2>Web Development Workshop</h2>
<!-- <h4>Date</h4> -->
<p class="fst-italic">
Creativity can be represented in various ways and designing is one of the way. OPTICA JIIT Chapter is known for organizing various events and workshops. Students got hands on experience with the web development workshop which was conducted with great enthusiasm. The workshop was not just about presenting your creativity and ideas but also about your skillset. The workshop also gave the participants an idea about managing limited resources and impressing the clients.
</p>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="80">
<img loading="lazy" src="img1/webdev.jpg" class="img-fluid image-stl" alt="">
</div>
</div><br><br>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
// ---------Responsive-navbar-active-animation-----------
console.log("hi");
function test() {
var tabsNewAnim = $("#navbarSupportedContent");
var selectorNewAnim = $("#navbarSupportedContent").find("li").length;
var activeItemNewAnim = tabsNewAnim.find(".active");
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
top: itemPosNewAnimTop.top + "px",
left: itemPosNewAnimLeft.left + "px",
height: activeWidthNewAnimHeight + "px",
width: activeWidthNewAnimWidth + "px",
});
$("#navbarSupportedContent").on("click", "li", function (e) {
$("#navbarSupportedContent ul li").removeClass("active");
$(this).addClass("active");
var activeWidthNewAnimHeight = $(this).innerHeight();
var activeWidthNewAnimWidth = $(this).innerWidth();
var itemPosNewAnimTop = $(this).position();
var itemPosNewAnimLeft = $(this).position();
$(".hori-selector").css({
top: itemPosNewAnimTop.top + "px",
left: itemPosNewAnimLeft.left + "px",
height: activeWidthNewAnimHeight + "px",
width: activeWidthNewAnimWidth + "px",
});
});
}
$(document).ready(function () {
setTimeout(function () {
test();
});
});
$(window).on("resize", function () {
setTimeout(function () {
test();
}, 500);
});
$(".navbar-toggler").click(function () {
setTimeout(function () {
test();
});
});
window.onload = function () {
Particles.init({
selector: ".background",
});
};
</script>
</body>
</html>