178 lines
9.6 KiB
HTML
178 lines
9.6 KiB
HTML
<!-- /**********************************************************/
|
||
/* 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="stylesheet" href="css/style.css">
|
||
<title>À propos</title>
|
||
<script src="js/script.js"></script>
|
||
</head>
|
||
|
||
<body class="aProposBG">
|
||
<nav>
|
||
<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="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>
|
||
<li><a href="armures.html">Armures</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<main class="aPropos">
|
||
<h1>Contactez l’équipe!</h1>
|
||
<div class="sidebyside">
|
||
<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">
|
||
<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">
|
||
</div>
|
||
<div>
|
||
<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>
|
||
<legend>Réponse courte</legend>
|
||
<div>
|
||
<div class="sidebyside">
|
||
<div>
|
||
<label class="formInfo">Reviendriez-vous? :</label>
|
||
|
||
<div class="selecteurRadio">
|
||
<input id="radOui" name="rad" type="radio" value="5">
|
||
<label for="radOui">Oui</label>
|
||
<input id="radNon" name="rad" type="radio" value="10">
|
||
<label for="radNon">Non</label>
|
||
<input id="radMB" name="rad" type="radio" value="15">
|
||
<label for="radMB">Peut-être</label>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label for="pagePrefs" class="formInfo">Page préférée :</label>
|
||
<div>
|
||
<select name="page" id="pagePrefs">
|
||
<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>
|
||
<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>
|
||
<div class="sidebyside">
|
||
<label class="clickLabel" for="persoOne">
|
||
<input type="checkbox" id="persoOne" name="persoOne" value="1">
|
||
Ember</label>
|
||
<label for="persoTwo">
|
||
<input type="checkbox" id="persoTwo" name="persoTwo" value="1">
|
||
Equinox</label>
|
||
|
||
<label for="persoThree">
|
||
<input type="checkbox" id="persoThree" name="persoThree" value="1">
|
||
Frost</label>
|
||
|
||
<label for="persoFour">
|
||
<input type="checkbox" id="persoFour" name="persoFour" value="1">
|
||
Koumei</label>
|
||
|
||
<label for="persoFive">
|
||
<input type="checkbox" id="persoFive" name="persoFive" value="1">
|
||
Rhino</label>
|
||
|
||
|
||
<label for="persoSix">
|
||
<input type="checkbox" id="persoSix" name="persoSix" value="1">
|
||
Sevagoth</label>
|
||
<label for="persoSeven">
|
||
<input type="checkbox" id="persoSeven" name="persoSeven" value="1">
|
||
Voruna</label>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label>Niveau de satisfaction</label>
|
||
<input name="niveau" type="range" value="100">
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset>
|
||
<legend>Votre appréciation</legend>
|
||
<textarea name="zoneComment" rows="10" cols="80"
|
||
placeholder="Quelque chose à ajouter?"></textarea>
|
||
</fieldset>
|
||
<div class="sidebyside centered">
|
||
<button type="submit">Envoyer</button>
|
||
<button type="reset">Réinitialiser</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="coordonnees">
|
||
<div id="contactInfo">
|
||
<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>
|
||
|
||
<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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<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>
|
||
|
||
</html> |