changement a stan
This commit is contained in:
@@ -8,12 +8,15 @@ Equipe
|
||||
Escorcia
|
||||
Grineers
|
||||
Hébert
|
||||
Koumei
|
||||
natah
|
||||
Natah
|
||||
Orbis
|
||||
reponse
|
||||
Sevagoth
|
||||
soustitre
|
||||
vors
|
||||
Voruna
|
||||
warframe
|
||||
Warframe
|
||||
warframes
|
||||
|
||||
34
README.md
34
README.md
@@ -56,9 +56,9 @@ o <main> – Le contenu principal de la page
|
||||
- [ ] 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] Un bouton pour chaque page du site Web (sous la forme d’une liste <ul>) avec des effets de CSS
|
||||
- [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>`
|
||||
- [ ] 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
|
||||
@@ -100,6 +100,36 @@ o <main> – Le contenu principal de la page
|
||||
|
||||
- [ ] Autres ...
|
||||
|
||||
HTML
|
||||
|
||||
```html
|
||||
<!-- /**********************************************************************************/
|
||||
/* Fichier
|
||||
: page_web.html
|
||||
*/
|
||||
/* Titre
|
||||
: Exercice de création d'une page Web HTML 5
|
||||
*/
|
||||
/* Auteur
|
||||
: © Josianne Fortin, Cégep de Sherbrooke
|
||||
*/
|
||||
/* Date
|
||||
: 2025-08-22
|
||||
*/
|
||||
/* Description : Ce document réalise une page Web sur les balises et attributs HTML 5 */
|
||||
/*************************************************************************************-->
|
||||
```
|
||||
|
||||
CSS
|
||||
|
||||
```css
|
||||
/* Fichier : style.css
|
||||
Auteur : Alex Tremblay
|
||||
Date : 2025-09-15
|
||||
Description : CSS principale pour le
|
||||
site Comiccon */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
110
www/aPropos.html
110
www/aPropos.html
@@ -38,22 +38,122 @@ Contenu minimal de la page de contact de votre site Web :
|
||||
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 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
|
||||
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>
|
||||
<!-- 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>
|
||||
<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é :</label>
|
||||
<div>
|
||||
<select name="page" id="pagePrefs">
|
||||
<option value="accueil" selected>Page d'accueil</option>
|
||||
<option value="aPropos">À Propos</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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Quel personnage voudriez-vous essayer : </label>
|
||||
<div class="sidebyside">
|
||||
<!-- test clickable region -->
|
||||
<label class="clickLabel" for="persoOne" style="background-color: blue;">
|
||||
<input type="checkbox" id="persoOne" name="persoOne" value="1">
|
||||
Ember</label>
|
||||
|
||||
<input type="checkbox" id="persoTwo" name="persoTwo" value="1">
|
||||
<label for="persoTwo">Equinox</label>
|
||||
|
||||
|
||||
<input type="checkbox" id="persoThree" name="persoThree" value="1">
|
||||
<label for="persoThree">Frost</label>
|
||||
|
||||
|
||||
<input type="checkbox" id="persoFour" name="persoFour" value="1">
|
||||
<label for="persoFour">Koumei</label>
|
||||
|
||||
|
||||
<input type="checkbox" id="persoFive" name="persoFive" value="1">
|
||||
<label for="persoFive">Rhino</label>
|
||||
<input type="checkbox" id="persoSix" name="persoSix" value="1">
|
||||
<label for="persoSix">Sevagoth</label>
|
||||
<input type="checkbox" id="persoSeven" name="persoSeven" value="1">
|
||||
<label for="persoSeven">Voruna</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Niveau de satisfaction</label>
|
||||
<input name="niveau" type="range" value="100">
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Votre appreciations</legend>
|
||||
<!-- TODO : for="niveau" -->
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
@@ -42,6 +42,16 @@
|
||||
|
||||
/** 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/ */
|
||||
@@ -255,6 +265,30 @@ footer {
|
||||
|
||||
}
|
||||
|
||||
.aPropos .sidebyside>div {
|
||||
margin: 5px 20px;
|
||||
}
|
||||
.aPropos textarea {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aPropos form {
|
||||
width: 70ch;
|
||||
margin: auto;
|
||||
background-color: #273A56;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
color: #E6ECF3;
|
||||
overflow:scroll;
|
||||
}
|
||||
.aPropos fieldset {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-color: #606060;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
/*.aPropos div {*/
|
||||
/* display: block; */
|
||||
/*}*/
|
||||
|
||||
14
www/reponse.html
Normal file
14
www/reponse.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Merci de vos commentaire</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
Page de retour du formulaire.
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user