Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01

www/aPropos.html

@@ -26,35 +26,7 @@
 
     <main class="aPropos">
         <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 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>
                 <!-- 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)"
+                            <input id="email" name="email" type="email" required
-                            size="30">
+                                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 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>
     </main>
 
     <footer>

www/css/style.css

@@ -117,6 +117,7 @@ footer {
 ::selection {
     /*Source: https://openclassrooms.com/forum/sujet/couleur-surlignage-34526*/
     background-color: #641a10;
+    color: #ffefe5;
 }
 
 /****************************/
@@ -277,10 +278,26 @@ 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%;
@@ -312,49 +329,44 @@ footer {
 /* AUTEUR: Jérémy */
 /****************************/
 .team {
-    background: #13172c url("../images/imagesTeam/Intro.png") center;
+    background: #13172c center;
     background-size: cover;
     background-position: top;
     color: #ffefe5;
 }
 
 .team header.introduction {
-    background: #13172c url("../images/imagesTeam/Introduction.png") center/cover fixed;
+    background: #13172c url("../images/imagesTeam/BackgroundHeader.webp") center/cover fixed;
     background-position: top;
     height: 100vh;
     display: block;
     text-align: center;
     align-content: center;
+}
+
+.team header.introduction h1,
+.team header.introduction p {
     line-height: 5;
     font-size: 2rem;
 }
 
+
 .team header.introduction div.introduction {
     background-color: #13172cd5;
     height: 100vh;
 }
 
-.team header.introduction button {
+.team header.introduction div.introduction a {
-    color: #ffefe5;
+    display: inline-block;
-    padding: 0 16px;
-    margin: 0 4px;
-
-    height: 40px;
-    border: none;
-    border-radius: 20px;
-    background-color: #13172c;
-}
-
-.team header.introduction button a {
-    display: flex;
-    align-items: center;
-    align-content: center;
     text-decoration: none;
+    color: #ffefe5;
+    padding: 10.8px 16px;
+    margin: 160px 4px;
+    background-color: #13172c;
+    border-radius: 20px;
 }
 
-
+.team header.introduction div.introduction a:hover {
-.team header.introduction button:hover {
-    height: 40px;
     border-radius: 20px;
     background-color: #b47871;
 }
@@ -363,73 +375,65 @@ footer {
     margin: auto;
 }
 
-.team div.titre {
+.team section article {
-    grid-area: titre;
-    text-align: center;
-    font-size: 2rem;
-    padding-top: 66px;
-}
-
-.team div.grilleGauche {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "avatar nom"
-        "avatar description";
-    grid-template-columns: 1fr 5fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.team div.grilleDroite {
-    background-color: rgb(19 23 44 / 90%);
-    border-radius: 20px;
-    display: grid;
-    align-items: flex-start;
-    grid-template-areas:
-        "nom avatar"
-        "description avatar";
-    grid-template-columns: 5fr 1fr;
-    grid-template-rows: 1fr 5fr;
-    padding: 16px;
-    margin: 16px 5%;
-    text-align: justify;
-}
-
-.team div.avatar {
-    grid-area: avatar;
-    grid-template-columns: 15%;
     display: flex;
-    justify-content: center;
+    padding: 16px;
+    height: 100vh;
     align-items: center;
 }
 
-.team div.nom {
+.team section article.grilleGauche {
-    grid-area: nom;
+    text-align: left;
-    grid-template-columns: 85%;
-    text-align: center;
 }
 
-.team div.description {
+.team section article.grilleDroite {
-    grid-area: description;
+    text-align: right;
-    grid-template-columns: 85%;
 }
 
-.team div.avatar img {
+.team section article#lea {
-    width: 100%;
+    background: #13172c url("../images/imagesTeam/BackgroundLea.webp") center/cover fixed;
-    aspect-ratio: 1 / 1;
+}
-    /* hauteur = largeur */
+
-    border-radius: 20%;
+.team section article#jeremy {
+    background: #13172c url("../images/imagesTeam/BackgroundJeremy.webp") center/cover fixed;
+}
+
+.team section article#andres {
+    background: #13172c url("../images/imagesTeam/BackgroundAndres.webp") center/cover fixed;
+}
+
+.team section article#stanislas {
+    background: #13172c url("../images/imagesTeam/BackgroundStanislas.webp") center/cover fixed;
+}
+
+
+.team section article div.box {
+    background-color: rgba(19, 23, 44, 0.8);
     padding: 16px;
+    margin: 16px;
+    border-radius: 20px;
 }
 
-.team div.grilleDroite:hover,
+.team section article div.box:hover {
-.team div.grilleGauche:hover {
+    background-color: rgba(39, 58, 86, 0.9);
-    background-color: rgba(39, 58, 86, 90%);
+}
+
+.team section article.grilleGauche div.box {
+    margin-right: 50%;
+}
+
+.team section article.grilleDroite div.box {
+    margin-left: 50%;
+}
+
+.team section article h2,
+.team section article h3,
+.team section article p {
+    padding: 8px 0;
+}
+
+.team section article h3 {
+    color: #f1f1f1af;
 }
 
 /****************************/

www/index.html

@@ -160,7 +160,7 @@
 						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="warframes.html">PLUS D'INFOS</a>
+					<a href="armures.html">PLUS D'INFOS</a>
 				</div>
 			</article>
 		</section>

www/team.html

@@ -29,93 +29,92 @@
             <div class="introduction">
                 <h1>L'équipe</h1>
                 <p>Les ALT-F4 forment une équipe dans le cadre du projet intégrateur.</p>
-                <a href="#goToTitre"><button>Plus d'infos</button></a>
+                <a href="#lea">Plus d'infos</a>
             </div>
         </header>
 
-        <div class="titre" id="goToTitre">
+        <section>
-            <h2>Nos membres</h2>
-        </div>
 
-        <div class="grilleGauche" id="goToLea">
+            <article class="grilleGauche" id="lea">
-            <div class="avatar"><img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa Dezothez"></div>
+                <div class="box">
-            <div class="nom">
+                    <h2 class="nom">Léa Dezothez</h3>
-                <h3>Léa Dezothez</h3>
+                    <h3 class="role">Directrice artistique</h4>
-            </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.
+                            Léa est une personne passionnée par le Gaming, la Lecture et les Chevaux. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’elle apprécie le plus au quotidien, montrant un bel équilibre entre l'univers virtuel, la soif de connaissance et le monde équestre.
                         </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>
 
-        <div class="grilleDroite" id="goToJeremy">
+                        <p>
-            <div class="avatar"><img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy Hébert"></div>
+                            Elle a choisi de rejoindre le programme d’informatique parce qu'elle souhaite prendre part à la création d'un jeu vidéo et, à terme, voir son nom dans les crédits. Son rêve ultime est de pouvoir peut-être un jour créer le jeu qui lui tient le plus à cœur. C'est cet objectif créatif et ambitieux qui l'a menée à s'inscrire au programme.
-            <div class="nom">
+                        </p>
-                <h3>Jérémy Hébert</h3>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Léa aspire principalement à se faire embaucher par une firme de jeux vidéo pour commencer sa carrière. Si ce n'est pas possible immédiatement, son plan de secours est d'aller faire un diplôme à l'université. Son objectif principal est donc de s'intégrer, d’une manière ou d’une autre, dans l’industrie du jeu vidéo.
+                        </p>
                     </div>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="jeremy">
+                <div class="box">
+                    <h2 class="nom">Jérémy Hébert</h3>
+                    <h3 class="role">Coordonnateur</h4>
                     <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.
+                            Jérémy est une personne passionnée par la Programmation, la Cuisine et la Politique. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien, combinant une aptitude technique, un plaisir créatif et une conscience des enjeux sociaux.
                         </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>
 
-        <div class="grilleGauche" id="goToAndres">
+                        <p>
-            <div class="avatar"><img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres David Herrera Escorcia"></div>
+                            Il a choisi de rejoindre le programme d’informatique après avoir hésité avec la comptabilité, car il cherchait initialement un domaine faisant appel à la logique (comme les mathématiques). Son choix s'est finalement porté sur l'informatique parce qu'il a toujours apprécié le domaine et qu'il avait une soif d’en apprendre plus sur le sujet..
-            <div class="nom">
+                        </p>
-                <h3>Andres David Herrera Escorcia</h3>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Jérémy aspire à deux chemins principaux : soit poursuivre ses études à l'université, soit rejoindre une entreprise dans le domaine. Il est ouvert à des rôles en cybersécurité ou en développement d’application, pourvu que cela n'implique pas de la réseautique, définissant ainsi clairement la portée de ses aspirations professionnelles.
+                        </p>
                     </div>
+                </div>
+            </article>
+
+            <article class="grilleGauche" id="andres">
+                <div class="box">
+                    <h2 class="nom">Andres David Herrera Escorcia</h3>
+                    <h3 class="role">Conseiller</h4>
                     <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.
+                            Andres est une personne passionnée par le soccer, les sports et la poésie. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien.
                         </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>
 
-        <div class="grilleDroite" id="goToStanislas">
+                        <p>
-            <div class="avatar"><img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas Royal"></div>
+                            Il a choisi de rejoindre le programme d’informatique parce qu’il a beaucoup joué à des jeux vidéo au cours de sa vie. Cela l’a amené à penser qu’il pourrait aimer programmer, tout simplement.
-            <div class="nom">
+                        </p>
-                <h3>Stanislas Royal</h3>
+
+                        <p>
+                            Après l’obtention de son diplôme de TI, Andres aspire principalement à gagner beaucoup d’argent grâce à l’investissement. Il aimerait aussi développer un jeu de style Pokémon ou un jeu RPG, même s’il n’a pas encore décidé. Dans tous les cas, il souhaite atteindre une liberté financière, soit par la création d’un jeu, soit par ses investissements.
+                        </p>
                     </div>
+                </div>
+            </article>
+
+            <article class="grilleDroite" id="stanislas">
+                <div class="box">
+                    <h2 class="nom">Stanislas Royal</h3>
+                    <h3 class="role">Programmeur</h4>
                     <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.
+                            Stanislas est une personne passionnée par l'informatique, la lecture et le respect de la vie privée. Ces intérêts occupent une place importante dans sa vie et reflètent ce qu’il apprécie le plus au quotidien, notamment l'équilibre entre la technologie et l'éthique.
                         </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.
+                            Il a choisi de rejoindre le programme d’informatique parce que la cybersécurité l’a beaucoup attiré. C'est ce domaine précis qui l'a mené à s'inscrire au programme. Cela démontre une motivation très ciblée pour une expertise technique et cruciale.
                         </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.
+                            Après l’obtention de son diplôme de TI, Stanislas aspire principalement à travailler. Son objectif est donc de passer directement à l'application professionnelle de ses compétences et de contribuer concrètement au marché de l'emploi.
                         </p>
                     </div>
                 </div>
+            </article>
+        </section>
     </main>
 
     <footer>