Ajout de FAQ
This commit is contained in:
parent
c79bf1fac8
commit
7cacf9f3ff
@ -47,5 +47,4 @@
|
|||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
37
css/faq.css
Normal file
37
css/faq.css
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
.faq-section {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.faq-question-btn {
|
||||||
|
background-color: #FFB039;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer {
|
||||||
|
display: none;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item.active .faq-question-btn {
|
||||||
|
background-color: #4A305A;
|
||||||
|
}
|
||||||
|
|
||||||
1
css/index.css
Normal file
1
css/index.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
/*enlever les trucs supplémentaires dans styles.css de index.html et les mettre ici */
|
||||||
@ -1,4 +1,3 @@
|
|||||||
/* Ajoutez les styles nécessaires pour le formulaire de réservation */
|
|
||||||
.content {
|
.content {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -47,4 +46,3 @@
|
|||||||
.reservation-form {
|
.reservation-form {
|
||||||
text-align: center; /* Centre le formulaire */
|
text-align: center; /* Centre le formulaire */
|
||||||
}
|
}
|
||||||
/* Ajoutez les styles nécessaires pour le formulaire de réservation */
|
|
||||||
|
|||||||
109
css/styles.css
109
css/styles.css
@ -10,7 +10,6 @@ body {
|
|||||||
padding-top: 80px;
|
padding-top: 80px;
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Arial', sans-serif;
|
||||||
background-color: #F2F2F2;
|
background-color: #F2F2F2;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@ -35,18 +34,6 @@ body {
|
|||||||
margin-left: 1cm;
|
margin-left: 1cm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin: 0 15px;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reserve-btn {
|
.reserve-btn {
|
||||||
background-color: #FFB039;
|
background-color: #FFB039;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@ -66,9 +53,6 @@ body {
|
|||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
|
||||||
color: #87CEEB;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.nav-links {
|
.nav-links {
|
||||||
@ -94,6 +78,14 @@ body {
|
|||||||
.burger-menu {
|
.burger-menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@ -179,6 +171,7 @@ p {
|
|||||||
width: 80%; /* largeur de la fenêtre de la vidéo */
|
width: 80%; /* largeur de la fenêtre de la vidéo */
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plats-populaires {
|
.plats-populaires {
|
||||||
@ -246,6 +239,10 @@ p {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@ -260,14 +257,14 @@ p {
|
|||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-icons {
|
.logo-reseaux {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center; /* Centrez les icônes sur les petits écrans */
|
justify-content: center; /* Centrer les icônes sur les petits écrans */
|
||||||
margin-top: 10px; /* Ajoutez une marge pour séparer les icônes du texte */
|
margin-top: 10px; /* Ajouter une marge pour séparer les icônes du texte */
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-icon img {
|
.logo-reseaux img {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
@ -282,33 +279,19 @@ p {
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style pour les petits écrans */
|
.client-evaluations {
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.footer-content {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.client-reviews {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-review-container {
|
.client-evaluation-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-review {
|
.client-evaluation {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
@ -319,19 +302,19 @@ p {
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-review img {
|
.client-evaluation img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-review p {
|
.client-evaluation p {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-review h3 {
|
.client-evaluation h3 {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
color: #4A305A;
|
color: #4A305A;
|
||||||
}
|
}
|
||||||
@ -347,3 +330,49 @@ p {
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* MENU DROPDOWN -> Pour à propos*/
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #FFB039;
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a {
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: block;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Couleur des éléments de la nav bar Accueil, Menu, À propos ... */
|
||||||
|
.nav-links a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none; /*Enlève le soulignement hyperlink*/
|
||||||
|
margin: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Couleur de survol de Accueil, Menu, À propos, and Contact */
|
||||||
|
.nav-links a:hover,
|
||||||
|
.dropdown:hover .dropdown-btn {
|
||||||
|
color: #FFB039;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Couleur du survol de Réserver une table, FAQ, Nos chefs, Nos fournisseurs, Nos équipes */
|
||||||
|
.nav-link.reserve-btn:hover,
|
||||||
|
.dropdown-content a:hover {
|
||||||
|
color: #4A305A;
|
||||||
|
}
|
||||||
|
|||||||
@ -13,13 +13,21 @@
|
|||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="../html/index.html" class="nav-link">Accueil</a>
|
<a href="index.html">Accueil</a>
|
||||||
<a href="#" class="nav-link">Menu</a>
|
<a href="#">Menu</a>
|
||||||
<a href="#" class="nav-link">À propos</a>
|
<div class="dropdown">
|
||||||
|
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a href="faq.html">FAQ</a>
|
||||||
|
<a href="#">Nos chefs</a>
|
||||||
|
<a href="#">Nos fournisseurs</a>
|
||||||
|
<a href="#">Notre équipe</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a href="../html/contact.html" class="nav-link">Contact</a>
|
<a href="../html/contact.html" class="nav-link">Contact</a>
|
||||||
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- BARRE DU MENU BURGER -->
|
<!-- BARRE DU MENU BURGER -->
|
||||||
<div class="burger-menu">
|
<div class="burger-menu">
|
||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
@ -80,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer-section horizontally-aligned">
|
<div class="footer-section horizontally-aligned">
|
||||||
<h3>Réseaux sociaux</h3>
|
<h3>Réseaux sociaux</h3>
|
||||||
<div class="social-icons">
|
<div class="logo-reseaux">
|
||||||
<p>
|
<p>
|
||||||
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
||||||
@ -108,13 +116,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-signature">
|
<div class="footer-signature">
|
||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
||||||
<p>Une bouchée dans le futur.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
154
html/faq.html
Normal file
154
html/faq.html
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr-FR">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="../css/styles.css">
|
||||||
|
<link rel="stylesheet" href="../css/faq.css">
|
||||||
|
<title>FAQ - Neo Eat</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
|
</div>
|
||||||
|
<nav class="nav-links">
|
||||||
|
<a href="index.html">Accueil</a>
|
||||||
|
<a href="#">Menu</a>
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a href="faq.html">FAQ</a>
|
||||||
|
<a href="#">Nos chefs</a>
|
||||||
|
<a href="#">Nos fournisseurs</a>
|
||||||
|
<a href="#">Notre équipe</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="../html/contact.html" class="nav-link">Contact</a>
|
||||||
|
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- BARRE DU MENU BURGER -->
|
||||||
|
<div class="burger-menu">
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<section class="faq-section">
|
||||||
|
<h1>Foire aux questions</h1>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">1. Question 1 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar libero vel ligula ultrices, eget accumsan velit congue.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">2. Question 2 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Maecenas eu lectus vitae nulla consectetur fermentum. Aliquam auctor, elit vel tincidunt molestie, purus elit placerat ex.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">3. Question 3 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">4. Question 4 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">5. Question 5 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">6. Question 6 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<button class="faq-question-btn">7. Question 7 ?</button>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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:neoeat.sav@gmail.com">neoeat.sav@gmail.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="logo-reseaux">
|
||||||
|
<p>
|
||||||
|
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
|
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://www.facebook.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
|
<img src="../img/RéseauxSociaux/Facebook.png" alt="Facebook">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://www.X.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
|
<img src="../img/RéseauxSociaux/X.png" alt="X">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://www.youtube.com/channel/UCNSi53sTJ7LYqgonJ4CfCCQ" 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>© 2024 Neo Eat. Tous droits réservés.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../js/script.js"></script>
|
||||||
|
<script src="../js/faq.js"></script>
|
||||||
|
<button id="scrollTopBtn" onclick="scrollToTop()">
|
||||||
|
<span>🚀</span>
|
||||||
|
</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="../css/styles.css">
|
<link rel="stylesheet" href="../css/styles.css">
|
||||||
|
<link rel="stylesheet" href="../css/index.css">
|
||||||
<title>Neo Eat</title>
|
<title>Neo Eat</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -12,13 +13,21 @@
|
|||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="../html/index.html" class="nav-link">Accueil</a>
|
<a href="index.html">Accueil</a>
|
||||||
<a href="#" class="nav-link">Menu</a>
|
<a href="#">Menu</a>
|
||||||
<a href="#" class="nav-link">À propos</a>
|
<div class="dropdown">
|
||||||
|
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a href="faq.html">FAQ</a>
|
||||||
|
<a href="#">Nos chefs</a>
|
||||||
|
<a href="#">Nos fournisseurs</a>
|
||||||
|
<a href="#">Notre équipe</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a href="../html/contact.html" class="nav-link">Contact</a>
|
<a href="../html/contact.html" class="nav-link">Contact</a>
|
||||||
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- BARRE DU MENU BURGER -->
|
<!-- BARRE DU MENU BURGER -->
|
||||||
<div class="burger-menu">
|
<div class="burger-menu">
|
||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
@ -30,16 +39,15 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- Vidéo et message de bienvenue -->
|
<!-- Vidéo et message de bienvenue -->
|
||||||
<section class="bienvenue-section">
|
<section class="bienvenue-section">
|
||||||
<h1>Bienvenue chez Neo Eat !</h1>
|
|
||||||
<video controls autoplay class="bienvenue-video">
|
<video controls autoplay class="bienvenue-video">
|
||||||
<source src="../video/VideoExplicationConcept.mp4" type="video/mp4">
|
<source src="../video/VideoExplicationConcept.mp4" type="video/mp4">
|
||||||
Votre navigateur ne supporte pas les vidéos.
|
Votre navigateur ne supporte pas les vidéos.
|
||||||
</video>
|
</video>
|
||||||
</section>
|
</section>
|
||||||
<section class="restaurant-context">
|
<section class="restaurant-context">
|
||||||
<h2>Notre Concept</h2>
|
<h2>Bienvenue chez Neo Eat !</h2>
|
||||||
<p>
|
<p>
|
||||||
Bienvenue chez Neo Eat, où la créativité des chefs étoilés s'unit à la précision de la technologie. Nos chefs renommés imaginent des recettes exceptionnelles, harmonisant saveurs raffinées et innovations culinaires. Dans nos cuisines, des robots de pointe, guidés par ces recettes d'exception, assurent une expérience gastronomique unique.
|
Neo Eat, où la créativité des chefs étoilés s'unit à la précision de la technologie. Nos chefs renommés imaginent des recettes exceptionnelles, harmonisant saveurs raffinées et innovations culinaires. Dans nos cuisines, des robots de pointe, guidés par ces recettes d'exception, assurent une expérience gastronomique unique.
|
||||||
<br>Découvrez l'alliance parfaite entre l'art culinaire humain et la précision technologique des robots. Vous avez la chance de voir ces machines à l'œuvre, créant vos plats sous vos yeux. Laissez-vous séduire par cette fusion unique de talent culinaire et d'innovation. Chez Neo Eat, chaque plat est une expérience mémorable, alliant la passion des chefs au futur de la cuisine.
|
<br>Découvrez l'alliance parfaite entre l'art culinaire humain et la précision technologique des robots. Vous avez la chance de voir ces machines à l'œuvre, créant vos plats sous vos yeux. Laissez-vous séduire par cette fusion unique de talent culinaire et d'innovation. Chez Neo Eat, chaque plat est une expérience mémorable, alliant la passion des chefs au futur de la cuisine.
|
||||||
</p>
|
</p>
|
||||||
<img src="../img/Restaurant/tables.png" alt="Tables du restaurant" class="restaurant-tables">
|
<img src="../img/Restaurant/tables.png" alt="Tables du restaurant" class="restaurant-tables">
|
||||||
@ -105,10 +113,10 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Section des avis clients -->
|
<!-- Section des avis clients -->
|
||||||
<section class="client-reviews">
|
<section class="client-evaluations">
|
||||||
<h2>Avis de nos clients</h2>
|
<h2>Avis de nos clients</h2>
|
||||||
<div class="client-review-container">
|
<div class="client-evaluation-container">
|
||||||
<div class="client-review">
|
<div class="client-evaluation">
|
||||||
<img src="../img/Avis_clients/client1.png" alt="Client 1">
|
<img src="../img/Avis_clients/client1.png" alt="Client 1">
|
||||||
<h3>Marie Dubois</h3>
|
<h3>Marie Dubois</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -117,7 +125,7 @@
|
|||||||
<span class="evaluation">★★★★★</span>
|
<span class="evaluation">★★★★★</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="client-review">
|
<div class="client-evaluation">
|
||||||
<img src="../img/Avis_clients/client2.png" alt="Client 2">
|
<img src="../img/Avis_clients/client2.png" alt="Client 2">
|
||||||
<h3>Lucas Martin</h3>
|
<h3>Lucas Martin</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -126,7 +134,7 @@
|
|||||||
<span class="evaluation">★★★★★</span>
|
<span class="evaluation">★★★★★</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="client-review">
|
<div class="client-evaluation">
|
||||||
<img src="../img/Avis_clients/client3.png" alt="Client 3">
|
<img src="../img/Avis_clients/client3.png" alt="Client 3">
|
||||||
<h3>Sophie Leroux</h3>
|
<h3>Sophie Leroux</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -136,6 +144,9 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="voir-plus">
|
||||||
|
<a href="https://www.tripadvisor.com/neoeat/" class="voir-plus-btn">Voir plus d'évaluations</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -156,7 +167,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer-section horizontally-aligned">
|
<div class="footer-section horizontally-aligned">
|
||||||
<h3>Réseaux sociaux</h3>
|
<h3>Réseaux sociaux</h3>
|
||||||
<div class="social-icons">
|
<div class="logo-reseaux">
|
||||||
<p>
|
<p>
|
||||||
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
||||||
@ -188,7 +199,6 @@
|
|||||||
<div class="footer-signature">
|
<div class="footer-signature">
|
||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
||||||
<p>Une bouchée dans le futur.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
@ -13,13 +13,21 @@
|
|||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="../html/index.html" class="nav-link">Accueil</a>
|
<a href="index.html">Accueil</a>
|
||||||
<a href="#" class="nav-link">Menu</a>
|
<a href="#">Menu</a>
|
||||||
<a href="#" class="nav-link">À propos</a>
|
<div class="dropdown">
|
||||||
|
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
|
||||||
|
<div class="dropdown-content">
|
||||||
|
<a href="faq.html">FAQ</a>
|
||||||
|
<a href="#">Nos chefs</a>
|
||||||
|
<a href="#">Nos fournisseurs</a>
|
||||||
|
<a href="#">Notre équipe</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<a href="../html/contact.html" class="nav-link">Contact</a>
|
<a href="../html/contact.html" class="nav-link">Contact</a>
|
||||||
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
<a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- BARRE DU MENU BURGER -->
|
<!-- BARRE DU MENU BURGER -->
|
||||||
<div class="burger-menu">
|
<div class="burger-menu">
|
||||||
<div class="bar"></div>
|
<div class="bar"></div>
|
||||||
@ -89,7 +97,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer-section horizontally-aligned">
|
<div class="footer-section horizontally-aligned">
|
||||||
<h3>Réseaux sociaux</h3>
|
<h3>Réseaux sociaux</h3>
|
||||||
<div class="social-icons">
|
<div class="logo-reseaux">
|
||||||
<p>
|
<p>
|
||||||
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
|
||||||
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
|
||||||
@ -117,13 +125,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-signature">
|
<div class="footer-signature">
|
||||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||||
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
<p>© 2024 Neo Eat. Tous droits réservés.</p>
|
||||||
<p>Une bouchée dans le futur.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|||||||
22
js/faq.js
Normal file
22
js/faq.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const faqItems = document.querySelectorAll('.faq-item');
|
||||||
|
|
||||||
|
faqItems.forEach(item => {
|
||||||
|
const questionBtn = item.querySelector('.faq-question-btn');
|
||||||
|
|
||||||
|
questionBtn.addEventListener('click', () => {
|
||||||
|
// Ferme toutes les autres réponses
|
||||||
|
faqItems.forEach(otherItem => {
|
||||||
|
if (otherItem !== item) {
|
||||||
|
otherItem.classList.remove('active');
|
||||||
|
otherItem.querySelector('.faq-answer').style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Affiche ou masque la réponse de la question actuelle
|
||||||
|
item.classList.toggle('active');
|
||||||
|
const answer = item.querySelector('.faq-answer');
|
||||||
|
answer.style.display = item.classList.contains('active') ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user