-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (149 loc) · 17.4 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mission inconnue</title>
<!--META-->
<meta name="description" content="Jeu intéractif entre un livre et le site" />
<meta name="keywords" content="Jeu interactif, énimges en tout genre">
<meta name="author" content="Agence Fantastical">
<!--FAVICON-->
<link rel="icon" href="assets/favicon/favicon.svg" type="image/svg+xml">
<!--FONTS-->
<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=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">
<!--CSS-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/nav.css" type="text/css">
</head>
<body>
<header>
<div id="membre">
<svg class="member-svg" width="18" height="20" viewBox="0 0 18 20">
<path d="M2.5 8.75H3.02734C3.99219 10.957 6.1875 12.5 8.75 12.5C11.3125 12.5 13.5078 10.957 14.4727 8.75H15C15.3438 8.75 15.625 8.46875 15.625 8.125V4.375C15.625 4.03125 15.3438 3.75 15 3.75H14.4727C13.5078 1.54297 11.3125 0 8.75 0C6.1875 0 3.99219 1.54297 3.02734 3.75H2.5C2.15625 3.75 1.875 4.03125 1.875 4.375V8.125C1.875 8.46875 2.15625 8.75 2.5 8.75ZM4.0625 5.3125C4.0625 4.44922 4.90234 3.75 5.9375 3.75H11.5625C12.5977 3.75 13.4375 4.44922 13.4375 5.3125V6.25C13.4375 8.32031 11.7578 10 9.6875 10H7.8125C5.74219 10 4.0625 8.32031 4.0625 6.25V5.3125ZM6.875 8.125L7.34375 6.71875L8.75 6.25L7.34375 5.78125L6.875 4.375L6.40625 5.78125L5 6.25L6.40625 6.71875L6.875 8.125ZM12.7969 12.5547C11.6289 13.3086 10.2422 13.75 8.75 13.75C7.25781 13.75 5.87109 13.3086 4.70312 12.5547C2.06641 12.832 0 15.0391 0 17.75V18.125C0 19.1602 0.839844 20 1.875 20H5V17.5C5 16.8086 5.55859 16.25 6.25 16.25H11.25C11.9414 16.25 12.5 16.8086 12.5 17.5V20H15.625C16.6602 20 17.5 19.1602 17.5 18.125V17.75C17.5 15.0391 15.4336 12.832 12.7969 12.5547ZM10.625 17.5C10.2812 17.5 10 17.7812 10 18.125C10 18.4688 10.2812 18.75 10.625 18.75C10.9688 18.75 11.25 18.4688 11.25 18.125C11.25 17.7812 10.9688 17.5 10.625 17.5ZM6.875 17.5C6.53125 17.5 6.25 17.7812 6.25 18.125V20H7.5V18.125C7.5 17.7812 7.21875 17.5 6.875 17.5Z"/>
</svg>
<a href="">Connexion</a>
|
<a href="">Inscription</a>
</div>
<a href="index.html" id="logo">
<svg class="logo-svg" width="33" height="37" viewBox="0 0 33 37">
<path d="M3.9717 9.50622C4.25789 10.0451 4.51228 10.5999 4.79847 11.1546C4.86305 11.2314 4.95349 11.2821 5.05286 11.2972C5.38675 11.2972 5.72064 11.2497 6.05453 11.2497C6.38842 11.2497 6.29302 11.1546 6.34072 10.9961C6.44324 10.4712 6.57595 9.95256 6.73821 9.44283C7.10389 9.93416 7.27879 10.4572 7.56498 10.9961C7.58326 11.0602 7.62348 11.1159 7.67866 11.1536C7.73384 11.1912 7.8005 11.2084 7.86707 11.2021H9.04363C9.08984 11.1923 9.1329 11.1713 9.16897 11.1409C9.20503 11.1105 9.23298 11.0716 9.25032 11.0278C9.34572 10.7583 9.37752 10.4414 9.50471 10.1719H9.58421C9.69597 10.3343 9.78678 10.51 9.8545 10.6949C9.9976 11.1546 10.2838 11.2972 10.7608 11.3289C11.6511 11.3765 12.5574 11.5191 13.3842 11.9471C13.6863 12.1056 13.8453 11.9788 13.7976 11.6301C13.416 9.64887 10.8721 8.84054 9.28212 8.04806L8.16916 9.12583L8.08966 9.09413C8.08132 8.66417 8.11326 8.23436 8.18506 7.81031C8.20096 7.60426 8.16916 7.49332 7.96246 7.41407C7.77232 7.35246 7.5907 7.26726 7.42188 7.16047C7.23109 7.03368 7.11979 7.09708 6.9767 7.25557C6.661 7.59666 6.32092 7.91448 5.95913 8.20655C5.89554 7.66766 6.02273 7.22387 6.03863 6.70083C6.03431 6.65478 6.02084 6.61004 5.999 6.56922C5.97716 6.5284 5.9474 6.49233 5.91144 6.46309C5.37085 6.16195 5.37085 6.16195 4.95747 6.60574C4.54408 7.04953 4.30559 7.31897 3.8763 7.66766C3.81271 7.00198 3.924 6.41554 3.9558 5.7657C3.96528 5.73238 3.96781 5.69747 3.96323 5.66314C3.95866 5.6288 3.94707 5.59576 3.92919 5.56606C3.91132 5.53636 3.88753 5.51063 3.85929 5.49044C3.83105 5.47026 3.79896 5.45606 3.76501 5.44871C3.20853 5.17927 2.20686 4.89397 2.81104 4.11734C7.77167 -1.74704 16.3574 -1.2874 20.0461 5.11587C25.3406 15.0536 14.1156 24.4208 4.98927 18.5881C3.19263 17.5262 1.76168 16.1155 0.839508 14.2136C0.632815 13.7539 0.473821 13.2626 0.314827 12.7871C0.279084 12.7097 0.262249 12.625 0.2657 12.5399C0.269152 12.4548 0.292791 12.3717 0.334682 12.2975C0.376572 12.2232 0.435521 12.16 0.506691 12.1128C0.577861 12.0657 0.659225 12.036 0.744112 12.0263C1.50729 11.852 2.27046 11.6776 3.04953 11.535C3.14967 11.5353 3.24623 11.4979 3.31993 11.4303C3.39362 11.3628 3.43901 11.2699 3.44702 11.1704C3.55071 10.6063 3.69416 10.0502 3.8763 9.50622H3.9717ZM16.4369 4.73548C16.4369 4.46603 15.2921 4.35508 14.2905 4.51358C13.2888 4.67208 12.0168 5.44871 12.3984 5.65476C12.7538 5.85845 13.1468 5.9887 13.5538 6.03771C13.9608 6.08673 14.3736 6.05351 14.7674 5.94005C15.7532 5.67061 16.4369 4.98907 16.4369 4.73548Z"/>
<path d="M24.0667 22.8704C27.56 20.6263 30.7268 21.938 32.7346 25.32C31.7062 25.9995 30.6615 26.6317 29.5678 27.2322C28.1235 28.0134 26.4634 28.3389 24.8189 28.1632C23.1745 27.9876 21.6276 27.3196 20.3939 26.2524C18.7452 28.133 17.5209 30.1717 17.3576 32.7477C19.4144 32.0049 20.7693 32.5896 22.5976 33.522C23.1526 33.8065 23.5607 34.249 23.9361 34.7389C24.2427 35.1281 24.5812 35.4927 24.9482 35.8293C25.2094 36.0664 25.3073 36.2876 25.2094 36.5721C25.1114 36.8566 24.8829 36.9988 24.5075 36.9988H6.27379C5.63716 37.0304 5.32701 36.4299 5.7351 35.9558L7.18792 33.9329C7.30219 33.7749 8.31426 32.6844 8.90192 32.5106C9.57969 32.3389 10.2999 32.4296 10.9097 32.7635C11.633 33.1577 12.4339 33.4 13.2604 33.4746C13.5052 33.4904 13.6195 33.443 13.6848 33.1744C14.1808 31.0886 15.0185 29.0932 16.166 27.2638C16.3129 27.0426 18.6309 24.1821 19.039 23.7871C19.4471 23.392 19.9368 23.0601 20.3286 22.6334C21.4059 21.3849 20.6387 20.168 19.6919 19.046L21.6508 16.6122C22.555 17.0908 23.3757 17.7041 24.083 18.4297C24.1483 18.5087 24.8992 19.6307 24.9482 19.8836C25.2747 21.0214 24.7523 21.9538 24.0667 22.8704Z"/>
</svg>
</a>
<div id="infos">
<div id="localisation">
<svg class="pin-svg" width="16" height="21" viewBox="0 0 16 21">
<path d="M8.00008 0.5C3.58908 0.5 8.14446e-05 4.089 8.14446e-05 8.495C-0.0289186 14.94 7.69608 20.284 8.00008 20.5C8.00008 20.5 16.0291 14.94 16.0001 8.5C16.0001 4.089 12.4111 0.5 8.00008 0.5ZM8.00008 12.5C5.79008 12.5 4.00008 10.71 4.00008 8.5C4.00008 6.29 5.79008 4.5 8.00008 4.5C10.2101 4.5 12.0001 6.29 12.0001 8.5C12.0001 10.71 10.2101 12.5 8.00008 12.5Z"/>
</svg>
Terre
</div>
<p id="date"></p>
<p id="heure"><span></span><span></span><span></span></p>
</div>
</header>
<main>
<section class="intro">
<div class="img">
<img src="assets/img/planete.png" alt="Image planète terre">
</div>
<div class="text">
<h1>MISSION INCONNUE</h1>
<p>Dans un futur proche, la planète Terre subi une terrible catastrophe. Une tempête solaire d’une puissance inouïe a irradié notre système solaire de rayons X pendant plusieurs semaines.</p>
<p>Cette catastrophe a provoqué des perturbations géomagnétiques sur la planète bleue. La forte concentration de rayons X a augmenté la température du globe de 5°C rendant l’hémisphère sud inhabitable pour l’homme, provoquant des mouvements migratoires sans précédent.</p>
<p>Quelques années après l’éruption solaire, des scientifiques ont observé des espèces ayant fortement mutées avec des plantes près de l’hémisphère nord. Ces êtres vivants transgéniques se sont développés dans des conditions extrêmes dues aux radiations et sont donc devenu fortement agressifs. Certains sont disproportionnés, d’autres ont acquis des techniques de défenses les rendant particulièrement coriaces. Ces nouvelles créatures renversent complètement la chaine alimentaire.</p>
<p>La technologie dont dispose l’homme n’est plus suffisante face à cette nouvelle menace. Le temps est compté.</p>
<p>Un robot unique dotée d’une intelligence artificielle est crée pour affronter la dangerosité de l’hémisphère sud.</p>
<p>Pour mener à bien la mission le robot doit être accompagné d’un homme. Seulement les chances de survie sont particulièrement faibles face aux créatures inconnues. Vous avez été designé pour partir en mission avec le robot. Seulement vous devez connaitre des notions élémentaires pour partir à l’aventure, il vous faut donc le livre d’aventure pour commencer cette quête.</p>
</div>
</section>
<section class="cta">
<a href="enigme1.html">DÉMARRER L'AVENTURE</a>
</section>
<section class="video">
<img id="toucan" src="assets/img/toucanPng.png" alt="Image Toucan modifié">
<img id="hippo" src="assets/img/hippo.png" alt="Image Hippo modifié">
<h2>PRÉSENTATION DE L'AVENTURE</h2>
<video controls autoplay loop src="assets/video/intro_epic.mp4"></video>
</section>
<section class="cards">
<div class="card">
<svg width="64" height="84" viewBox="0 0 64 84" fill="none">
<path d="M32 0C26.6957 0 21.6086 2.10714 17.8579 5.85786C14.1071 9.60859 12 14.6957 12 20V28H8C5.87827 28 3.84344 28.8429 2.34315 30.3431C0.842854 31.8434 0 33.8783 0 36V76C0 78.1217 0.842854 80.1566 2.34315 81.6569C3.84344 83.1571 5.87827 84 8 84H56C58.1217 84 60.1566 83.1571 61.6569 81.6569C63.1571 80.1566 64 78.1217 64 76V36C64 33.8783 63.1571 31.8434 61.6569 30.3431C60.1566 28.8429 58.1217 28 56 28H52V20C52 17.3736 51.4827 14.7728 50.4776 12.3463C49.4725 9.91982 47.9993 7.71504 46.1421 5.85786C44.285 4.00069 42.0802 2.5275 39.6537 1.52241C37.2272 0.517315 34.6264 0 32 0ZM32 7.6C38.84 7.6 44.4 13.16 44.4 20V28H19.6V20C19.6 13.16 25.16 7.6 32 7.6ZM32.76 38C36.52 38 39.52 38.84 41.68 40.48C43.84 42.16 44.92 44.4 44.92 47.2C44.92 48.96 44.32 50.52 43.16 52C42 53.44 40.48 54.56 38.64 55.4C37.6 56 36.92 56.6 36.56 57.28C36.2 58 36 58.88 36 60H28C28 58 28.4 56.64 29.16 55.68C30 54.72 31.36 53.6 33.44 52.32C34.48 51.76 35.32 51.04 36 50.16C36.56 49.32 36.88 48.32 36.88 47.2C36.88 46 36.52 45.12 35.8 44.44C35.08 43.72 34 43.4 32.76 43.4C31.68 43.4 30.8 43.68 30 44.24C29.36 44.8 28.96 45.64 28.96 46.76H21.08C20.88 44 22 41.6 24.2 40.16C26.36 38.72 29.2 38 32.76 38ZM28 64H36V72H28V64Z" fill="white"/>
</svg>
<div>
<p>Résolvez des énigmes complexes :</p>
<ul>
<li>Rébus</li>
<li>Labyrinthe</li>
<li>Calculs</li>
<li>Décodage</li>
<li>Charade</li>
<li>Et bien d’autres !</li>
</ul>
</div>
</div>
<div class="card">
<svg width="84" height="76" viewBox="0 0 84 76">
<path d="M79.0226 8.39555L73.6333 6.15674V42.2576L83.4064 18.83C85.0554 14.7522 83.1651 10.0747 79.0226 8.39555V8.39555ZM0.596642 23.1877L20.545 70.9624C21.1324 72.416 22.1344 73.6672 23.4277 74.5621C24.721 75.4571 26.2493 75.9568 27.8245 75.9998C28.8702 75.9998 29.9561 75.7999 31.0018 75.3601L60.6428 63.1665C63.6591 61.9272 65.5092 58.9688 65.5896 56.0103C65.6298 54.9709 65.4288 53.8115 65.0668 52.7721L44.9576 4.99735C44.3891 3.53421 43.3908 2.27504 42.0924 1.38373C40.7941 0.492428 39.2559 0.0102655 37.678 0C36.6324 0 35.5867 0.239873 34.5812 0.599683L4.98045 12.7932C3.01282 13.5942 1.4457 15.1391 0.623639 17.0883C-0.198421 19.0375 -0.208132 21.2314 0.596642 23.1877V23.1877ZM65.5494 7.99577C65.5494 5.87516 64.702 3.8414 63.1935 2.34191C61.685 0.842408 59.639 0 57.5057 0H51.6741L65.5494 33.3423" fill="white"/>
</svg>
<div>
<ul>
<li>
Pour avancer dans la quête, vous devez résoudre l’énigme en cours, aidez-vous du livre pour trouver les réponses aux questions
</li>
<br>
<li>
Pour chaque énigme, vous n’avez le droit qu’à 4 chances de réponse, sinon vous serez bloqué un certain temps
</li>
</ul>
</div>
</div>
<div class="card">
<svg width="58" height="84" viewBox="0 0 58 84">
<path d="M49.7143 0H33.1429V17.0478C39.0726 17.7086 44.7574 19.8107 49.7143 23.1756V0ZM24.8571 0H8.28571V23.1756C13.2426 19.8107 18.9274 17.7086 24.8571 17.0478V0ZM29 84C36.6913 84 44.0675 80.9025 49.5061 75.3889C54.9447 69.8754 58 62.3974 58 54.6C58 46.8026 54.9447 39.3246 49.5061 33.8111C44.0675 28.2975 36.6913 25.2 29 25.2C21.3087 25.2 13.9325 28.2975 8.4939 33.8111C3.05535 39.3246 0 46.8026 0 54.6C0 62.3974 3.05535 69.8754 8.4939 75.3889C13.9325 80.9025 21.3087 84 29 84ZM23.925 48.2202L29 37.8L34.075 48.2202L45.4181 49.8876L37.2111 58.002L39.15 69.4554L29 64.05L18.8541 69.4554L20.793 58.002L12.586 49.8876L23.925 48.2202Z" fill="white"/>
</svg>
<div>
<ul>
<li>Si vous réussissez à finir le jeu un poster à l’effigie de votre créature préférée vous sera offert</li>
<br>
<li>Vous pourrez également accéder au classement des joueurs</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-chameau">
<img src="assets/img/chameau_poison.png" alt="chameau-poison">
</div>
<div class="footer-nav">
<div>
<p class="footer-title">membre</p>
<a href="">connexion</a>
<a href="">inscription</a>
</div>
<div>
<p class="footer-title">navigation</p>
<a href="">mentions légales</a>
<a href="">contact</a>
</div>
<div>
<p class="footer-title">produit</p>
<a href="">commander le livre</a>
</div>
</div>
<svg class="logo-svg" width="63" height="72" viewBox="0 0 33 37">
<path d="M3.9717 9.50622C4.25789 10.0451 4.51228 10.5999 4.79847 11.1546C4.86305 11.2314 4.95349 11.2821 5.05286 11.2972C5.38675 11.2972 5.72064 11.2497 6.05453 11.2497C6.38842 11.2497 6.29302 11.1546 6.34072 10.9961C6.44324 10.4712 6.57595 9.95256 6.73821 9.44283C7.10389 9.93416 7.27879 10.4572 7.56498 10.9961C7.58326 11.0602 7.62348 11.1159 7.67866 11.1536C7.73384 11.1912 7.8005 11.2084 7.86707 11.2021H9.04363C9.08984 11.1923 9.1329 11.1713 9.16897 11.1409C9.20503 11.1105 9.23298 11.0716 9.25032 11.0278C9.34572 10.7583 9.37752 10.4414 9.50471 10.1719H9.58421C9.69597 10.3343 9.78678 10.51 9.8545 10.6949C9.9976 11.1546 10.2838 11.2972 10.7608 11.3289C11.6511 11.3765 12.5574 11.5191 13.3842 11.9471C13.6863 12.1056 13.8453 11.9788 13.7976 11.6301C13.416 9.64887 10.8721 8.84054 9.28212 8.04806L8.16916 9.12583L8.08966 9.09413C8.08132 8.66417 8.11326 8.23436 8.18506 7.81031C8.20096 7.60426 8.16916 7.49332 7.96246 7.41407C7.77232 7.35246 7.5907 7.26726 7.42188 7.16047C7.23109 7.03368 7.11979 7.09708 6.9767 7.25557C6.661 7.59666 6.32092 7.91448 5.95913 8.20655C5.89554 7.66766 6.02273 7.22387 6.03863 6.70083C6.03431 6.65478 6.02084 6.61004 5.999 6.56922C5.97716 6.5284 5.9474 6.49233 5.91144 6.46309C5.37085 6.16195 5.37085 6.16195 4.95747 6.60574C4.54408 7.04953 4.30559 7.31897 3.8763 7.66766C3.81271 7.00198 3.924 6.41554 3.9558 5.7657C3.96528 5.73238 3.96781 5.69747 3.96323 5.66314C3.95866 5.6288 3.94707 5.59576 3.92919 5.56606C3.91132 5.53636 3.88753 5.51063 3.85929 5.49044C3.83105 5.47026 3.79896 5.45606 3.76501 5.44871C3.20853 5.17927 2.20686 4.89397 2.81104 4.11734C7.77167 -1.74704 16.3574 -1.2874 20.0461 5.11587C25.3406 15.0536 14.1156 24.4208 4.98927 18.5881C3.19263 17.5262 1.76168 16.1155 0.839508 14.2136C0.632815 13.7539 0.473821 13.2626 0.314827 12.7871C0.279084 12.7097 0.262249 12.625 0.2657 12.5399C0.269152 12.4548 0.292791 12.3717 0.334682 12.2975C0.376572 12.2232 0.435521 12.16 0.506691 12.1128C0.577861 12.0657 0.659225 12.036 0.744112 12.0263C1.50729 11.852 2.27046 11.6776 3.04953 11.535C3.14967 11.5353 3.24623 11.4979 3.31993 11.4303C3.39362 11.3628 3.43901 11.2699 3.44702 11.1704C3.55071 10.6063 3.69416 10.0502 3.8763 9.50622H3.9717ZM16.4369 4.73548C16.4369 4.46603 15.2921 4.35508 14.2905 4.51358C13.2888 4.67208 12.0168 5.44871 12.3984 5.65476C12.7538 5.85845 13.1468 5.9887 13.5538 6.03771C13.9608 6.08673 14.3736 6.05351 14.7674 5.94005C15.7532 5.67061 16.4369 4.98907 16.4369 4.73548Z"/>
<path d="M24.0667 22.8704C27.56 20.6263 30.7268 21.938 32.7346 25.32C31.7062 25.9995 30.6615 26.6317 29.5678 27.2322C28.1235 28.0134 26.4634 28.3389 24.8189 28.1632C23.1745 27.9876 21.6276 27.3196 20.3939 26.2524C18.7452 28.133 17.5209 30.1717 17.3576 32.7477C19.4144 32.0049 20.7693 32.5896 22.5976 33.522C23.1526 33.8065 23.5607 34.249 23.9361 34.7389C24.2427 35.1281 24.5812 35.4927 24.9482 35.8293C25.2094 36.0664 25.3073 36.2876 25.2094 36.5721C25.1114 36.8566 24.8829 36.9988 24.5075 36.9988H6.27379C5.63716 37.0304 5.32701 36.4299 5.7351 35.9558L7.18792 33.9329C7.30219 33.7749 8.31426 32.6844 8.90192 32.5106C9.57969 32.3389 10.2999 32.4296 10.9097 32.7635C11.633 33.1577 12.4339 33.4 13.2604 33.4746C13.5052 33.4904 13.6195 33.443 13.6848 33.1744C14.1808 31.0886 15.0185 29.0932 16.166 27.2638C16.3129 27.0426 18.6309 24.1821 19.039 23.7871C19.4471 23.392 19.9368 23.0601 20.3286 22.6334C21.4059 21.3849 20.6387 20.168 19.6919 19.046L21.6508 16.6122C22.555 17.0908 23.3757 17.7041 24.083 18.4297C24.1483 18.5087 24.8992 19.6307 24.9482 19.8836C25.2747 21.0214 24.7523 21.9538 24.0667 22.8704Z"/>
</svg>
</footer>
<!--SCRIPTS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>