-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (247 loc) · 13.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Galactic - Official Website</title>
<link rel="stylesheet" href="style/style.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="assets/logo.png">
<meta charset="UTF-8">
</head>
<body class="bg-gray-900 text-white">
<header>
<nav class="fixed top-0 bg-opacity-90 w-full bg-gray-900">
<div class="flex justify-between">
<div class="p-2 md:p-4">
<img src="assets/logo.png" alt="logo" class="w-12 md:w-20 h-12 md:h-20">
</div>
<div class="hidden md:block p-4">
<ul class="flex justify-between">
<li class="p-4 hover:text-blue-600 font-bold"><a href="#home">Home</a></li>
<li class="p-4 hover:text-blue-600 font-bold"><a href="#project">Project</a></li>
<li class="p-4 hover:text-blue-600 font-bold"><a href="#timeline">Timeline</a></li>
<li class="p-4 hover:text-blue-600 font-bold"><a href="#team">Team</a></li>
<li class="download p-4"><a href="https://github.com/sacha-layani/Galactic-Website/releases/download/v1.0.0/setup.msi">The Game</a></li>
</ul>
</div>
<div class="md:hidden p-4">
<button type="button" class="block text-gray-500 hover:text-white focus:text-white focus:outline-none" id="menu-btn">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path
d="M4.5 6.75H19.5M4.5 12H19.5M4.5 17.25H19.5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</div>
<div class="md:hidden transition duration-500 ease-in-out" id="mobile-menu">
<ul class="bg-gray-800 text-sm pt-2 pb-4">
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#home">Home</a></li>
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#project">Project</a></li>
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#timeline">Timeline</a></li>
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#team">Team</a></li>
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#contact">Contact Us</a></li>
<li class="block pl-4 py-2 hover:text-blue-600 font-bold"><a href="#contact">The Game</a></li>
</ul>
</div>
</nav>
</header>
<script>
const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu");
menuBtn.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
});
</script>
<section class="handingPage h-auto mx-5 my-28 rounded-2xl" id="home">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<h1 class="text-4xl md:text-9xl font-bold my-16 text-center">Galactic</h1>
<p class="text-center py-5">Are you ready for the mission ?</p>
<div class="flex justify-center">
<div class="py-5 flex flex-col justify-center">
<button class="bg-blue-500 hover:bg-[#03e9f4] text-white font-bold py-2 px-4 rounded-full">
<a class="discoverButton p-5" href="#project">Discover</a>
</button>
</div>
</div>
</div>
</div>
</section>
<section class="h-auto mx-5 rounded-2xl" id="project">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<h1 class="text-5xl uppercase font-bold my-20 text-center">Project</h1>
</div>
</div>
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<img src="assets/astronauteOne.png" alt="logo" class="w-56 h-56 rounded mx-auto mb-5">
</div>
<div class="col-span-12 px-4 space-y-6 sm:col-span-9">
<h3 class="text-xl font-semibold uppercase tracking-wide">What is Galactic ?</h3>
<p class="mt-3">Galactic is a game in which you have to fight against monsters in order to recover your ship.</p>
<div class="grid gap-4 mx-4 sm:grid-cols-3">
<div class="bg-gray-800 rounded p-4 col-span-3 sm:col-span-1">
<h3 class="text-xl font-semibold uppercase tracking-wide">IA</h3>
<p class="mt-3">You will be able to play against the IA</p>
</div>
<div class="bg-gray-800 rounded p-4 col-span-3 sm:col-span-1">
<h3 class="text-xl font-semibold uppercase tracking-wide">Multiplayer</h3>
<p class="mt-3">You will be able to play against your friends</p>
</div>
<div class="bg-gray-800 rounded p-4 col-span-3 sm:col-span-1">
<h3 class="text-xl font-semibold uppercase tracking-wide">An history</h3>
<p class="mt-3">You will be able to play against the IA</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="h-auto mx-5 rounded-2xl" id="timeline">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<h1 class="text-5xl uppercase font-bold my-20 text-center">Timeline</h1>
</div>
</div>
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<img src="assets/astronauteTwo.png" alt="logo" class="w-56 h-56 mx-auto mb-5 rounded-full">
</div>
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
<div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-blue-400">
<h3 class="text-xl font-semibold tracking-wide">Creation of our amazing teams</h3>
<time class="border border-gray-500 p-2 rounded-3xl text-xs tracking-wide uppercase dark:text-gray-400">Nov 2022</time>
<p class="mt-3">During this month, we have put together our wonderful team (4 people) who will be in charge of making your favorite game (Galactic)</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-blue-400">
<h3 class="text-xl font-semibold tracking-wide">Realization of the specifications of the project</h3>
<time class="border border-gray-500 p-2 rounded-3xl text-xs tracking-wide uppercase dark:text-gray-400">Dec 2022</time>
<p class="mt-3">During this period, we realized a schedule of conditions containing all the elements which we will have to realize as well as the presentation of the system of organization which will follow us during all the realization of this project</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-blue-400">
<h3 class="text-xl font-semibold tracking-wide">First Presentation</h3>
<time class="border border-gray-500 p-2 rounded-3xl text-xs tracking-wide uppercase dark:text-gray-400">Mar 2023</time>
<p class="mt-3">After months of thinking and working on the game, we were able to make a first presentation of our work and have a first feedback</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-blue-400">
<h3 class="text-xl font-semibold tracking-wide">Second Presentation</h3>
<time class="border border-gray-500 p-2 rounded-3xl text-xs tracking-wide uppercase dark:text-gray-400">Apr 2023</time>
<p class="mt-3">We've made significant progress on the game since our last update. Excited to share our latest work and gather valuable feedback</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-blue-400">
<h3 class="text-xl font-semibold tracking-wide">Last Presentation</h3>
<time class="border border-gray-500 p-2 rounded-3xl text-xs tracking-wide uppercase dark:text-gray-400">May 2023</time>
<p class="mt-3">Presenting our final version of the game, incorporating all improvements and feedback.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="h-auto mx-5 rounded-2xl" id="team">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<h1 class="text-5xl uppercase font-bold my-20 text-center">Team</h1>
<div class="grid grid-cols-4 gap-4">
<div class="rounded-full overflow-hidden">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<img src="assets/florian.ambitte.jpg" alt="Florian Ambitte" class="w-40 h-40 md:w-52 md:h-52 rounded-full">
<h1 class="font-bold my-20 text-center">Florian AMBITTE</h1>
</div>
</div>
</div>
<div class="rounded-full overflow-hidden">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<img src="assets/sacha.layani.jpg" alt="Sacha Layani" class="w-40 h-40 md:w-52 md:h-52 rounded-full">
<h1 class="font-bold my-20 text-center">Sacha LAYANI</h1>
</div>
</div>
</div>
<div class="rounded-full overflow-hidden">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<img src="assets/olivier.bensemhoun.jpg" alt="Olivier Bensemhoun" class="w-40 h-40 md:w-52 md:h-52 rounded-full">
<h1 class="font-bold my-20 text-center">Olivier BENSEMHOUN</h1>
</div>
</div>
</div>
<div class="rounded-full overflow-hidden">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<img src="assets/yiming-jerry.chen.jpg" alt="Yiming-Jerry Chen" class="w-40 h-40 md:w-52 md:h-52 rounded-full">
<h1 class="font-bold my-20 text-center">Yiming-Jerry CHEN</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="contactForm h-auto my-8 py-5 mx-5 rounded-2xl">
<div>
<div class="flex flex-col">
<div class="flex justify-center">
<div class="flex flex-col justify-center">
<img src="assets/epitaLogo.png" alt="Logo" class="w-16 mx-auto">
<p class="my-4"><strong>Galactic - Les Alchimistes 2023</strong></p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://formspree.io/js/formbutton-v1.min.js" defer></script>
<script>
window.formbutton=window.formbutton||function(){(formbutton.q=formbutton.q||[]).push(arguments)};
formbutton("create", {
action: "https://formspree.io/f/mqkogprr",
title: "How can we help?",
fields: [
{
type: "email",
label: "Email:",
name: "email",
required: true,
placeholder: "your@email.com"
},
{
type: "textarea",
label: "Message:",
name: "message",
placeholder: "What's on your mind?",
},
{ type: "submit" }
],
styles: {
title: {
backgroundColor: "#042d48"
},
button: {
backgroundColor: "#042d48"
}
}
});
</script>
<script>
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(link.getAttribute('href'));
target.scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>