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
......@@ -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
......
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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment