<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> <!-- Définit l'encodage des caractères pour
éviter les problèmes d'affichage -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Assure la compatibilité sur les appareils mobiles -->
<title>Tomo-Dia School</title> <!-- Titre affiché dans l'onglet du
navigateur -->
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- Lien
pour importer une police externe -->
<style>
/* Style global pour le corps de la page */
body {
font-family: 'Fira Sans', sans-serif; /* Définit une police
lisible */
margin: 0;
padding: 0;
background-color: #f8f8f8; /* Couleur de fond claire */
}
/* Section d'image dans l'en-tête */
header .image-container {
width: 100%; /* Utilise toute la largeur de l'écran */
overflow: hidden; /* Cache les débordements éventuels */
}
header .image-container img {
width: 100%;
height: auto;
display: block; /* Retire les espaces blancs en dessous des
images */
object-fit: cover; /* Ajuste l'image pour couvrir toute la
zone */
}
/* Style de la barre de navigation */
nav {
display: flex;
justify-content: center; /* Centrer les liens
horizontalement */
background-color: #000000; /* Fond noir */
}
nav a {
color: white; /* Texte blanc */
padding: 1rem; /* Espace autour du texte */
text-decoration: none; /* Supprime le soulignement */
transition: background-color 0.3s; /* Animation de
changement de couleur */
font-family: 'Roboto', sans-serif; /* Police spécifique */
font-weight: 700; /* Texte en gras */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
nav a:hover {
background-color: #ff6347; /* Couleur lors du survol */
}
nav a.active {
background-color: #ff6347; /* Couleur pour le lien actif */
}
/* Menu déroulant */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none; /* Caché par défaut */
position: absolute; /* Position relative à l'élément parent
*/
background-color: #f9f9f9; /* Fond clair */
min-width: 160px; /* Largeur minimale */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Ombre
autour du menu */
z-index: 1; /* S'assure que le menu reste au-dessus */
opacity: 0;
visibility: hidden;
transform: translateY(-10px); /* Légèrement décalé vers le
haut */
transition: all 0.3s ease-in-out; /* Animation d'apparition
*/
}
.dropdown:hover .dropdown-content {
display: block; /* Visible lors du survol */
opacity: 1; /* Totalement visible */
visibility: visible;
transform: translateY(0); /* Ramène à sa position initiale
*/
border-radius: 15px; /* Coins arrondis */
}
.dropdown-content a {
color: black; /* Couleur de texte noire */
padding: 12px 16px; /* Espacement autour des liens */
text-decoration: none;
display: block; /* Affiché sous forme de blocs */
}
.dropdown-content a:hover {
background-color: #fed18d; /* Couleur lors du survol */
}
/* Conteneur principal */
.container {
padding: 2rem; /* Espacement interne */
text-align: center; /* Texte centré */
}
.menu-item {
display: inline-block; /* Affichage en ligne */
margin: 1rem; /* Espacement autour des éléments */
padding: 1rem; /* Espacement interne */
background-color: white; /* Fond blanc */
border-radius: 10px; /* Coins arrondis */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre subtile
*/
transition: transform 0.3s; /* Animation de zoom */
text-align: center;
}
.menu-item:hover {
transform: scale(1.05); /* Agrandissement léger */
}
.menu-item img {
width: 300px; /* Largeur fixe pour les images */
height: 300px; /* Hauteur fixe */
border-radius: 10px; /* Coins arrondis pour les images */
overflow: hidden;
}
.menu-item h3 {
margin: 0.5rem 0; /* Espacement au-dessus et en dessous */
}
.btn {
display: inline-block; /* Affichage en ligne */
padding: 0.5rem 1rem; /* Espacement interne */
margin: 0.5rem; /* Espacement externe */
background-color: #ff6347; /* Fond rouge */
color: white; /* Texte blanc */
text-decoration: none; /* Supprime le soulignement */
border-radius: 5px; /* Coins arrondis */
transition: background-color 0.3s; /* Animation de
changement de couleur */
}
.btn:hover {
background-color: #e5533d; /* Couleur lors du survol */
}
/* Images dans le pied de page */
footer .image-container {
width: 100%; /* Largeur totale */
overflow: hidden; /* Cache les débordements */
}
footer .image-container img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
</style>
</head>
<body>
<header>
<div class="image-container">
<img src="Design sans titre1234.png" alt="Logo Tomo-Dia
School">
</div>
</header>
<nav>
<a href="projet de groupe.html">Accueil</a>
<div class="dropdown">
<a href="Menu.html" class="active">Menu</a>
<div class="dropdown-content">
<a href="Voirmenu.html">Menu Pizza</a>
<a href="menu burger.html">Menu Burger</a>
<a href="menu plats.html">Menu Plats</a>
</div>
</div>
<a href="contact.html">Contact</a>
<a href="livraison 1.html">Livraison</a>
</nav>
<div class="container">
<div class="menu-item">
<img src="zozo.png" alt="Pizza">
<h3>Menu PIZZA</h3>
<p>Tomate, mozzarella, basilic</p>
<a href="Voirmenu.html" class="btn">Voir le Menu</a>
</div>
<div class="menu-item">
<img src="zozo1.png" alt="Burger">
<h3>Menu Burger</h3>
<p>Viande steak, laitue, tomates</p>
<a href="menu burger.html" class="btn">Voir le Menu</a>
</div>
<div class="menu-item">
<img src="zozo3.png" alt="Plats">
<h3>Menu Plats</h3>
<p>Saka, mwamba-ngoumba...</p>
<a href="Voirmenu plats.html" class="btn">Voir le Menu</a>
</div>
<div class="menu-item">
<img src="z2.png" alt="Desserts">
</div>
<div class="menu-item">
<img src="z3.png" alt="Boissons">
</div>
<div class="menu-item">
<img src="z1.png" alt="Boissons">
</div>
<footer>
<div class="image-container">
<img src="ke2.png" alt="Image Footer">
</div>
<div class="image-container">
<img src="FOOTER2.png" alt="Image Footer">
</div>
</footer>
</body>
</html>
