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

public/autres_pages/blog.html

@@ -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>

public/css/blog.css

 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;
 }
 

public/css/style.css

@@ -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/index.html

@@ -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>