-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
354 lines (344 loc) · 12.5 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
346
347
348
349
350
351
352
353
354
<!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" />
<meta name="author" content="William Morales" />
<meta property="og:type" content="website" />
<meta property="og:title" content="E-Sport Amateur Tournament" />
<meta
property="og:description"
content="This is a mock up website about an imaginary E-Sport Amateur Tournament, this page shows event details as the current program, featured events as in this case multiplayer contests, it incluides an about section with all the information about past events."
/>
<meta
property="og:url"
content="https://github.com/williamrolando88/es-tournament"
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/williamrolando88/es-tournament/main/screenshots/responsive_design.png"
/>
<title>E-Sports Tournament 2022</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>
<script src="public/js/games.js" defer></script>
</head>
<body class="font-lato text-primary-black overflow-x-hidden">
<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-primary-orange" href="about.html"
>About</a
>
<a class="py-4 px-2 mx-2" href="#program">Program</a>
<a class="py-4 px-2 mx-2" href="#">Join</a>
<a class="py-4 px-2 mx-2" href="#partners">Sponsor</a>
<a class="py-4 px-2 mx-2" 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="#program"
>Program</a
>
<a
class="py-4 w-full border-b-2 pl-4 text-lg text-primary-orange"
href="#"
>Join</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 md:pt-60 md:px-10% md:pb-32"
id="home"
>
<p class="text-2xl text-primary-orange md:text-5xl">Welcome to</p>
<h1 class="gradient-h1 md:text-8xl md:my-8">
E-Sport Amateur Tournament
</h1>
<p class="border p-4 mt-8 md:w-2/3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quam
eius sapiente doloribus ut exercitationem ab, vitae omnis eos ducimus
ad, nam corporis totam rem non mollitia labore temporibus porro!
</p>
<h2
class="font-cocogoose text-gray-600 text-3xl mt-4 md:mt-8 md:text-5xl"
>
2022.05.06(FRI) ~ 08(SUN)
</h2>
<p class="text-gray-500 text-base md:text-2xl md:">
@ MiCo - Milano Convention Center, Milano, Italy
</p>
</main>
<section class="bg-program text-primary-gray md:px-10%" id="program">
<h2>Main program</h2>
<div class="w-1/12 bg-yellow-700 h-0.5"></div>
<div class="flex flex-col gap-1 my-2 md:flex-row">
<article class="activity activity-container">
<img
class="activity-img"
src="assets/icons/icon-open-ceremony.png"
alt="open-ceremony-icon"
/>
<h3 class="activity-title">Open Ceremony</h3>
<p class="activity-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
facilis? Officiis autem tempore ullam beatae.
</p>
</article>
<article class="activity activity-container">
<img
class="activity-img"
src="assets/icons/icon-preparation.svg"
alt="participants-preparation-icon"
/>
<h3 class="activity-title">Participants Preparation</h3>
<p class="activity-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
facilis? Officiis autem tempore ullam beatae.
</p>
</article>
<article class="activity activity-container">
<img
class="activity-img"
src="assets/icons/icon-battle-royale.png"
alt="battle-royale-icon"
/>
<h3 class="activity-title">Battle Royale Tournament</h3>
<p class="activity-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
facilis? Officiis autem tempore ullam beatae.
</p>
</article>
<article class="activity activity-container">
<img
class="activity-img"
src="assets/icons/icon-sudden-death.png"
alt="sudden-death-icon"
/>
<h3 class="activity-title">Sudden Death Tournament</h3>
<p class="activity-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
possimus architecto ad illum eum maiores.
</p>
</article>
<article class="activity activity-container">
<img
class="activity-img"
src="assets/icons/icon-ceremony-awards.svg"
alt="ceremony-awards-icon"
/>
<h3 class="activity-title">Ceremony Awards</h3>
<p class="activity-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
quis in unde! Nostrum, omnis ab.
</p>
</article>
</div>
<button
class="bg-primary-orange text-primary-gray px-4 py-6 font-bold text-lg md:hidden"
type="button"
>
Join E-Sport Amateur Tournament
</button>
<a class="hidden md:block underline text-lg py-10" href="#"
>SEE THE WHOLE PROGRAM</a
>
</section>
<section id="featured-games">
<h2>Featured Games</h2>
<div class="w-1/12 bg-yellow-700 h-0.5"></div>
<div
id="features-container"
class="grid grid-cols-1 gap-12 md:grid-cols-2 md:px-10%"
>
<!-- !Here comes the auto generated features -->
<template>
<article class="flex gap-3 items-start">
<div class="flex justify-end items-center">
<div class="img-feature-container">
<img
class="img-feature"
src="assets/img/bg-main.png"
alt="Here comes a game cover"
/>
</div>
</div>
<div class="pt-4 px-2">
<h3 class="text-primary-black text-xl font-bold">
Game 1 Free For All
</h3>
<h4 class="text-primary-orange italic">
Game brief introduction g
</h4>
<div class="bg-primary-gray w-1/12 h-0.5 mt-1"></div>
<p class="text-sm mt-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure
qui expedita voluptatibus amet repellat hic!
</p>
</div>
</article>
<article class="flex gap-3 items-start">
<div class="flex justify-end items-center">
<div class="img-feature-container">
<img
class="img-feature"
src="assets/img/bg-main.png"
alt="Here comes a game cover"
/>
</div>
</div>
<div class="pt-4 px-2">
<h3 class="text-primary-black text-xl font-bold">
Game 1 Free For All
</h3>
<h4 class="text-primary-orange italic">
Game brief introduction g
</h4>
<div class="bg-primary-gray w-1/12 h-0.5 mt-1"></div>
<p class="text-sm mt-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure
qui expedita voluptatibus amet repellat hic!
</p>
</div>
</article>
</template>
</div>
</section>
<section class="bg-partners text-primary-gray" 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"
>
<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:gap-8 md:py-12"
>
<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>