Fin des test, place au travail ! Correction des bugs + amélioration du menu principal

CodeIgniter-3.1.13/application/views/accueil.php

@@ -11,6 +11,7 @@
     <div class="hero">
         <h1>Bienvenue sur Onzeur !</h1>
         <p>Le service de streaming musical numéro 1 en France.</p>
+        <button type="button">Accéder à la musique</button>
     </div>
 
     <div class="container">
@@ -31,7 +32,7 @@
         </div>
 
         <div class="testimonials">
-            <h2>Commentaires</h2>
+            <h2>Avis</h2>
             <div class="testimonial">
                 <p>"Ce site est incroyable! Depuis que j'utilise Onzeur ma vie as changé ! Je suis devenu riche et célèbre ! Je recommande 🤩"</p>
                 <p>- Mike</p>

CodeIgniter-3.1.13/assets/css/accueil.css

@@ -1,4 +1,3 @@
-
 body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f4;
@@ -25,6 +24,23 @@
     padding: 50px 20px;
     text-align: center;
 }
+
+.hero button {
+    padding: 15px 40px;
+    font-size: 1.2rem;
+    background-color: #640875;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.hero button:hover {
+    background-color: #9f23b5;
+}
+
+
 .features, .testimonials, .gallery, .contact {
     margin: 20px 0;
     padding: 20px;
@@ -39,16 +55,50 @@
     margin: 10px 0;
 }
 
+.gallery {
+    margin-top: 40px; /* Ajoute de l'espace avant la galerie */
+    text-align: center;
+}
+
+.gallery h2 {
+    text-align: center;
+    margin-bottom: 20px; /* Espace sous le titre */
+}
+
 .gallery {
     display: flex;
     justify-content: space-around;
+    align-items: center; /* Aligne les images au centre verticalement */
 }
 
 .gallery img {
-            width: 50%;
+    width: 30%; /* Ajustez ce pourcentage pour que les images tiennent sur une ligne sur les grands écrans */
     height: auto;
     border-radius: 8px;
+    margin: 10px; /* Espace autour des images */
 }
+
+/* Media queries pour les petits écrans */
+@media (max-width: 768px) {
+    .gallery img {
+        width: 45%; /* Les images prennent 45% de la largeur sur les écrans moyens */
+    }
+
+    .gallery {
+        flex-wrap: wrap; /* Permet de passer les images à la ligne sur les petits écrans */
+    }
+}
+
+@media (max-width: 480px) {
+    .gallery img {
+        width: 90%; /* Les images prennent 90% de la largeur sur les petits écrans */
+    }
+
+    .gallery {
+        flex-wrap: wrap; /* Permet de passer les images à la ligne sur les petits écrans */
+    }
+}
+
 .contact form input, .contact form textarea {
     width: 100%;
     padding: 10px;