index.html

@@ -216,6 +216,17 @@
                 </article>
         </section>
       </aside>
+      <footer id="webRingSection" aria-label="les copaines du LOL">
+        <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+          <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
+        </a>
+        <a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
+          <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
+        </a>
+        <a href="https://drags-nerds.net" target="_blank" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+          <img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+        </a>
+      </footer>
       <noscript>
         <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
       </noscript>

style/main.css

@@ -577,6 +577,7 @@ main{
                         .solidBox:hover{
                           color: var(--back-color);
                           background-color: var(--main-color);
+                          border-color: var(--back-color);
                         }
 
                         .solidBox:has(details[open]){
@@ -628,4 +629,35 @@ main{
                         }
                 }
       }
+
+      #webRingSection{
+        width: 100%;
+        padding: 13.12px;
+        padding-bottom: 16.1px;
+        min-height: 44px;
+        display: grid;
+        background-color: var(--back-color);
+        border-color: var(--main-color);
+        border-style: solid;
+        border-width: thin 0 0 0;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 7.77px;
+
+              a{
+                width: 100%;
+                height: 31px;
+
+                      img{
+                        width: 100%;
+                      }
+
+                      .needOutline{
+                        border-color: var(--main-color);
+                        border-style: solid;
+                        border-width: thin;
+                      }
+              }
+
+              
+      }
 }

style/responsive.css

@@ -135,6 +135,11 @@
                        }
               }
       }
+
+      #webRingSection{
+        grid-template-columns: repeat(6, 1fr);
+        min-height: 66px;
+      }
     }
   }
 
@@ -314,5 +319,10 @@
                     }
             }
     }
+
+    #webRingSection{
+        grid-template-columns: repeat(8, 1fr);
+        min-height: 77px;
+      }
   }
 }