Finalisation aPropos.html + CSS

www/aPropos.html

@@ -34,22 +34,20 @@
     <main class="aPropos">
         <h1>Contactez l’équipe!</h1>
         <div class="sidebyside">
-            <div class="colonne">
+            <section class="commentaire">
                 <!-- 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">
                     <h2>Commentaire</h2>
-                    <fieldset id="firstField">
+                    <fieldset id="infoContact">
                         <legend>Informations de contact</legend>
                         <div>
                             <label for="nomComplet">Votre nom complet :</label>
-                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
+                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3" placeholder="Prénom Nom">
-                                placeholder="Prénom Nom">
                         </div>
                         <div>
                             <label for="email">Votre adresse courriel : </label>
-                            <input id="email" name="email" type="email" required
+                            <input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)" size="30">
-                                placeholder="(ex. vous@fournisseur.com)" size="30">
                         </div>
                     </fieldset>
                     <fieldset>
@@ -141,21 +139,18 @@
                         <button type="reset">Réinitialiser</button>
                     </div>
                 </form>
-            </div>
+        </section>
-            <div class="colonne" id="contactInfo">
-
 
+        <section class="coordonnees">
+            <div id="contactInfo">
                 <div>
                     <h2>Coordonnées</h2>
                     <div class="grille">
                         <p id="titreAdresse">Adresse :</p>
-                        <a id="contenuAdresse" target="_blank"
+                        <a id="contenuAdresse" target="_blank" href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D"> 475 rue du Cégep, Sherbrooke, QC J1E 4K1</a>
-                            href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
-                            475 rue du Cégep, Sherbrooke, QC J1E 4K1</a>
 
                         <p id="titreInfo">Pour plus d’information sur les créateurs :</p>
-                        <a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de
+                        <a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a>
-                            Sherbrooke</a>
 
                         <p id="titreTelephone">Téléphone :</p>
                         <a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
@@ -163,16 +158,11 @@
                         <p id="titreCourriel">Courriel :</p>
                         <a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
                     </div>
+                    <div class="conteneurMaps">
+                        <iframe id="mapsFrame" title="Maps pour cégep" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                    </div>
                 </div>
-                <div class="conteneurMaps">
+            </section>
-
-                    <iframe id="mapsFrame" title="Maps pour cégep"
-                        src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d5601.823999127039!2d-71.8863288!3d45.4111141!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sca!4v1764819112867!5m2!1sfr!2sca"
-                        style="border:0;" allowfullscreen="" loading="lazy"
-                        referrerpolicy="no-referrer-when-downgrade"></iframe>
-                </div>
-
-            </div>
         </div>
     </main>
 

www/css/style.css

@@ -45,30 +45,6 @@
 
 /** FIN DE SECTION modifier par script  **/
 
-.sidebyside {
-    display: flex;
-}
-
-.colonne {
-    flex: 1;
-}
-
-/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
-.col-container {
-    display: table;
-}
-
-.col {
-    display: table-cell;
-    /* Make elements inside the container behave like table cells */
-}
-
-.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/ */
@@ -312,6 +288,33 @@ footer a:hover {
     display: block;
 }
 
+.aPropos .sidebyside {
+    display: flex;
+    max-width: 100%;
+}
+
+.aPropos .sidebyside section.commentaire,
+.aPropos .sidebyside section.coordonnees {
+    width: 50%;
+    margin: 16px;
+}
+
+/* FROM: https://www.w3schools.com/howto/howto_css_equal_height.asp */
+.aPropos .col-container {
+    display: table;
+}
+
+.aPropos .col {
+    display: table-cell;
+    /* Make elements inside the container behave like table cells */
+}
+
+.aPropos .centered {
+    text-align: center;
+    margin: auto;
+    display: block;
+}
+
 .aPropos h1 {
     text-align: center;
 }
@@ -331,35 +334,19 @@ footer a:hover {
     padding: 1em;
 }
 
-
-.aPropos .sidebyside>div {
-    margin: 5px 20px;
-}
-
-.aPropos .sidebyside>h2 {
-    width: 100%;
-
-}
-
 .aPropos textarea {
     resize: none;
     width: 100%;
 }
 
-
 .aPropos form {
-    width: 70ch;
+    width: 100%;
+    height: 100%;
     margin: auto;
     background-color: #726F9A;
     border-radius: 20px;
-    padding: 1em;
+    padding: 16px;
     color: #E6ECF3;
-    overflow: none;
-
-}
-
-.aPropos .sidebyside>div {
-    height: 100%;
 }
 
 .aPropos p {
@@ -371,6 +358,7 @@ footer a:hover {
     padding: 1em;
     border-radius: 20px;
     color: #E6ECF3;
+    width: 100%;
 }
 
 .aPropos .grille {
@@ -423,7 +411,6 @@ footer a:hover {
     text-align: right;
 }
 
-
 .aPropos .grille #contenuAdresse,
 .aPropos .grille #contenuInfo,
 .aPropos .grille #contenuTelephone,
@@ -440,23 +427,26 @@ footer a:hover {
     color: #c19f8a;
 }
 
-
 /* Hide scrollbar for Chrome, Safari and Opera */
 .conteneurMaps::-webkit-scrollbar {
- display: none;
+    display: none;
 }
+
 /* Hide scrollbar for IE, Edge and Firefox */
 .conteneurMaps {
-  -ms-overflow-style: none;  /* IE and Edge */
+    -ms-overflow-style: none;
-  scrollbar-width: none;  /* Firefox */
+    /* IE and Edge */
-  padding:0;
+    scrollbar-width: none;
-  margin: auto;
+    /* Firefox */
-  width: 100%;
+    padding: 0;
+    margin: auto;
+    width: 100%;
 }
+
 .aPropos #mapsFrame {
     border-radius: 20px;
     width: 100%;
-    height: 500px;
+    height: 400px;
 }
 
 .aPropos .sidebyside label {
@@ -478,20 +468,16 @@ footer a:hover {
     margin-bottom: 1em;
 }
 
-.aPropos #firstField label {
+.aPropos #infoContact label {
     width: 11em;
     display: inline-block
 }
 
-.aPropos #firstField input {
+.aPropos #infoContact input {
     width: 25em;
     display: inline-block
 }
 
-/*.aPropos div {*/
-/*    display: block; */
-/*}*/
-
 /****************************/
 /* PAGE: L'équipe */
 /* AUTEUR: Jérémy Hébert */