Amélioration de la page d'accueil
@ -2,6 +2,7 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@ -13,8 +14,8 @@ body {
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 3cm;
|
||||
height: 1.5cm;
|
||||
width: 4.7cm;
|
||||
height: 1.7cm;
|
||||
margin-left: 2cm;
|
||||
}
|
||||
|
||||
@ -27,16 +28,16 @@ body {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 0 15px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.reserve-btn {
|
||||
background-color: #FFB039;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
color: #4A305A;
|
||||
}
|
||||
|
||||
/* ... (code précédent) */
|
||||
|
||||
.burger-menu {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
@ -49,6 +50,10 @@ body {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #87CEEB;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
@ -74,3 +79,88 @@ body {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1380px;
|
||||
margin: 15px auto;
|
||||
padding: 0 20px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chef-section {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.chef-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chef {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.chef img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chef h3 {
|
||||
margin-top: 10px;
|
||||
color: #4A305A;
|
||||
}
|
||||
|
||||
.chef p {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.voir-plus {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.voir-plus a.voir-plus-btn {
|
||||
display: inline-block;
|
||||
background-color: #FFB039;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4A305A;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-video {
|
||||
width: 90%; /* largeur de la fenêtre de la vidéo */
|
||||
max-height: 400px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -9,7 +9,7 @@
|
||||
<body>
|
||||
<header class="navbar">
|
||||
<div class="logo">
|
||||
<img src="../img/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||
<img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
|
||||
</div>
|
||||
<nav class="nav-links">
|
||||
<a href="#" class="nav-link">Accueil</a>
|
||||
@ -18,6 +18,8 @@
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
<a href="#" 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>
|
||||
@ -25,7 +27,53 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Reste du contenu de votre site va ici -->
|
||||
<div class="content">
|
||||
<!-- Vidéo et message de bienvenue -->
|
||||
<section class="welcome-section">
|
||||
<h1>Bienvenue chez Neo Eat !</h1>
|
||||
<video controls autoplay class="welcome-video">
|
||||
<source src="../video/VideoExplicationConcept.mp4" type="video/mp4">
|
||||
Votre navigateur ne supporte pas les vidéos.
|
||||
</video>
|
||||
</section>
|
||||
|
||||
<!-- Section des chefs -->
|
||||
<section class="chef-section">
|
||||
<h2>Nos créateurs culinaires</h2>
|
||||
<div class="chef-container">
|
||||
<div class="chef">
|
||||
<h3>Philippe Etchebest</h3>
|
||||
<img src="../img/ChefCuisto/Etchebest.png" alt="Chef Philippe Etchebest">
|
||||
<p>Rencontrez notre chef étoilé, Philippe Etchebest, passionné de cuisine depuis toujours.</p>
|
||||
</div>
|
||||
|
||||
<div class="chef">
|
||||
<h3>Cyril Lignac</h3>
|
||||
<img src="../img/ChefCuisto/CyrilLignac.jpg" alt="Chef Cyril Lignac">
|
||||
<p>Découvrez les créations innovantes de notre chef renommé, Cyril Lignac.</p>
|
||||
</div>
|
||||
|
||||
<div class="chef">
|
||||
<h3>Gordon Ramsay</h3>
|
||||
<img src="../img/ChefCuisto/GordonRamsay.jpg" alt="Chef Gordon Ramsay">
|
||||
<p>Savourez des plats exquis préparés par le célèbre chef Gordon Ramsay.</p>
|
||||
</div>
|
||||
|
||||
<div class="chef">
|
||||
<h3>Thierry Marx</h3>
|
||||
<img src="../img/ChefCuisto/ThierryMarx.jpg" alt="Chef Thierry Marx">
|
||||
<p>Explorez le monde culinaire unique conçu par le chef étoilé Thierry Marx.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="voir-plus">
|
||||
<a href="#" class="voir-plus-btn">Voir plus de chefs</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="robot-section">
|
||||
<!-- Ajoutez la même structure pour les photos des robots etc.......-->
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../js/script.js"></script>
|
||||
</body>
|
||||
|
||||
BIN
img/.DS_Store
vendored
Normal file
BIN
img/ChefCuisto/.DS_Store
vendored
Normal file
BIN
img/ChefCuisto/CyrilLignac.jpg
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
img/ChefCuisto/Etchebest.png
Normal file
|
After Width: | Height: | Size: 67 KiB |
BIN
img/ChefCuisto/GordonRamsay.jpg
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
img/ChefCuisto/ThierryMarx.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB |
BIN
img/PhotoCuisine/CouteaurRobot.jpg
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
img/PhotoCuisine/CuisineRobot.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
15
js/menu.js
@ -1,15 +0,0 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const burgerMenu = document.querySelector('.burger-menu');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
burgerMenu.addEventListener('click', function () {
|
||||
navLinks.classList.toggle('show');
|
||||
});
|
||||
|
||||
// Ajoutez le code suivant pour masquer le menu lorsque la largeur de l'écran est supérieure à 768px
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerWidth > 768) {
|
||||
navLinks.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||