-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
222 lines (218 loc) · 11.6 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
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link href="styles/tailwind.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Hind:400,700|Montserrat:400,700,800&display=swap"
rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
</head>
<body class="bg-white">
<nav class="h-24 flex items-center justify-between flex-wrap p-6 bg-yellow-500">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-3xl tracking-tight text-black ml-10 font-heading">Wizards Challenge</span>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"></div>
</nav>
<!-- Hero Section -->
<div class="grid grid-rows-2 lg:grid-cols-2 lg:grid-rows-none bg-yellow-500">
<!-- Left Section -->
<div
class="w-full flex flex-col justify-center items-center lg:justify-start lg:items-start lg:ml-32 text-center lg:text-left">
<div class="h-40 w-full lg:w-3/4 flex flex-col mt-8 lg:mt-16 px-4 lg:px-0">
<p class="text-4xl leading-tight font-heading font-bold text-black">
Welcome to the world of Harry Potter
</p>
<span class="text-2xl leading-tight mt-4 font-body font-normal text-gray-900">Wizards Challenge Fun game
for Harry Potter ϟ Fans and Potterheads</span>
</div>
<div class="w-3/4 flex flex-row mt-32 lg:mt-16 justify-center lg:justify-start">
<a href="#">
<img class="h-12 p-1" src="./assets/images/apple-store.svg" />
</a>
<a href="https://play.google.com/store/apps/details?id=com.fabulaegames.wizardschallenge&hl=de_AT">
<img class="h-12 p-1" src="./assets/images/google-play-badge.svg" />
</a>
</div>
</div>
<!-- Right Section -->
<div class="w-full flex justify-center pb-16">
<div>
<img src="./assets/images/iphone_xs_and_google_pixel_4.png" />
</div>
</div>
</div>
<!-- Features Section -->
<div class="mt-10">
<div class="flex justify-center">
<div class="w-full lg:w-2/4 text-center px-10">
<p class="text-3xl font-heading font-bold">
Book your travel to the wizarding world
</p>
<span class="text-base font-body font-normal">🦉 Your Owl is here with your acceptance letter ✉️ !
Welcome to a new year at Hogwarts 🎉! Are you a true wizard 🧙♂️? Succeed in Wizards Challenge ϟ
and become a Certified Wizard 🎓.</span>
</div>
</div>
<div class="grid grid-rows-2 lg:grid-cols-3 lg:grid-rows-none p-4">
<!-- Left Features -->
<div class="flex flex-col pb-20 lg:pb-0">
<!-- First -->
<div class="pb-10">
<p class="text-xl font-heading font-bold mb-4">
🥳 FUN LEVELING
</p>
<span class="text-base font-body font-normal">
♦️ Philosopher's Stone , Chamber of Secrets 🐍 and more levels and achievements to explore and
unlock in the game.
💯 Achieve high scores and prove you’re a true Potterhead.</span>
</div>
<!-- Second -->
<div class="pb-10">
<p class="text-xl font-heading font-bold mb-4">
👨👨👧👧 ALL AGES
</p>
<span class="text-base font-body font-normal">
Applications to our wizards ceritifcations are open to all ages.</span>
</div>
<!-- Third -->
<div>
<p class="text-xl font-heading font-bold mb-4">
😊 Beginner friendly
</p>
<span class="text-base font-body font-normal">
Even for beginners at the world of Harry Potter 👨🦰 you can play the game and have fun with
potterheads.</span>
</div>
</div>
<!-- Middle Phone Image -->
<div class="hidden lg:flex lg:justify-center">
<img src="./assets/images/iphone_x.png" alt="" style="width: 240px; height: 480px;" />
</div>
<!-- Right Features -->
<div class="flex flex-col lg:justify-center">
<!-- First -->
<div class="pb-10">
<p class="text-xl font-heading font-bold mb-4">
🧝 MAGIC MADE GAME
</p>
<span class="text-base font-body font-normal">
📺 Graphics forged by the best goblins
🎵 Sound effects composed by the finest elves</span>
</div>
<!-- Second -->
<div class="pb-10">
<p class="text-xl font-heading font-bold mb-4">
👂 LISTENING TO YOU
</p>
<span class="text-base font-body font-normal">
💻Always adapting the game to potterheads.
📧 We answer your mails as soon as possible.</span>
</div>
<!-- Third -->
<div>
<p class="text-xl font-heading font-bold mb-4">
👨👧👦👨👦👦👨👧👧 community driven game
</p>
<span class="text-base font-body font-normal">
🙌 We are open to all our users suggestions, we listen to your ideas and we take them into
consideration.</span>
</div>
</div>
</div>
</div>
<!-- Team Section -->
<div class="mt-10">
<div class="flex justify-center">
<div class="w-full lg:w-2/4 text-center px-10">
<p class="text-3xl font-heading font-bold">
Continuously updated
</p>
<span class="text-xl font-body font-normal">The game is continuously updated to come up with new
features and include more quizzes and levels, new features and game modes are coming to let every
fan satisfy their love to the world of magic.</span>
</div>
</div>
<div class="self-center">
<div class=" grid lg:grid-cols-2 lg:grid-rows-none mx-2">
<!-- First -->
<div class="shadow-lg p-10 m-4 lg:m-10 flex flex-col rounded-lg ">
<div class="flex lg:flex-col grid grid-cols-2 lg:grid-cols-none lg:justify-center">
<div class="flex flex-col">
<img class="rounded-full shadow-lg self-center" src="./assets/images/75.jpg" alt="" />
<p class="text-base text-center font-bold font-heading pt-2">
EZZAHED<br>Zakaria
</p>
<p class="text-base italic text-center pb-4 font-body">
Co-Founder
</p>
</div>
</div>
<div class="">
<span class="text-base lg:text-left font-body p-10 lg:p-0">Engineer student at ENAC Toulouse, I
admire playing and creating video games at the same time, I spend most of my time feeding my
knowledge and my imagination. I have big interest for new technologies and data science
field, I'm also interested with the mathematical side of this field, and this is how I want
to contribute and add value to this world through my existence.</span>
</div>
</div>
<!-- Second -->
<div class="shadow-lg p-10 m-4 lg:m-10 flex flex-col rounded-lg ">
<div class="flex lg:flex-col grid grid-cols-2 lg:grid-cols-none lg:justify-center">
<div class="flex flex-col">
<img class="rounded-full shadow-lg self-center" src="./assets/images/76.jpg" alt="" />
<p class="self-center text-base text-center font-bold font-heading pt-2">
OUTIDRARINE Mohamed
</p>
<p class="text-base italic text-center pb-4 font-body">
Co-Founder
</p>
</div>
</div>
<div class="">
<span class="text-base lg:text-left font-body p-10 lg:p-0">Engineer student at Ecole Centrale de
Nantes, I have a big passion for the world of Harry Potter, I could translate my passion for
this word and express it through this application. I spend most of the time creating
softwares, web applications and video games, it's also the purpose of my existence to create
and publish solutions and softwares in order the make the world a better place.</span>
</div>
</div>
</div>
</div>
</div>
<!-- Call To Action Section -->
<div class="bg-yellow-500 my-10 mx-2 lg:mx-56 rounded-lg py-10">
<div class="flex flex-col justify-center">
<div class="w-full text-center px-4">
<p class="text-3xl font-heading font-bold">
DISCLAIMER
</p>
<span class="text-xl font-body font-normal">This application is not an official application of Harry
Potter and is not endorsed or supported by JK Rowling or Warner Bros. Wizards challenge characters,
names and related indices are ™ and © of Warner Bros. Entertainment Inc. All rights reserved.</span>
</div>
<div class="flex flex-row mt-32 lg:mt-16 justify-center">
<a href="#">
<img class="h-12 p-1" src="./assets/images/apple-store.svg" />
</a>
<a href="https://play.google.com/store/apps/details?id=com.fabulaegames.wizardschallenge&hl=de_AT">
<img class="h-12 p-1" src="./assets/images/google-play-badge.svg" />
</a>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="bg-black">
<div class="flex justify-center flex-col lg:flex-row text-center p-4">
<a class="text-sm text-white hover:text-yellow-500 font-body font-normal p-2" href="#"></a>
<a class="text-sm text-white hover:text-yellow-500 font-body font-normal p-2" href="#"></a>
<a class="text-sm text-white hover:text-yellow-500 font-body font-normal p-2" href="#"></a>
</div>
<div class="text-center pb-4">
<span class="text-white text-sm font-body">© Wizards Challenge. All rights reserved. Icons: Font
Awesome.</span>
</div>
</div>
</body>
</html>