<!DOCTYPE html> <!
-- Déclaration du type de document HTML -->
<html lang="fr"> <!-- Ouverture de la balise HTML et spécification de
la langue française -->
<head>
<meta charset="UTF-8"> <!-- Définition du jeu de caractères UTF-8
pour le document -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Permet une meilleure compatibilité avec les appareils
mobiles -->
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!--
Importation de la police Roboto depuis Google Fonts -->
<title>Page de Contact</title> <!-- Titre de la page visible dans
l'onglet du navigateur -->
<style>
/* Début du bloc CSS pour la mise en forme de la page */
body {
font-family: Arial, sans-serif; /* Définition de la police
de caractères de la page */
margin: 0; /* Suppression des marges par défaut */
padding: 0; /* Suppression des espacements par défaut */
background-color: #f4f4f4; /* Définition d'une couleur de
fond gris clair */
text-align: center; /* Centrage du texte */
}
header .image-container {
width: 100%; /* Image occupe toute la largeur de l'écran */
overflow: hidden; /* Empêche l'image de dépasser de son
conteneur */
}
header .image-container img {
width: 100%; /* L'image prend toute la largeur */
height: auto; /* Hauteur de l'image ajustée automatiquement
*/
display: block; /* L'image est traitée comme un élément de
type bloc */
position: relative; /* Positionnement relatif pour ajuster
l'image si nécessaire */
object-fit: cover; /* Remplissage de l'espace tout en
conservant les proportions */
}
nav {
display: flex; /* Utilisation du modèle flexbox pour le
menu de navigation */
justify-content: center; /* Centrage horizontal des
éléments */
background-color: #000000; /* Fond noir pour le menu */
}
nav a {
color: white; /* Couleur du texte des liens en blanc */
padding: 1rem; /* Espacement autour des liens */
text-decoration: none; /* Suppression du soulignement des
liens */
transition: background-color 0.3s; /* Effet de transition
pour le changement de couleur de fond */
font-family: 'Roboto', sans-serif; /* Application de la
police Roboto aux liens */
font-weight: 700; /* Police en gras */
text-align: center; /* Centrage du texte dans les liens */
display: flex; /* Utilisation du modèle flexbox pour les
liens */
align-items: center; /* Alignement vertical centré */
justify-content: center; /* Alignement horizontal centré */
}
nav a:hover {
background-color: #ff6347; /* Changement de couleur de fond
au survol */
}
nav a.active {
background-color: #ff6347; /* Couleur de fond active pour
le lien actuellement sélectionné */
}
.dropdown {
position: relative; /* Positionnement relatif pour afficher
le sous-menu */
display: inline-block; /* Affichage en ligne du menu
déroulant */
}
.dropdown-content {
display: none; /* Masquage du sous-menu par défaut */
position: absolute; /* Positionnement absolu par rapport à
son conteneur parent */
background-color: #f9f9f9; /* Fond clair pour le sous-menu
*/
min-width: 160px; /* Largeur minimale du sous-menu */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Ombre
portée pour le sous-menu */
z-index: 1; /* Placer le sous-menu devant les autres
éléments */
opacity: 0; /* Rendre invisible le sous-menu */
visibility: hidden; /* Cacher le sous-menu */
transform: translateY(-10px); /* Légère translation vers le
haut au départ */
transition: all 0.3s ease-in-out; /* Effet de transition
sur l'apparition du sous-menu */
}
.dropdown:hover .dropdown-content {
display: block; /* Affichage du sous-menu lors du survol */
opacity: 1; /* Rendre visible le sous-menu */
visibility: visible; /* Rendre le sous-menu visible */
transform: translateY(0); /* Réinitialisation de la
translation pour l'animation */
border-radius: 15px; /* Arrondir les coins du sous-menu */
}
.dropdown-content a {
color: black; /* Couleur du texte des liens dans le sous-
menu */
padding: 12px 16px; /* Espacement autour des liens du sous-
menu */
text-decoration: none; /* Suppression du soulignement des
liens */
display: block; /* Affichage en bloc des liens */
}
.dropdown-content a:hover {
background-color: #fed18d; /* Changement de fond des liens
au survol */
}
.container {
width: 50%; /* Largeur du conteneur principale à 50% de la
largeur de la page */
margin: 0 auto; /* Centrage du conteneur */
background-color: white; /* Fond blanc pour le conteneur */
padding: 20px; /* Espacement intérieur du conteneur */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre portée
légère autour du conteneur */
border-radius: 8px; /* Coins arrondis du conteneur */
}
h1 {
text-align: center; /* Centrage du titre */
color: #333; /* Couleur sombre pour le titre */
}
label {
display: block; /* Affichage en bloc pour les labels */
margin: 10px 0 5px; /* Marges autour des labels */
}
input, textarea {
width: 100%; /* Champs de saisie prennent toute la largeur
du conteneur */
padding: 10px; /* Espacement à l'intérieur des champs */
margin-bottom: 10px; /* Espacement sous chaque champ */
border-radius: 5px; /* Coins arrondis des champs */
border: 1px solid #ddd; /* Bordure légère autour des champs
*/
}
input[type="submit"] {
background-color: #5cb85c; /* Couleur de fond du bouton
d'envoi */
color: white; /* Texte en blanc sur le bouton */
border: none; /* Suppression de la bordure du bouton */
cursor: pointer; /* Curseur en forme de main pour
l'interaction */
}
input[type="submit"]:hover {
background-color: #4cae4c; /* Changement de couleur de fond
du bouton au survol */
}
footer {
background-color: #000; /* Fond noir pour le pied de page
*/
color: white; /* Texte en blanc dans le pied de page */
padding: 20px; /* Espacement intérieur du pied de page */
text-align: center; /* Centrage du texte */
position: relative; /* Positionnement relatif pour
contrôler la position */
bottom: 0; /* Fixation du pied de page en bas de la page */
width: 100%; /* Largeur du pied de page sur toute la page
*/
}
footer .footer-content {
display: flex; /* Flexbox pour le contenu du pied de page
*/
justify-content: space-around; /* Distribution uniforme des
éléments */
align-items: center; /* Alignement vertical centré */
flex-wrap: wrap; /* Autoriser le contenu à se replier sur
plusieurs lignes si nécessaire */
}
footer .footer-content div {
margin: 10px; /* Marges autour des éléments du pied de page
*/
}
footer a {
color: #ddd; /* Couleur des liens dans le pied de page */
text-decoration: none; /* Suppression du soulignement des
liens */
}
footer a:hover {
color: rgb(223, 123, 9); /* Changement de couleur des liens
au survol */
}
</style>
</head>
<body>
<header>
<div class="image-container">
<img src="neige.png" alt="Logo Tomo-Dia School">
</div>
</header>
<nav>
<a href="projet de groupe.html" >Accueil</a>
<div class="dropdown">
<a href="Menu.html" >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" class="active">Contact</a>
<a href="livraison 1.html">Livraison</a>
</nav>
<div class="container">
<h1>Contactez-nous</h1>
<p>vous souhaitez nous contacter ? <br>
Remplissez le formulaire ci-contre afin de nous envoyer un
message.</p>
<form action="mailto:[email protected]" method="post"
enctype="text/plain">
<label for="name">Nom </label>
<input type="text" id="name" name="name" required>
<label for="email">Email </label>
<input type="email" id="email" name="email" required>
<label for="message">Message </label>
<textarea id="message" name="message" rows="5"
required></textarea>
<input type="submit" value="Envoyer">
</form>
</div>
<footer>
<p>
« POUR VOTRE SANTÉ, MANGEZ AU MOINS 5 FRUITS ET LÉGUMES PAR
JOUR »
</p>
<div class="footer-content">
<div>
<p><strong>Téléphone :</strong> +242 06 812 82 93</p>
</div>
<div>
<p>Suivez-nous </p>
</div>
</div>
<p>© 2025 Tomo-Dia School. Tous droits réservés.</p>
</footer>
</body>
</html>
