forked from mounikasomisetty/StudentKit2015
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
424 lines (365 loc) · 15 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
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link rel="stylesheet" href="css/headline.css"> <!-- Headline style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- <link rel="stylesheet" type="text/css" href="css/demosliderslit.css" /> -->
<link rel="stylesheet" type="text/css" href="css/photogrid.css" />
<link rel="stylesheet" type="text/css" href="css/sliderslit.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/b.css" />
<script type="text/javascript" src="js/modernizr.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<title>Student Kit!</title>
</head>
<body>
<main class="cd-main demo-2">
<section class="main">
<div id="ri-grid1" class="ri-grid ri-grid-size-3">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/1.jpg"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg"/></a></li>
<li><a href="#"><img src="images/medium/11.jpg"/></a></li>
<li><a href="#"><img src="images/medium/12.jpg"/></a></li>
<li><a href="#"><img src="images/medium/13.jpg"/></a></li>
<li><a href="#"><img src="images/medium/14.jpg"/></a></li>
<li><a href="#"><img src="images/medium/15.jpg"/></a></li>
<li><a href="#"><img src="images/medium/16.jpg"/></a></li>
<li><a href="#"><img src="images/medium/17.jpg"/></a></li>
<li><a href="#"><img src="images/medium/22.jpg"/></a></li>
<li><a href="#"><img src="images/medium/23.jpg"/></a></li>
<li><a href="#"><img src="images/medium/24.jpg"/></a></li>
<li><a href="#"><img src="images/medium/25.jpg"/></a></li>
<li><a href="#"><img src="images/medium/26.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/41.jpg"/></a></li>
<li><a href="#"><img src="images/medium/42.jpg"/></a></li>
<li><a href="#"><img src="images/medium/43.jpg"/></a></li>
<li><a href="#"><img src="images/medium/44.jpg"/></a></li>
<li><a href="#"><img src="images/medium/45.jpg"/></a></li>
<li><a href="#"><img src="images/medium/46.jpg"/></a></li>
<li><a href="#"><img src="images/medium/47.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/54.jpg"/></a></li>
</ul>
</div>
</section>
<header>
<h1 class="cd-headline letters scale">
<span>Welcome to </span>
<span class="cd-words-wrapper">
<!-- Add things we sincerely feel. :) -->
<b class="is-visible">exploring...</b>
<b>celebrating...</b>
<b>engineering...</b>
<b>coding...</b>
<b>research...</b>
<b>living...</b>
<b>IIIT-H!</b>
</span>
</h1>
<h2>Presenting the Student Kit '16, everything you need to make the transition</h2>
</header>
<section class="main">
<div id="ri-grid" class="ri-grid ri-grid-size-3">
<img class="ri-loading-image" src="images/loading.gif"/>
<ul>
<li><a href="#"><img src="images/medium/3.jpg"/></a></li>
<li><a href="#"><img src="images/medium/4.jpg"/></a></li>
<li><a href="#"><img src="images/medium/5.jpg"/></a></li>
<li><a href="#"><img src="images/medium/6.jpg"/></a></li>
<li><a href="#"><img src="images/medium/7.jpg"/></a></li>
<li><a href="#"><img src="images/medium/8.jpg"/></a></li>
<li><a href="#"><img src="images/medium/9.jpg"/></a></li>
<li><a href="#"><img src="images/medium/10.jpg"/></a></li>
<li><a href="#"><img src="images/medium/18.jpg"/></a></li>
<li><a href="#"><img src="images/medium/19.jpg"/></a></li>
<li><a href="#"><img src="images/medium/20.jpg"/></a></li>
<li><a href="#"><img src="images/medium/21.jpg"/></a></li>
<li><a href="#"><img src="images/medium/27.jpg"/></a></li>
<li><a href="#"><img src="images/medium/28.jpg"/></a></li>
<li><a href="#"><img src="images/medium/29.jpg"/></a></li>
<li><a href="#"><img src="images/medium/30.jpg"/></a></li>
<li><a href="#"><img src="images/medium/31.jpg"/></a></li>
<li><a href="#"><img src="images/medium/32.jpg"/></a></li>
<li><a href="#"><img src="images/medium/33.jpg"/></a></li>
<li><a href="#"><img src="images/medium/34.jpg"/></a></li>
<li><a href="#"><img src="images/medium/35.jpg"/></a></li>
<li><a href="#"><img src="images/medium/36.jpg"/></a></li>
<li><a href="#"><img src="images/medium/37.jpg"/></a></li>
<li><a href="#"><img src="images/medium/38.jpg"/></a></li>
<li><a href="#"><img src="images/medium/39.jpg"/></a></li>
<li><a href="#"><img src="images/medium/40.jpg"/></a></li>
<li><a href="#"><img src="images/medium/48.jpg"/></a></li>
<li><a href="#"><img src="images/medium/49.jpg"/></a></li>
<li><a href="#"><img src="images/medium/50.jpg"/></a></li>
<li><a href="#"><img src="images/medium/51.jpg"/></a></li>
<li><a href="#"><img src="images/medium/52.jpg"/></a></li>
<li><a href="#"><img src="images/medium/53.jpg"/></a></li>
</ul>
</div>
</section>
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2 >Life @ IIIT Hyderabad</h2>
<blockquote><p style="color:white; background-color: #b2b2b2; background-color: rgba(0, 0, 0, .4); padding: 30px;">IIIT Hyderabad is a university that provides the quintessential college life. The college's curriculum is a perfect blend of core courses and non-technical courses, designed to provide complete college learning and a platform to build our lives on, in the future.</p></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2>Academics</h2>
<blockquote><p style="color:white; background-color: #b2b2b2; background-color: rgba(0, 0, 0, .4); padding: 30px;">IIIT Hyderabad has made a mark in various spheres of society, be it through groundbreaking research or the achievements by its alumni, all because of its high academic standard. While the college does provide its students with an excellent and balanced academic environment, it also expects a fairly responsible behavior from them.</p></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2>Campus</h2>
<blockquote><p style="color:white; background-color: #b2b2b2; background-color: rgba(0, 0, 0, .4); padding: 30px;">The campus is spread over a sprawling area of 62 acres. There are four buildings that house the corporate schools and research centers. In addition to this, the academic building has lecture halls, tutorial rooms, computer and electronics labs and offices for the administration and faculty. The buildings are named after the mountain ranges - Nilgiri, Vindhya and Himalaya.</p></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2>Clubs</h2>
<blockquote><p style="color:white; background-color: #b2b2b2; background-color: rgba(0, 0, 0, .4); padding: 30px;">IIIT Hyderabad is a small but diverse community and it's not very difficult to find people who share the same interests as yours. Therefore, there are a number of small clubs formed by enthusiasts who are passionate about the same things. We have clubs ranging from Dance, Quizzing, Literary and Design to Finance, Programming and Open Source Development, all of which hold regular meetings and activities. And the best part is that if you want you can start your own clubs.</p></blockquote>
</div>
</div>
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2>Hostels</h2>
<blockquote><p style="color:white; background-color: #b2b2b2; background-color: rgba(0, 0, 0, .4); padding: 30px;">Here at IIIT, we have 5 hostels Palash Nivas (OBH), Kadamba Nivas (NBH), Bakul for the boys, Parijat Nivas (GH) and Parul for the girls. The rooms are quite spacious. The hostels also have facilities like washing machines on each floor. There are multiple TV rooms for the usage of students at any time - specially during cricket season!</p></blockquote>
</div>
</div>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current">Life @ IIIT Hyderabad</span>
<span>Academics</span>
<span>Campus</span>
<span>Clubs</span>
<span>Hostel</span>
</nav>
</div><!-- /slider-wrapper -->
<ul class="cd-gallery">
<li class="cd-item">
<a href="slc.html">
<div>
<h2 style="color: beige;">Letter from the Chair - Students Life Committee</h2>
<p style="color: aliceblue;">A little introduction to the Kit</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="docs.html">
<div>
<h2>Documents and Items Required</h2>
<p></p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="director.html">
<div>
<h2>Letter from Director</h2>
<p></p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="schedule.html">
<div>
<h2>Induction Schedule</h2>
<p>Our plan to make your first three weeks here awesome!</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="letter-apex.html">
<div>
<h2 style="color: beige;">Letter from the Apex Body</h2>
<p style="color: aliceblue;">Our welcome to you!</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="echoes.html">
<div>
<h2>Echoes</h2>
<p>College Experiences of some of your seniors</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="hotels.html">
<div>
<h2 style="color: beige;">Hotels Near IIIT-H</h2>
<p></p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="reach-iiit.html">
<div>
<h2>How to Reach IIIT-H</h2>
<p></p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="places-to-visit.html">
<div>
<h2>Places to Visit</h2>
<p>Go out and explore Hyderabad!</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="informal.html">
<div>
<h2>Informal Brochure</h2>
<p>An introduction to IIIT-H!</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="gallery.html">
<div>
<h2 style="color: beige;">Photo Gallery</h2>
<p style="color: aliceblue;"> You'll be making memories :)</p>
<b>View More</b>
</div>
</a>
</li>
<li class="cd-item">
<a href="like-it.html">
<div>
<h2>Did you like this kit?</h2>
</div>
</a>
</li>
</ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->
<div class="cd-folding-panel">
<div class="fold-left"></div> <!-- this is the left fold -->
<div class="fold-right"></div> <!-- this is the right fold -->
<div class="cd-fold-content">
<!-- content will be loaded using javascript -->
</div>
<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->
<script src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 3,
columns : 10,
animType : 'fadeInOut',
animSpeed : 4000,
interval : 600,
step : 1,
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 4
},
onhover : true
} );
$( '#ri-grid1' ).gridrotator( {
rows : 2,
columns : 10,
animType : 'fadeInOut',
animSpeed : 4000,
interval : 600,
step : 1,
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 4
},
onhover : true
} );
});
</script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
/**
* Notes:
*
* example how to add items:
*/
/*
var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
// call the plugin's add method
ss.add($items);
*/
});
</script>
</body>
</html>