Files
DEV/SAE_WEB1/html/chef_tamill.html
2025-12-05 10:29:17 +01:00

193 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chef Tamill - Étoiles & Saveurs</title>
<link rel="stylesheet" href="../css/style_global.css">
<style>
.chef-profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
background-color: #fff;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
}
.chef-profile img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.chef-profile h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #a6aa7f;
}
.chef-profile p {
font-size: 1.2rem;
color: #333;
margin-bottom: 20px;
}
.chef-specialties {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 20px;
}
.specialty {
background-color: #F9A03F;
padding: 10px 20px;
border-radius: 5px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.contact-form {
max-width: 600px;
margin: 30px auto;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.contact-form h2 {
color: #a6aa7f;
text-align: center;
}
.contact-form label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
color: #333;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.contact-form button {
display: block;
width: 100%;
padding: 10px;
background-color: #ffcc00;
color: #333;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact-form button:hover {
background-color: #e6b800;
}
</style>
</head>
<body>
<header>
<a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
<div class="burger-menu" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<a href="inscription.html" class="register-button">S'inscrire</a>
<a href="connecter.html" class="login-button">Se connecter</a>
<nav class="main-nav" id="main-nav">
<ul>
<li><a href="../index.html">Accueil</a></li>
<li><a href="apropos.html">Qui sommes-nous</a></li>
<li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
<li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
<li><a href="disponibilite.html">Disponibilité</a></li>
<li><a href="page_contact.html">Contact</a></li>
<li><a href="javascript:history.back()" class="back-button">Retour</a></li>
</ul>
</nav>
</header>
<main>
<section class="chef-profile">
<img src="../img/tamill.PNG" alt="Chef Tamill">
<h2>Chef Tamill</h2>
<p>Chef passionné par la cuisine asiatique et fusion, Tamill crée des plats innovants qui allient les saveurs traditionnelles et modernes. Son expertise en cuisine asiatique, particulièrement le sushi, lui permet d'apporter une touche unique à chaque création.</p>
<div class="chef-specialties">
<div class="specialty">Cuisine asiatique</div>
<div class="specialty">Fusion moderne</div>
</div>
</section>
<section class="contact-form">
<h2>Contactez Chef Tamill</h2>
<form action="#" method="POST">
<label for="name">Votre Nom</label>
<input type="text" id="name" name="name" required>
<label for="email">Votre Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Votre Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<div class="scroll-to-top" onclick="scrollToTop()">
<img src="../img/fleche.png" alt="Retour en haut">
</div>
<footer>
<p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
</footer>
<script>
// Code pour le bouton burger
const burgerMenu = document.querySelector('.burger-menu');
const nav = document.querySelector('#main-nav');
burgerMenu.addEventListener('click', () => {
nav.classList.toggle('open');
});
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
nav.classList.remove('open');
}
});
// Fonction pour revenir en haut de la page
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>