ajout commit de saber

public/autres_pages/blog.html

@@ -23,40 +23,49 @@
             <header>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 1</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
+                    <img src="océan.jpg" class="img-article" alt="article">
+                    <h3>Sauver nos océans : Un impératif écologique mondial</h3>
+                    <p class="commentaires-article">Les océans, constituant plus de 70% de la surface de notre planète, 
+                        jouent un rôle vital dans la régulation du climat, 
+                        la fourniture de ressources alimentaires et la promotion de la biodiversité...</p>
                 </section>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 2</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
+                    <img src="transition.jpg" alt="article" class="img-article">
+                    <h3>La transition énergétique : un passage incontournable vers un avenir durable</h3>
+                    <p class="commentaires-article">La crise climatique mondiale exige 
+                        une refonte radicale de notre approche énergétique...</p>
                 </section>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 3</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
+                    <img src="biodiversité.jpg" alt="article" class="img-article">
+                    <h3>Préserver la biodiversité : un impératif pour la santé de notre planète</h3>
+                    <p class="commentaires-article">La biodiversité, la variété des formes de vie sur Terre, 
+                        est la toile de fond de la vie sur notre planète...</p>
                 </section>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 4</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
+                    <img src="consommation.jpeg" alt="article" class="img-article">
+                    <h3>Consommation responsable : redéfinir nos choix pour un avenir durable</h3>
+                    <p class="commentaires-article">A mesure que la population mondiale continue de croître, 
+                        la pression sur les ressources naturelles s'intensifie...</p>
                 </section>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 5</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
+                    <img src="gestion.jpg" alt="article" class="img-article">
+                    <h3>Gestion durable des ressources naturelles : préserver notre héritage pour les générations futures</h3>
+                    <p class="commentaires-article">Les ressources naturelles de notre planète sont limitées, 
+                        et leur gestion durable est impérative pour assurer un avenir prospère pour les générations à venir...</p>
                 </section>
 
                 <section class="article">
-                    <img src="../images/ecolo.jpg" width="100" height="50">
-                    <h3>Titre article 6</h3>
-                    <p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue.
-                </section>
+                    <img src="renouvelables.jpg" class="img-article" alt="article">
+                    <h3>Les énergies renouvelables : un levier puissant pour atténuer le changement climatique</h3>
+                    <p class="commentaires-article">Le changement climatique est l'un des défis 
+                        les plus pressants de notre époque, et la transition vers les énergies renouvelables émerge...</p>
+                </section><br>
+
+                <button>Afficher plus</button>
 
             </header>
 
@@ -107,12 +116,11 @@
             <h3 class="titre">VOTRE AVIS COMPTE</h3>
             <h2>Contribuez à des déplacements intelligents</h2>
             <form method="post" action="https://perso.liris.cnrs.fr/pierre-antoine.champin/enseignement/intro-web/_static/formproc/debug">
-                <label>Pseudo*</label><input type="text" name="pseudo" placeholder="Pseudo">
-                <label>Date de naissance facultatif</label><input type="date" name="date" placeholder="jj/mm/aaaa">
-                <label>Adresse Electronique**</label><input name="mail" placeholder="Adresse@Example.com">
-                <label>Développer votre idée*</label><textarea name="idées" placeholder="Partagez vos idées et conseils pour des déplacements plus intélligents sur le campus !"></textarea>
-                <p class="commentaires">*Les éléments sont obligatoire</p>
-                <p class="commentaires">**L'adresse mail ne sera pas publié</p>
+                <label>Pseudo<span>*(obligatoire)</span></label><input type="text" name="pseudo" placeholder="Pseudo">
+                <label>Date de naissance<span>*(facultatif)</span></label><input type="date" name="date" placeholder="jj/mm/aaaa">
+                <label>Adresse Electronique<span>**(obligatoire)</span></label><input name="mail" placeholder="Adresse@Example.com">
+                <label>Développer votre idée<span>**(obligatoire)</span></label><textarea name="idées" placeholder="Partagez vos idées et conseils pour des déplacements plus intélligents sur le campus !"></textarea>
+                <p id="commentaires">*Les éléments sont obligatoire<br>**L'adresse mail ne sera pas publié</p>
                 <button id="envoyer">Envoyer</button>
             </form> 
             <p id="comme">Nous vous invitons à remplir ce formulaire pour nous faire part

public/css/blog.css

 body
 {
     background-image: linear-gradient(to bottom,rgb(190, 235, 235),rgba(153, 255, 102, 75%), rgb(190, 235, 235)); 
-    text-align: right;
     font-size: 1.3em;
     display: grid;
-    
-}
-
-body :nth-child(2n+1){
-    text-align: left;
 }
 nav
 {
@@ -16,7 +10,7 @@ nav
 }
 
 h1, h2, .titre{
-    text-align: center;
+    text-align: left;
 }
 
 h1, h2{
@@ -26,6 +20,7 @@ h1, h2{
     font-size: 200%;
 }
 
+
 header{
     display: grid;
     grid-template-areas:
@@ -36,9 +31,10 @@ header{
 }
 
 .article{
+    position: relative;
     border-radius: 0.4cm;
     margin-top: 10px;
-    margin-right: 20px;
+    margin-right: 5px;
     padding: 1em;
     background-color: white;
 }
@@ -73,6 +69,40 @@ form{
     padding: 1em;
     background-color: #D7E1BA;
 }
+#envoyer{
+    background-color: #9AB253;
+    color: #000000;
+    border: #9AB253 solid;
+    font-weight: bold;
+    margin: 0 auto;
+    display: inline-block;
+    border-radius: 12cm;
+    box-shadow: 0px 4px 8px 0px;
+    padding: 0.5em;
+    transition-duration: 0.5s;
+}
+
+label{
+    color: #9AB253;
+}
+
+span{
+    color: red;
+    font-size: 65%;
+}
+
+#commentaires{
+    color: #82993e;
+    font-size: 50%;
+}
+
+#envoyer:hover{
+    color: black;
+    background-color: #ffffff;
+    border: #9AB253 solid;
+    font-size: 90%;
+    transition-duration: 0.5s;
+}
 
 #comme{
     color: #9AB253;