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"> <main class="aPropos">
<p id="message">Coming soon...</p> <p id="message">Coming soon...</p>
<div> <div class="sidebyside">
<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> <div>
<!-- utilisation de get pour avoir les variables dans l'url : page statique --> <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
<!-- si utilisation de serveur dynamique, changer pour POST --> <!-- si utilisation de serveur dynamique, changer pour POST -->
@@ -68,8 +40,8 @@ demandées.
</div> </div>
<div> <div>
<label for="email">Votre adresse courriel : </label> <label for="email">Votre adresse courriel : </label>
<input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)" <input id="email" name="email" type="email" required
size="30"> placeholder="(ex. vous@fournisseur.com)" size="30">
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>
@@ -98,7 +70,8 @@ demandées.
<option value="histoire">Histoire de DE</option> <option value="histoire">Histoire de DE</option>
<optgroup label="Univers Sci-fi"> <optgroup label="Univers Sci-fi">
<option value="sousPageLore1">Arc 1 : Éveil</option> <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="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
<option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</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> <label>Quel personnage voudriez-vous essayer : </label>
<div class="sidebyside"> <div class="sidebyside">
<!-- test clickable region --> <!-- 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"> <input type="checkbox" id="persoOne" name="persoOne" value="1">
Ember</label> Ember</label>
@@ -146,7 +119,8 @@ demandées.
<fieldset> <fieldset>
<legend>Votre appreciations</legend> <legend>Votre appreciations</legend>
<!-- TODO : for="niveau" --> <!-- 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> </fieldset>
<div class="sidebyside centered"> <div class="sidebyside centered">
<button type="submit">Envoyer</button> <button type="submit">Envoyer</button>
@@ -154,6 +128,64 @@ demandées.
</div> </div>
</form> </form>
</div> </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> </main>
<footer> <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 { .aPropos .sidebyside>div {
margin: 5px 20px; margin: 5px 20px;
} }
.aPropos .sidebyside>h1 {
width: 120%;
}
.aPropos textarea { .aPropos textarea {
resize: none; resize: none;
width: 100%; 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 peut être façonnée selon les préférences du joueur, faisant du choix et de loptimisation un
élément élément
clé de la progression.</p> clé de la progression.</p>
<a href="warframes.html">PLUS D'INFOS</a> <a href="armures.html">PLUS D'INFOS</a>
</div> </div>
</article> </article>
</section> </section>