missions et aPropos

www/aPropos.html

@@ -33,7 +33,7 @@
     <main class="aPropos">
         <h1>Contactez l’équipe!</h1>
         <div class="sidebyside">
-            <div>
+            <div class="colonne">
                 <!-- 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">
@@ -143,7 +143,7 @@
                     </div>
                 </form>
             </div>
-            <div>
+            <div class="colonne">
 
                 <div id="contactInfo">
                     <div>

www/css/style.css

@@ -48,6 +48,16 @@
 .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;
@@ -306,8 +316,6 @@ footer a:hover {
 .aPropos>main>div:first {
     margin: auto;
     display: flex;
-    /* min-height: calc(100vh - 60px); */
-    /*    display: block; */
     align-content: center;
     text-align: center;
 }
@@ -320,18 +328,13 @@ footer a:hover {
     padding: 1em;
 }
 
-.aPropos .conteneurMaps­ iframe {
-    border: 0;
-    margin: 10px;
-    display: block;
-}
 
 .aPropos .sidebyside>div {
     margin: 5px 20px;
 }
 
-.aPropos .sidebyside>h1 {
-    width: 120%;
+.aPropos .sidebyside>h2 {
+    width: 100%;
 
 }
 
@@ -348,21 +351,12 @@ footer a:hover {
     border-radius: 15px;
     padding: 1em;
     color: #E6ECF3;
-    overflow: scroll;
-    /*!SECTION COULEUR
+    overflow: none;
 
-    #B47871
-#641A10
-#13172C
-#726F9A
-#273A56
-#C19F8A
-Couleur texte : #FFEFE5
-
-
-*/
 }
-
+.aPropos .sidebyside>div {
+    height: 100%;
+}
 .aPropos p {
     width: 100%;
 }
@@ -406,7 +400,7 @@ Couleur texte : #FFEFE5
     margin: 1em auto 1em 0px;
 }
 
-.aPropos #contactInfo h2 {
+.aPropos h2 {
     margin-bottom: 1em;
 }
 
@@ -948,7 +942,15 @@ Couleur texte : #FFEFE5
 .missions h1,h2 {
     margin-bottom: 2em;
 }
+.missions>section:first-of-type {
+    padding: 0 20vw;
+}
+.missions #autreMissions a:any-link {
+    color:#bf815b;
+    text-decoration: underline;
+    font-weight: 600;
 
+}
 .missions section:nth-child(odd) article {
     text-align: right;
     /* float: right; */
@@ -956,7 +958,7 @@ Couleur texte : #FFEFE5
 
 .missions section:nth-child(even) article {
     text-align: left;
-    display: block;
+    /* display: block; */
 }
 
 .missions section article p {
@@ -964,6 +966,8 @@ Couleur texte : #FFEFE5
  /*   margin: auto;
     float: left; */
 }
+
+
 .missions section:nth-child(odd)>article>p {
     margin: auto 0 auto  auto;
     text-align: right;

www/missions.html

@@ -42,7 +42,8 @@
         <section id="survie">
             <article>
                 <h2>Survival</h2>
-                <p>Les missions de survie sont à durée illimitée, les joueurs reçoivent à chaque cinq minutes le choix de
+                <p>Les missions de survie sont à durée illimitée, les joueurs reçoivent à chaque cinq minutes le choix
+                    de
                     continuer ou d’évacuer. Ils reçoivent aussi une récompense basée sur le niveau de la difficulté.
                     Lorsque les joueurs évacuent, ils n’ont pas besoin de se rendre à l’extraction, contrairement aux
                     autres
@@ -52,7 +53,8 @@
         <section id="assassination">
             <article>
                 <h2>Assassination</h2>
-                <p>Les missions d’assassination présentent une victime à localiser et éliminer, il n’y a que très rarement
+                <p>Les missions d’assassination présentent une victime à localiser et éliminer, il n’y a que très
+                    rarement
                     d’autre objectif. Ceci représente donc des missions rapidement complétées.</p>
             </article>
         </section>
@@ -110,7 +112,8 @@
         <section id="invasion">
             <article>
                 <h2>Invasion</h2>
-                <p>Mission d’extermination contre une espèce extraterrestre mutante. ?????</p>
+                <p>Mission d’extermination contre une espèce extraterrestre mutante. Deux factions s'oppose pour le
+                    contrôle d'une planète, les joueurs choisisses leur camp!</p>
             </article>
         </section>
         <section id="mobileDefense">
@@ -137,11 +140,18 @@
         <section id="autreMissions">
             <article>
                 <h2>Autres missions</h2>
-                <p>Il existe encore bien plus de style de missions, je vous invite à jouer pour les découvrir.</p>
-                <p><a target="_blank" href="https://www.warframe.com/download">Page de téléchargement de Warframe</a>
+                <div class="sidebyside">
+                    <div>
+                        <p>Il existe encore bien plus de style de missions, je vous invite à jouer pour les découvrir.
                         </p>
-                <iframe title="steam" src="https://store.steampowered.com/widget/230410/" frameborder="0" width="646"
-                    height="190"></iframe>
+                        <p><a target="_blank" href="https://www.warframe.com/download">Page de téléchargement de
+                                Warframe</a>
+                        </p>
+                    </div>
+                    <iframe title="steam" src="https://store.steampowered.com/widget/230410/" frameborder="0"
+                        width="646" height="190"></iframe>
+
+                </div>
             </article>
         </section>
     </main>