Compare commits
90 Commits
a5b9155d6d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| b2e657498c | |||
| 7c534b1473 | |||
| 6fdfeb95aa | |||
| 8927b8878b | |||
| 9d5dbcb2de | |||
| 453c5fca07 | |||
| 4678052b69 | |||
| 26c9d66a42 | |||
| a1115e5d6f | |||
| a62c28d069 | |||
| 32b0d3ea0a | |||
| 55d95fdff5 | |||
| ef7a3603cd | |||
| 45b5ca9b53 | |||
| 0d4fc0cdaf | |||
| 7387f0b83a | |||
| a170091129 | |||
| db098654dc | |||
| 31eb6bf609 | |||
|
ecaf487c96 | ||
|
|
4517f6c275 | ||
| 4e4a0937be | |||
|
|
1c729295f7 | ||
|
|
c7ecee7dcc | ||
| c9f366fcb8 | |||
| f1c4159a78 | |||
| e4d2a7dbd7 | |||
| c48a22978b | |||
| 50b012ec96 | |||
| 2cf8da051b | |||
|
|
5dcb76df6c | ||
|
|
9835cbca11 | ||
|
|
cdd0cc7a17 | ||
|
|
0af3351b29 | ||
| deffdeec50 | |||
| 3affba6764 | |||
| ac184a0c24 | |||
| f97c5a6d63 | |||
| 69e081c034 | |||
| daebb6a889 | |||
| 052f838a3e | |||
| 94156b83f6 | |||
| ca154c6150 | |||
| 84fdadf1e8 | |||
| 9d0959ab6e | |||
| c7ce5a8763 | |||
| f5e479f491 | |||
| fa7b9696b7 | |||
| f7b3a2a626 | |||
| 1bd9cc9200 | |||
| 837868e33b | |||
| 54ea2620be | |||
| 06690f35b4 | |||
| a9be81072a | |||
| c22c418208 | |||
| f5e8bab036 | |||
| 5b7c942ca1 | |||
| 71756a7819 | |||
| e2267e6e30 | |||
| 7b1669719d | |||
| 677f964736 | |||
| 2fbc05fe72 | |||
| 89537157e8 | |||
| b867a00be1 | |||
| 01bf035f18 | |||
| 51d591eb92 | |||
| 7f6302a7b9 | |||
| 5f1f27c599 | |||
| 189dccd74c | |||
| 90b50a4c91 | |||
| bcfca6f79d | |||
| d09b41fb90 | |||
| 1108cc3203 | |||
|
|
be575daa38 | ||
| a14c1d5523 | |||
| 32edf8ed5e | |||
| 0fbf2e5029 | |||
| c4301d663d | |||
| 7de731b866 | |||
| 2931d30760 | |||
| e4a4460ce5 | |||
| a3f1d8857c | |||
| b45ea05c09 | |||
| 74ec05f959 | |||
| a30a759635 | |||
| 2a346a3570 | |||
| 6e3ebac84d | |||
| 4e5c1a91cf | |||
| 2ac8609e50 | |||
| caf02fadc3 |
30
.gitignore
vendored
30
.gitignore
vendored
@@ -508,3 +508,33 @@ $RECYCLE.BIN/
|
||||
|
||||
www/medias/mediasCredits/warframeDuviriRide.mp4
|
||||
www/medias/mediasHistoireDE/warframeRailjackRide.mp4
|
||||
www/multimedia/mediasCredits/warframeDuviriRide.mp4
|
||||
www/multimedia/mediasHistoireDE/warframeRailjackRide.mp4
|
||||
COMPRESS/warframeRailjackRide.mp4
|
||||
COMPRESS/Ember.mp4
|
||||
COMPRESS/Equinox.mp4
|
||||
COMPRESS/Frost.mp4
|
||||
COMPRESS/Koumei.mp4
|
||||
COMPRESS/Rhino.mp4
|
||||
COMPRESS/Sevagoth.mp4
|
||||
COMPRESS/Voruna.mp4
|
||||
COMPRESS/warframeDuviriRide.mp4
|
||||
www/multimediaHQ/we_All_Lift_Together_mPTCq3LiZSE.mp3
|
||||
www/multimediaHQ/mediasAndres/Ember.mp4
|
||||
www/multimediaHQ/mediasAndres/EmberVid.webm
|
||||
www/multimediaHQ/mediasAndres/Equinox.mp4
|
||||
www/multimediaHQ/mediasAndres/equinox.webm
|
||||
www/multimediaHQ/mediasAndres/Frost.mp4
|
||||
www/multimediaHQ/mediasAndres/FrostVid.webm
|
||||
www/multimediaHQ/mediasAndres/Koumei.mp4
|
||||
www/multimediaHQ/mediasAndres/KoumeiVid.webm
|
||||
www/multimediaHQ/mediasAndres/nokko.webm
|
||||
www/multimediaHQ/mediasAndres/Rhino.mp4
|
||||
www/multimediaHQ/mediasAndres/RhinoVid.webm
|
||||
www/multimediaHQ/mediasAndres/Sevagoth.mp4
|
||||
www/multimediaHQ/mediasAndres/SevagothVid.webm
|
||||
www/multimediaHQ/mediasAndres/Voruna.mp4
|
||||
www/multimediaHQ/mediasAndres/VorunaVid.webm
|
||||
www/multimediaHQ/mediasCredits/warframeDuviriRide.mp4
|
||||
www/multimediaHQ/mediasHistoireDE/warframeRailjackRide.mp4
|
||||
www/multimediaHQ/mediasLea/warframeIntro.mp4
|
||||
|
||||
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
@@ -25,6 +25,8 @@
|
||||
"nhoizey.gremlins",
|
||||
"s2junn.image-essentials",
|
||||
"shardulm94.trailing-spaces",
|
||||
"esbenp.prettier-vscode"
|
||||
"esbenp.prettier-vscode",
|
||||
"wassim-k.rename-replace-extension",
|
||||
"karenpommeroy.batch-rename"
|
||||
]
|
||||
}
|
||||
52
README.md
52
README.md
@@ -4,11 +4,9 @@
|
||||
|
||||
## TODO Lists
|
||||
|
||||
- [ ] 💣💥💥Corriger bouton du nav (note perso Jeremy) 💥💥💣
|
||||
|
||||
- [x] Planification du travail connecté - Par Stan
|
||||
- [x] Coder le menu de navigation commun a toutes les pages - Jeremy
|
||||
- [ ] Coder le pied de page commun a toutes les pages - Jeremy
|
||||
- [x] Coder le pied de page commun a toutes les pages - Jeremy
|
||||
- [x] Création d’un favicon.ico pour le site - Jeremy
|
||||
- [ ] Glitch images LOGO - Stanislas
|
||||
- [ ] Formulaires dans aPropos.html - Stanislas
|
||||
@@ -19,8 +17,8 @@
|
||||
|
||||
- [ ] Rédaction du texte pour la page « Accueil » - Léa
|
||||
- [ ] Rédaction du texte pour la page « à Propos » **ET FORMULAIRE** - Stanislas
|
||||
- [X] Rédaction du texte pour la page « L’équipe » - Jérémy
|
||||
- [ ] Rédaction du texte pour la page « Histoire de DE » - Jérémy
|
||||
- [x] Rédaction du texte pour la page « L’équipe » - Jérémy
|
||||
- [x] Rédaction du texte pour la page « Histoire de DE » - Jérémy
|
||||
- [ ] Rédaction du texte pour la page « Univers Sci-fi » - // Avancement de 70% Léa
|
||||
- [ ] Rédaction du texte pour la page « Missions » - Stanislas
|
||||
- [ ] Rédaction du texte pour la page « Armures » - Andres
|
||||
@@ -29,7 +27,8 @@
|
||||
- [ ] Andres
|
||||
- [ ] Lea
|
||||
- [ ] Stan
|
||||
- [ ] Jeremy
|
||||
- [x] Jeremy
|
||||
- [ ]
|
||||
|
||||
<header> – Un entête incluant :
|
||||
▪ Un logo conçu par vous
|
||||
@@ -50,27 +49,44 @@ o <main> – Le contenu principal de la page
|
||||
|
||||
- [ ] Verifier Structure respectent ENONCÉ
|
||||
|
||||
- [ ] Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
|
||||
- [x] Vous devez ajouter un favicon (faites une recherche sur Internet pour savoir ce que c’est)
|
||||
- [ ] balise `<header>`
|
||||
- [x] Logo
|
||||
- [ ] Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
|
||||
- [ ] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
|
||||
- [ ] balise `<nav>`
|
||||
- [x] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
|
||||
- [x] balise `<nav>`
|
||||
- [x] Un bouton pour chaque page du site Web (sous la forme d’une liste `<ul>`) avec des effets de CSS
|
||||
- [ ] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
|
||||
- [ ] balise `<footer>`
|
||||
- [ ] copyright
|
||||
- [ ] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
|
||||
- [ ] La date de conception
|
||||
- [ ] balise `<main>`
|
||||
- [x] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
|
||||
- [x] balise `<footer>`
|
||||
- [x] copyright
|
||||
- [x] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
|
||||
- [x] La date de conception
|
||||
- [x] balise `<main>`
|
||||
- [ ] class dans balise `<body>`
|
||||
- [ ] Inclure les references pour chaques fichier multimedia
|
||||
- [x] Inclure les references pour chaques fichier multimedia
|
||||
- [ ] Au moins un lien de téléchargement
|
||||
- [ ] Un tableau
|
||||
- [x] • La dimension du tableau doit être au moins de 4 colonnes et 4 lignes.
|
||||
- [x] • Il doit y avoir de la fusion à l’intérieur du tableau.
|
||||
- [x] • Les bordures doivent être faites par CSS.
|
||||
- [ ] Des listes
|
||||
- [x] • Au moins une liste à puce contenant au moins 3 éléments.
|
||||
- [ ] • Au moins une liste numérotée contenant au moins 3 éléments.
|
||||
- [ ] • Au moins une d’entre elle doit être une liste imbriquée d’au moins 2 éléments supplémentaires.
|
||||
- [ ] Du contenu multimédia
|
||||
- [ ] • Au moins un fichier audio
|
||||
- [x] • Au moins deux fichiers vidéo
|
||||
- [ ] • Au moins de cinq images différentes (excluant les photos des membres de l’équipe, le logo et la
|
||||
bannière)
|
||||
- [x] Aucun texte bidon de type Lorem Ipsum ne sera accepté dans le site Web.
|
||||
- [ ]
|
||||
|
||||
```md
|
||||
. Vous pouvez les ajouter sur une page différente ou sur chaque page contenant les éléments concernés.
|
||||
```
|
||||
|
||||
- [ ] Tester les sites avec trois navigateurs (Brave, Firefox, Chrome)
|
||||
- [ ] Tester le site avec trois navigateurs (Brave, Firefox, Chrome)
|
||||
- [ ] Tester le site avec Safari (Si possible)
|
||||
|
||||
- [ ] 💣💥💥Revérifier les sources pour les images et vidéo (Identifier) 💥💥💣
|
||||
|
||||
@@ -85,7 +101,7 @@ o <main> – Le contenu principal de la page
|
||||
|
||||
### En dernier, si on a le temps
|
||||
|
||||
- [ ] Revérifier le footer
|
||||
- [x] Revérifier le footer
|
||||
|
||||
```note
|
||||
|
||||
|
||||
2715
log-git-251203.txt
Normal file
2715
log-git-251203.txt
Normal file
File diff suppressed because it is too large
Load Diff
136
www/aPropos.html
136
www/aPropos.html
@@ -1,22 +1,29 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : aPropos.html */
|
||||
/* Titre : À propos */
|
||||
/* Auteur : © Stanislas Royal, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<title>À propos</title>
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="aProposBG">
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html" class="active">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
@@ -25,22 +32,22 @@
|
||||
</nav>
|
||||
|
||||
<main class="aPropos">
|
||||
<h1>Contactez l’équipe!</h1>
|
||||
<div class="sidebyside">
|
||||
<div>
|
||||
<section class="commentaire">
|
||||
<!-- utilisation de get pour avoir les variables dans l'url : page statique -->
|
||||
<!-- si utilisation de serveur dynamique, changer pour POST -->
|
||||
<form method="get" action="reponse.html">
|
||||
<fieldset>
|
||||
<h2>Commentaire</h2>
|
||||
<fieldset id="infoContact">
|
||||
<legend>Informations de contact</legend>
|
||||
<div>
|
||||
<label for="nomComplet">Votre nom complet :</label>
|
||||
<input id="nomComplet" name="nomComplet" type="text" required minlength="3"
|
||||
placeholder="Prénom Nom">
|
||||
<label for="nomComplet">Votre nom complet :</label>
|
||||
<input id="nomComplet" name="nomComplet" type="text" required minlength="3" placeholder="Prénom Nom">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Votre adresse courriel : </label>
|
||||
<input id="email" name="email" type="email" required
|
||||
placeholder="(ex. vous@fournisseur.com)" size="30">
|
||||
<label for="email">Votre adresse courriel : </label>
|
||||
<input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)" size="30">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
@@ -60,31 +67,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pagePrefs" class="formInfo">Page préféré :</label>
|
||||
<label for="pagePrefs" class="formInfo">Page préférée :</label>
|
||||
<div>
|
||||
<select name="page" id="pagePrefs">
|
||||
<option value="accueil" selected>Page d'accueil</option>
|
||||
<option value="index" selected>Page d'accueil</option>
|
||||
<option value="aPropos">À Propos</option>
|
||||
<option value="team">L'équipe</option>
|
||||
<option value="reponse" disabled>Réponse</option>
|
||||
<option value="histoire">Histoire de DE</option>
|
||||
<optgroup label="Univers Sci-fi">
|
||||
<option value="sousPageLore1">Arc 1 : Éveil</option>
|
||||
<option value="sousPageLore2">Arc 2: Saga de la guerre intérieure
|
||||
<option value="sousPageLore1">Arc 1 : Éveil</option>
|
||||
<option value="sousPageLore2">Arc 2 : Saga de la guerre intérieure
|
||||
</option>
|
||||
<option value="sousPageLore3">Arc 3 : Saga de la nouvelle Guerre
|
||||
</option>
|
||||
<option value="sousPageLore4">Arc 4 : Saga de la guerre du Néant
|
||||
</option>
|
||||
<option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
|
||||
<option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
|
||||
|
||||
</optgroup>
|
||||
<option value="missions">Missions</option>
|
||||
<option value="armures">Armures</option>
|
||||
<option value="credits">Crédits</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Quel personnage voudriez-vous essayer : </label>
|
||||
<label>Quel personnage voudriez-vous essayer : </label>
|
||||
<div class="sidebyside">
|
||||
<!-- test clickable region no need for in label when surrounding input ?? -->
|
||||
<label class="clickLabel" for="persoOne">
|
||||
<input type="checkbox" id="persoOne" name="persoOne" value="1">
|
||||
Ember</label>
|
||||
@@ -120,8 +130,7 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Votre appreciations</legend>
|
||||
<!-- TODO : for="niveau" -->
|
||||
<legend>Votre appréciation</legend>
|
||||
<textarea name="zoneComment" rows="10" cols="80"
|
||||
placeholder="Quelque chose à ajouter?"></textarea>
|
||||
</fieldset>
|
||||
@@ -130,78 +139,39 @@
|
||||
<button type="reset">Réinitialiser</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
</section>
|
||||
|
||||
<section class="coordonnees">
|
||||
<div id="contactInfo">
|
||||
<h1>Contactez l'équipe!</h1>
|
||||
<div>
|
||||
<div>
|
||||
<h2>Coordonnées</h2>
|
||||
<div>
|
||||
<p>Adresse : <a target="_blank"
|
||||
href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
|
||||
475 Rue du Cégep, Sherbrooke, QC J1E 4K1</a></p>
|
||||
<p>Pour plus d'information sur les créateurs : <a target="_blank"
|
||||
href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
|
||||
<p>Téléphone : <a href="tel:+18195646350">+18195646350</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Coordonnées</h2>
|
||||
<div class="grille">
|
||||
<p id="titreAdresse">Adresse :</p>
|
||||
<a id="contenuAdresse" target="_blank" href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D"> 475 rue du Cégep, Sherbrooke, QC J1E 4K1</a>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p>Courriel :
|
||||
<a target="_blank" href="mailto:empty@zkd.ca">Equipe ALT-F4</a>
|
||||
</p>
|
||||
<div class="conteneurMaps">
|
||||
<iframe title="Maps pour cegep"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
|
||||
width="600" height="450" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<p id="titreInfo">Pour plus d’information sur les créateurs :</p>
|
||||
<a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a>
|
||||
|
||||
<p id="titreTelephone">Téléphone :</p>
|
||||
<a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
|
||||
|
||||
<p id="titreCourriel">Courriel :</p>
|
||||
<a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
|
||||
</div>
|
||||
<div class="conteneurMaps">
|
||||
<iframe id="mapsFrame" title="Maps pour cégep" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
Contenu minimal de la page de contact de votre site Web :
|
||||
• <main> – Le contenu principal de la page
|
||||
o Des informations de contact sous forme de :
|
||||
▪ Des coordonnées (adresse civique, adresse courriel, etc.) (peuvent être fictives)
|
||||
▪ Une carte interactive (Google maps, etc.)
|
||||
|
||||
|
||||
475 Rue du Cégep, Sherbrooke, QC J1E 4K1
|
||||
https://www.cegepsherbrooke.qc.ca/
|
||||
+18195646350
|
||||
|
||||
|
||||
|
||||
o Un formulaire de type « contactez-nous » :
|
||||
▪ Deux zones de texte monolignes
|
||||
▪ Une zone de texte multilignes
|
||||
▪ Une liste déroulante
|
||||
▪ Des choix sous forme de cases à cocher
|
||||
▪ Des choix sous forme de boutons radio
|
||||
▪ Un bouton de réinitialisation du formulaire
|
||||
▪ Un bouton d’envoi du formulaire
|
||||
o Lors de son envoi, le formulaire doit faire afficher une nouvelle page contenant un message de remerciement
|
||||
pour avoir complété le formulaire (ex : reponse.html). Cette page devra être créé en plus des autres pages
|
||||
demandées.
|
||||
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© Stanislas Royal. Tout droits réservés. <br>
|
||||
Novembre 2025 <br>
|
||||
Page créée par Les Alt-F4
|
||||
</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Stanislas Royal.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
196
www/armures.html
196
www/armures.html
@@ -1,22 +1,29 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : armures.html */
|
||||
/* Titre : Armures */
|
||||
/* Auteur : © Andres David Herrera Escorcia, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Warframes</title>
|
||||
<title>Armures</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
@@ -26,7 +33,7 @@
|
||||
|
||||
<main class="armures">
|
||||
<header class="video-header">
|
||||
<video id="entete" src="./medias/mediasAndres/nokko.webm" autoplay muted loop></video>
|
||||
<video id="entete" src="multimedia/mediasAndres/nokko.webm" autoplay muted loop></video>
|
||||
<h1 id="title">Armures</h1>
|
||||
|
||||
<nav class="wf-nav">
|
||||
@@ -44,7 +51,7 @@
|
||||
|
||||
<section class="descarmure">
|
||||
<div class="armtxt">
|
||||
<h2>Que sont les armures(Warframes) ?</h2>
|
||||
<h2>Que sont les armures (Warframes)?</h2>
|
||||
<p>Les Warframes sont des armes vivantes, des armures de combat biomécaniques façonnées pour incarner la
|
||||
volonté des Tennos. Mi-technologie, mi-créature, chacune d’elles canalise l’énergie du Néant pour
|
||||
déchaîner des pouvoirs dévastateurs et accomplir des prouesses physiques impossibles. Nées des
|
||||
@@ -52,7 +59,7 @@
|
||||
ou
|
||||
de l’essence du Tenno qui les contrôle.
|
||||
|
||||
Plus que de simples armures, elles sont des extensions de l’âme du Tenno : rapides, agiles,
|
||||
Plus que de simples armures, elles sont des extensions de l’âme du Tenno : rapides, agiles,
|
||||
destructrices, ou protectrices. Chaque Warframe possède son propre style de combat, ses capacités
|
||||
uniques et son histoire profondément liée aux cicatrices du passé. Ensemble, Tenno et Warframe
|
||||
forment
|
||||
@@ -63,7 +70,7 @@
|
||||
<section id="Ember" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/EmberVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/emberVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -71,7 +78,7 @@
|
||||
<div class="content">
|
||||
<h2>Ember</h2>
|
||||
<p>
|
||||
Des étoiles flamboyantes embrasent nos mondes. Aussi ardente que le soleil, la rage d'Ember consume
|
||||
Des étoiles flamboyantes embrasent nos mondes. Aussi ardente que le soleil, la rage d’Ember consume
|
||||
ses
|
||||
ennemis et disperse leurs cendres dans
|
||||
le vent solaire. Impératrice des flammes élémentaires, embrase la terre de ses feux sauvages.
|
||||
@@ -86,11 +93,11 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Ember/habEmber.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Ember/habEmber.PNG" alt="hh">
|
||||
</div>
|
||||
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Ember.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/ember.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,7 +106,7 @@
|
||||
<section id="Equinox" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/equinox.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/equinox.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -107,11 +114,11 @@
|
||||
<div class="content">
|
||||
<h2>Equinox</h2>
|
||||
<p>
|
||||
Incarnation de forces opposées en une seule entité, Equinox déchaîne sa colère comme l'aube
|
||||
Incarnation de forces opposées en une seule entité, Equinox déchaîne sa colère comme l’aube
|
||||
naissante,
|
||||
ou marque la fin de la vie comme le crépuscule.
|
||||
Alternant entre deux formes, elle peut renforcer les Tenno dans la lumière ou leur offrir un répit
|
||||
réparateur dans l'obscurité. <a href="https://www.warframe.com/" target="_blank">Site officiel de
|
||||
réparateur dans l’obscurité. <a href="https://www.warframe.com/" target="_blank">Site officiel de
|
||||
Warframe</a>
|
||||
</p>
|
||||
<br>
|
||||
@@ -120,10 +127,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Equinox/equinoxHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Equinox/equinoxHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Equinox.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/equinox.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,7 +139,7 @@
|
||||
<section id="Frost" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/FrostVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/frostVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -140,7 +147,7 @@
|
||||
<div class="content">
|
||||
<h2>Frost</h2>
|
||||
<p>
|
||||
Frost est un Warframe lent et lourdement blindé, capable d'utiliser ses compétences offensives et
|
||||
Frost est un Warframe lent et lourdement blindé, capable d’utiliser ses compétences offensives et
|
||||
défensives à son avantage et à celui de
|
||||
son équipe. Il déchaîne de furieux blizzards qui terrassent et gèlent ses ennemis, tout en offrant
|
||||
répit
|
||||
@@ -153,10 +160,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Frost/frostHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Frost/frostHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Frost.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/frost.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +172,7 @@
|
||||
<section id="Koumei" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/KoumeiVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/koumeiVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -173,11 +180,11 @@
|
||||
<div class="content">
|
||||
<h2>Koumei</h2>
|
||||
<p>
|
||||
Tisse les fils du destin, à la fois couturière, prophétesse et marionnette. Ose miser sur l'avenir
|
||||
d'Origin, prends des risques,
|
||||
Tisse les fils du destin, à la fois couturière, prophétesse et marionnette. Ose miser sur l’avenir
|
||||
d’Origin, prends des risques,
|
||||
laisse la chance te guider. Défie le destin, recommence et échappe à sa spirale indemne, comme la
|
||||
Vierge aux Dés, Koumei.
|
||||
Protège-toi par des charmes providentiels, puis répands le malheur sur tes ennemis, afin qu'eux
|
||||
Protège-toi par des charmes providentiels, puis répands le malheur sur tes ennemis, afin qu’eux
|
||||
aussi soient suspendus aux ficelles des
|
||||
Tenno. <a href="https://www.warframe.com/" target="_blank">Site officiel de Warframe</a>
|
||||
</p>
|
||||
@@ -187,10 +194,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Koumei/koumeiHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Koumei/koumeiHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Koumei.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/koumei.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,7 +206,7 @@
|
||||
<section id="Rhino" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/RhinoVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/rhinoVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -208,8 +215,8 @@
|
||||
<h2>Rhino</h2>
|
||||
<p>Rhino est un Warframe lourdement blindé, doté de la force et de la robustesse de son homonyme
|
||||
intrépide et impétueux. Privilégiant la
|
||||
puissance à la vitesse, Rhino est conçu pour jouer le rôle de tank au sein d'une cellule. Capable de
|
||||
foncer dans la mêlée, d'attirer
|
||||
puissance à la vitesse, Rhino est conçu pour jouer le rôle de tank au sein d’une cellule. Capable de
|
||||
foncer dans la mêlée, d’attirer
|
||||
les tirs ennemis et de plier le champ de bataille à sa volonté par la seule force brute, il est
|
||||
capable de tout contrôler. <a href="https://www.warframe.com/" target="_blank">Site officiel de
|
||||
Warframe</a>
|
||||
@@ -220,10 +227,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Rhino/rhinoHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Rhino/rhinoHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Rhino.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/rhino.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,7 +239,7 @@
|
||||
<section id="Sevagoth" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/SevagothVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/sevagothVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -240,9 +247,9 @@
|
||||
<div class="content">
|
||||
<h2>Sevagoth</h2>
|
||||
<p>
|
||||
Perdu dans un voyage à la dérive à travers le Vaste Intemporel, le sombre timonier Sevagoth
|
||||
apprivoise l'inéluctable mortalité au milieu
|
||||
des tempêtes traîtresses du Néant. Il revient éternellement d'outre-tombe, tandis que son Ombre
|
||||
Perdu dans un voyage à la dérive à travers le Vaste intemporel, le sombre timonier Sevagoth
|
||||
apprivoise l’inéluctable mortalité au milieu
|
||||
des tempêtes traîtresses du Néant. Il revient éternellement d’outre-tombe, tandis que son Ombre
|
||||
éclipse la lumière et moissonne
|
||||
les âmes damnées pour assouvir sa soif insatiable de ténèbres. <a href="https://www.warframe.com/"
|
||||
target="_blank">Site officiel de Warframe</a>
|
||||
@@ -253,10 +260,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Sevagoth/sevagothHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Sevagoth.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/sevagoth.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,7 +272,7 @@
|
||||
<section id="Voruna" class="perso">
|
||||
|
||||
<video class="bg-video" autoplay muted loop playsinline>
|
||||
<source src="./medias/mediasAndres/VorunaVid.webm" type="video/webm">
|
||||
<source src="multimedia/mediasAndres/vorunaVid.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
@@ -276,8 +283,8 @@
|
||||
Faites attention au hurlement glacial qui annonce la reprise de la chasse primordiale. La nuit tombe
|
||||
sur le sanctuaire sacré éclairé par la
|
||||
lune, où rôdent des bêtes sacrées aux griffes et aux crocs acérés. Écoutez la reine des loups,
|
||||
Voruna, car c'est ici qu'elle décrète
|
||||
son festin de minuit. Se délectant d'un carnage sauvage, ses fidèles loups, les silencieux Dynar,
|
||||
Voruna, car c’est ici qu’elle décrète
|
||||
son festin de minuit. Se délectant d’un carnage sauvage, ses fidèles loups, les silencieux Dynar,
|
||||
les chaotiques Raksh,
|
||||
les voraces Lycath et les féroces Ulfrun, ravagent leurs proies une fois lâchées. Sous la lueur
|
||||
lunaire, sur un sol écarlate,
|
||||
@@ -290,10 +297,10 @@
|
||||
|
||||
<div class="habilites-row">
|
||||
<div class="habilites">
|
||||
<img src="./images/ImagesAndres/Voruna/vorunaHab.PNG" alt="hh">
|
||||
<img src="./images/imagesAndres/Voruna/vorunaHab.PNG" alt="hh">
|
||||
</div>
|
||||
<div class="habilites-video">
|
||||
<video src="./medias/mediasAndres/Voruna.mp4" autoplay muted loop playsinline></video>
|
||||
<video src="multimedia/mediasAndres/voruna.mp4" autoplay muted loop playsinline></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,16 +325,60 @@
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<img src="./images/ImagesAndres/Excalibur.PNG" alt="Excalibur">
|
||||
<img src="./images/imagesAndres/Excalibur.PNG" alt="Excalibur">
|
||||
</td>
|
||||
<td>
|
||||
<img src="./images/ImagesAndres/mag.PNG" alt="Mag">
|
||||
<img src="./images/imagesAndres/mag.PNG" alt="Mag">
|
||||
</td>
|
||||
<td>
|
||||
<img src="./images/ImagesAndres/Nokko.PNG" alt="Nokko">
|
||||
<img src="./images/imagesAndres/Nokko.PNG" alt="Nokko">
|
||||
</td>
|
||||
<td>
|
||||
<img src="./images/ImagesAndres/Nova.PNG" alt="Nova">
|
||||
<img src="./images/imagesAndres/Nova.PNG" alt="Nova">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">Compétences</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Coupe éphémère</li>
|
||||
<li>Flash radial</li>
|
||||
<li>Javelot radial</li>
|
||||
<li>Épée exaltée</li>
|
||||
</ul>
|
||||
</li>
|
||||
</td>
|
||||
<td>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Abruti</li>
|
||||
<li>Magnétiser</li>
|
||||
<li>Polariser</li>
|
||||
<li>Écraser</li>
|
||||
</ul>
|
||||
</li>
|
||||
</td>
|
||||
<td>
|
||||
<li>
|
||||
<ul>
|
||||
<li>Peste fongique</li>
|
||||
<li>Béret lumineux</li>
|
||||
<li>Enracinement</li>
|
||||
<li>Rebond de Spore</li>
|
||||
</ul>
|
||||
</li>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Étoile nulle</li>
|
||||
<li>Goutte d'antimatière</li>
|
||||
<li>Trou de ver</li>
|
||||
<li>Imprégnation moléculaire</li>
|
||||
</ul>
|
||||
</li>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -336,61 +387,28 @@
|
||||
|
||||
<section class="wikiwar">
|
||||
<div class="wikiinfo">
|
||||
<h2>⬇️Pour plus d'informations vous pouvez consulter la wiki de Warframe⬇️</h2>
|
||||
<p>Faite click sur l'image pour se rendre!</p>
|
||||
<h2>⬇️Pour plus d’informations, vous pouvez consulter le wiki de Warframe⬇️</h2>
|
||||
<p>Faite clic sur l’image pour se rendre!</p>
|
||||
</div>
|
||||
|
||||
<div class="accueilwiki">
|
||||
<a href="https://wiki.warframe.com/">
|
||||
<img src="./images/ImagesAndres/accueilWiki.PNG" alt="jdjj">
|
||||
<a target="_blank" href="https://wiki.warframe.com/">
|
||||
<img src="./images/imagesAndres/accueilWiki.PNG" alt="jdjj">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="accueilwiki">
|
||||
<a href="https://wiki.warframe.com/w/Warframes">
|
||||
<img src="./images/ImagesAndres/warframeWiki.PNG" alt="fsfsf">
|
||||
<a target="_blank" href="https://wiki.warframe.com/w/Warframes">
|
||||
<img src="./images/imagesAndres/warframeWiki.PNG" alt="fsfsf">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="wikiinfo">
|
||||
<h2>⬇️Si vous avez des questions⬇️</h2>
|
||||
</div>
|
||||
|
||||
<div class="contact-lists">
|
||||
|
||||
<h2>Moyens de communication</h2>
|
||||
<ol>
|
||||
<li>Téléphone : 514-555-9283</li>
|
||||
<li>Instagram : @AltF4_Official</li>
|
||||
<li>Twitter / X : @AltF4Team</li>
|
||||
<li><a href="mailto:davidescorcia.ca@mail.com">Envoyer un e-mail</a></li>
|
||||
</ol>
|
||||
<br>
|
||||
<h2>Réseaux associés</h2>
|
||||
|
||||
<ul>
|
||||
<li>Communautés en ligne
|
||||
<ul>
|
||||
<li>Serveur Discord – Communauté ALT-F4</li>
|
||||
<li>Forum officiel Warframe – Section ALT-F4</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>Contenus multimédias
|
||||
<ul>
|
||||
<li>Chaîne YouTube ALT-F4</li>
|
||||
<li>Live Twitch hebdomadaire</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Andres David Herrera Escorcia. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Andres David Herrera Escorcia.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
431
www/credits.html
431
www/credits.html
@@ -1,10 +1,16 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : credits.html */
|
||||
/* Titre : Crédits */
|
||||
/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Crédits</title>
|
||||
@@ -12,11 +18,12 @@
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
@@ -25,176 +32,280 @@
|
||||
</nav>
|
||||
|
||||
<main class="credits">
|
||||
<div class="titre">
|
||||
<h1>Crédits</h1>
|
||||
<p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
|
||||
</div>
|
||||
<header class="introduction">
|
||||
<div class="introduction">
|
||||
<h1>Crédits</h1>
|
||||
<p>Découvrez les personnes et ressources qui ont contribué au fait que ce site puisse voir le jour.</p>
|
||||
<a href="#premiereBox">Plus d’infos</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Warframe</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Le site internet de Warframe a été consulté afin d'obtenir des images et vidéos authentiques du jeux.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
|
||||
</div>
|
||||
<section>
|
||||
<article id="premiereBox">
|
||||
<div class="box">
|
||||
<h2>Warframe</h2>
|
||||
<p class="contenu">
|
||||
Le site internet de Warframe a été consulté afin d’obtenir des images et vidéos authentiques du
|
||||
jeu.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://www.warframe.com/fr/game/about">Voir la
|
||||
source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Léa Dezothez</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Léa, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
<li>Léa a également fournis la vaste majorité des images.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToLea">Voir la personne</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Léa Dezothez</h2>
|
||||
<ul>
|
||||
<li class="contenu">
|
||||
Pour connaître le rôle de Léa, rendez-vous sur la page de l’équipe en cliquant sur le
|
||||
bouton.
|
||||
</li>
|
||||
<li class="contenu">
|
||||
Léa a également fourni la vaste majorité des images.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bouton"><a href="team.html#lea">Voir la personne</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Jérémy Hébert</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Jérémy, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToJeremy">Voir la personne</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Jérémy Hébert</h2>
|
||||
<ul>
|
||||
<li class="contenu">
|
||||
Pour connaître le rôle de Jérémy, rendez-vous sur la page de l’équipe en cliquant sur le
|
||||
bouton.
|
||||
</li>
|
||||
<li class="contenu">
|
||||
Jérémy a également fourni les logos ainsi que l’image se trouvant dans la page de réponse au
|
||||
formulaire.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bouton"><a href="team.html#jeremy">Voir la personne</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Andres</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Andres, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToAndres">Voir la personne</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Andres David Herrera Escorcia</h2>
|
||||
<p class="contenu">
|
||||
Pour connaître le rôle de Andres, rendez-vous sur la page de l’équipe en cliquant sur le bouton.
|
||||
</p>
|
||||
<div class="bouton"><a href="team.html#andres">Voir la personne</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Stanislas Royal</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<ul>
|
||||
<li>Pour connaître le rôle de Stanislas, rendez-vous sur la page de l'équipe en cliquant sur le bouton.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bouton"><a href="team.html#goToStanislas">Voir la personne</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Stanislas Royal</h2>
|
||||
<p class="contenu">
|
||||
Pour connaître le rôle de Stanislas, rendez-vous sur la page de l’équipe en cliquant sur le
|
||||
bouton.
|
||||
</p>
|
||||
<div class="bouton"><a href="team.html#stanislas">Voir la personne</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Création de Warframe</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>discotools.xyz</h2>
|
||||
<p class="contenu">
|
||||
Discotools.xyz a permis la création du bouclier présent dans le logo ainsi que le favicon.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://discotools.xyz/fr/icons-editor">Voir la
|
||||
source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>L’objectif</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Figma</h2>
|
||||
<p class="contenu">
|
||||
Figma a été utilisé dans la conception du logo, du favicon et de l’image de remerciement pour
|
||||
avoir rempli le formulaire.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://www.figma.com/fr-fr/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Les secrets</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Lyco Canario</h2>
|
||||
<p class="contenu">
|
||||
Lyco Canario est derrière la poule utilisée dans l’image de remerciement pour avoir rempli le
|
||||
formulaire.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://dribbble.com/lycocanario">Voir la source</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>L’évolution</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Visual Studio Code</h2>
|
||||
<p class="contenu">
|
||||
Visual Studio Code a été l’outil de développement utilisé pour l’ensemble du projet.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://code.visualstudio.com/">Voir la source</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="grille">
|
||||
<div class="soustitre">
|
||||
<h3>Coming soon...</h3>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bouton"><a href="TODO">Voir la source</a></div>
|
||||
</div>
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>/noclip</h2>
|
||||
<p class="contenu">
|
||||
Le documentaire sur Warframe conçu par /noclip a servi à rédiger la page sur l’histoire de
|
||||
Digital Extremes.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank"
|
||||
href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir
|
||||
la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Jacob Deschamps & Josianne Fortin</h2>
|
||||
<p class="contenu">
|
||||
La théorie fournie par le corps professoral a dépanné l’équipe à de multiples reprises.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank"
|
||||
href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la
|
||||
source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Gitea</h2>
|
||||
<p class="contenu">
|
||||
Les systèmes de Gitea ont permis un travail connecté durant l’ensemble du projet.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://about.gitea.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>ChatGPT</h2>
|
||||
<p class="contenu">
|
||||
ChatGPT a permis la rédaction de certains textes du site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://chatgpt.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Gemini</h2>
|
||||
<p class="contenu">
|
||||
Gemini a permis la rédaction de certains textes du site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://gemini.google.com/app">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Moqups</h2>
|
||||
<p class="contenu">
|
||||
Moqups a permis la création de la maquette, afin de rendre prévisible le style artistique du
|
||||
site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://moqups.com/fr/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Google Maps</h2>
|
||||
<p class="contenu">
|
||||
Google Maps a permis l’intégration de la carte géographique sur le site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://www.google.com/maps">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>World Wide Web Consortium</h2>
|
||||
<p class="contenu">
|
||||
Les valideurs du World Wide Web Consortium ont permis la révision du code de l’ensemble du site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://validator.w3.org/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Brave Search</h2>
|
||||
<p class="contenu">
|
||||
Le moteur de recherche Brave Search a dépanné a de multiples reprises.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://search.brave.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Google</h2>
|
||||
<p class="contenu">
|
||||
Le moteur de recherche Google a dépanné à de multiples reprises.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://www.google.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>DuckDuckGo</h2>
|
||||
<p class="contenu">
|
||||
Le moteur de recherche DuckDuckGo a dépanné à de multiples reprises.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://duckduckgo.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>paint.net</h2>
|
||||
<p class="contenu">
|
||||
L’outil paint.net a permis l’édition de plusieurs images présentes sur le site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://www.getpaint.net/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>Google Fonts</h2>
|
||||
<p class="contenu">
|
||||
Le site de Google Fonts a permis de trouver une police pour le site.
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="https://fonts.google.com/">Voir la source</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<div class="box">
|
||||
<h2>PlayWarframe</h2>
|
||||
<p class="contenu">
|
||||
La chaine Youtube officielle de Waframe a permis d'obtenir la musique «We All Lift Together».
|
||||
</p>
|
||||
<div class="bouton"><a target="_blank" href="multimedia/we_All_Lift_Together_mPTCq3LiZSE.mp3"
|
||||
download>Télécharger la musique</a></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Jérémy Hébert.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* La feuille de style est encodée en UTF-8 */
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Tous */
|
||||
/* AUTEUR: Tous */
|
||||
/* Nav + footer: Jérémy */
|
||||
/* FICHIER: style.css */
|
||||
/* AUTEURS: Léa Dezothez, Jérémy Hébert, Andres David Herrera Escorcia et Stanislas Royal */
|
||||
/****************************/
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Style commun a l'ensemble des pages du projet */
|
||||
/* AUTEUR: Léa Dezothez, Jérémy Hébert, Andres David Herrera Escorcia et Stanislas Royal */
|
||||
/* Nav + footer: Jérémy Hébert */
|
||||
/****************************/
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -12,44 +17,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** SECTION modifier par script **/
|
||||
#updateDate {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#updateDateV {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
background-color: yellow;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#updateDateW {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pageCouranteNAV {
|
||||
text-shadow: violet 2px;
|
||||
box-shadow: #ffefe5;
|
||||
}
|
||||
|
||||
/** FIN DE SECTION modifier par script **/
|
||||
|
||||
.sidebyside {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
/* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
|
||||
@@ -89,7 +56,7 @@ nav a {
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 10.8px 16px;
|
||||
margin: 160px 4px;
|
||||
margin: 16px 4px;
|
||||
background-color: #13172c;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -112,6 +79,23 @@ footer {
|
||||
color: #ffefe5;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 10.8px 16px;
|
||||
margin: 8px 4px;
|
||||
background-color: #726F9A;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
background-color: #b47871;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@@ -122,7 +106,7 @@ footer {
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Accueil */
|
||||
/* AUTEUR: Léa */
|
||||
/* AUTEUR: Léa Dezothez */
|
||||
/****************************/
|
||||
.accueil {
|
||||
color: #ffefe5;
|
||||
@@ -158,7 +142,7 @@ footer {
|
||||
|
||||
.accueil #video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -166,8 +150,8 @@ footer {
|
||||
background-color: #13172cb0;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
height: 118.5%;
|
||||
left: 50%;
|
||||
padding-bottom: 36.6%;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -264,17 +248,52 @@ footer {
|
||||
|
||||
/****************************/
|
||||
/* PAGE: à Propos */
|
||||
/* AUTEUR: Stanislas */
|
||||
/* AUTEUR: Stanislas Royal */
|
||||
/****************************/
|
||||
.aPropos {
|
||||
background-color: rgb(99, 241, 99);
|
||||
.aProposBG {
|
||||
background: url('../images/imageSR/Warframe0006.webp') center/cover fixed;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.aPropos main {
|
||||
.aPropos {
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* min-height: calc(100vh - 60px); */
|
||||
/* display: block; */
|
||||
.aPropos .sidebyside {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.aPropos .sidebyside section.commentaire,
|
||||
.aPropos .sidebyside section.coordonnees {
|
||||
width: 50%;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
|
||||
.aPropos .col-container {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.aPropos .col {
|
||||
display: table-cell;
|
||||
/* Make elements inside the container behave like table cells */
|
||||
}
|
||||
|
||||
.aPropos .centered {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aPropos h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aPropos>main>div:first {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -283,21 +302,8 @@ footer {
|
||||
max-width: 700px;
|
||||
max-height: 600px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.aPropos .conteneurMaps iframe {
|
||||
border: 0;
|
||||
margin: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aPropos .sidebyside>div {
|
||||
margin: 5px 20px;
|
||||
}
|
||||
|
||||
.aPropos .sidebyside>h1 {
|
||||
width: 120%;
|
||||
|
||||
margin-top: 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.aPropos textarea {
|
||||
@@ -305,32 +311,14 @@ footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aPropos>main {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aPropos form {
|
||||
width: 70ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
background-color: #726F9A;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
color: #E6ECF3;
|
||||
overflow: scroll;
|
||||
/*!SECTION COULEUR
|
||||
|
||||
#B47871
|
||||
#641A10
|
||||
#13172C
|
||||
#726F9A
|
||||
#273A56
|
||||
#C19F8A
|
||||
Couleur texte : #FFEFE5
|
||||
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
.aPropos p {
|
||||
@@ -339,26 +327,98 @@ Couleur texte : #FFEFE5
|
||||
|
||||
.aPropos #contactInfo {
|
||||
background-color: #273A56;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
padding: 1em;
|
||||
border-radius: 20px;
|
||||
color: #E6ECF3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aPropos a:link {
|
||||
.aPropos .grille {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"titreAdresse contenuAdresse"
|
||||
"titreInfo contenuInfo"
|
||||
"titreTelephone contenuTelephone"
|
||||
"titreCourriel contenuCourriel";
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.aPropos .grille #titreAdresse {
|
||||
grid-area: titreAdresse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.aPropos .grille #contenuAdresse {
|
||||
grid-area: contenuAdresse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.aPropos .grille #titreInfo {
|
||||
grid-area: titreInfo;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.aPropos .grille #contenuInfo {
|
||||
grid-area: contenuInfo;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.aPropos .grille #titreTelephone {
|
||||
grid-area: titreTelephone;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.aPropos .grille #contenuTelephone {
|
||||
grid-area: contenuTelephone;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.aPropos .grille #titreCourriel {
|
||||
grid-area: titreCourriel;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.aPropos .grille #contenuCourriel {
|
||||
grid-area: contenuCourriel;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.aPropos .grille #contenuAdresse,
|
||||
.aPropos .grille #contenuInfo,
|
||||
.aPropos .grille #contenuTelephone,
|
||||
.aPropos .grille #contenuCourriel {
|
||||
color: #E6ECF3;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.aPropos a:visited {
|
||||
.aPropos .grille #contenuAdresse:hover,
|
||||
.aPropos .grille #contenuInfo:hover,
|
||||
.aPropos .grille #contenuTelephone:hover,
|
||||
.aPropos .grille #contenuCourriel:hover {
|
||||
color: #c19f8a;
|
||||
|
||||
}
|
||||
|
||||
.aPropos a:hover {
|
||||
color: #726F9A;
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.conteneurMaps::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.conteneurMaps {
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aPropos #mapsFrame {
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.aPropos .sidebyside label {
|
||||
@@ -370,16 +430,29 @@ Couleur texte : #FFEFE5
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-color: #606060;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
/*.aPropos div {*/
|
||||
/* display: block; */
|
||||
/*}*/
|
||||
.aPropos fieldset:not(:first-child) {
|
||||
margin: 1em auto 1em 0px;
|
||||
}
|
||||
|
||||
.aPropos h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.aPropos #infoContact label {
|
||||
width: 11em;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.aPropos #infoContact input {
|
||||
width: 25em;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/* PAGE: L'équipe */
|
||||
/* AUTEUR: Jérémy */
|
||||
/* AUTEUR: Jérémy Hébert */
|
||||
/****************************/
|
||||
.team {
|
||||
background: #13172c center;
|
||||
@@ -489,7 +562,7 @@ Couleur texte : #FFEFE5
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Histoire de DE */
|
||||
/* AUTEUR: Jérémy */
|
||||
/* AUTEUR: Jérémy Hébert */
|
||||
/****************************/
|
||||
.histoire {
|
||||
background: #13172c center;
|
||||
@@ -627,7 +700,7 @@ Couleur texte : #FFEFE5
|
||||
|
||||
/**************************************/
|
||||
/* PAGE: Univers Sci-fi et sous-pages */
|
||||
/* AUTEUR: Léa */
|
||||
/* AUTEUR: Léa Dezothez */
|
||||
/**************************************/
|
||||
.lore:not(footer) {
|
||||
background-color: #13172c;
|
||||
@@ -869,15 +942,143 @@ Couleur texte : #FFEFE5
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Missions */
|
||||
/* AUTEUR: Stanislas */
|
||||
/* AUTEUR: Stanislas Royal */
|
||||
/****************************/
|
||||
|
||||
.missions {
|
||||
background-color: rgb(43, 189, 226);
|
||||
width: 100%;
|
||||
background-color: #273A56;
|
||||
color: #ffefe5;
|
||||
text-shadow: 2px 2px 2px #13172c;
|
||||
}
|
||||
|
||||
.missions audio {
|
||||
margin: 2em auto auto auto;
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
left: 40vh;
|
||||
width: 70vh;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.missions .sidebyside {
|
||||
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.missions section {
|
||||
height: 40vh;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.missions article {
|
||||
width: 70vw;
|
||||
height: 40vh;
|
||||
margin: 1vh 10vw;
|
||||
padding: 3em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.missions h1,
|
||||
.missions h2 {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.missions>section:first-of-type {
|
||||
padding: 0 20vw;
|
||||
}
|
||||
|
||||
.missions #autreMissions a:any-link {
|
||||
color: #bf815b;
|
||||
text-decoration: underline;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.missions section:nth-child(even) article {
|
||||
text-align: right;
|
||||
/* float: right; */
|
||||
}
|
||||
|
||||
.missions section:nth-child(odd) article {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.missions section article p {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.missions section:nth-child(even)>article>p {
|
||||
margin: auto 0 auto auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#assassination {
|
||||
background: url('../images/imageSR/qu/assassinat.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
|
||||
.missions #missionsInfo {
|
||||
background: url('../images/imageSR/qu/survie.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #survie {
|
||||
background: url('../images/imageSR/qu/survie.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #assassination {
|
||||
background: url('../images/imageSR/qu/assassinat.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #capture {
|
||||
background: url('../images/imageSR/qu/capture.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #defense {
|
||||
background: url('../images/imageSR/qu/defense.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #excavation {
|
||||
background: url('../images/imageSR/qu/excavation.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #extermination {
|
||||
background: url('../images/imageSR/qu/extermination.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #hijack {
|
||||
background: url('../images/imageSR/qu/detournement.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #interception {
|
||||
background: url('../images/imageSR/qu/interception.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #invasion {
|
||||
background: url('../images/imageSR/qu/invasion.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #mobileDefense {
|
||||
background: url('../images/imageSR/qu/defenseMobile.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #sauvetage {
|
||||
background: url('../images/imageSR/qu/sauvetage.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #sabotage {
|
||||
background: url('../images/imageSR/qu/sabotage.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
.missions #autreMissions {
|
||||
background: url('../images/imageSR/qu/sabotageRuches.jpg') center/cover fixed;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Warframes */
|
||||
/* AUTEUR: Andres */
|
||||
/* AUTEUR: Andres David Herrera Escorcia */
|
||||
/****************************/
|
||||
.armures {
|
||||
max-width: 100%;
|
||||
@@ -915,12 +1116,11 @@ Couleur texte : #FFEFE5
|
||||
|
||||
.armures .perso .bg-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 110%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -1055,6 +1255,10 @@ Couleur texte : #FFEFE5
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.accueilwiki img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wikiwar {
|
||||
background-color: #273A56;
|
||||
color: white;
|
||||
@@ -1065,19 +1269,23 @@ Couleur texte : #FFEFE5
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.wf-table-simple li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Crédits */
|
||||
/* AUTEUR: Jeremy */
|
||||
/* AUTEUR: Jérémy Hébert */
|
||||
/****************************/
|
||||
.credits {
|
||||
background: #13172c url("../images/imagesTeam/Intro.png") center;
|
||||
background: #C19F8A center;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #ffefe5;
|
||||
}
|
||||
|
||||
.credits header.introduction {
|
||||
background: #13172c url("../images/imagesDE/temporaire.webp") center/cover fixed;
|
||||
background: #13172c url("../images/imagesCredits/Header.webp") center/cover fixed;
|
||||
background-position: top;
|
||||
height: 100vh;
|
||||
display: block;
|
||||
@@ -1096,6 +1304,36 @@ Couleur texte : #FFEFE5
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.credits header.introduction div.introduction a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #ffefe5;
|
||||
padding: 10.8px 16px;
|
||||
margin: 160px 4px;
|
||||
background-color: #13172c;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.credits header.introduction div.introduction a:hover {
|
||||
border-radius: 20px;
|
||||
background-color: #b47871;
|
||||
}
|
||||
|
||||
.credits main {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.credits header.introduction h1,
|
||||
.credits header.introduction p {
|
||||
line-height: 5;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.credits header.introduction div.introduction {
|
||||
background-color: #13172cd5;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.credits div.bouton a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
@@ -1115,56 +1353,37 @@ Couleur texte : #FFEFE5
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.credits div.titre {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
padding-top: 66px;
|
||||
}
|
||||
|
||||
.credits div.grille {
|
||||
background-color: rgba(115, 110, 154, 0.9);
|
||||
border-radius: 20px;
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
grid-template-areas:
|
||||
"soustitre soustitre"
|
||||
"description description"
|
||||
"bouton bouton";
|
||||
/*grid-template-columns: 1fr 3fr;*/
|
||||
padding: 16px;
|
||||
margin: 16px 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits div.bouton {
|
||||
grid-area: bouton;
|
||||
grid-template-columns: 15%;
|
||||
.credits section article {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.credits div.soustitre {
|
||||
grid-area: soustitre;
|
||||
grid-template-columns: 85%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.credits div.description {
|
||||
grid-area: description;
|
||||
grid-template-columns: 85%;
|
||||
}
|
||||
|
||||
.credits div.image img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
/* hauteur = largeur */
|
||||
border-radius: 20%;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.credits div.grilleDroite:hover,
|
||||
.credits div.grilleGauche:hover {
|
||||
background-color: rgba(39, 58, 86, 90%);
|
||||
.credits section article div.box {
|
||||
background-color: rgba(19, 23, 44, 0.8);
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.credits section article div.box:hover {
|
||||
background-color: rgba(39, 58, 86, 0.9);
|
||||
}
|
||||
|
||||
.credits section article h2,
|
||||
.credits section article h3,
|
||||
.credits section article .contenu {
|
||||
padding: 8px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/****************************/
|
||||
/* PAGE: Merci */
|
||||
/* AUTEUR: Jérémy Hébert */
|
||||
/****************************/
|
||||
.reponse {
|
||||
background: #C19F8A url("../images/imagesReponse/Merci.png") center;
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #ffefe5;
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : histoire.html */
|
||||
/* Titre : Histoire de DE */
|
||||
/* Auteur : © Jérémy Hébert, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Histoire de DE</title>
|
||||
@@ -12,12 +18,13 @@
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="histoire.html" class="active">Histoire de DE</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html" class="active">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
<li><a href="armures.html">Armures</a></li>
|
||||
@@ -27,9 +34,9 @@
|
||||
<main class="histoire">
|
||||
<header class="introduction">
|
||||
<div class="introduction">
|
||||
<h1>L'histoire de Digital Extremes</h1>
|
||||
<p>Plonger dans l'histoire fascinante de Digital Extremes.</p>
|
||||
<a href="#contexte">Plus d'infos</a>
|
||||
<h1>L’histoire de Digital Extremes</h1>
|
||||
<p>Plonger dans l’histoire fascinante de Digital Extremes.</p>
|
||||
<a href="#contexte">Plus d’infos</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -39,79 +46,131 @@
|
||||
<div class="box">
|
||||
<h2 class="titre">La face cachée de Warframe</h2>
|
||||
<p class="contenuChapitre">
|
||||
Warframe est aujourd’hui un pilier du jeu en ligne, un univers singulier mêlant science-fiction organique et combats rapides. Pourtant, derrière son apparence futuriste, son existence même tient du miracle. Le jeu est né à une époque où Digital Extremes, son studio créateur, était au bord de l’effondrement après dix années difficiles. L’histoire de Warframe est celle d’un sauvetage inattendu, d’une idée persistante et d’une équipe déterminée à se réinventer.
|
||||
Warframe est aujourd’hui un pilier du jeu en ligne, un univers singulier mêlant science-fiction
|
||||
organique et combats rapides. Pourtant, derrière son apparence futuriste, son existence même
|
||||
tient du miracle. Le jeu est né à une époque où Digital Extremes, son studio créateur, était au
|
||||
bord de l’effondrement après dix années difficiles. L’histoire de Warframe est celle d’un
|
||||
sauvetage inattendu, d’une idée persistante et d’une équipe déterminée à se réinventer.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleDroite" id="chapitre1">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">Les Premiers Pas de James Schmalz</h3>
|
||||
<h3 class="nomChapitre">Les premiers pas de James Schmalz</h3>
|
||||
<p class="contenuChapitre">
|
||||
L’histoire commence avec James Schmalz, un passionné qui crée des jeux par loisir bien avant d’en faire une profession. Pendant ses études universitaires, il réalise un petit jeu, Legends of Murder, vendu à un magazine pour un montant modeste mais révélateur de son potentiel. Inspiré par des œuvres de science-fiction, il conçoit ensuite Solar Winds, qui attire l’attention d’Epic MegaGames. Ce premier succès est suivi d’un autre encore plus important, Epic Pinball, qui lui apporte une notoriété suffisante pour fonder Digital Extremes.
|
||||
L’histoire commence avec James Schmalz, un passionné qui crée des jeux par loisir bien avant
|
||||
d’en faire une profession. Pendant ses études universitaires, il réalise un petit jeu, Legends
|
||||
of Murder, vendu à un magazine pour un montant modeste, mais révélateur de son potentiel.
|
||||
Inspiré par des œuvres de science-fiction, il conçoit ensuite Solar Winds, qui attire
|
||||
l’attention d’Epic MegaGames. Ce premier succès est suivi d’un autre encore plus important, Epic
|
||||
Pinball, qui lui apporte une notoriété suffisante pour fonder Digital Extremes.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleGauche" id="chapitre2">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">La Décennie Unreal Tournament</h3>
|
||||
<h3 class="nomChapitre">La décennie Unreal Tournament</h3>
|
||||
<p class="contenuChapitre">
|
||||
Durant près de dix ans, Digital Extremes collabore étroitement avec Epic Games sur la franchise Unreal Tournament. Les deux studios travaillent presque comme une seule entité, partageant leurs équipes et leurs talents. Cette période voit naître certains des jeux multijoueurs les plus marquants de leur époque. Cependant, lorsque les deux entreprises prennent des chemins différents, Digital Extremes cherche à établir son propre projet ambitieux.
|
||||
Durant près de dix ans, Digital Extremes collabore étroitement avec Epic Games sur la franchise
|
||||
Unreal Tournament. Les deux studios travaillent presque comme une seule entité, partageant leurs
|
||||
équipes et leurs talents. Cette période voit naître certains des jeux multijoueurs les plus
|
||||
marquants de leur époque. Cependant, lorsque les deux entreprises prennent des chemins
|
||||
différents, Digital Extremes cherche à établir son propre projet ambitieux.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleDroite" id="chapitre3">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">Le Piège du Travail à Louer</h3>
|
||||
<h3 class="nomChapitre">Le piège du Travail à louer</h3>
|
||||
<p class="contenuChapitre">
|
||||
Le studio décide alors de se lancer dans un projet interne, Dark Sector, voulu comme une nouvelle grande franchise de science-fiction. Au lieu de leur offrir l’indépendance créative, ce prototype les enferme dans un cycle de travail à la demande pour différents éditeurs. Pariah, Warpath, l’adaptation PlayStation 3 de Bioshock et une version transformée de Dark Sector sont produits durant cette période. Le studio survit, mais la créativité s’érode. Pourtant, au cœur de ces années difficiles, un concept refuse de disparaître : celui d’un monde de science-fiction sombre, évolutif, formé d’armures vivantes et de technologie organique. C’était la racine de Warframe.
|
||||
Le studio décide alors de se lancer dans un projet interne, Dark Sector, voulu comme une
|
||||
nouvelle grande franchise de science-fiction. Au lieu de leur offrir l’indépendance créative, ce
|
||||
prototype les enferme dans un cycle de travail à la demande pour différents éditeurs. Pariah,
|
||||
Warpath, l’adaptation PlayStation 3 de Bioshock et une version transformée de Dark Sector sont
|
||||
produits durant cette période. Le studio survit, mais la créativité s’érode. Pourtant, au cœur
|
||||
de ces années difficiles, un concept refuse de disparaître : celui d’un monde de science-fiction
|
||||
sombre, évolutif, formé d’armures vivantes et de technologie organique. C’était la racine de
|
||||
Warframe.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleGauche" id="chapitre4">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">Neuf Mois pour Recommencer</h3>
|
||||
<h3 class="nomChapitre">Neuf mois pour recommencer</h3>
|
||||
<p class="contenuChapitre">
|
||||
Lorsque le marché du jeu vidéo se transforme et que les contrats se raréfient, Digital Extremes se retrouve en situation critique. La décision est prise de ressusciter l’ancienne idée de Dark Sector et d’en faire un nouveau jeu en ligne. Le studio dispose de neuf mois pour créer un prototype jouable, concevoir un site fonctionnel, bâtir une infrastructure en ligne complète et construire les fondations d’un modèle économique. Sans expérience dans le domaine des jeux persistants, l’équipe se lance dans une course contre la montre. L’objectif est clair : sortir un jeu minimal, mais fonctionnel, capable de servir de base pour l’avenir.
|
||||
Lorsque le marché du jeu vidéo se transforme et que les contrats se raréfient, Digital Extremes
|
||||
se retrouve en situation critique. La décision est prise de ressusciter l’ancienne idée de Dark
|
||||
Sector et d’en faire un nouveau jeu en ligne. Le studio dispose de neuf mois pour créer un
|
||||
prototype jouable, concevoir un site fonctionnel, bâtir une infrastructure en ligne complète et
|
||||
construire les fondations d’un modèle économique. Sans expérience dans le domaine des jeux
|
||||
persistants, l’équipe se lance dans une course contre la montre. L’objectif est clair : sortir
|
||||
un jeu minimal, mais fonctionnel, capable de servir de base pour l’avenir.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleDroite" id="chapitre5">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">Les Premiers Soutiens de la Communauté</h3>
|
||||
<h3 class="nomChapitre">Les premiers soutiens de la communauté</h3>
|
||||
<p class="contenuChapitre">
|
||||
À son lancement, Warframe avance timidement. Digital Extremes propose alors un Pack Fondateur permettant de soutenir le développement du jeu. Les premiers achats surprennent l’équipe et leur offrent un encouragement vital. En parallèle, le studio réévalue rapidement son modèle économique. Les premiers systèmes favorisaient trop fortement les joueurs payants, ce qui menaçait de briser la confiance naissante. En janvier 2013, la décision est prise d’abandonner ces éléments, marquant la transition vers un modèle plus équitable. L’arrivée du jeu sur Steam quelques mois plus tard marque un tournant décisif : le public s’élargit brusquement et les revenus permettent enfin au studio de stabiliser sa situation.
|
||||
À son lancement, Warframe avance timidement. Digital Extremes propose alors un Pack fondateur
|
||||
permettant de soutenir le développement du jeu. Les premiers achats surprennent l’équipe et leur
|
||||
offrent un encouragement vital. En parallèle, le studio réévalue rapidement son modèle
|
||||
économique. Les premiers systèmes favorisaient trop fortement les joueurs payants, ce qui
|
||||
menaçait de briser la confiance naissante. En janvier 2013, la décision est prise d’abandonner
|
||||
ces éléments, marquant la transition vers un modèle plus équitable. L’arrivée du jeu sur Steam
|
||||
quelques mois plus tard marque un tournant décisif : le public s’élargit brusquement et les
|
||||
revenus permettent enfin au studio de stabiliser sa situation.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleGauche" id="chapitre6">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">L’Évolution Continue</h3>
|
||||
<h3 class="nomChapitre">L’évolution continue</h3>
|
||||
<p class="contenuChapitre">
|
||||
Une fois l’urgence de la survie passée, Digital Extremes adopte une philosophie simple : Warframe doit évoluer constamment pour rester attractif. Le studio développe de nouvelles zones, enrichit le système de mouvement, ajoute régulièrement des Warframes et ouvre la porte aux créations de la communauté à travers le programme Tennogen. Cette dynamique s’accompagne d’un dialogue constant avec les joueurs, rendu possible par des diffusions en direct, des événements communautaires et des mises à jour fréquentes. Les développeurs apprennent à intégrer certaines pratiques inventées par les joueurs eux-mêmes, transformant des exploits en mécaniques officielles lorsque celles-ci améliorent le plaisir de jeu.
|
||||
Une fois l’urgence de la survie passée, Digital Extremes adopte une philosophie simple :
|
||||
Warframe doit évoluer constamment pour rester attractif. Le studio développe de nouvelles zones,
|
||||
enrichit le système de mouvement, ajoute régulièrement des Warframes et ouvre la porte aux
|
||||
créations de la communauté à travers le programme Tennogen. Cette dynamique s’accompagne d’un
|
||||
dialogue constant avec les joueurs, rendu possible par des diffusions en direct, des événements
|
||||
communautaires et des mises à jour fréquentes. Les développeurs apprennent à intégrer certaines
|
||||
pratiques inventées par les joueurs eux-mêmes, transformant des exploits en mécaniques
|
||||
officielles lorsque celles-ci améliorent le plaisir de jeu.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleDroite" id="chapitre7">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">Un Univers Bizarre et Unique</h3>
|
||||
<h3 class="nomChapitre">Un univers bizarre et unique</h3>
|
||||
<p class="contenuChapitre">
|
||||
L’une des forces de Warframe réside dans son identité visuelle et narrative. Plutôt que de s’inspirer des productions hollywoodiennes, les artistes du studio se tournent vers des influences européennes, notamment le travail de Moebius. Le résultat est un univers étrange, biomécanique, parfois déroutant, mais toujours distinctif. Chaque élément possède un vocabulaire propre, des Syandanas aux Kavats en passant par les factions dotées de leurs propres caractéristiques culturelles. Ce choix esthétique, parfois clivant, est devenu l’une des signatures essentielles du jeu. Ce qui semblait être une barrière à l’entrée est devenu un atout, un monde si singulier que ceux qui s’y plongent s’y attachent profondément.
|
||||
L’une des forces de Warframe réside dans son identité visuelle et narrative. Plutôt que de
|
||||
s’inspirer des productions hollywoodiennes, les artistes du studio se tournent vers des
|
||||
influences européennes, notamment le travail de Moebius. Le résultat est un univers étrange,
|
||||
biomécanique, parfois déroutant, mais toujours distinctif. Chaque élément possède un vocabulaire
|
||||
propre, des Syandanas aux Kavats en passant par les factions dotées de leurs propres
|
||||
caractéristiques culturelles. Ce choix esthétique, parfois clivant, est devenu l’une des
|
||||
signatures essentielles du jeu. Ce qui semblait être une barrière à l’entrée est devenu un
|
||||
atout, un monde si singulier que ceux qui s’y plongent s’y attachent profondément.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="grilleGauche" id="chapitre8">
|
||||
<div class="box">
|
||||
<h3 class="nomChapitre">La Transformation en Succès Durable</h3>
|
||||
<h3 class="nomChapitre">La transformation en succès durable</h3>
|
||||
<p class="contenuChapitre">
|
||||
Avec le temps, Warframe devient un exemple rare de jeu en ligne porté par la passion, l’adaptabilité et le lien avec sa communauté. Ce qui aurait pu être le dernier espoir d’un studio en difficulté devient une œuvre en perpétuelle expansion, façonnée par ses créateurs comme par ses joueurs. L’histoire de Digital Extremes et de Warframe illustre qu’un projet né de la nécessité peut devenir une référence, à condition d’être animé par une vision forte et la volonté de toujours se réinventer.
|
||||
Avec le temps, Warframe devient un exemple rare de jeu en ligne porté par la passion,
|
||||
l’adaptabilité et le lien avec sa communauté. Ce qui aurait pu être le dernier espoir d’un
|
||||
studio en difficulté devient une œuvre en perpétuelle expansion, façonnée par ses créateurs
|
||||
comme par ses joueurs. L’histoire de Digital Extremes et de Warframe illustre qu’un projet né de
|
||||
la nécessité peut devenir une référence, à condition d’être animé par une vision forte et la
|
||||
volonté de toujours se réinventer.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
@@ -119,8 +178,10 @@
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Jérémy Hébert. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Jérémy Hébert.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
BIN
www/images/ImagesLea/sciFi1999.jpg
Normal file
BIN
www/images/ImagesLea/sciFi1999.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
BIN
www/images/imageSR/Warframe0006.webp
Normal file
BIN
www/images/imageSR/Warframe0006.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
www/images/imageSR/qu/assassinat.jpg
Normal file
BIN
www/images/imageSR/qu/assassinat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
www/images/imageSR/qu/capture.jpg
Normal file
BIN
www/images/imageSR/qu/capture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
www/images/imageSR/qu/defense.jpg
Normal file
BIN
www/images/imageSR/qu/defense.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/defenseMobile.jpg
Normal file
BIN
www/images/imageSR/qu/defenseMobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
www/images/imageSR/qu/detournement.jpg
Normal file
BIN
www/images/imageSR/qu/detournement.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
www/images/imageSR/qu/espionnage.jpg
Normal file
BIN
www/images/imageSR/qu/espionnage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/excavation.jpg
Normal file
BIN
www/images/imageSR/qu/excavation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/extermination.jpg
Normal file
BIN
www/images/imageSR/qu/extermination.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
www/images/imageSR/qu/interception.jpg
Normal file
BIN
www/images/imageSR/qu/interception.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/invasion.jpg
Normal file
BIN
www/images/imageSR/qu/invasion.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/railjack.jpg
Normal file
BIN
www/images/imageSR/qu/railjack.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
www/images/imageSR/qu/recuperation.jpg
Normal file
BIN
www/images/imageSR/qu/recuperation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
BIN
www/images/imageSR/qu/sabotage.jpg
Normal file
BIN
www/images/imageSR/qu/sabotage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/sabotageRuches.jpg
Normal file
BIN
www/images/imageSR/qu/sabotageRuches.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/sauvetage.jpg
Normal file
BIN
www/images/imageSR/qu/sauvetage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
www/images/imageSR/qu/survie.jpg
Normal file
BIN
www/images/imageSR/qu/survie.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 952 KiB After Width: | Height: | Size: 952 KiB |
|
Before Width: | Height: | Size: 1002 KiB After Width: | Height: | Size: 1002 KiB |
|
Before Width: | Height: | Size: 338 KiB After Width: | Height: | Size: 338 KiB |
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 286 KiB |
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 692 KiB After Width: | Height: | Size: 692 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 391 KiB After Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 770 KiB After Width: | Height: | Size: 770 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 409 KiB After Width: | Height: | Size: 409 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
www/images/imagesAndres/Koumei/kouhab.PNG
Normal file
BIN
www/images/imagesAndres/Koumei/kouhab.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 688 KiB After Width: | Height: | Size: 688 KiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 876 KiB After Width: | Height: | Size: 876 KiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
Before Width: | Height: | Size: 973 KiB After Width: | Height: | Size: 973 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
BIN
www/images/imagesCredits/Header.webp
Normal file
BIN
www/images/imagesCredits/Header.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
BIN
www/images/imagesReponse/Merci.png
Normal file
BIN
www/images/imagesReponse/Merci.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 281 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
@@ -1,22 +1,29 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : index.html */
|
||||
/* Titre : Page d'accueil */
|
||||
/* Auteur : © Léa Dezothez, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Les ALT-F4</title>
|
||||
<title>Les Alt-F4</title>
|
||||
</head>
|
||||
|
||||
<body class="accueil">
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
@@ -28,7 +35,7 @@
|
||||
<header>
|
||||
<section>
|
||||
<div id="texte">
|
||||
<h1>WARFRAME : <br> Toute une histoire</h1>
|
||||
<h1>WARFRAME: <br> Toute une histoire</h1>
|
||||
<p> Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un
|
||||
guerrier
|
||||
d’élite
|
||||
@@ -40,9 +47,7 @@
|
||||
évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi,
|
||||
Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.</p>
|
||||
</div>
|
||||
<video autoplay muted loop playsinline id="video">
|
||||
<source src="medias/mediasLea/warframeIntro.mp4" type="video/mp4">
|
||||
</video>
|
||||
<video autoplay muted loop playsinline id="video" src="multimedia/mediasLea/warframeIntro.mp4">Balise vidéo non supportée</video>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
@@ -57,7 +62,7 @@
|
||||
<div>
|
||||
<img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa">
|
||||
<p>Léa Dezothez</p>
|
||||
<p>Directrice Artistique</p>
|
||||
<p>Directrice artistique</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -72,7 +77,7 @@
|
||||
<p>Conseiller</p>
|
||||
</div>
|
||||
<a href="team.html">
|
||||
<h2>Rencontrez l'équipe!</h2>
|
||||
<p>Rencontrez l'équipe!</p>
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
@@ -80,21 +85,21 @@
|
||||
<section> <!--Histoire de DE-->
|
||||
<article id="histoireDE">
|
||||
<div class="fondOpaqueGauche">
|
||||
<h2>L'histoire de <br><em>Digital Extreme</em></h2>
|
||||
<h2>L’histoire de <br><em>Digital Extreme</em></h2>
|
||||
|
||||
<p>Fondé en 1993, Digital Extremes s’est imposé comme un pionnier de l’industrie du jeu vidéo grâce
|
||||
à des titres marquants allant de l’ancêtre « shareware » Epic Pinball à la série emblématique
|
||||
Unreal (co-produite avec Epic Games), puis au succès mondial du jeu gratuit en ligne Warframe.
|
||||
à des titres marquants allant de l’ancêtre «shareware» Epic Pinball à la série emblématique
|
||||
Unreal (coproduite avec Epic Games), puis au succès mondial du jeu gratuit en ligne Warframe.
|
||||
Avec plus de 30 ans d’innovation à son actif, le studio est reconnu non seulement pour la
|
||||
qualité de ses jeux,
|
||||
mais aussi pour sa culture interne forte : une équipe diversifiée comptant plus de 450 personnes
|
||||
mais aussi pour sa culture interne forte: une équipe diversifiée comptant plus de 450 personnes
|
||||
réparties au Canada et à l’international, un environnement de travail collaboratif, créatif et
|
||||
engagé — et un profond attachement à la communauté de joueurs. Basé à Londres en Ontario,
|
||||
engagé, ainsi qu’un profond attachement à la communauté de joueurs. Basé à Londres en Ontario,
|
||||
Digital Extremes continue d’insuffler sa passion pour le développement et le partage, en gardant
|
||||
comme moteur la créativité, l’excellence et l’esprit communautaire.</p>
|
||||
<!--Texte généré avec ChatGPT-->
|
||||
|
||||
<a href="histoire.html">PLUS D'INFOS</a>
|
||||
<a href="histoire.html">PLUS D’INFOS</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@@ -108,13 +113,13 @@
|
||||
son histoire est devenue très complexe au cours des années.
|
||||
Des évènements de communautés, des ajouts de mécaniques et de nouvelles zones ont enrichi le
|
||||
narratif.
|
||||
Toute ces informations prennent son sens en suivant les quêtes principales, qui racontent
|
||||
Toutes ces informations prennent son sens en suivant les quêtes principales, qui racontent
|
||||
l’histoire
|
||||
du jeu.
|
||||
Pour débloquer plus de quêtes d’histoire, il faut que le joueur progresse sur le système solaire
|
||||
et
|
||||
qu’il débloque des jonctions qui lient les planètes entre elles.</p>
|
||||
<a href="lore.html">PLUS D'INFOS</a>
|
||||
<a href="lore.html">PLUS D’INFOS</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@@ -136,7 +141,7 @@
|
||||
d’adopter
|
||||
des approches variées, de s’adapter à différents styles de jeu et de tirer parti des capacités
|
||||
uniques de chaque Warframe.</p>
|
||||
<a href="missions.html">PLUS D'INFOS</a>
|
||||
<a href="missions.html">PLUS D’INFOS</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@@ -146,7 +151,7 @@
|
||||
<div class="droite">
|
||||
<h2>Les armures</h2>
|
||||
|
||||
<p>Les Warframes sont au cœur de l’expérience de Warframe : de puissantes armures biomécaniques
|
||||
<p>Les Warframes sont au cœur de l’expérience de Warframe: de puissantes armures biomécaniques
|
||||
dotées
|
||||
de capacités uniques qui définissent entièrement le style de jeu du joueur. Chacune possède
|
||||
quatre
|
||||
@@ -160,15 +165,17 @@
|
||||
peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un
|
||||
élément
|
||||
clé de la progression.</p>
|
||||
<a href="armures.html">PLUS D'INFOS</a>
|
||||
<a href="armures.html">PLUS D’INFOS</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Léa Dezothez. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Léa Dezothez.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
153
www/js/script.js
153
www/js/script.js
@@ -1,123 +1,50 @@
|
||||
|
||||
/* AUTEUR: Stan
|
||||
DATE : 2025-12-03
|
||||
DESC: Ajout de glitch comme certains evenement dans Warframe
|
||||
*/
|
||||
// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
|
||||
// Performance for my useCase (modify NAV and FOOTER)
|
||||
// https://stackoverflow.com/questions/44329324/cannot-read-property-symbolsymbol-iterator-of-undefined
|
||||
/*
|
||||
document.addEventListener("DOMContentLoaded",
|
||||
function(e) {
|
||||
console.log("DOMContentLoaded triggered !");
|
||||
|
||||
var topEl = document.getElementsByTagName("nav"); // maybe header
|
||||
var listLI = topEl[0].getElementsByTagName("li");
|
||||
// https://www.w3schools.com/js/js_timing.asp
|
||||
// https://stackoverflow.com/questions/62039703/blur-an-image-with-javascript
|
||||
function timerBlur() {
|
||||
var count = 3;
|
||||
var timer2 = setInterval(function () {
|
||||
|
||||
if (count == 3) {
|
||||
document.getElementById('logoAccueil').style.filter = "blur(3px)";
|
||||
|
||||
document.getElementById("");
|
||||
// var allA = listLI.getElementsByTagName("a");
|
||||
// topEl.
|
||||
}
|
||||
else if (count == 2) {
|
||||
document.getElementById('logoAccueil').style.filter = "blur(2px)";
|
||||
}
|
||||
else if (count == 1) {
|
||||
document.getElementById('logoAccueil').style.filter = "blur(1px)";
|
||||
}
|
||||
else if (count == 0) {
|
||||
document.getElementById('logoAccueil').style.filter = "";
|
||||
clearInterval(timer2);
|
||||
}
|
||||
count--;
|
||||
}, 350);
|
||||
|
||||
listLI.forEach(nodeLI => {console.log(nodeLI.innerHTML);});
|
||||
*/
|
||||
/*
|
||||
allA.forEach(node => {
|
||||
console.log(node);
|
||||
});
|
||||
|
||||
*/
|
||||
/*
|
||||
// let myNav = document.getElementsByTagName("nav");
|
||||
// myNav.getElementsByTagName("a")
|
||||
for (child of allA){
|
||||
console.log(child.innerHTML);
|
||||
}
|
||||
*/ // for (document.querySelector("nav")
|
||||
// });
|
||||
|
||||
|
||||
/*!SECTION
|
||||
|
||||
// .textContent
|
||||
// .innerHTML
|
||||
|
||||
|
||||
const parent = document.getElementById("myParent");
|
||||
const children = parent.children;
|
||||
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
// Perform actions on the child element
|
||||
console.log(child.textContent);
|
||||
}
|
||||
|
||||
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
// Perform actions on the child element
|
||||
console.log(child.TagName);
|
||||
console.log(child.textContent);…
|
||||
|
||||
|
||||
*/
|
||||
|
||||
// javascript console output DOM tree
|
||||
// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
|
||||
|
||||
/*
|
||||
var walker = document.createTreeWalker(
|
||||
document.documentElement,
|
||||
NodeFilter.SHOW_ELEMENT // only elements
|
||||
);
|
||||
|
||||
while (walker.nextNode()) {
|
||||
let current = walker.currentNode;
|
||||
console.log(
|
||||
current.tagName,
|
||||
[...current.attributes].map(({value,name}) => `${name}=${value}`).join()
|
||||
);
|
||||
function timerGlitch() {
|
||||
var timer = setInterval(function () {
|
||||
curSrc = document.getElementById('logoAccueil').getAttribute('src');
|
||||
if (curSrc == 'images/logoALT-F4_Nav.svg') {
|
||||
timerBlur();
|
||||
document.getElementById('logoAccueil').setAttribute('src', 'images/logoAlt-F4_NavGlitch.svg')
|
||||
}
|
||||
else {
|
||||
document.getElementById('logoAccueil').setAttribute('src', 'images/logoALT-F4_Nav.svg')
|
||||
}
|
||||
}, 2500);
|
||||
}
|
||||
*/
|
||||
|
||||
// Needed for image loaded and fetched : Not on local computer.
|
||||
/* https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
|
||||
document.addEventListener("load", function(e) {
|
||||
console.log("The page has completely loaded.");
|
||||
});
|
||||
*/
|
||||
|
||||
window.onload = function () {
|
||||
setTimeout(function () {
|
||||
/* document.getElementById('message').innerHTML =
|
||||
'The page has finished loading! After 2 second'; */
|
||||
// Check if on the test domain and that the text changed, if so display Data.
|
||||
if (window.location.hostname === 's.zkd.ca' && document.getElementById("updateDate").innerHTML != 'DATE_WEBSITE' )
|
||||
{
|
||||
document.getElementById("updateDate").setAttribute("id", "updateDateV");
|
||||
} else
|
||||
{
|
||||
document.getElementById("updateDate").setAttribute("id", "updateDateW");
|
||||
document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/children
|
||||
// const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
|
||||
myNav = document.getElementsByTagName("nav");
|
||||
console.log(myNav.length());
|
||||
|
||||
for (var i = 0; i < myNav.children.length(); i++) {
|
||||
var tableChild = myNav.children[i];
|
||||
console.log(tableChild.tagName);
|
||||
// Do stuff
|
||||
}
|
||||
|
||||
/* for (const child of myNav.children) {
|
||||
console.log(child.tagName);
|
||||
}
|
||||
*/
|
||||
}, 2000);
|
||||
// NOTE: Change Current Page based on url in <NAV>
|
||||
|
||||
|
||||
// TODO Add timer for glitch
|
||||
// NOTE Track mouse mouvement and show after a percentage of ?
|
||||
// NOTE une page sur deux, ...
|
||||
};
|
||||
timerGlitch();
|
||||
// NOTE: Change Current Page based on url in <NAV>
|
||||
// NOTE Track mouse mouvement and show after a percentage of ?
|
||||
// NOTE une page sur deux, ...
|
||||
};
|
||||
@@ -1,10 +1,16 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : lore.html */
|
||||
/* Titre : Univers Sci-fi */
|
||||
/* Auteur : © Léa Dezothez, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Univers Sci-fi</title>
|
||||
@@ -12,11 +18,12 @@
|
||||
|
||||
<body class="lore">
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe</a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html" class="active">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html">Missions</a></li>
|
||||
@@ -29,27 +36,27 @@
|
||||
<div>
|
||||
<h1>Comment commence <em>Warframe</em>?</h1>
|
||||
|
||||
<p>Depuis l’année 2024, les nouveaux joueurs ont accès à deux débuts qui finissent par converger.
|
||||
Le premier est celui qui est considéré <em>«Canon»</em> dans l’univers de Warframe tandis que le
|
||||
<p>Depuis l’année 2024, les nouveaux joueurs ont accès à deux débuts qui finissent par converger.
|
||||
Le premier est celui qui est considéré <em>«Canon»</em> dans l’univers de Warframe, tandis que le
|
||||
deuxième
|
||||
ressemble plus à un <em>Roguelike</em> pour rapidement introduire les joueurs au fonctionnement du
|
||||
jeu.
|
||||
Il n’y a pas de conséquences à choisir le premier chemin, mais choisir le deuxième pour un nouveau
|
||||
joueur pourrait être plus désorientant qu’autre chose même s’il l’introduit tout de suite à toutes
|
||||
les mécaniques importantes. <strong>Ces pages sur l'histoire inclue aussi ce deuxième chemin, mais
|
||||
ne l'aborde que lorsqu'il arrive au moment important dans l'histoire principale.</strong></p>
|
||||
joueur pourrait être plus désorientant qu’autre chose, même s’il l’introduit tout de suite à toutes
|
||||
les mécaniques importantes. <strong>Ces pages sur l’histoire incluent aussi ce deuxième chemin, mais
|
||||
ne l’abordent que lorsqu’il arrive au moment important dans l’histoire principale.</strong></p>
|
||||
|
||||
<h3>Cliquez sur l'image pour sauter à la page concernant l'arc voulu!</h3>
|
||||
<h3>Cliquez sur l’image pour sauter à la page concernant l’arc voulu!</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Arc 1: Éveil</th>
|
||||
<th>Arc 2: Saga de la guerre intérieure</th>
|
||||
<th>Arc 3: Saga de la nouvelle Guerre</th>
|
||||
<th>Arc 4: Saga de la guerre du Néant</th>
|
||||
<th>Arc 1 : Éveil</th>
|
||||
<th>Arc 2 : Saga de la guerre intérieure</th>
|
||||
<th>Arc 3 : Saga de la nouvelle Guerre</th>
|
||||
<th>Arc 4 : Saga de la guerre du Néant</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="sousPageLore1.html"><img src="images/ImagesLea/awakeningTableau.jpg"
|
||||
alt="Trois tenno prennent la pose"></a></td>
|
||||
alt="Trois Tenno prennent la pose"></a></td>
|
||||
|
||||
<td><a href="sousPageLore2.html"><img src="images/ImagesLea/warWithinTableau.jpg"
|
||||
alt="Environnement de la forteresse Grineer"></a></td>
|
||||
@@ -58,7 +65,7 @@
|
||||
alt="Image du Sentient Natah"></a></td>
|
||||
|
||||
<td><a href="sousPageLore4.html"><img src="images/ImagesLea/voidWarTableau.jpg"
|
||||
alt="Image de Rhino et Mag dos à dos"></a></td>
|
||||
alt="Image de Rhino et Mag, dos à dos"></a></td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
@@ -67,8 +74,10 @@
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Léa Dezothez. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Léa Dezothez.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,10 +1,16 @@
|
||||
<!-- /**********************************************************/
|
||||
/* Fichier : missions.html */
|
||||
/* Titre : Missions */
|
||||
/* Auteur : © Stanislas Royal, Cégep de Sherbrooke */
|
||||
/*************************************************************-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="images/F4vicon.ico">
|
||||
<link rel="icon" href="images/f4vicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>Missions</title>
|
||||
@@ -12,11 +18,12 @@
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
|
||||
<a href="index.html" class="boutonAccueil"><img src="images/logoALT-F4_Nav.svg" alt="ALT-F4"
|
||||
id="logoAccueil"></a>
|
||||
|
||||
<ul>
|
||||
<li><a href="aPropos.html">À propos</a></li>
|
||||
<li><a href="team.html">L'équipe</a></li>
|
||||
<li><a href="team.html">L’équipe </a></li>
|
||||
<li><a href="histoire.html">Histoire de DE</a></li>
|
||||
<li><a href="lore.html">Univers Sci-fi</a></li>
|
||||
<li><a href="missions.html" class="active">Missions</a></li>
|
||||
@@ -25,12 +32,138 @@
|
||||
</nav>
|
||||
|
||||
<main class="missions">
|
||||
<p>Coming soon...</p>
|
||||
<section id="missionsInfo">
|
||||
<h1>Les missions</h1>
|
||||
<p>Il existe plusieurs types de missions dans Warframe. Une des mécaniques du jeu, les missions, est très
|
||||
importante par le fait qu’elles nous permettent de récolter des ressources pour créer de meilleures
|
||||
armes, armures et compagnons.
|
||||
Les styles de missions présentées seront les plus communes et celles que le joueur rencontrera le plus
|
||||
lors de l’histoire et de l’exploration de la carte stellaire.</p>
|
||||
</section>
|
||||
<audio src="multimedia/we_All_Lift_Together_mPTCq3LiZSE.mp3" loop controls>Balise audio non
|
||||
supportée</audio>
|
||||
<section id="survie">
|
||||
<article>
|
||||
<h2>Survival</h2>
|
||||
<p>Les missions de survie sont à durée illimitée, les joueurs reçoivent à chaque cinq minutes le choix
|
||||
de
|
||||
continuer ou d’évacuer. Ils reçoivent aussi une récompense basée sur le niveau de la difficulté.
|
||||
Lorsque les joueurs évacuent, ils n’ont pas besoin de se rendre à l’extraction, contrairement aux
|
||||
autres
|
||||
types de missions.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="assassination">
|
||||
<article>
|
||||
<h2>Assassination</h2>
|
||||
<p>Les missions d’assassination présentent une victime à localiser et éliminer, il n’y a que très
|
||||
rarement
|
||||
d’autre objectif. Ceci représente donc des missions rapidement complétées.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="capture">
|
||||
<article>
|
||||
<h2>Capture</h2>
|
||||
<p>Dans le même style que les missions d’Assassination, il faut localiser la cible et la diminuer ses
|
||||
points
|
||||
de vie avant de pouvoir la capturer</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="defense">
|
||||
<article>
|
||||
<h2>Défense</h2>
|
||||
<p>Une défense oblige les joueurs à protéger un objet sur la carte. Il y a généralement un bouclier pour
|
||||
aider les joueurs et la mission peut être chronométrée ou a plusieurs vagues, comme une mission de
|
||||
survie.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="excavation">
|
||||
<article>
|
||||
<h2>Excavation</h2>
|
||||
<p>Découlant un peu des missions de défenses, les joueurs doivent se rendre à un point d’excavation ou
|
||||
une
|
||||
perceuse minière se doit d’être alimentée en énergie et protéger le temps qu’elle fonctionne.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="extermination">
|
||||
<article>
|
||||
<h2>Extermination</h2>
|
||||
<p>Généralement, pendant un conflit entre des factions du jeu, le joueur se doit de libérer l’espace du
|
||||
conflit au détriment des factions présentes. Il y a un minimum d’ennemi à éliminer pour compléter la
|
||||
mission, ensuite le joueur peut explorer la carte ou se rendre a l’extraction.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="hijack">
|
||||
<article>
|
||||
<h2>Hijack</h2>
|
||||
<p>Une autre mission de défense, où l’objet est un véhicule avançant lentement vers l’objectif, les
|
||||
joueurs
|
||||
doivent défendre le véhicule. La mission est nommée hijack, puisqu’il s’agit normalement d’un
|
||||
véhicule
|
||||
appartenant à la faction de la carte.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="interception">
|
||||
<article>
|
||||
<h2>Interception</h2>
|
||||
<p>Une mission basée sur «Capture the Flag», les joueurs doivent capturer des zones et les contrôler le
|
||||
plus longtemps possible. Il est possible de faire ce type de mission seul, si le joueur utilise un
|
||||
Warframe avec une grande mobilité.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="invasion">
|
||||
<article>
|
||||
<h2>Invasion</h2>
|
||||
<p>Mission d’extermination contre une espèce extraterrestre mutante. Deux factions s’opposent pour le
|
||||
contrôle d’une planète, les joueurs choisissent leur camp!</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="mobileDefense">
|
||||
<article>
|
||||
<h2>Mobile Défense</h2>
|
||||
<p>Une mission où nous devons déplacer un objet pour pirater des consoles, généralement trois consoles,
|
||||
et
|
||||
le temps du piratage, nous défendons le terminal pour pouvoir procéder ensuite au suivant.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="sauvetage">
|
||||
<article>
|
||||
<h2>Rescue</h2>
|
||||
<p>L’objectif, ici, est de localiser un prisonnier dans une base, de le libérer, pour ensuite l’escorter
|
||||
jusqu’à l’extraction</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="sabotage">
|
||||
<article>
|
||||
<h2>Sabotage</h2>
|
||||
<p>Mission où les joueurs font exploser des réacteurs pour détruire une base ennemie.</p>
|
||||
</article>
|
||||
</section>
|
||||
<section id="autreMissions">
|
||||
<article>
|
||||
<h2>Autres missions</h2>
|
||||
<div class="sidebyside">
|
||||
<div>
|
||||
<p>Il existe encore bien plus de style de missions, je vous invite à jouer pour les découvrir.
|
||||
</p>
|
||||
<p><a target="_blank" href="https://www.warframe.com/download">Page de téléchargement de
|
||||
Warframe</a>
|
||||
</p>
|
||||
</div>
|
||||
<iframe title="steam" src="https://store.steampowered.com/widget/230410/" frameborder="0"
|
||||
width="646" height="190"></iframe>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© Stanislas Royal. Tout droits réservés. <br> Novembre 2025 <br> Page créée par Les Alt-F4</p>
|
||||
<p id="updateDate">DATE_WEBSITE</p>
|
||||
<p>Copyright © 2025 Les Alt-F4. Tous droits réservés.</p>
|
||||
<p>Page créée par Stanislas Royal.</p>
|
||||
<a href="credits.html">Crédits</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
BIN
www/multimedia/mediasAndres/ember.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/ember.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/equinox.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/equinox.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/frost.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/frost.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/koumei.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/koumei.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/rhino.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/rhino.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/sevagoth.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/sevagoth.mp4
LFS
Normal file
Binary file not shown.
BIN
www/multimedia/mediasAndres/voruna.mp4
LFS
Normal file
BIN
www/multimedia/mediasAndres/voruna.mp4
LFS
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user