Amélioration de la responsivité du tableau des certificats

Author: charlenry

assets/css/style.css

@@ -289,6 +289,7 @@ footer {
   margin: 0 auto;
   margin-top: 20px;
   border: 1px solid var(--white);
+  overflow-x: auto;
 }
 ._row {
   display: flex;
@@ -307,6 +308,8 @@ footer {
 }
 .doc_name {
   margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .sha1 {
   margin-bottom: 10px;
@@ -330,6 +333,16 @@ footer {
   background-color: var(--secondaryColor);
   color: var(--primaryColor);
 }
+#certificates .notice{
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+#certificates .notice p{
+  width: 50%;
+  text-align: start;
+}
+
 
 
 /*** MEDIA QUERIES ***/

certificats.html

@@ -137,7 +137,7 @@ <h1>Liste de mes diplômes et Certificats</h1>
       </div>
       <div class="_row">
         <div class="text">
-          <div class="doc_name">Certificat OC: Écrivez la documentation technique de votre projet - 2023</div>
+          <div class="doc_name">Certificat OpenClassrooms: Écrivez la documentation technique de votre projet - 2023</div>
           <!-- <div class="sha1">SHA1: 4DA9F68763D37CC968F316F1BEB09E29B4BD621A</div> -->
         </div>
       </div>
@@ -167,14 +167,14 @@ <h1>Liste de mes diplômes et Certificats</h1>
       </div>
       <div class="_row">
         <div class="text">
-          <div class="doc_name">Certificat OpenClassrooms: Réalisez un cahier des charges fonctionnel - 2022</div>
+          <div class="doc_name">Certificat OC: Réalisez un cahier des charges fonctionnel - 2022</div>
           <!-- <div class="sha1">SHA1: D88A893081E85B6D905CB4291C27AD4217E4AC18</div> -->
         </div>
       </div>      
       <div class="_row">
         <div class="text">
           <div class="doc_name">
-            Microsoft Certified Solutions Associate :<br>
+            Microsoft Certified Solutions Associate:<br>
             MCSA Windows Server 2012 (en 2014)
           </div>
           <div class="sha1">SHA1: 4DEA981FE2C680C13BB652B459589CBE15FD6D18</div>
@@ -197,11 +197,11 @@ <h1>Liste de mes diplômes et Certificats</h1>
       <div class="_row">
         <div class="text">
           <div class="doc_name">
-            Certificates of Course Completion from CISCO for :<br>
-            CCNA Exploration: Network Fundamentals - 2013<br>
-            CCNA Exploration: LAN Switching and Wireless - 2013<br>
-            CCNA Exploration: Routing Protocols and Concepts - 2013<br>
-            CCNA Exploration: Accessing the WAN - 2013
+            Certificates of Course Completion from CISCO for:<br>
+            ⦁ CCNA Exploration: Network Fundamentals - 2013<br>
+            ⦁ CCNA Exploration: LAN Switching and Wireless - 2013<br>
+            ⦁ CCNA Exploration: Routing Protocols and Concepts - 2013<br>
+            ⦁ CCNA Exploration: Accessing the WAN - 2013
             <div class="sha1">SHA1: AFF66F568BC48AADF2CE607CB58BCB9AE413148D</div>
           </div>
         </div>
@@ -229,6 +229,9 @@ <h1>Liste de mes diplômes et Certificats</h1>
         </div>
       </div>
     </div>
+    <div class="notice">
+      <p>Remarque : OC = OpenClassrooms</p>
+    </div>
   </section>
 
   <!-- jQuery 3.6.0 -->