diff --git a/img/LogoNeoEat.png b/img/LogoNeoEat.png new file mode 100644 index 0000000..a2f23bc Binary files /dev/null and b/img/LogoNeoEat.png differ diff --git a/img/LogoNeoEat1.png b/img/LogoNeoEat1.png new file mode 100644 index 0000000..55a5fb3 Binary files /dev/null and b/img/LogoNeoEat1.png differ diff --git a/img/LogoNeoEat2.png b/img/LogoNeoEat2.png new file mode 100644 index 0000000..944b771 Binary files /dev/null and b/img/LogoNeoEat2.png differ diff --git a/img/LogoNeoEat5.png b/img/LogoNeoEat5.png new file mode 100644 index 0000000..532704f Binary files /dev/null and b/img/LogoNeoEat5.png differ diff --git a/img/LogoNeoEat6.png b/img/LogoNeoEat6.png new file mode 100644 index 0000000..7fe071e Binary files /dev/null and b/img/LogoNeoEat6.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..09dbab3 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + Neo Eat - Acceuil + + + +
+
+ + +
+
+ +
+
+

Bienvenue chez Neo Eat

+

Explorez l'avenir de la gastronomie avec notre restaurant 100% automatisé par des robots.

+ Voir le menu +
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ba086a6 --- /dev/null +++ b/script.js @@ -0,0 +1,8 @@ +document.addEventListener('DOMContentLoaded', function () { + const menuIcon = document.getElementById('menu-icon'); + const navList = document.querySelector('nav ul'); + + menuIcon.addEventListener('click', function () { + navList.classList.toggle('show'); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8877ed8 --- /dev/null +++ b/styles.css @@ -0,0 +1,148 @@ +body { + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; +} + +header { + background-color: #333; + color: #fff; + padding: 10px 0; /* Ajustez le padding-top pour déplacer légèrement l'image du logo vers le bas */ + display: flex; + justify-content: space-between; + align-items: center; +} + +#logo { + display: flex; + align-items: center; /* Centrer verticalement le contenu du logo */ +} + +#logo img { + width: 20%; /* Utiliser 100% de la largeur du conteneur */ + height: auto; /* Maintenir le rapport hauteur/largeur pour éviter la distorsion */ + margin-top: 5px; /* Ajustez la marge pour déplacer légèrement l'image du logo vers le bas */ +} + +nav { + display: flex; + align-items: center; /* Centrer verticalement les éléments de la barre de navigation */ +} + +.container { + width: 80%; + margin: 0 auto; + color:#000000; +} + +header { + background-color: #4A305A; + color: #fff; + padding: 15px 0; + display: flex; + justify-content: space-between; + align-items: center; +} + +header #logo { + font-size: 24px; + font-weight: bold; +} + +nav { + display: flex; + align-items: center; +} + +nav ul { + list-style: none; + display: flex; + margin: 0; + padding: 0; + margin-left: auto; /* Pour déplacer vers la droite */ +} + +nav ul li { + margin-left: 20px; +} + +nav a { + text-decoration: none; + color: #fff; + font-weight: bold; +} + +#menu-icon { + display: none; + font-size: 24px; + cursor: pointer; +} + +#reserve-button { + background-color: orange; + color: #fff; + padding: 10px 20px; + border-radius: 10px; + margin-left: 20px; +} + +#hero { + background: url('hero-image.jpg') center/cover; + color: #fff; + text-align: center; + padding: 100px 0; +} + +#hero h1 { + font-size: 48px; + margin-bottom: 20px; +} + +#hero p { + font-size: 18px; + margin-bottom: 30px; +} + +#hero a { + display: inline-block; + background-color: #fff; + color: #333; + padding: 10px 20px; + text-decoration: none; + font-weight: bold; +} + +@media screen and (max-width: 768px) { + nav { + flex-direction: column; + align-items: flex-start; + } + + nav ul { + display: none; + width: 100%; + text-align: center; + position: absolute; + top: 60px; + left: 0; + background-color: #333; + } + + nav ul.show { + display: flex; + flex-direction: column; + } + + nav ul li { + margin: 0; + margin-bottom: 10px; + } + + #menu-icon { + display: block; + } + + #reserve-button { + margin: 20px 0; + } +}