Changement aPropos

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

@@ -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%;