-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (311 loc) · 19.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VInnovateIT•Home</title>
<link rel="stylesheet" href="vinnovate.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css'>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<section class="zoom">
<header>
<a href="#" class="logo"><img style="width:5%;height:5%;" src="https://vinnovateit.com/img/VinnovateIT%20black.png"> VinnovateIT</a>
<ul class="navi-link">
<li><a href="#about">ABOUT</a></li>
<li><a href="#events">EVENTS</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</header>
<img src="mountain1.png" id="layer1"> <img src="mountain2.png" id="layer2"> <img src="text.png" id="text">
</section>
<div class="content">
<h1 id="about" data-aos="fade-right">ABOUT US</h1>
<div class="underline" data-aos="fade-right"></div>
<div class="spotlight container">
<div class="content" data-aos="fade-right" data-aos-offset="200" data-aos-duration="800">
<p style="font-size: 18px">VinnovateIT is an OFFICIAL innovation and incubation lab of SITE School. VinnovateIT is a one-stop destination from all digitally curious Homosapiens. We are a group of like-minded people looking for some technical trouble in life. Learning from our mistakes and those of others is our motto and nectar of innovation is our diet. Looking through problems as opportunities to learn and improve is what keeps us going. So be ready to immerse yourself in an technically interdependent ecosystem we call VinnovateIT</p>
</div>
<span class="image"><img src='https://ik.imagekit.io/xlbzk26wac/images/vinnovateit_EgCI8Dhlv.jpeg'></span>
</div>
<h1 id="events" data-aos="fade-right">EVENTS</h1>
<div class="underline" style="margin-bottom: 50px;" data-aos="fade-right"></div>
<div class="timeline">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), url(https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80); background-size: absolute; " data-year="Orientation">
<div class="swiper-slide-content">
<div class="row" style="height: 20px"></div>
<h2 data-aos="fade-left">Orientation Session</h2>
<p data-aos="fade-left" style="color: white; font-size: 20px; margin-top: 0px; margin-left: 0px; text-align: left; margin: auto; text-align: justify;text-justify: inter-word; z-index: 2">To let loose the tips and tricks and to get rid of all the dilemmas about this vast world of technology, the VinnovateIT orientation program for the 1st year students of Vellore Institute of Technology was organized on 4th August, 2017 at 4:00 PM at Shakespeare Gallery. In this orientation various topics like Internet of things, Data Science, App Development, Web Development, Software Design and many more were discussed.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(https://images.unsplash.com/photo-1480506132288-68f7705954bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=793&q=80);" data-year="VinHack">
<div class="swiper-slide-content">
<div class="row" style="height: 20px"></div>
<h2>VinHack</h2>
<p style="color: white; font-size: 20px; margin-top: 0px; margin-left: 0px; text-align: left; margin: auto; text-align: justify;text-justify: inter-word">Our hackathon focuses on social obstacles and problems. Each team will be asked to ponder over the given problem statements and develop ideas and implement them either through software or both software and hardware to solve the problem. The teams with the best ideas and implementations will win.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(https://images.unsplash.com/photo-1510733206332-dcd862288879?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);" data-year="Random">
<div class="swiper-slide-content">
<div class="row" style="height: 20px"></div>
<h2>New Event</h2>
<p style="color: white; font-size: 20px; word-spacing: 0.2em; margin-top: 0px; margin-left: 0px; text-align: left; margin: auto; text-align: justify;text-justify: inter-word ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut odio ullamcorper, consectetur eros at, auctor quam. Vestibulum id posuere elit, vitae tincidunt lorem. Vivamus pharetra urna ac turpis imperdiet dapibus. Nam ullamcorper mollis viverra. Nam tincidunt diam sit amet dolor lobortis imperdiet. Aenean in consectetur augue. Cras sed nisi at lectus vulputate luctus. Nullam tempor, enim eu porttitor tincidunt, massa lacus tincidunt eros, sit amet pharetra purus tellus ac libero.</p>
</div>
</div>
<div class="swiper-slide" style="background-image: url(https://images.unsplash.com/photo-1489376646075-cd00ac377106?ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80);" data-year="Another">
<div class="swiper-slide-content">
<div class="row" style="height: 20px"></div>
<h2>Another One</h2>
<p style="color: white; font-size: 20px; word-spacing: 0.2em; margin-top: 0px; margin-left: 0px; text-align: left;text-align: justify;text-justify: inter-word margin: auto; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut odio ullamcorper, consectetur eros at, auctor quam. Vestibulum id posuere elit, vitae tincidunt lorem. Vivamus pharetra urna ac turpis imperdiet dapibus. Nam ullamcorper mollis viverra. Nam tincidunt diam sit amet dolor lobortis imperdiet. Aenean in consectetur augue. Cras sed nisi at lectus vulputate luctus. Nullam tempor, enim eu porttitor tincidunt, massa lacus tincidunt eros, sit amet pharetra purus tellus ac libero.</p>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<h1 id="projects" data-aos="fade-right">PROJECTS</h1>
<div class="underline" data-aos="fade-right"></div>
<div class="container center-align" data-aos="fade-right" data-aos-delay="100" data-aos-duration="800" >
<h3>We work on
<span class="txt-rotate" data-period="2000" data-rotate='[ "App Development.", "Web Development.", "Internet of Things.", "Machine Learning.", "UI/UX." ]'></span>
</h3>
</div>
<div class="container">
<div class="row">
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="0" data-aos-duration="800">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1530825894095-9c184b068fcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1953&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">Real Time VR headsets<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">Real Time VR headsets<i class="material-icons right">close</i></span>
<p>This project is a novel method to gamify ECG output. Person wears a VR headset and ECG electrodes are attached to his chest. In headset, person can see imaginary objects in real world (like game Pokemon GO)</p>
</div>
</div>
</div>
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="100" data-aos-duration="1000">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">Motion based Security<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">Motion based Security<i class="material-icons right">close</i></span>
<p>The project aims at ensuring security using motion detector sensors and which triggers an action such as sending an SMS when motion is detected.</p>
</div>
</div>
</div>
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="200" data-aos-duration="1200">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1548292194-dcb53d80747d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">IOT based Smart Tap<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">IOT based Smart Tap<i class="material-icons right">close</i></span>
<p>The aim is to fabricate a prototype of a 'smart' tap that would turn off automatically when the liquid in a container underneath it reaches the desired level.</p>
</div>
</div>
</div>
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="0" data-aos-duration="800">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1586783698929-04ce7faf2c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">Pollution Monitoring System<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">Pollution Monitoring System<i class="material-icons right">close</i></span>
<p>A simple IOT based system to keep a track on the pollution levels through sensors for detecting CO2, NO2, CO, sulphurous gases, and other pollutants, measuring the atmospheric parameters like pressure, temperature, humidity, etc.</p>
</div>
</div>
</div>
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="100" data-aos-duration="1000">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1536520852411-dc4022e033f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">Cloud Based Car Parking System<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">Cloud Based Car Parking<i class="material-icons right">close</i></span>
<p>The idea was to plant a sensor based system in each parking cell to check whether it is empty or not. Corresponding data is then sent to cloud and data can be displayed collectively on the web app.</p>
</div>
</div>
</div>
<div class="col s12 m5 l3 offset-l1 offset-m1" data-aos="fade-up" data-aos-offset="200" data-aos-delay="0" data-aos-duration="1200">
<div class="card black">
<div class="card-image waves-effect waves-block waves-dark"> <img class="activator" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80"> </div>
<div class="card-content"> <span class="card-title activator white-text text-darken-4">Weather Detection and Prediction<i class="material-icons right">more_vert</i></span> </div>
<div class="card-reveal blue-grey darken-4"> <span class="card-title white-text text-darken-4">Weather Detectection<i class="material-icons right">close</i></span>
<p>A model that consists of a TEMPRATURE SENSOR, PIR SENSOR that will detect the temperature, humidity and pressure and would give a high value input to the Arduino was built.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="contact">
<div class="row valign-wrapper" style="margin-bottom: 0;">
<div class="col s12 l5" style="border-right: 3px solid white" data-aos="fade-right" data-aos-offset="200" data-aos-duration="800">
<h2 style="font-weight: 700;">Get in Touch</h2>
<p>We typically reply within 3 to 4 hours. Please be patient :)</p>
<p>You can also mail us at <strong>[email protected]</strong></p>
</div>
<div class="col s12 l5 offset-l2" data-aos="fade-left" data-aos-offset="200" data-aos-duration="800">
<form>
<div class="input-field">
<input type="text" id="name">
<label for="name">Your Name</label>
</div>
<div class="input-field">
<input type="email" id="email">
<label for="email">Your Email</label>
</div>
<div class="input-field">
<textarea id="message" class="materialize-textarea" cols="20" rows="20"></textarea>
<label for="message">Your Message</label>
</div>
<div class="input-field right">
<button class="btn red">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container center-align" data-aos="fade-up" >
<div class="center-align" style="position: relative; display: inline-block">
<h4 style="color: white;" >Check us out at:</h4>
<ul style="list-style-type: none;display: inline-block; margin-top: 15px">
<li><i class="fa fa-facebook fa-3x icon-3d"></i></li>
<li><i class="fa fa-github fa-3x icon-3d"></i></li>
<li><i class="fa fa-instagram fa-3x icon-3d"></i></li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript">
var layer1 = document.getElementById('layer1')
scroll = window.pageYOffset;
document.addEventListener('scroll', function(e) {
var offset = window.pageYOffset;
scroll = offset;
layer1.style.width = (100 + scroll / 5) + '%';
});
var layer2 = document.getElementById('layer2')
scroll = window.pageYOffset;
document.addEventListener('scroll', function(e) {
var offset = window.pageYOffset;
scroll = offset;
layer2.style.width = (100 + scroll / 5) + '%';
layer2.style.left = scroll / 50 + '%';
});
var text = document.getElementById('text')
scroll = window.pageYOffset;
document.addEventListener('scroll', function(e) {
var offset = window.pageYOffset;
scroll = offset;
text.style.bottom = scroll / 10 + '%';
});
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 320);
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navi-link');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
burger.classList.toggle('toggle');
});
}
navSlide();
</script>
<script type="text/javascript">
var TxtRotate = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtRotate.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if(this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
var that = this;
var delta = 300 - Math.random() * 100;
if(this.isDeleting) {
delta /= 2;
}
if(!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if(this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('txt-rotate');
for(var i = 0; i < elements.length; i++) {
var toRotate = elements[i].getAttribute('data-rotate');
var period = elements[i].getAttribute('data-period');
if(toRotate) {
new TxtRotate(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
document.body.appendChild(css);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="js/slider.jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js'></script>
<script src="js/function.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>