-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
415 lines (408 loc) · 12.3 KB
/
about.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
<!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>E-Sport Tournament About</title>
<script
src="https://kit.fontawesome.com/9eae86040a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="public/css/styles.css" />
<script src="public/js/navbar-menu.js" defer></script>
</head>
<body class="font-lato text-primary-black">
<header>
<nav>
<div
class="hidden absolute top-0 left-0 md:block w-full"
id="desktop-menu"
>
<div
class="
flex
justify-end
bg-primary-black
text-primary-gray
gap-4
h-8
items-center
p-x10%
"
id="top-bar"
>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#">Log in</a>
<a href="#">Sign up</a>
<a href="#">English</a>
</div>
<div
class="
flex
justify-between
bg-white
text-primary-black
h-16
items-center
shadow-md
p-x10%
"
id="navbar"
>
<a
class="flex items-center gap-2 font-cocogoose text-primary-orange"
href="index.html"
>
<img
class="h-12"
src="assets/icons/logo-event.png"
alt="icon-event"
/>
<div>
<p>E-Sport</p>
<p>Tournament</p>
</div>
</a>
<div class="flex items-center">
<a
class="py-4 px-2 mx-2 text-center text-primary-orange"
href="about.html"
>About</a
>
<a class="py-4 px-2 mx-2 text-center" href="#history"
>Our History</a
>
<a class="py-4 px-2 mx-2 text-center" href="#past-events"
>Past Tournaments</a
>
<a class="py-4 px-2 mx-2 text-center" href="#partners">Sponsor</a>
<a class="py-4 px-2 mx-2 text-center" href="#">News</a>
<div
class="
border-4
py-3
px-4
border-primary-orange
text-primary-orange
ml-5%
w-48
text-center
cursor-pointer
"
>
<a href="#">Join Event</a>
</div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 md:hidden" id="mobile-nav-menu">
<i class="fas fa-bars text-4xl text-gray-600 m-4 cursor-pointer"></i>
<div id="popup-menu" class="hidden">
<div
id="mobile-nav-header"
class="
absolute
top-0
left-0
w-screen
bg-white
flex
justify-between
border-b-2
shadow-sm
z-20
"
>
<i
class="fas fa-times text-4xl text-gray-600 m-4 cursor-pointer"
></i>
<a
class="
flex
items-center
gap-2
font-cocogoose
text-primary-orange
mr-4
"
href="index.html"
>
<img
class="h-12"
src="assets/icons/logo-event.png"
alt="icon-event"
/>
<div>
<p>E-Sport</p>
<p>Tournament</p>
</div>
</a>
</div>
<div
id="mobile-menu-wrapper"
class="w-screen h-screen bg-gray-600 bg-opacity-40"
>
<div
id="mobile-menu"
class="
absolute
top-0
left-0
bg-white
z-10
flex flex-col
w-60
shadow-md
"
>
<a
class="
py-4
w-full
border-b-2
pl-4
text-lg text-primary-orange
mt-20
"
href="about.html"
>About</a
>
<a
class="
py-4
w-full
border-b-2
pl-4
text-lg text-primary-orange
"
href="#history"
>Our History</a
>
<a
class="
py-4
w-full
border-b-2
pl-4
text-lg text-primary-orange
"
href="#past-events"
>Past Tournaments</a
>
<a
class="
py-4
w-full
border-b-2
pl-4
text-lg text-primary-orange
"
href="#partners"
>Sponsor</a
>
</div>
</div>
</div>
</div>
</nav>
</header>
<main
class="
py-20
px-4
w-auto
bg-gray-200 bg-opacity-25 bg-main
flex flex-col
justify-center
items-center
md:pt-60 md:px-10% md:pb-32
"
>
<p class="text-2xl text-primary-orange md:text-4xl">Welcome to</p>
<h1 class="gradient-h1 text-center mt-4 md:text-7xl md:my-8">
E-Sport Amateur Tournament
</h1>
<div
class="text-center mt-8 border py-4 px-4 rounded bg-gray-50 md:mx-10%"
>
<p class="md:hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
obcaecati autem maiores consequatur nulla vel perspiciatis,
necessitatibus quam quae error suscipit magni laboriosam et quod
expedita aperiam omnis impedit? Cumque.
</p>
<p class="hidden md:block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt illo
aspernatur quis consectetur fuga ex quisquam, aut eaque sunt
assumenda. Distinctio reprehenderit tempore adipisci exercitationem
magni iste quia, magnam aliquid expedita! Reiciendis temporibus
architecto vel ut, ipsa omnis nostrum tempore libero expedita ipsam
molestias id nam ullam dicta fugit ad aut fuga perspiciatis aliquam ex
optio illum reprehenderit. Aspernatur, consectetur quae illo similique
ab modi officia. Voluptas vel reiciendis excepturi aliquam dolore
voluptates placeat, quibusdam veniam ex accusamus error! Molestias,
provident vero eius autem laboriosam, error fugit sequi nostrum soluta
impedit laudantium! Unde rem enim, soluta esse repellat ipsa nam?
</p>
</div>
<p class="text-center mt-8">
Please contact us per Email for any further information about ESport
Amateur Tournament.!
</p>
<p class="text-center underline font-extrabold cursor-pointer">
esporttournament2021@esport.org
</p>
</main>
<section class="border-t md:px-20%" id="history">
<h2>Our History</h2>
<div class="w-1/12 bg-yellow-700 h-0.5"></div>
<p class="my-2 text-center whitespace-pre-line">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto
quod repellendus quo fuga, nobis impedit illum possimus fugit corrupti
ad Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Corrupti ipsum nemo voluptatibus maiores. Facilis
assumenda pariatur officiis quae, id recusandae ad consequatur ratione
aspernatur totam rerum beatae sed delectus quidem!
</p>
<div class="border px-20% p-8 mt-4">
<img
class="h-40 m-auto"
src="assets/icons/logo-event.png"
alt="Here is an about img"
/>
</div>
</section>
<section class="border-t" id="past-events">
<h2>Past Years Tournaments</h2>
<div class="w-1/12 bg-yellow-700 h-0.5"></div>
<p class="text-center mt-2 md:mx-20%">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero id
repudiandae beatae eius veritatis.
</p>
<div class="flex flex-wrap justify-center items-center gap-8 my-8">
<div class="bg-tournament3 bg-contain">
<div
class="
flex flex-col
justify-center
items-center
h-48
md:h-56
w-80
md:w-96
px-10
bg-primary-orange
text-white
bg-opacity-70
"
>
<h3 class="text-3xl font-extrabold">2019</h3>
<p class="text-lg">3rd Global Tournament Seatle</p>
</div>
</div>
<div class="bg-tournament2 bg-contain">
<div
class="
flex flex-col
justify-center
items-center
h-48
md:h-56
w-80
md:w-96
px-10
bg-primary-orange
text-white
bg-opacity-70
"
>
<h3 class="text-3xl font-extrabold">2017</h3>
<p class="text-lg">2nd Global Tournament Bucarest</p>
</div>
</div>
<div class="bg-tournament1 bg-contain">
<div
class="
flex flex-col
justify-center
items-center
h-48
md:h-56
w-80
md:w-96
px-10
bg-primary-orange
text-white
bg-opacity-70
"
>
<h3 class="text-3xl font-extrabold">2015</h3>
<p class="text-lg">First Tournament Quito</p>
</div>
</div>
</div>
</section>
<section class="bg-partners text-primary-gray md:hidden" id="partners">
<h2>Partners</h2>
<div class="w-1/12 bg-yellow-700 h-0.5"></div>
<div
class="
filter
grayscale
flex flex-wrap
justify-center
items-center
gap-12
mt-4
"
>
<img
class="w-32 h-auto md:h-16 md:w-auto"
src="assets/icons/logo-PC-Gamer.png"
alt="logo-PC-Gamer"
/>
<img
class="w-32 h-auto md:h-16 md:w-auto"
src="assets/icons/logo-E3.png"
alt="logo-E3"
/>
<img
class="w-32 h-auto md:h-16 md:w-auto"
src="assets/icons/logo-eurogamer.png"
alt="logo-Eurogamer"
/>
<img
class="w-32 h-auto md:h-16 md:w-auto"
src="assets/icons/logo-twitch.png"
alt="logo-twitch"
/>
</div>
</section>
<footer
class="
flex
justify-between
items-center
gap-4
p-8
md:px-20% md:bg-primary-black md:text-primary-gray md:py-12 md:gap-8
"
>
<img
class="w-40 md:w-60"
src="assets/icons/logo-microverse.png"
alt="Microverse-logo"
/>
<div class="w-auto">
<p>Module No.1 Capstone Project - Nov 2021</p>
<p class="text-xs">
All the content exposed in this page is fictional. The icons, logos
and titles are property of their respective owners. For copyrigth
infrigement, immediatly contact to remove.
</p>
</div>
</footer>
</body>
</html>