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

correction commit saber + changement radicale de la page blog + quelques bug fix

parent 1ddc9214
No related branches found
No related tags found
No related merge requests found
Pipeline #144670 passed
Showing
with 153 additions and 77 deletions
......@@ -20,54 +20,68 @@
<main>
<h1>Naviguer le campus en harmonie avec l'écologie</h1>
<header>
<section class="article">
<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="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>
<section class="article">
<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>
<img src="../images/transport.jpg" class="img-article" alt="article">
<h3>Choisir le Meilleur Moyen de Transport pour vos Déplacements Quotidiens</h3>
<a href="#plus1" class="button">Afficher Plus</a>
<contenu id="plus1" class="full-article">
<p>Choisir le bon moyen de transport pour vos trajets quotidiens peut transformer votre expérience de déplacement. Voici quelques conseils :
<p><span>Évaluez la distance et la fréquence :</span>
Pour les trajets courts, privilégiez la marche, le vélo ou la trottinette. Pour des distances plus longues, optez pour les transports en commun ou le covoiturage.</p>
<p><span>Considérez le temps de trajet :</span>
Pesez le temps que vous pouvez allouer à vos déplacements. Certains modes sont plus rapides que d'autres selon le trafic ou les horaires.</p>
<p><span>Pesez les coûts : </span>
Comparez les coûts d'achat, d'entretien et de carburant. Certains modes peuvent être plus économiques sur le long terme.</p>
<p><span>Impact environnemental :</span>
Privilégiez les moyens de transport plus verts comme le vélo, les transports en commun ou les véhicules électriques pour réduire votre empreinte écologique.</p>
<p><span>Flexibilité et commodité :</span>
La voiture offre de la flexibilité, mais les transports en commun sont pratiques pour certains trajets réguliers.</p>
</contenu>
</section>
<section class="article">
<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>
<img src="../images/transportvert.jpg" alt="article" class="img-article">
<h3>Les Innovations et Tendances des Transports Durables pour un Avenir Plus Vert</h3>
<a href="#plus2" class="button">Afficher Plus</a>
<contenu id="plus2" class="full-article">
<p>Le transport en commun est bien plus qu'une simple alternative à la voiture individuelle. Voici pourquoi opter pour le transport en commun peut être bénéfique, tant pour les individus que pour l'environnement urbain :</p>
<p><span>Réduction de la congestion urbaine :</span>
En encourageant l'utilisation du transport en commun, les villes peuvent réduire la congestion routière, offrant ainsi des trajets plus rapides et moins stressants pour les usagers de la route.</p>
<p><span>Coût avantageux pour les utilisateurs :</span>
Comparé aux coûts associés à la possession et à l'entretien d'une voiture individuelle, le transport en commun est souvent plus économique, offrant des tarifs plus abordables pour les déplacements quotidiens.</p>
<p><span>Contribution à la durabilité environnementale :</span>
En réduisant le nombre de voitures sur les routes, le transport en commun contribue à la réduction des émissions de gaz à effet de serre, favorisant ainsi des villes plus propres et moins polluées.</p>
<p><span>Accessibilité et inclusion :</span>
Les réseaux de transport en commun offrent une accessibilité équitable aux déplacements pour tous, y compris les personnes ne disposant pas de leur propre véhicule ou ayant des limitations physiques.</p>
<p><span>Promotion de la vie sociale et réduction du stress :</span>
Le transport en commun offre souvent aux usagers la possibilité de lire, travailler ou simplement se détendre pendant leurs trajets, contribuant à réduire le stress lié à la conduite individuelle.</p>
<p><span>Urbanisme favorisant une meilleure qualité de vie :</span>
Les villes axées sur le transport en commun peuvent favoriser des quartiers plus agréables, avec moins de places de parking nécessaires, laissant la place à des espaces verts et des zones piétonnes.</p>
</contenu>
</section>
<section class="article">
<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>
<img src="../images/Carte_Tecely_Lyon.jpg" alt="article" class="img-article">
<h3>Comprendre les Tarifs et Abonnements des Transports en Commun Lyonnais (TCL)</h3>
<a href="#plus3" class="button">Afficher Plus</a>
<contenu id="plus3" class="full-article">
<p>Les Transports en Commun Lyonnais (TCL) offrent une gamme diversifiée de tarifs et d'abonnements pour répondre aux besoins de déplacement des usagers. Comprendre ces différentes options peut vous aider à économiser et à optimiser votre expérience de transport à Lyon :</p>
<p><span>Ticket Unitaire :</span>
Le ticket unitaire est adapté pour un trajet unique. Il est valable pour un voyage sur le réseau TCL avec une correspondance incluse pendant une durée limitée. Il peut être acheté à bord des bus, des distributeurs automatiques ou via l'application mobile TCL.</p>
<p><span>Carnet de Tickets :</span>
Le carnet de tickets est avantageux pour les usagers réguliers mais non-fréquents. Il comprend plusieurs tickets unitaires à tarif réduit, offrant plus de flexibilité que l'achat d'un ticket à l'unité.</p>
<p><span>Abonnements Mensuels :</span>
Les abonnements mensuels sont idéaux pour ceux qui utilisent fréquemment les transports en commun. Ils offrent un accès illimité au réseau TCL pendant un mois à un tarif fixe, économique pour les déplacements quotidiens.</p>
<p><span>Abonnements Annuels :</span>
Pour une utilisation à long terme, les abonnements annuels offrent des réductions supplémentaires par rapport aux abonnements mensuels. Ils conviennent aux usagers réguliers qui souhaitent économiser sur le long terme.</p>
<p><span>Tarifs Réduits :</span>
Des tarifs réduits sont disponibles pour les étudiants, les seniors, les personnes à mobilité réduite, ainsi que pour les familles. Ces tarifs spéciaux visent à rendre les transports en commun accessibles à un plus large éventail de la population.</p>
<p><span>Carte Técély :</span>
La carte Técély est une carte de transport rechargeable et personnalisable. Elle permet de charger des titres de transport et d'abonnements, offrant une solution pratique et économique pour les usagers réguliers.</p>
</contenu>
</section>
<section class="article">
<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>
</section>
<h1>Conseils par les utilisateurs pour les utilisateurs</h1>
<table id="table">
......@@ -116,11 +130,12 @@
<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<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>
<label>Pseudo</label><input type="text" name="pseudo" placeholder="Pseudo">
<label>Date de naissance</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>*Les éléments sont obligatoire</p>
<p>**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
......@@ -131,12 +146,12 @@
<footer>
<a href="https://iut.univ-lyon1.fr/"><img src="../images/logo.png" img="imgfooter" alt="logo" width="50" height="50"></a>
<section>
<p class="comm">Contactez-nous :</p>
<p class="pcontact">Contactez-nous :</p>
<p>01 23 45 67 89</p>
<p>octosudo@outlook.com</p>
</section>
<section>
<p class="comm">Soutenez-nous : </p>
<p class="pcontact">Soutenez-nous : </p>
<a href="https://www.paypal.com/paypalme/newininternet/" target="_blank">paypal.me/newininternet</a>
<p>patreon.com/example</p>
</section>
......
body
{
background-image: linear-gradient(to bottom,rgb(190, 235, 235),rgba(153, 255, 102, 75%), rgb(190, 235, 235));
font-size: 1.3em;
display: grid;
background-image: linear-gradient(to bottom,rgb(190, 235, 235),rgba(153, 255, 102, 75%), rgb(190, 235, 235));
}
nav
{
background-color: rgba(189, 239, 103, 50%);
}
h1, h2, .titre{
text-align: left;
.img-article{
margin:0% 10%;
width: 80%;
height: auto;
border-radius: 10%;
box-shadow: 0px 4px 8px 0px;
}
h1{
margin-top: 10%;
}
.full-article
{
display:none;
}
.full-article:target
{
display:block;
}
.button
{
text-align: center;
color: #ffffff;
background-color: #3498db;
border-radius: 5px;
transition-duration: 0.5s;
}
.button:hover
{
background-color: #ffffff;
font-size: 110%;
color: #3498db;
border: #3498db solid;
transition-duration: 0.5s;
}
#plus1, #plus2, #plus3
{
display:none;
}
#plus1:target, #plus2:target, #plus3:target
{
display:block;
}
h1, h2{
color: #9AB253;
font-weight: bolder;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 200%;
text-align: center;
}
span
{
font-weight: bolder;
}
/* X
main>section section p::first-line
{
font-weight: bolder;
} */
header{
display: grid;
grid-template-areas:
"header section section";
main>section{
display: flex;
flex-direction: column;
border-radius: 0.4cm;
padding: 1em;
background-color: #D7E1BA;
......@@ -61,21 +104,44 @@ td p, th p
{
text-align: center;
}
table+h3
{
margin-bottom: 0%;
margin-top: 10%;
}
h3+h2
{
margin-top: 0%;
}
form{
display: grid;
grid-template-areas: "input input input input";
grid-template-rows: 2fr;
grid-template-columns: 2fr 6fr;
padding: 1em;
display: flex;
flex-direction: column;
background-color: #D7E1BA;
padding: 5%;
border-radius: 3%;
}
input, textarea
{
background-color: #F8EEDB;
border: #F8EEDB;
border-radius: 15px;
box-shadow: inset 5px 5px 5px 5px rgba(0, 0, 0, 25%);
padding: 3%;
font-weight: bolder;
color: #9a9280;
}
::placeholder
{
font-weight: bolder;
color: #9a9280;
}
#envoyer{
background-color: #9AB253;
color: #000000;
border: #9AB253 solid;
font-weight: bold;
margin: 0 auto;
display: inline-block;
font-weight: bolder;
font-size: 80%;
margin: 0% auto;
border-radius: 12cm;
box-shadow: 0px 4px 8px 0px;
padding: 0.5em;
......@@ -85,13 +151,8 @@ form{
label{
color: #9AB253;
}
span{
color: red;
font-size: 65%;
}
#commentaires{
form p
{
color: #82993e;
font-size: 50%;
}
......@@ -100,7 +161,7 @@ span{
color: black;
background-color: #ffffff;
border: #9AB253 solid;
font-size: 90%;
font-size: 100%;
transition-duration: 0.5s;
}
......
......@@ -72,7 +72,7 @@ footer{
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-image: linear-gradient(to top, rgb(0,0,0,25%),rgb(0,0,0,0%));
background-image: linear-gradient(to top, rgb(0,0,0,40%),rgb(0,0,0,0%));
}
.pcontact{
color: #0A6539;
......
public/images/Carte_Tecely_Lyon.jpg

729 KiB

public/images/biodiversité.jpg

433 KiB

public/images/bus.jpg

1.89 MiB

public/images/consommation.jpeg

105 KiB

public/images/creatives.jpg

564 KiB

public/images/ecolo.jpg

37.7 KiB

public/images/gestion.jpg

4.8 MiB

public/images/océan.jpg

99.4 KiB

public/images/renouvelables.jpg

151 KiB

public/images/tcl.jpg

275 KiB | W: | H:

public/images/tcl.jpg

163 KiB | W: | H:

public/images/tcl.jpg
public/images/tcl.jpg
public/images/tcl.jpg
public/images/tcl.jpg
  • 2-up
  • Swipe
  • Onion skin
public/images/tram.jpg

88.4 KiB

public/images/transition.jpg

142 KiB

public/images/transport.jpg

145 KiB

public/images/transportvert.jpg

1.57 MiB

......@@ -29,7 +29,7 @@
</section>
<section class="intro">
<img class="img" src="images/tram.jpg" alt="creativite">
<img class="img" src="images/creatives.jpg" alt="creativite">
<h2>Pourquoi notre site web ?</h2>
<p>De la volonté d'améliorer votre expérience sur le campus à l'inspiration pour faciliter vos déplacements, plongez dans les raisons qui ont donné naissance à cette plateforme</p>
<a class="button" href="autres_pages/propos.html">En savoir plus</a>
......
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