Ajout pied de page

css/styles.css

@@ -176,7 +176,7 @@ p {
 }
 
 .welcome-video {
-    width: 90%; /* largeur de la fenêtre de la vidéo */
+    width: 80%; /* largeur de la fenêtre de la vidéo */
     max-height: 400px; 
     margin-bottom: 20px;
 }
@@ -238,3 +238,52 @@ p {
     margin-right: 5px;
     font-size: 18px;
 }
+
+
+.container {
+    position: relative;
+    margin-bottom: 120px; 
+}
+
+.footer {
+    background-color: #4A305A;
+    color: white;
+    padding: 20px; /*hauteur du pied de page*/
+    text-align: center;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-around;
+}
+
+.footer-section {
+    flex: 1;
+}
+
+.footer-section p {
+    color:white;
+}
+
+.footer-section img {
+    width: 30px; /* taille logo*/
+    height: 30px;
+    margin-right: 5px; /* Ajoute de l'espace entre les logos et les noms */
+}
+
+.footer-section h3 {
+    margin-bottom: 10px;
+}
+
+.footer-signature {
+    margin-top: 20px;
+}
+
+.footer-signature p {
+    color:white;
+}
+
+.footer-signature img {
+    width: 200px; /* taille du logo */
+    margin-bottom: 10px;
+}

html/index.html

@@ -96,9 +96,61 @@
     </div>
     </section>
     <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>Plan du site</h3>
+                <!-- Ajoutez ici les liens vers les différentes sections du site -->
+            </div>
+            <div class="footer-section">
+                <h3>Mentions légales</h3>
+                <!-- Ajoutez ici les informations légales nécessaires -->
+            </div>
+            <div class="footer-section">
+                <h3>Contact</h3>
+                <p>Email : <a href="mailto:info@neo-eat.com">info@neo-eat.com</a></p>
+                <p>Téléphone : <a href="tel:+33175489632">+33 01 75 48 96 32</a></p>
+            </div>
+            <div class="footer-section horizontally-aligned">
+                <h3>Réseaux sociaux</h3>
+                <div class="social-icons">
+                    <p>
+                        <a href="https://www.instagram.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.facebook.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Facebook.png" alt="Facebook">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.X.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/X.png" alt="X">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.Youtube.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Youtube.png" alt="Youtube">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.TripAdvisor.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Tripadvisor.png" alt="TripAdvisor">
+                        </a>
+                    </p>
+                </div>
+            </div>
+            
+            
+        </div>
+        <div class="footer-signature">
+            <img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
             <p>&copy; 2024 Neo Eat. Tous droits réservés.</p>
+            <p>Une bouchée dans le futur.</p>
+        </div>
     </footer>
     
+
     <script src="../js/script.js"></script>
     <button id="scrollTopBtn" onclick="scrollToTop()">
         <span>&uarr;</span>