-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathevents.html
More file actions
276 lines (276 loc) · 19.8 KB
/
Copy pathevents.html
File metadata and controls
276 lines (276 loc) · 19.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research by Economics & Finance Society of Manipal</title>
<link rel="stylesheet" href="./output.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Italiana&family=Metrophobic&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Outfit:wght@100..900&family=Pixelify+Sans:wght@400..700&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 href="https://fonts.cdnfonts.com/css/niagara-solid" rel="stylesheet">
<link href="events-styling.css" rel="stylesheet" />
</head>
<body class="flex justify-center items-center flex-col">
<!--Navbar Starts-->
<div class="bg-black w-full h-[80px] flex justify-between items-center pcnav">
<img src="./assets/esom_logo_nobyline.png" class="h-[60px] w-[60px] ml-8" style="transform: scale(1.3)"/>
<ul class="text-[1.25rem] navbar-list list-none flex justify-center items-center font-Montserrat text-white mr-8">
<li class="navbar-gold"><a href='index.html'>Home</a></li>
<li class="navbar-gold ml-6"><a href='research.html'>Our Research</a></li>
<li class="navbar-gold ml-6"><a href='team.html'>Our Team</a></li>
<li class="navbar-gold ml-6"><a href='events.html'>Our Events</a></li>
<li class="navbar-gold ml-6"><a href='member.html'>Be a Member</a></li>
</ul>
</div>
<div class="bg-black w-full h-[80px] flex justify-between items-center phonenav">
<img src="./assets/esom_logo_nobyline.png" class="h-[60px] w-[60px] ml-8" style="transform: scale(1.3)"/>
<i id='toggleSidebar' class=" fa-solid mr16 cursor-pointer text-[2rem] fa-ellipsis-vertical text-white"></i>
</div>
<!--Navbar Ends-->
<!--Sidebar Starts (for Phone)-->
<div id="sidebar" class="max-w-full h-full text-darkblue sidebar flex flex-col justify-center iems-center">
<button id="closeSidebar" class="text-white absolute top-4 right-4">
<i class="fas fa-times"></i>
</button>
<ul class="font-bold top-20 flex flex-col items-center justify-center mt-40 px-4 text-white font-Montserrat underline gap-[50px]">
<li><a href="index.html">Home</a></li>
<li><a href="research.html">Our Research</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="events.html">Our Events</a></li>
<li><a href="member.html">Be A Member</a></li>
</ul>
<div class="mt-auto mb-16 items-center flex flex-col text-white">
<img src="./assets/esom_logo_nobyline.png" class="box150"/>
<div class="flex justify-center items-center">
<div class="flex cursor-pointer justify-center items-center icon-border-sb">
<i class="fa-brands fa-instagram rem14"></i>
</div>
<div class="ml4 flex cursor-pointer justify-center items-center icon-border-sb">
<i class="fa-brands fa-x-twitter rem14"></i>
</div>
<div class="ml4 flex cursor-pointer justify-center items-center icon-border-sb">
<i class="fa-brands fa-youtube rem14"></i>
</div>
</div>
</div>
</div>
<!--Sidebar Ends-->
<!--Most Recent Event Section Starts-->
<div class="w-full h-auto flex mt-8 flex-col justify-center items-center">
<h1 class="text-[4rem] font-bold font-Outfit text-black">Our Events</h1>
<h1 class="text-[2.5rem] font-bold font-Outfit text-black text-left w-[80%] mt-4">Our Latest Event</h1>
<div class="relative main-event h-[500px] w-[80%] mt-2">
<div class="absolute bottom-8 left-8">
<h1 class="text-white font-Montserrat font-bold text-[3rem]">
Event Name
</h1>
<h1 class="text-white font-Montserrat underline rem17">
January 2025
</h1>
</div>
</div>
<!--Most Recent Event Section Ends-->
<!--Upcoming Events Section Begins-->
<div class="w-full h-auto flex mt-8 flex-col justify-center items-center mb-8">
<h1 class="text-[2.5rem] font-bold font-Outfit text-black text-left w-[80%] mt-8">Upcoming Events</h1>
<div class="carousel-container-container">
<div class="carousel-container">
<button id='larrow' class="arrow left-arrow">◀</button>
<div class="carousel">
<div class="carousel-track">
<div class="card" id="triggerDiv">
<div class="card-image w-full h-[70%]">
<img src="./assets/esom_event_banner.png" class="object-cover"/>
</div>
<div class="card-info w-full h-[75%]">
<div class='flex justify-between items-center w-[80%] h-auto mt-4 justify-self-start ml48'>
<p class="font-Montserrat text-gray-400 full text-left text-[1.1rem]">Online | Free</p>
</div>
<div class="flex justify-center items-center w-[90%] h-auto">
<h1 class="font-Montserrat text-left text-black/80 w-[90%] font-bold text-[2rem]">Event Name</h1>
</div>
<div class="flex justify-between items-center mt-4 w-[90%] h-auto">
<div class="flex line w-[45%] justify-center items-center">
<i class="fa-regular fa-clock text-gray-400"></i>
<p class="ml-2 text-gray-400 text-[1rem] font-Montserrat">6 Days Left</p>
</div>
<div class="w-[40px] h-[40px] flex justify-center items-center rounded-full cardButton">
<i class="fa-solid fa-arrow-up-right-dots text-gray-400 rightIcon"></i>
</div>
</div>
</div>
</div>
<div class="card" id="triggerDiv">
<div class="card-image w-full h-[70%]">
<img src="./assets/esom_event_banner.png" class="object-cover"/>
</div>
<div class="card-info w-full h-[75%]">
<div class='flex justify-between items-center w-[80%] h-auto mt-4 justify-self-start ml48'>
<p class="font-Montserrat text-gray-400 full text-left text-[1.1rem]">Online | Free</p>
</div>
<div class="flex justify-center items-center w-[90%] h-auto">
<h1 class="font-Montserrat text-left text-black/80 w-[90%] font-bold text-[2rem]">Event Name</h1>
</div>
<div class="flex justify-between items-center mt-4 w-[90%] h-auto">
<div class="flex line w-[45%] justify-center items-center">
<i class="fa-regular fa-clock text-gray-400"></i>
<p class="ml-2 text-gray-400 text-[1rem] font-Montserrat">6 Days Left</p>
</div>
<div class="w-[40px] h-[40px] flex justify-center items-center rounded-full cardButton">
<i class="fa-solid fa-arrow-up-right-dots text-gray-400 rightIcon"></i>
</div>
</div>
</div>
</div>
<div class="card" id="triggerDiv">
<div class="card-image w-full h-[70%]">
<img src="./assets/esom_event_banner.png" class="object-cover"/>
</div>
<div class="card-info w-full h-[75%]">
<div class='flex justify-between items-center w-[80%] h-auto mt-4 justify-self-start ml48'>
<p class="font-Montserrat text-gray-400 full text-left text-[1.1rem]">Online | Free</p>
</div>
<div class="flex justify-center items-center w-[90%] h-auto">
<h1 class="font-Montserrat text-left text-black/80 w-[90%] font-bold text-[2rem]">Event Name</h1>
</div>
<div class="flex justify-between items-center mt-4 w-[90%] h-auto">
<div class="flex line w-[45%] justify-center items-center">
<i class="fa-regular fa-clock text-gray-400"></i>
<p class="ml-2 text-gray-400 text-[1rem] font-Montserrat">6 Days Left</p>
</div>
<div class="w-[40px] h-[40px] flex justify-center items-center rounded-full cardButton">
<i class="fa-solid fa-arrow-up-right-dots text-gray-400 rightIcon"></i>
</div>
</div>
</div>
</div>
<div class="card" id="triggerDiv">
<div class="card-image w-full h-[70%]">
<img src="./assets/esom_event_banner.png" class="object-cover"/>
</div>
<div class="card-info w-full h-[75%]">
<div class='flex justify-between items-center w-[80%] h-auto mt-4 justify-self-start ml48'>
<p class="font-Montserrat text-gray-400 full text-left text-[1.1rem]">Online | Free</p>
</div>
<div class="flex justify-center items-center w-[90%] h-auto">
<h1 class="font-Montserrat text-left text-black/80 w-[90%] font-bold text-[2rem]">Event Name</h1>
</div>
<div class="flex justify-between items-center mt-4 w-[90%] h-auto">
<div class="flex line w-[45%] justify-center items-center">
<i class="fa-regular fa-clock text-gray-400"></i>
<p class="ml-2 text-gray-400 text-[1rem] font-Montserrat">6 Days Left</p>
</div>
<div class="w-[40px] h-[40px] flex justify-center items-center rounded-full cardButton">
<i class="fa-solid fa-arrow-up-right-dots text-gray-400 rightIcon"></i>
</div>
</div>
</div>
</div>
<div class="card" id="triggerDiv">
<div class="card-image w-full h-[70%]">
<img src="./assets/esom_event_banner.png" class="object-cover"/>
</div>
<div class="card-info w-full h-[75%]">
<div class='flex justify-between items-center w-[80%] h-auto mt-4 justify-self-start ml48'>
<p class="font-Montserrat text-gray-400 full text-left text-[1.1rem]">Online | Free</p>
</div>
<div class="flex justify-center items-center w-[90%] h-auto">
<h1 class="font-Montserrat text-left text-black/80 w-[90%] font-bold text-[2rem]">Event Name</h1>
</div>
<div class="flex justify-between items-center mt-4 w-[90%] h-auto">
<div class="flex line w-[45%] justify-center items-center">
<i class="fa-regular fa-clock text-gray-400"></i>
<p class="ml-2 text-gray-400 text-[1rem] font-Montserrat">6 Days Left</p>
</div>
<div class="w-[40px] h-[40px] flex justify-center items-center rounded-full cardButton">
<i class="fa-solid fa-arrow-up-right-dots text-gray-400 rightIcon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<button id='rarrow' class="arrow right-arrow">▶</button>
</div>
</div>
</div>
<!--Upcoming Events Section Ends-->
<!--Modal Box for Notifications Starts-->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2 class="font-Outfit text-black text-[2rem]">Get Notified</h2>
<form id="subscribeForm">
<input type="email" name="email" class="font-Outfit text-[0.85rem] rounded-3xl" placeholder="Enter your Email" required />
<button type="submit" class="rounded-3xl">Submit</button>
</form>
<p class="disclaimer tex-gray-400 text-[1.1rem] font-Outfit">By clicking on Submit, you agree to be messaged on the contact information you provide us with.</p>
<p class="disclaimer text-gray-400 font-Outfit text-[1.1rem]">We respect your privacy. No Spam. Never</p>
</div>
</div>
<!--Modal Box for Notifications Ends-->
<!--Footer Starts-->
<div class="w-full flex flex-col justify-center items-center grayback">
<div class='mt16 flex justify-between width90 items-center'>
<div class="flex flex-col items-center justify-center">
<img src="./assets/esom_logo_black.png" class="box150"/>
<div class="flex justify-center items-center">
<div class="flex cursor-pointer justify-center items-center icon-border">
<i class="fa-brands fa-instagram rem14"></i>
</div>
<div class="ml4 flex cursor-pointer justify-center items-center icon-border">
<i class="fa-brands fa-x-twitter rem14"></i>
</div>
<div class="ml4 flex cursor-pointer justify-center items-center icon-border">
<i class="fa-brands fa-youtube rem14"></i>
</div>
</div>
</div>
<img src="./assets/mahe_logo.png" class="box120" />
</div>
<div class="mt24 flex rowcol justify-between width85 items-center">
<div class="flex flex-col justify-evenly items-center selfstarter h-auto w-auto">
<h1 class="text-black font-Montserrat rem1 text-center md:text-left w-full font-bold">Home</h1>
<ul class="list-none graytext font-Montserrat md:text-left text-center w-full footer-list">
<li class="footer-list-item"><a href='index.html'>Our Team</a></li>
<li class="footer-list-item"><a href='index.html'>Our Events</a></li>
<li class="footer-list-item"><a href='index.html'>Our Achievements</a></li>
</ul>
</div>
<div class="flex flex-col justify-evenly items-center selfstarter h-auto w-auto non-phone-margin">
<h1 class="text-black font-Montserrat rem1 w-full text-center md:text-left font-bold">Our Research</h1>
<ul class="list-none graytext font-Montserrat w-full text-center md:text-left footer-list">
<li class="footer-list-item"><a href='research.html'>Research Papers</a></li>
</ul>
</div>
<div class="flex flex-col justify-evenly items-center selfstarter h-auto w-auto non-phone-margin">
<h1 class="text-black font-Montserrat rem1 text-center md:text-left w-full font-bold">Our Team</h1>
<ul class="list-none graytext font-Montserrat text-center md:text-left w-full footer-list">
<li class="footer-list-item"><a href='team.html'>Batch of 2025</a></li>
</ul>
</div>
<div class="flex flex-col justify-evenly items-center selfstarter h-auto w-auto non-phone-margin">
<h1 class="text-black font-Montserrat rem1 text-center md:text-left w-full font-bold">Our Events</h1>
<ul class="list-none graytext font-Montserrat text-center md:text-left w-full footer-list">
<li class="footer-list-item"><a href='events.html'>Latest Events</a></li>
<li class="footer-list-item"><a href='events.html'>Upcoming Events</a></li>
</ul>
</div>
<div class="flex flex-col justify-evenly items-center selfstarter h-auto w-auto non-phone-margin">
<h1 class="text-black font-Montserrat rem1 text-center md:text-left font-bold w-full">Be a Member</h1>
<ul class="list-none graytext font-Montserrat text-center md:text-left w-full footer-list">
<li class="footer-list-item"><a href='member.html'>Working Committee</a></li>
<li class="footer-list-item"><a href='member.html'>Management Committee</a></li>
</ul>
</div>
</div>
<div class="mb24 mt30 flex w-full h-auto justify-center items-center">
<p class="graytext font-Montserrat rem085 text-center">© Copyright 2024. All Trademarks are properties of there respective owners only.</p>
</div>
</div>
<!--Footer Ends-->
<script src="./events-script.js"></script>
</body>
</html>