Public Access
5
0
This commit is contained in:
2025-11-30 16:50:31 -05:00
3 changed files with 151 additions and 104 deletions

View File

@@ -26,35 +26,7 @@
<main class="aPropos">
<p id="message">Coming soon...</p>
<div>
<div>
<h1>Contactez l'équipe!</h1>
</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.)
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 denvoi 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 class="sidebyside">
<div>
<!-- utilisation de get pour avoir les variables dans l'url : page statique -->
<!-- si utilisation de serveur dynamique, changer pour POST -->
@@ -68,8 +40,8 @@ demandées.
</div>
<div>
<label for="email">Votre adresse courriel : </label>
<input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)"
size="30">
<input id="email" name="email" type="email" required
placeholder="(ex. vous@fournisseur.com)" size="30">
</div>
</fieldset>
<fieldset>
@@ -98,7 +70,8 @@ demandées.
<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="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>
@@ -113,7 +86,7 @@ demandées.
<label>Quel personnage voudriez-vous essayer : </label>
<div class="sidebyside">
<!-- test clickable region -->
<label class="clickLabel" for="persoOne" style="background-color: blue;">
<label class="clickLabel" for="persoOne">
<input type="checkbox" id="persoOne" name="persoOne" value="1">
Ember</label>
@@ -146,7 +119,8 @@ demandées.
<fieldset>
<legend>Votre appreciations</legend>
<!-- TODO : for="niveau" -->
<textarea name="zoneComment" rows="10" cols="80" placeholder="Quelque chose à ajouter?"></textarea>
<textarea name="zoneComment" rows="10" cols="80"
placeholder="Quelque chose à ajouter?"></textarea>
</fieldset>
<div class="sidebyside centered">
<button type="submit">Envoyer</button>
@@ -154,6 +128,64 @@ demandées.
</div>
</form>
</div>
<div>
<div>
<h1>Contactez l'équipe!</h1>
<div>
<div>
<h2>Coordonnées</h2>
<div>
<p>Adresse : 475 Rue du Cégep, Sherbrooke, QC J1E 4K1</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 : +18195646350</p>
</div>
</div>
<div>
<div>
Contact
</div>
<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>
</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 denvoi 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>
</main>
<footer>

View File

@@ -277,10 +277,25 @@ footer {
}
.aPropos .conteneurMaps {
max-width: 700px;
max-height: 600px;
overflow: scroll;
}
.aPropos .conteneurMaps­>iframe {
border:0;
}
.aPropos .sidebyside>div {
margin: 5px 20px;
}
.aPropos .sidebyside>h1 {
width: 120%;
}
.aPropos textarea {
resize: none;
width: 100%;

View File

@@ -160,7 +160,7 @@
peut être façonnée selon les préférences du joueur, faisant du choix et de loptimisation un
élément
clé de la progression.</p>
<a href="warframes.html">PLUS D'INFOS</a>
<a href="armures.html">PLUS D'INFOS</a>
</div>
</article>
</section>