Skip to content
Snippets Groups Projects
Commit 1ddc9214 authored by Farouk's avatar Farouk
Browse files

ajout commit de saber

parent e90b1397
No related branches found
No related tags found
No related merge requests found
Pipeline #144600 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
public/autres_pages/blog.html
+ 33
− 25
View file @ 1ddc9214
...@@ -23,40 +23,49 @@ ...@@ -23,40 +23,49 @@
<header> <header>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="océan.jpg" class="img-article" alt="article">
<h3>Titre article 1</h3> <h3>Sauver nos océans : Un impératif écologique mondial</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <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>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="transition.jpg" alt="article" class="img-article">
<h3>Titre article 2</h3> <h3>La transition énergétique : un passage incontournable vers un avenir durable</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <p class="commentaires-article">La crise climatique mondiale exige
une refonte radicale de notre approche énergétique...</p>
</section> </section>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="biodiversité.jpg" alt="article" class="img-article">
<h3>Titre article 3</h3> <h3>Préserver la biodiversité : un impératif pour la santé de notre planète</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <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>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="consommation.jpeg" alt="article" class="img-article">
<h3>Titre article 4</h3> <h3>Consommation responsable : redéfinir nos choix pour un avenir durable</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <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>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="gestion.jpg" alt="article" class="img-article">
<h3>Titre article 5</h3> <h3>Gestion durable des ressources naturelles : préserver notre héritage pour les générations futures</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <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>
<section class="article"> <section class="article">
<img src="../images/ecolo.jpg" width="100" height="50"> <img src="renouvelables.jpg" class="img-article" alt="article">
<h3>Titre article 6</h3> <h3>Les énergies renouvelables : un levier puissant pour atténuer le changement climatique</h3>
<p class="commentaires-article">Petite description, nterdum quam. Phasellus biberdue. <p class="commentaires-article">Le changement climatique est l'un des défis
</section> les plus pressants de notre époque, et la transition vers les énergies renouvelables émerge...</p>
</section><br>
<button>Afficher plus</button>
</header> </header>
...@@ -107,12 +116,11 @@ ...@@ -107,12 +116,11 @@
<h3 class="titre">VOTRE AVIS COMPTE</h3> <h3 class="titre">VOTRE AVIS COMPTE</h3>
<h2>Contribuez à des déplacements intelligents</h2> <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"> <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>Pseudo<span>*(obligatoire)</span></label><input type="text" name="pseudo" placeholder="Pseudo">
<label>Date de naissance facultatif</label><input type="date" name="date" placeholder="jj/mm/aaaa"> <label>Date de naissance<span>*(facultatif)</span></label><input type="date" name="date" placeholder="jj/mm/aaaa">
<label>Adresse Electronique**</label><input name="mail" placeholder="Adresse@Example.com"> <label>Adresse Electronique<span>**(obligatoire)</span></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> <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 class="commentaires">*Les éléments sont obligatoire</p> <p id="commentaires">*Les éléments sont obligatoire<br>**L'adresse mail ne sera pas publié</p>
<p class="commentaires">**L'adresse mail ne sera pas publié</p>
<button id="envoyer">Envoyer</button> <button id="envoyer">Envoyer</button>
</form> </form>
<p id="comme">Nous vous invitons à remplir ce formulaire pour nous faire part <p id="comme">Nous vous invitons à remplir ce formulaire pour nous faire part
......
public/css/blog.css
+ 38
− 8
View file @ 1ddc9214
body body
{ {
background-image: linear-gradient(to bottom,rgb(190, 235, 235),rgba(153, 255, 102, 75%), rgb(190, 235, 235)); 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; font-size: 1.3em;
display: grid; display: grid;
}
body :nth-child(2n+1){
text-align: left;
} }
nav nav
{ {
...@@ -16,7 +10,7 @@ nav ...@@ -16,7 +10,7 @@ nav
} }
h1, h2, .titre{ h1, h2, .titre{
text-align: center; text-align: left;
} }
h1, h2{ h1, h2{
...@@ -26,6 +20,7 @@ h1, h2{ ...@@ -26,6 +20,7 @@ h1, h2{
font-size: 200%; font-size: 200%;
} }
header{ header{
display: grid; display: grid;
grid-template-areas: grid-template-areas:
...@@ -36,9 +31,10 @@ header{ ...@@ -36,9 +31,10 @@ header{
} }
.article{ .article{
position: relative;
border-radius: 0.4cm; border-radius: 0.4cm;
margin-top: 10px; margin-top: 10px;
margin-right: 20px; margin-right: 5px;
padding: 1em; padding: 1em;
background-color: white; background-color: white;
} }
...@@ -73,6 +69,40 @@ form{ ...@@ -73,6 +69,40 @@ form{
padding: 1em; padding: 1em;
background-color: #D7E1BA; 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{ #comme{
color: #9AB253; color: #9AB253;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment