feat: Add 'Submit Your Art' button to header

Author: nilisofficiel

index.html

@@ -29,21 +29,22 @@ <h1>Animation Nation</h1>
             <button id="clear-btn">&times;</button>
           </div>
         </div>
-      </div>
+        <!-- contribution -->
+        <a href="./CONTRIBUTING.md" id="contribute-btn" target="_blank">
+          <i class="fas fa-plus-circle"></i> Soumettre votre Œuvre
+        </a>
+        </div>
     </div>
 
     <div class="card-container">
       <ul class="flex" id="cards">
-        <!-- Content is generated dynamically  -->
-        <!-- Do not add your card here -->
-      </ul>
+        </ul>
     </div>
 
     <div class="go-to-top">
       <span>&uarr;</span>
-      <!-- Use an upward arrow character -->
-    </div>
+      </div>
 
     <script src="./public/includes.js"></script>
   </body>
-</html>
+</html>

public/styles.css

@@ -289,4 +289,28 @@ ul {
   width: 100%;
   text-align: center;
   padding: 50px 0;
+}
+
+/* contribution */
+#contribute-btn {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 25px; /* Sépare le bouton du champ de recherche */
+    background-color: #007bff; /* Bleu classique */
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    font-weight: bold;
+    font-size: 1.1em;
+    transition: background-color 0.3s ease;
+    /* Assurez-vous que cela s'aligne bien avec les autres éléments du header */
+    text-align: center;
+}
+
+#contribute-btn:hover {
+    background-color: #0056b3; /* Bleu plus foncé au survol */
+}
+
+#contribute-btn i {
+    margin-right: 8px; /* Espace entre l'icône et le texte */
 }