stiti/SAE_S1.05_S1.06
1
6
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Amélioration de la page d'accueil

Browse Source
This commit is contained in:
Moncef STITI
2024-01-12 23:13:50 +01:00
parent 2c6bff3937
commit a934303d08
18 changed files with 145 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
css/styles.css
View File

@@ -2,6 +2,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background-color: #F2F2F2;
} }
.navbar { .navbar {
@@ -13,8 +14,8 @@ body {
} }
.logo img { .logo img {
width: 3cm; width: 4.7cm;
height: 1.5cm; height: 1.7cm;
margin-left: 2cm; margin-left: 2cm;
} }
@@ -27,16 +28,16 @@ body {
color: white; color: white;
text-decoration: none; text-decoration: none;
margin: 0 15px; margin: 0 15px;
transition: color 0.3s ease;
} }
.reserve-btn { .reserve-btn {
background-color: #FFB039; background-color: #FFB039;
padding: 10px 20px; padding: 10px 20px;
border-radius: 10px; border-radius: 10px;
color: #4A305A;
} }
/* ... (code précédent) */
.burger-menu { .burger-menu {
display: none; display: none;
cursor: pointer; cursor: pointer;
@@ -49,6 +50,10 @@ 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 {
display: none; display: none;
@@ -74,3 +79,88 @@ body {
display: block; 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;
}

54
html/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr-FR">
<head> <head>
<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">
@@ -9,7 +9,7 @@
<body> <body>
<header class="navbar"> <header class="navbar">
<div class="logo"> <div class="logo">
<img src="../img/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="#" class="nav-link">Accueil</a> <a href="#" class="nav-link">Accueil</a>
@@ -18,6 +18,8 @@
<a href="#" class="nav-link">Contact</a> <a href="#" class="nav-link">Contact</a>
<a href="#" class="nav-link reserve-btn">Réserver une table</a> <a href="#" class="nav-link reserve-btn">Réserver une table</a>
</nav> </nav>
<!-- BARRE DU MENU BURGER -->
<div class="burger-menu"> <div class="burger-menu">
<div class="bar"></div> <div class="bar"></div>
<div class="bar"></div> <div class="bar"></div>
@@ -25,7 +27,53 @@
</div> </div>
</header> </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> <script src="../js/script.js"></script>
</body> </body>

BIN
img/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
img/ChefCuisto/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
img/ChefCuisto/CyrilLignac.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
img/ChefCuisto/Etchebest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/ChefCuisto/GordonRamsay.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
img/ChefCuisto/ThierryMarx.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

0
img/LogoNeoEat.png → img/Logo/LogoNeoEat.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/LogoNeoEat1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
img/LogoNeoEat2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
img/LogoNeoEat5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
img/LogoNeoEat6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
img/LogoNeoEat7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
img/PhotoCuisine/CouteaurRobot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/PhotoCuisine/CuisineRobot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

15
js/menu.js
View File

@@ -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');
}
});
});

BIN
video/VideoExplicationConcept.mp4 Normal file
View File

Binary file not shown.