184 lines
11 KiB
HTML
Executable File
184 lines
11 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>La Petite Boulangerie - Pain artisanal & Gateaux</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; }
|
|
|
|
header { background: rgba(61, 35, 20, 0.95); padding: 15px 20px; position: fixed; width: 100%; top: 0; z-index: 100; backdrop-filter: blur(10px); }
|
|
header .container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
|
|
header h1 { color: #ffcc80; font-size: 24px; font-weight: bold; }
|
|
header nav a { color: #aaa; margin-left: 25px; text-decoration: none; font-size: 14px; }
|
|
header nav a:hover { color: #ffcc80; }
|
|
|
|
.hero {
|
|
padding: 0; height: 100vh;
|
|
background: linear-gradient(135deg, rgba(61, 35, 20, 0.85) 0%, rgba(139, 69, 19, 0.75) 100%),
|
|
url('https://images.unsplash.com/photo-1509440159596-0249088772ff?w=1920') center/cover;
|
|
display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
|
|
}
|
|
.hero h2 { font-size: 56px; margin-bottom: 15px; color: #fff; }
|
|
.hero .tagline { font-size: 22px; color: #ffcc80; margin-bottom: 10px; }
|
|
.hero .address { color: #ccc; margin-bottom: 35px; }
|
|
.hero .btn { background: #ff9800; color: #3e2723; padding: 15px 40px; font-size: 16px; border-radius: 30px; border: none; cursor: pointer; font-weight: bold; }
|
|
|
|
.info-bar { background: #5d4037; padding: 20px; display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; }
|
|
.info-item { text-align: center; }
|
|
.info-item .label { font-size: 12px; color: #ffcc80; text-transform: uppercase; }
|
|
.info-item .value { font-size: 16px; font-weight: bold; }
|
|
|
|
.section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
|
|
.section-title { font-size: 42px; margin-bottom: 50px; text-align: center; }
|
|
.section-title span { color: #ff9800; }
|
|
|
|
/* Products Grid */
|
|
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
|
|
.product-card { background: #2d1f1a; border-radius: 16px; overflow: hidden; transition: transform 0.3s; }
|
|
.product-card:hover { transform: translateY(-5px); }
|
|
.product-card img { width: 100%; height: 180px; object-fit: cover; }
|
|
.product-card .info { padding: 20px; }
|
|
.product-card .name { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
|
|
.product-card .desc { color: #aaa; font-size: 13px; margin-bottom: 10px; }
|
|
.product-card .price { color: #ff9800; font-size: 20px; font-weight: bold; }
|
|
|
|
/* Gallery */
|
|
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
|
|
.gallery-item { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; }
|
|
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
/* Contact */
|
|
.contact { background: #2d1f1a; }
|
|
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
|
|
.contact h3 { color: #ff9800; font-size: 22px; margin-bottom: 20px; }
|
|
.contact p { color: #bbb; margin-bottom: 12px; }
|
|
.contact-form { display: grid; gap: 15px; }
|
|
.contact-form input, .contact-form textarea { padding: 15px; border-radius: 10px; border: 2px solid #4e342e; background: #3e2723; color: #fff; }
|
|
.contact-form button { background: #ff9800; color: #3e2723; padding: 15px; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; }
|
|
|
|
footer { background: #3e2723; padding: 30px; text-align: center; color: #888; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h2 { font-size: 32px; }
|
|
.hero .tagline { font-size: 16px; }
|
|
.hero .btn { width: 90%; }
|
|
.products, .gallery, .contact-grid { grid-template-columns: 1fr; }
|
|
header .container { flex-direction: column; gap: 10px; }
|
|
header nav { margin-top: 10px; }
|
|
header nav a { margin: 0 8px; font-size: 12px; }
|
|
.section-title { font-size: 28px; }
|
|
.info-bar { gap: 20px; padding: 15px; }
|
|
.product-card img { height: 150px; }
|
|
}
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<header>
|
|
<div class="container">
|
|
<h1>🍞 La Petite Boulangerie</h1>
|
|
<nav>
|
|
<a href="#produits">Produits</a>
|
|
<a href="#galerie">Galerie</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h2>La Petite Boulangerie</h2>
|
|
<p class="tagline">Pain artisanal & gateaux faits maison</p>
|
|
<p class="address">📍 15 Rue du Commerce, 75001 Paris</p>
|
|
<button class="btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Commander en ligne</button>
|
|
</section>
|
|
|
|
<div class="info-bar">
|
|
<div class="info-item"><div class="label">Ouvert</div><div class="value">Lun-Sam</div></div>
|
|
<div class="info-item"><div class="label">Service</div><div class="value">6h-19h</div></div>
|
|
<div class="info-item"><div class="label">Téléphone</div><div class="value">01 42 00 00 00</div></div>
|
|
</div>
|
|
|
|
<section class="section" id="produits">
|
|
<h2 class="section-title">Nos <span>Produits</span></h2>
|
|
<div class="products">
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=400" alt="Pain">
|
|
<div class="info"><div class="name">Baguette tradition</div><div class="desc">Farine française, levée naturelle</div><div class="price">1.90€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1585478259715-876acc5be8eb?w=400" alt="Croissant">
|
|
<div class="info"><div class="name">Croissant</div><div class="desc">Beurre AOP, thérapeut</div><div class="price">1.50€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1558301211-0d8c8ddee6ec?w=400" alt="Pain巧克力">
|
|
<div class="info"><div class="name">Pain au chocolat</div><div class="desc">2 carrés de chocolat noir</div><div class="price">2.00€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1486427944299-d1955d23e34d?w=400" alt="Gâteau">
|
|
<div class="info"><div class="name">Flan pâtissier</div><div class="desc">Crème vanillée, caramel</div><div class="price">3.50€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=400" alt="Brioche">
|
|
<div class="info"><div class="name">Brioche tressée</div><div class="desc">Beurre frais, sucre perlé</div><div class="price">4.00€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1606983340126-99ab4feaa64a?w=400" alt="Éclair">
|
|
<div class="info"><div class="name">Éclair au chocolat</div><div class="desc">Crème pâtissière, fondant</div><div name="price">3.50€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1517433670267-08bbd4be890f?w=400" alt="Macaron">
|
|
<div class="info"><div class="name">Macarons (x6)</div><div class="desc">Assortiment fruité</div><div class="price">12.00€</div></div>
|
|
</div>
|
|
<div class="product-card">
|
|
<img src="https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?w=400" alt="Cake">
|
|
<div class="info"><div class="name">Cake aux fruits</div><div class="desc">Fruits confits, rhum</div><div class="price">5.00€</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="galerie">
|
|
<h2 class="section-title">Notre <span>Galerie</span></h2>
|
|
<div class="gallery">
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1517433670267-08bbd4be890f?w=600" alt="Pâtisserie"></div>
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=600" alt="Vitrines"></div>
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=600" alt="Pain"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact" id="contact">
|
|
<div class="section">
|
|
<h2 class="section-title">Nous <span>Contacter</span></h2>
|
|
<div class="contact-grid">
|
|
<div>
|
|
<h3>📍 Adresse</h3>
|
|
<p>15 Rue du Commerce, 75001 Paris</p>
|
|
<br>
|
|
<h3>📞 Commande</h3>
|
|
<p>📞 01 42 00 00 00</p>
|
|
<p>✉️ contact@lapetiteboulangerie.fr</p>
|
|
<br>
|
|
<h3>🕐 Horaires</h3>
|
|
<p>Lundi - Samedi: 6h00 - 19h00</p>
|
|
<p>Dimanche: 7h00 - 13h00</p>
|
|
</div>
|
|
<form class="contact-form">
|
|
<input type="text" placeholder="Votre nom">
|
|
<input type="tel" placeholder="Téléphone">
|
|
<input type="email" placeholder="Email">
|
|
<textarea placeholder="Votre commande..." rows="4"></textarea>
|
|
<button type="button" onclick="window.location.href='mailto:ronanyves26@gmail.com?subject=Commande La Petite Boulangerie'">Envoyer la commande</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 La Petite Boulangerie. Tous droits réservés.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|