-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
432 lines (387 loc) · 31.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hall-Of-Hacks</title>
<link rel="icon" type="image/x-icon" href="./logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav x-data="{ isOpen: false }" class=" shadow bg-black/50 backdrop-blur-sm fixed top-0 left-0 w-screen z-50">
<div class="container px-6 py-4 mx-auto">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="flex items-center justify-between">
<a href="#" class="mx-auto to-top ">
<img class="w-auto h-10 sm:h-8" src="./logo.png" alt="">
</a>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button x-cloak @click="isOpen = !isOpen" type="button"
class=" text-gray-200 focus:outline-none " aria-label="toggle menu">
<svg x-show="!isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
</svg>
<svg x-show="isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div x-cloak
:class="[isOpen ? 'translate-x-0 translate-y-3 opacity-100 ' : 'opacity-0 -translate-x-full']"
class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-black/50 md:bg-transparent shadow-md lg:bg-transparent lg:shadow-none lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0">
<div class="-mx-4 lg:flex lg:items-center">
<a href="#roadmap" class="block mx-4 capitalize text-gray-200 hover:text-green-600 ">
Road Map</a>
<a href="#schedule"
class="block mx-4 mt-4 capitalize lg:mt-0 text-gray-200 hover:text-green-600 ">
Schedule</a>
<a href="#rules"
class="block mx-4 mt-4 capitalize lg:mt-0 text-gray-200 hover:text-green-600 ">
Rules</a>
<a href="#prizes"
class="block mx-4 mt-4 capitalize lg:mt-0 text-gray-200 hover:text-green-600 ">
Prizes</a>
<a href="#gallery"
class="block mx-4 mt-4 capitalize lg:mt-0 text-gray-200 hover:text-green-600 ">
Gallery</a>
</div>
</div>
</div>
</div>
</nav>
<div class="w-full bg-center bg-cover h-screen" style="background-image: url('./background.png');"
id="parallax-trigger-1">
<div class="flex items-center justify-center w-full h-full bg-gray-900/40">
<div id="parallax-1" class="text-center backdrop-blur-sm py-2 px-5 bg-black/20 rounded">
<h1 class="text-3xl font-bold text-white lg:text-5xl">Hall <span class="text-green-500">of</span>
Hacks</h1>
<p class=" text-white text-lg lg:max-w-[500px] my-7">
Embark on an epic journey at the Hall of Hacks, where tech enthusiasts unite to wield their
coding prowess! IIIT Sri City extends a special invitation to you to gather your allies and
prepare for challenges inspired by legends of old.
</p>
<a href="https://unstop.com/hackathons/hall-of-hacks-abhisarga24-indian-institute-of-information-technology-iiit-sri-city-897441"
target="_blank" rel="noopener noreferrer">
<button
class="w-full px-5 py-2 mt-4 text-sm font-medium text-white capitalize duration-300 transform bg-green-700 rounded-md lg:w-auto hover:bg-green-800 transition focus:outline-none hover:scale-110">
Register Now
</button>
</a>
</div>
</div>
</div>
</header>
<section id="roadmap" class=" h-0">s</section>
<div id="roadmap0" class="my-10 ">
<div id="roadmap1" class="my-10">
<div id="roadmap2"></div>
</div>
</div>
<section id="schedule" class="bg-gray-900 my-7 text-gray-100 relative">
<div
class="h-full w-full absolute backdrop-blur z-30 top-0 left-0 flex items-center text-center justify-center">
<span class=" text-3xl font-medium">Schedule Will Be Revealed Later!</span>
</div>
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div
class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-green-500">
<h3 class="text-3xl font-semibold">Wait for the</h3>
<span class="text-sm font-bold tracki uppercase text-gray-400">God Of Knowledge</span>
</div>
</div>
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
<div
class=" relative px-4 col-span-8 space-y-8 before:absolute before:top-2 before:bottom-0 before:w-0.5 before:-left-3 before:bg-gray-700">
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl font-semibold tracki">You are adviced to wait patiently</h3>
<time class="text-xs tracki uppercase text-gray-400">Mar 02</time>
<p class="mt-3">Trying to be smart, huh???? You won't gain anything from inspecting elements
</p>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl font-semibold tracki">You are adviced to wait patiently</h3>
<time class="text-xs tracki uppercase text-gray-400">Mar 03</time>
<p class="mt-3">Trying to be smart, huh???? You won't gain anything from inspecting elements
</p>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl font-semibold tracki">You are adviced to wait patiently</h3>
<time class="text-xs tracki uppercase text-gray-400">Mar 03</time>
<p class="mt-3">Trying to be smart, huh???? You won't gain anything from inspecting elements
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="rules" class="bg-gray-900 my-7 text-gray-100">
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div
class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-green-500">
<h3 class="text-3xl font-semibold">Rules</h3>
<span class="text-sm font-bold tracki uppercase text-gray-400">Of Valhalla</span>
</div>
</div>
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
<div
class=" relative px-4 col-span-8 space-y-8 before:absolute before:top-2 before:bottom-0 before:w-0.5 before:-left-3 before:bg-gray-700">
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki">
<span class=" font-medium">
Original Work:
</span>
All submissions must be original
creations developed during
the hackathon.
</h3>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki">
<span class=" font-medium">Plagiarism </span>is strictly prohibited
</h3>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki"><span class=" font-medium">Team Size:</span> Teams must consist
of 3-5 members. No
solo entries are allowed.</h3>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki"><span class=" font-medium">Adherence to Theme:</span> Projects
must align with the
theme provided.</h3>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki"><span class=" font-medium">Submission Deadline:</span> Projects
must be submitted by
the specified deadline.</h3>
</div>
<div
class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-green-500">
<h3 class="text-xl tracki"><span class=" font-medium">Judging Criteria:</span> Projects will
be evaluated based
on creativity, technical
implementation, adherence to the theme, and presentation quality.</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="prizes" class="flex flex-col bg-gray-900 my-7 p-4 w-full text-white">
<h1 class=" text-5xl text-center font-semibold">PRIZES</h1>
<div class="flex xl:flex-row flex-col flex-wrap justify-around m-1">
<div
class="flex flex-col sm:w-screen justify-center items-center sm:flex-row sm:p-4 text-white rounded-xl">
<div class="flex flex-col min-w-52 sm:items-start sm:w-1/3 gap-2 px-2 py-5 w-full items-center">
<img src="13474.png" class="sm:px-3 object-contain max-w-[300px]" />
</div>
<div class=" mx-10 text-left">
<ul>
<li class="list-disc text-wrap p-0.5 text-xl">
25,000 INR FOR THE WINNING TEAM
</li>
<li class="list-disc text-wrap p-0.5 text-xl">
15,000 INR FOR THE RUNNERS UP
</li>
<li class="list-disc text-wrap p-0.5 text-xl">
CERTIFICATES & EXCITING GOODIES FOR ALL
</li>
<li class="list-disc text-wrap p-0.5 text-xl">
MORE CASH PRIZES & GOODIES...
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="gallery" class=" text-white bg-gray-900 my-7 py-4">
<h2 class="about-title text-5xl font-semibold my-7">
GALLERY
</h2>
<div class="about-image-main">
<img class=" rounded" src="image1.jpg" alt="image1">
</div>
<div class="about-container">
<div class="about-carousel-view">
<a id="about-prev-btn" class="about-prev-btn about-btn">
<svg viewBox="0 0 512 512" width="30" title="chevron-circle-left">
<path
d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
</svg>
</a>
<div id="about-item-list" class="about-item-list py-5">
<img class="about-item " src="image2.jpg" />
<img class="about-item " src="image3.jpg" />
<img class="about-item " src="image4.jpg" />
<img class="about-item " src="image5.png" />
<img class="about-item " src="image1.jpg" />
<img class="about-item " src="image2.jpg" />
<img class="about-item " src="image3.jpg" />
<img class="about-item " src="image4.jpg" />
<img class="about-item " src="image5.png" />
</div>
<a id="about-next-btn" class="about-next-btn about-btn">
<svg viewBox="0 0 512 512" width="30" title="chevron-circle-right">
<path
d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm113.9 231L234.4 103.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L285.1 256 183.5 357.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L369.9 273c9.4-9.4 9.4-24.6 0-34z" />
</svg>
</a>
</div>
</div>
</section>
<footer class=" bg-gray-900">
<div class="container px-6 py-8 mx-auto">
<div class=" flex flex-wrap items-center justify-around">
<div class=" flex md:w-2/6 md:flex-row flex-col justify-around items-center text-center md:my-0 my-5">
<div class="flex flex-col items-center">
<a href="#">
<img class="w-[70px]" src="./GDSCLogo.svg" alt="">
</a>
<p class="max-w-md mx-auto mt-4 text-gray-400">GDSC IIITS</p>
</div>
<div class="flex flex-col max-w-[70%] md:ms-5">
<div class=" text-sm text-white">
GDSC IIIT Sri City
is a non-profit developer group powered by Google Developers to learn, share, connect and
develop skills.
</div>
<a href="https://gdsc.community.dev/indian-institute-of-information-technology-sri-city/"
target="_blank" rel="noopener noreferrer">
<button
class=" px-5 py-2 mt-3 text-sm tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-md sm:w-auto hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Learn more
</button>
</a>
</div>
</div>
<div class=" flex md:w-2/6 md:flex-row flex-col justify-around items-center text-center md:my-0 my-5">
<div class="flex flex-col items-center">
<a href="#">
<img class="w-[70px]" src="./IOTA Circular.png" alt="">
</a>
<p class="max-w-md mx-auto mt-4 text-gray-400">IOTA IIITS</p>
</div>
<div class="flex flex-col max-w-[70%] md:ms-5">
<div class=" text-sm text-white">
IOTA is an
initiative taken by the students of IIITS to encourage and inculcate project and product
development culture within the students of the institute.
</div>
<a href="https://www.linkedin.com/company/iota-iiits/" target="_blank"
rel="noopener noreferrer">
<button
class=" px-5 py-2 mt-3 text-sm tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-md sm:w-auto hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Learn more
</button>
</a>
</div>
</div>
</div>
<hr class="my-10 border-gray-700" />
<div class="flex flex-col items-center sm:flex-row sm:justify-between">
<p class="text-sm text-gray-300">© Copyright 2021. All Rights Reserved.</p>
<div class="flex -mx-2 min-w-[200px] justify-between mt-5 sm:mt-0">
<section class="flex justify-center items-center">
<a href="https://www.linkedin.com/company/gdsc-iiits/" target="_blank"
rel="noopener noreferrer">
<button
class="group flex justify-center p-2 rounded-md drop-shadow-xl bg-[#0077b5] from-gray-800 text-white font-semibold sm:hover:translate-y-3 sm:hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.1em" viewBox="0 0 512 512"
stroke-width="0" fill="currentColor" stroke="currentColor" class="w-5 h-5">
<path
d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z">
</path>
</svg>
<span
class="absolute opacity-0 sm:group-hover:opacity-100 group-hover:text-gray-300 group-hover:text-sm group-hover:-translate-y-12 duration-700">
Linkedin GDSC
</span>
</button>
</a>
</section>
<section class="flex justify-center items-center">
<a href="https://www.linkedin.com/company/iota-iiits/" target="_blank"
rel="noopener noreferrer">
<button
class="group flex justify-center p-2 rounded-md drop-shadow-xl bg-[#0077b5] from-gray-800 text-white font-semibold sm:hover:translate-y-3 sm:hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.1em" viewBox="0 0 512 512"
stroke-width="0" fill="currentColor" stroke="currentColor" class="w-5 h-5">
<path
d="M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z">
</path>
</svg>
<span
class="absolute opacity-0 sm:group-hover:opacity-100 group-hover:text-gray-300 group-hover:text-sm group-hover:-translate-y-12 duration-700">
Linkedin IOTA
</span>
</button>
</a>
</section>
<section class="flex justify-center items-center">
<a href="https://www.instagram.com/gdsciiits?igsh=MTcxcTA4N2VxeHNicA==" target="_blank"
rel="noopener noreferrer">
<button
class="group flex justify-center p-2 rounded-md drop-shadow-xl from-gray-800 bg-[#bc2a8d] text-white font-semibold sm:hover:translate-y-3 sm:hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.2em" viewBox="0 0 24 24"
stroke-width="1" fill="currentColor" stroke="currentColor" class="w-5">
<path
d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z">
</path>
</svg>
<span
class="absolute opacity-0 sm:group-hover:opacity-100 group-hover:text-gray-300 group-hover:text-sm group-hover:-translate-y-12 duration-700">
Instagram GDSC
</span>
</button>
</a>
</section>
<section class="flex justify-center items-center">
<a href="https://www.instagram.com/iota_iiits?igsh=MWtsaXlzc3Rtdmd6Ng==" target="_blank"
rel="noopener noreferrer">
<button
class="group flex justify-center p-2 rounded-md drop-shadow-xl from-gray-800 bg-[#bc2a8d] text-white font-semibold sm:hover:translate-y-3 sm:hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.2em" viewBox="0 0 24 24"
stroke-width="1" fill="currentColor" stroke="currentColor" class="w-5">
<path
d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z">
</path>
</svg>
<span
class="absolute opacity-0 sm:group-hover:opacity-100 group-hover:text-gray-300 group-hover:text-sm group-hover:-translate-y-12 duration-700">
Instagram IOTA
</span>
</button>
</a>
</section>
</div>
</div>
</footer>
<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="./main.js"></script>
</body>
</html>