optimisation de l'affichage (finalisationV2)

public/autres_pages/propos.html

@@ -18,9 +18,10 @@
         <a class="nav" id="active" href="propos.html">A Propos</a>
     </nav>
     <main>
+        <h1>A propos</h1>
         <section>
             <h2>Bienvenue !</h2>
-            <p>No   us sommes passionnés par la facilitation des déplacements 
+            <p>Nous sommes passionnés par la facilitation des déplacements 
                 sur le campus universitaire et nous avons créé ce blog pour 
                 partager des informations utiles, des astuces intelligentes, et 
                 des idées innovantes avec la communauté étudiante. 
@@ -76,7 +77,8 @@
         <section>
             <h2>Contact</h2>
             <p>Nous sommes ouverts à vos idées, suggestions. N'hésitez pas à 
-                nous contacter à prochainement@example.com  
+                nous contacter à
+                octosudo@outlook.com  
             </p>
         </section>
 
@@ -92,7 +94,7 @@
 
         
     <section id="paypals">
-        <p id="paypal">Si vous souhaitez contribuer davantage, vous pouvez le faire via Paypal</p>   
+        <p id="paypalp">Si vous souhaitez contribuer davantage, vous pouvez le faire via Paypal</p>   
         <a class="button" href="https://www.paypal.com/paypalme/newininternet/" target="_blank">Paypal.me</a>
     </section>
 

public/css/index.css

@@ -72,19 +72,34 @@ section img
 }
 #cadre {
     text-align: center;
-    padding: 1em;
     border-radius: 0.5cm;
     padding: 1em;
     background-color: rgba(41, 158, 139, 29%);
 }
 
 @media (max-width: 768px) {
+    h1
+    {
+        font-size: 140%;
+    }
+    h2
+    {
+        font-size: 110%;
+    }
+    h3
+    {
+        font-size: 70%;
+    }
+    p
+    {
+        font-size: 80%;
+    }
     .intro {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto auto;
         grid-gap: 10px;
-        margin-bottom: 20%;
+        margin-bottom: 50%;
     }
 
     .intro img {
@@ -106,4 +121,8 @@ section img
         grid-area: 4/1/5/2;
         justify-self: center;
     }
+    #cadre
+    {
+        padding: 3%;
+    }
 }
\ No newline at end of file

public/css/propos.css

@@ -34,7 +34,7 @@ main > section{
     margin: 0% 20% 10% 20%;
 }
 
-#paypal{
+#paypalp{
     font-weight: bold;
 }
 
@@ -63,17 +63,25 @@ h2{
 
 @media (max-width:768px)
 {
-    main>section p  
+    #paypalp
     {
         font-size: 80%;
     }
+    main>section p  
+    {
+        font-size: 70%;
+    }
+    h1
+    {
+        font-size: 110%;
+    }
     section h2
     {
-        font-size: 100%;
+        font-size: 90%;
     }
     #paypals
     {
-        margin:5%
+        margin:8%
     }
     main
     {

public/css/style.css

@@ -28,7 +28,7 @@ nav{ /* background pour le menu */
 {
     font-size: larger;
     text-decoration: underline;
-    color:#6D2100
+    color:#6D2100;
 }
 #active{ /* parametres speciaux pour le lien de la page en cours */
     color:#6D2100;
@@ -92,10 +92,28 @@ footer{
         padding: 8% 0% 8% 0%;
         justify-content: space-around;
     }
+    .nav
+    {
+        font-size: 70%;
+    }
+    .nav:hover
+    {
+        font-size: 85%;
+        text-decoration: underline;
+        color:#6D2100;
+    }
     main
     {
         margin: 0% 3% 10% 3%;
     }
+    .button
+    {
+        font-size: 80%;
+    }
+    .button:hover
+    {
+        font-size: 90%;
+    }
     footer
     {
         background-image: linear-gradient(to top, rgb(0,0,0,70%),rgb(0,0,0,0%));
@@ -103,8 +121,13 @@ footer{
     }
     footer a
     {
+        font-size: 80%;
         color:white
     }
+    footer p
+    {
+        font-size: 80%;
+    }
     #imgfooter{
         display:none;
     }