-
Notifications
You must be signed in to change notification settings - Fork 10
/
speakers.html
316 lines (303 loc) · 15.9 KB
/
speakers.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPEAKERS | TEDxMITAOE</title>
<meta name="description" content="TEDxMITAOE Official Website speaker page">
<meta name="keywords" content="TEDxMITAOE, TEDx MITAOE, TEDx, MITAOE, TED, TEDxTalks, Speaker">
<meta name="author" content="Web Team TEDxMITAOE">
<!-- Site Icons -->
<link rel="apple-touch-icon" href="assets/favicon/tedx_favicon_white.png" type="image/png">
<link rel="icon" href="assets/favicon/tedx_favicon_white.png" type="image/png">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="css/speaker.min.css">
<!-- Global site tag (gtag.min.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8B8L4R2LFQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-8B8L4R2LFQ');
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark mt-3">
<div class="container">
<a class="navbar-brand" style="line-height: 0.42; font-family: Helvetica, sans-serif;" href="index.html">
<div style="font-size: 21.5px;display: flex;flex-direction: row;align-items: baseline;">
<font style="color: red; font-weight: 800;display: flex;flex-direction: row;align-items: flex-end;">
TED<sup>x</sup>
</font>MITAOE
</div><br>
<div style="font-size: 6.8px;">
<font style="color: red;">x</font> = independently organised TED event
</div>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#tedx"
aria-controls="tedx" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" onclick="toggleNavBar();"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="tedx">
<ul class="navbar-nav mt-2">
<li>
<div class="nav-item">
<a class="nav-link" href="about.html">
<div>ABOUT EVENT</div>
<div class="nav-animation">ABOUT EVENT</div>
</a>
</div>
</li>
<li>
<div class="nav-item">
<a class="nav-link" href="speakers.html" style="color: red; font-weight: 900;">
<div>SPEAKERS</div>
<div class="nav-animation">SPEAKERS</div>
</a>
</div>
</li>
<li>
<div class="nav-item">
<a class="nav-link" href="sponsors.html">
<div>SPONSORS</div>
<div class="nav-animation">SPONSORS</div>
</a>
</div>
</li>
<li>
<div class="nav-item">
<a class="nav-link" href="team.html">
<div>MEET THE TEAM</div>
<div class="nav-animation">MEET THE TEAM</div>
</a>
</div>
</li>
<li>
<div class="nav-item">
<a class="nav-link" href="previous.html">
<div>PREVIOUS EVENTS</div>
<div class="nav-animation">PREVIOUS EVENTS</div>
</a>
</div>
</li>
<li>
<div class="nav-item">
<a class="nav-link" href="contact.html">
<div>CONTACT US</div>
<div class="nav-animation">CONTACT US</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<section id="mobile">
<div class="cards-wrapper">
<div class="card speaker-img-wrapper" onclick="displaySpeaker(1);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/sonalee_kulkarni.jpg"></div>
<div class="card speaker-img-wrapper" onclick="displaySpeaker(2);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/harsh_and_prachi.jpg"></div>
<div class="card speaker-img-wrapper" onclick="displaySpeaker(3);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/abhishek_kar.jpg"></div>
<div class="card speaker-img-wrapper" onclick="displaySpeaker(4);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/abhay_jere.jpg"></div>
<div class="card speaker-img-wrapper" onclick="displaySpeaker(5);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/vaishnavi_bhujbal.jpg"></div>
<div class="card speaker-img-wrapper" onclick="displaySpeaker(6);stopAutoChangeSpeaker();"><img
class="speaker-img" src="assets/images/speakers/dr_shabbir_indorewala.jpg"></div>
<!-- <div class="card speaker-img-wrapper" onclick="displaySpeaker(7);stopAutoChangeSpeaker();"><img class="speaker-img" src="assets/images/user.png"></div> -->
<!-- <div class="card speaker-img-wrapper" onclick="displaySpeaker(8);stopAutoChangeSpeaker();"><img class="speaker-img" src="assets/images/user.png"></div> -->
</div>
<div class="mobile-shadow-left"></div>
<div class="mobile-shadow-right"></div>
</section>
<section>
<div class="container">
<div class="row" style="margin-top: 3rem;">
<div class="col-lg-3" style="padding:0px; margin-top: 5%;" id="desktop">
<div class="row">
<div class="speaker-container" onclick="displaySpeaker(1);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img"
src="assets/images/speakers/sonalee_kulkarni.jpg"></div>
<div class="speaker-name">Sonalee Kulkarni</div>
</div>
<div class="speaker-container" onclick="displaySpeaker(2);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img"
src="assets/images/speakers/harsh_and_prachi.jpg">
</div>
<div class="speaker-name">Harsh & Prachi </div>
</div>
</div>
<div class="row">
<div class="speaker-container" onclick="displaySpeaker(3);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img" src="assets/images/speakers/abhishek_kar.jpg">
</div>
<div class="speaker-name">Abhishek Kar</div>
</div>
<div class="speaker-container" onclick="displaySpeaker(4);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img" src="assets/images/speakers/abhay_jere.jpg">
</div>
<div class="speaker-name">Abhay Jere</div>
</div>
</div>
<div class="row">
<div class="speaker-container" onclick="displaySpeaker(5);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img"
src="assets/images/speakers/vaishnavi_bhujbal.jpg"></div>
<div class="speaker-name">Vaishnavi Bhujbal</div>
</div>
<div class="speaker-container" onclick="displaySpeaker(6);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img"
src="assets/images/speakers/dr_shabbir_indorewala.jpg"></div>
<div class="speaker-name">Shabbir Indorewala</div>
</div>
</div>
<div class="row" style="display: none;">
<div class="speaker-container-center">
<div class="speaker-img-wrapper"><img class="speaker-img" src="assets/images/user.png"></div>
<div class="speaker-name">Coming Soon</div>
</div>
<!-- <div class="speaker-container" onclick="displaySpeaker(8);stopAutoChangeSpeaker();">
<div class="speaker-img-wrapper"><img class="speaker-img" src="assets/images/user.png"></div>
<div class="speaker-name">Coming Soon</div>
</div> -->
</div>
</div>
<img class="Xsymbol" src="assets/images/index/xsymbol.png">
<a href="index.html" class="back-botton">
<div class="back-symbol"><
</div>
<div class="back-word">BACK</div>
</a>
<div class="col-lg-7" style="margin-top:4.5%;">
<div id="1" class="speaker-card-active">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/sonalee_kulkarni.jpg"></div>
<div class="speaker-card-name">Sonalee Kulkarni</div>
</div>
<div class="speaker-card-info">
A critically acclaimed actress and an absolutely enchanting dancer, our honorable speaker “Sonalee
Kulkarni”, needs no introduction. After pursuing conventional education for a while, she realized her
passion for acting and started her career as a model. Featured in more than 25 films in Marathi, her
contribution in the upliftment of regional cinema is commendable, she has also starred in various Hindi
films and her television characters were widely popular. She’ll be sharing her perspective on retaining
her authenticity and legacy.
</div>
</div>
<div id="2" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/harsh_and_prachi.jpg"></div>
<div class="speaker-card-name">Harsh & Prachi</div>
</div>
<div class="speaker-card-info">
Harsh and Prachi are full-time travel content creators & digital marketing entrepreneurs. They are
travellers and avid explorers, on a mission to embrace various cultures across the globe. They embarked on
their journey to explore the world in January 2021, and within 11 months they’ve already covered 2
countries & 15 Indian states so far. These college sweethearts have been infusing their lives with zest.
They live by their motto ‘Go after your dreams, no matter how big, and seize each day’s potential to the
fullest’.
</div>
</div>
<div id="3" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/abhishek_kar.jpg"></div>
<div class="speaker-card-name">Abhishek Kar</div>
</div>
<div class="speaker-card-info">
Abhishek Kar is an investor, entrepreneur, trader, and consultant. He is also an author, podcaster, and
YouTuber. He frequently writes for business magazines. He is one of the most followed writers globally on
the subject of financial markets and stock markets on Quora. Helping incredibly motivated individuals set
up empires of their own is what the youngest management coach, Abhishek Kar does. Imbibed with a firm
belief that 'merely existing is not living', he has been working hard to prove that nothing is impossible.
</div>
</div>
<div id="4" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/abhay_jere.jpg"></div>
<div class="speaker-card-name">Abhay Jere</div>
</div>
<div class="speaker-card-info">
Abhay Jere is Chief Innovation Officer at the Ministry of Education. He is building Innovation and
Entrepreneurship in the Education Institution. He aspires to create an educational atmosphere in which
thoughts are not constrained by classroom boundaries and generate really disruptive or out-of-the-box
ideas. Due to the rote learning system, we don’t have a culture to appreciate or promote new ideas. Due to
this we have knowingly or unknowingly killed the creativity of students and the ability to think out of
the box. His talk is a step towards reinventing academia with innovative minds and transcending the
four-walled barrier to unlock limitless out-of -the-box thinking.
</div>
</div>
<div id="5" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/vaishnavi_bhujbal.jpg"></div>
<div class="speaker-card-name">Vaishnavi Bhujbal</div>
</div>
<div class="speaker-card-info">
Vaishnavi Bhujbal is a boxer, kickboxer, and traveller. She cycled around the Golden Quadrilateral (around
4500 km) at just 18 years of age. She earned the title of World Champion in 2019, after she bagged a gold
in the kickboxing championship held in Russia. She has been practising the sport since she was 8, which
means a lot of injuries, both mental and physical, from a young age. From sustaining those injuries, to
have healed from them and emerge as a World Champion is an extraordinarily impressive feat. She will be
sharing her notions on “Pedalling My Way to Freedom”.
</div>
</div>
<div id="6" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/speakers/dr_shabbir_indorewala.jpg"></div>
<div class="speaker-card-name">Shabbir Indorewala</div>
</div>
<div class="speaker-card-info">
Dr. Shabbir is a veteran Medical Practitioner, an Otolaryngologist, and ENT connoisseur. He has over 39
years of experience as an ENT specialist, with degrees of MS ENT, DORL, MB BOM. Dr. Shabbir is clinically
interested in Cochlear Implant Surgery treatments. The talk will be based on the new method of surgery
that he pioneered and earned a patent for, a new advancement in the field of ENT: ‘Stitchless Surgery’.
</div>
</div>
<div id="7" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/user.png"></div>
<div class="speaker-card-name">Coming Soon</div>
</div>
<div class="speaker-card-info">
..
</div>
</div>
<!-- <div id="8" class="speaker-card">
<div class="speaker-card-title">
<div class="speaker-card-img"><img src="assets/images/user.png"></div>
<div class="speaker-card-name">Coming Soon</div>
</div>
<div class="speaker-card-info">
..
</div>
</div> -->
</div>
</div>
</div>
</section>
<div class="bottom-shadow"></div>
<!-- Script Files -->
<script src="css/bootstrap/js/bootstrap.min.js"></script>
<script src="js/scripts.min.js"></script>
<script>
let PreviousSpeakerCardIndex = 1;
function displaySpeaker(SpeakerId) {
let element = document.getElementById(PreviousSpeakerCardIndex);
element.classList.replace("speaker-card-active", "speaker-card");
element = document.getElementById(SpeakerId);
element.classList.replace("speaker-card", "speaker-card-active");
PreviousSpeakerCardIndex = SpeakerId;
}
let autoChangeVar;
function autoChangeSpeaker() {
autoChangeVar = setInterval(function () { if (PreviousSpeakerCardIndex >= 6) { displaySpeaker(1); } else { displaySpeaker(PreviousSpeakerCardIndex + 1); } }, 3000);
}
function stopAutoChangeSpeaker() {
clearInterval(autoChangeVar);
}
window.onload = autoChangeSpeaker();
</script>
</body>
</html>