-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
345 lines (332 loc) · 17.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-5TGCTEDPQF"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-5TGCTEDPQF");
</script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="google-site-verification"
content="Fs0qOWmjaDSNMPwBDPv7qCgaRcqI3tLF3O0UN6Ckmc0"
/>
<!-- Favicon -->
<link
rel="shortcut icon"
href="./assets/images/logo.svg"
type="image/x-icon"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/styles.min.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>TEDx Farook College</title>
</head>
<body>
<!-- ============================= Intro Animation ============================= -->
<div class="intro-animation">
<h1>X</h1>
</div>
<div class="mains">
<main>
<div id="home"></div>
<div class="nav">
<div id="toggle"></div>
<div id="sidebar">
<ul>
<div class="sidebar_logo">
<img
src="./assets/images/logo.svg"
width="200"
alt="TEDx Logo"
/>
</div>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./speakers.html">Speakers</a></li>
<li><a href="./sponsors.html">Sponsors</a></li>
<li><a href="./season1.html" class = "s1">Season 1</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-logo">
<img src="./assets/images/logo.svg" alt="TEDx Logo" />
</div>
<div class="nav-links">
<a href="./index.html" class="active">Home</a>
<a href="./about.html">About</a>
<a href="./speakers.html">Speakers</a>
<!-- <a href="#">Gallery</a> -->
<a href="./sponsors.html">Sponsors</a>
<a href="./season1.html" class = "s1">Season 1</a>
<a href="./contact.html">Contact</a>
</div>
</div>
<!-- ============================= Hero Section Start ============================= -->
<div class="main-content">
<div class="image-container">
<img id="responsive-image" src="assets/images/Webp images/DesktopRatio.webp" alt="Responsive Image" class="responsive-image">
</div>
</div>
<!-- ============================= Hero Section End ============================= -->
<!-- ============================= Tabs Section Start ============================= -->
<div class="container">
<div class="section-sub container-index">
</div>
<!-- ============================= Tab Section Start ============================= -->
<div class="tabs">
<div class="tab__sidebar">
<button class="tab__button tab__button--active" data-for-tab="1">
TED
</button>
<button class="tab__button" data-for-tab="2">TEDx</button>
<button class="tab__button" data-for-tab="3">
TEDx Farook College
</button>
</div>
<div class="tab__content tab__content--active" data-tab="1">
<p>
TED is a nonprofit devoted to spreading ideas, usually in the
form of short, powerful talks. TED stands for technology,
entertainment, and design. TED's main aim is to inform and
educate global audiences in an accessible way. Through TED, many
thinkers, creators, designers, artists, and other experts get to
showcase their talents and "ideas worth spreading" to the world.
Novel and valuable information / knowledge are exhibited by
masterminds. TED has innumerable followers and is viewed by more
than 3 billion enthusiasts annually. TED makes an impact by
generating and sharing knowledge that matters.
</p>
</div>
<div class="tab__content" data-tab="2">
<p>
TEDx is a grassroots initiative, created in the spirit of TED's
overall mission to research and discover “ideas worth
spreading”. TEDx brings the spirit of TED to local communities
around the globe through TEDx events. TEDx makes ideas
accessible to students, through which a more thoughtful student
community is created. Such a platform inspires learning minds to
explore knowledge beyond their text books and classrooms and
expand into the future with more open minds.
</p>
</div>
<div class="tab__content" data-tab="3">
<p>
TEDx Farook College is an independently organised TED event that
aims to simultaneously be a solace and a source of information
to the thinkers and knowledge gatherers of Malabar. Farook
College is a hub of educational institutions, an apt venue for
such an event to reach the best of audiences. TEDxFarookCollege
is the first independent TED event hosted by an Arts and Science
college in Malabar and hopes to be a source of inspiration for
students all over Kerala to host and attend similar events in
the future (avenir). A futuristic approach towards information
is essential to attain progress in one's academic and personal
life. This is the idea that guides the minds of the organisers
and team working behind the scenes of TEDxFarookCollege. It also
forms the theme for the event and its talks.
</p>
</div>
</div>
<!-- ============================= Tabs Section End ============================= -->
<div class="section-sub">
</div>
<!-- ============================= Event Section Start ============================= -->
<div class="event">
<h1>Why should you attend a TED event ?</h1>
<p>
Attending a TED event will be on everyone's bucket list and with
TEDx, you get a TED-like experience. If you are keen on listening
to mind-blowing ideas by talented speakers, TEDx is your way to
go!. The “ideas worth spreading” in TEDx events gives you a fresh
set of perspective. TEDx is a unique gathering of like-minded
people that can unleash ideas and inspiration for tomorrow.
</p>
</div>
<!-- ============================= Event Section End ============================= -->
<!-- ============================= Contact Section Start ============================= -->
<div class="contact-section">
<div class="section-sub contact-sub">
<img src="./assets/images/section_icon.svg" alt="icon" />
<h6>Connect with us</h6>
</div>
<div class="contact">
<div class="left-section">
<div class="content">
<h1>Contact us</h1>
<p>
Fill out our form, and we'll try to get back to you within 2
hours.
</p>
</div>
<div class="map">
<fieldset>
<legend>Farook College, Calicut</legend>
<a
href="https://goo.gl/maps/TZABj4g6k3A7YaYw6"
target="_blank"
>
<img
src="./assets/images/map.svg"
alt="Map of Farook College"
/>
</a>
</fieldset>
</div>
</div>
<div class="right-section">
<fieldset class="right-field">
<form
id="submit-form"
action="https://formsubmit.co/74f7ef5728eeb55f706a5bf1d459c450"
method="POST"
autocomplete="off"
target="_blank"
>
<fieldset>
<legend>Name</legend>
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
required
/>
</fieldset>
<fieldset>
<legend>E-Mail</legend>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
required
/>
</fieldset>
<fieldset>
<legend>Message</legend>
<textarea
name="message"
id="message"
cols="30"
rows="5"
placeholder="Enter your message"
required
></textarea>
</fieldset>
<div class="form-footer">
<a href="https://chat.whatsapp.com/LU2wm2RGOCA6krVD7YHEIE"
>Join us on WhatsApp</a
>
<button type="submit">Send</button>
</div>
</form>
</fieldset>
<a href="mailto:contacttedxfarook@gmail.com">
<fieldset class="contact-email">
<h4>contacttedxfarook@gmail.com</h4>
</fieldset>
</a>
</div>
</div>
</div>
<!-- ============================= Contact Section End ============================= -->
</div>
</main>
<!-- ============================= Footer Section Start ============================= -->
<footer class="footer-distributed">
<div class="footer-main">
<div class="footer-center">
<p class="footer-company-about">Social</p>
<div class="socials">
<a href="https://www.facebook.com/profile.php?id=100088249514455">
<svg
xmlns="https://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-facebook"
viewBox="0 0 16 16"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
/>
</svg>
</a>
<a href="https://twitter.com/TedxFarookClg">
<svg
xmlns="https://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-twitter"
viewBox="0 0 16 16"
>
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
/>
</svg>
</a>
<a href="https://www.instagram.com/tedx.farookcollege/">
<svg
xmlns="https://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-instagram"
viewBox="0 0 16 16"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
/>
</svg>
</a>
<a href="https://www.linkedin.com/company/tedxfarookcollege/">
<svg
xmlns="https://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-linkedin"
viewBox="0 0 16 16"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
/>
</svg>
</a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">Community</p>
<a href="https://chat.whatsapp.com/LU2wm2RGOCA6krVD7YHEIE">
<svg
xmlns="https://www.w3.org/2000/svg"
fill="currentColor"
class="bi bi-whatsapp"
viewBox="0 0 16 16"
>
<path
d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"
/>
</svg>
</a>
</div>
</div>
<div class="footer-credits">
<p>
© 2023 TEDx Farook College
</p>
</div>
</footer>
<!-- ============================= Footer Section End ============================= -->
</div>
</div>
<!-- AJAX -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="./assets/js/main.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>