Un code par daniel_pindou_7

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 January 2025

CodePen Accueil Étoiles et vitesse de distorsion

30 March 2025

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chez Maman - Fast Food Fait Maison</title>
    <style>
        /* Styles de base pour une apparence "application mobile" */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

/* En-tête de l'application */
        header {
            background-color: #ff6600; /* Couleur orange typique des fast-foods */
            color: white;
            padding: 15px 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

header h1 {
            margin: 0;
            font-size: 1.8em;
            letter-spacing: 1px;
        }

header p {
            margin: 5px 0 0;
            font-size: 0.9em;
        }

/* Contenu principal et sections de menu */
        main {
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

h2 {
            color: #ff6600;
            text-align: center;
            margin-bottom: 30px;
            font-size: 1.6em;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

.menu-category {
            margin-bottom: 40px;
        }

.menu-category h3 {
            color: #333;
            font-size: 1.4em;
            margin-bottom: 20px;
            text-align: center;
            background-color: #f7f7f7;
            padding: 10px;
            border-radius: 5px;
            border-left: 5px solid #ff6600;
        }

/* Grille des éléments de menu */
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            justify-content: center;
        }

.menu-item {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
        }

.menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        }

.menu-item img {
            width: 100%;
            height: 200px; /* Hauteur fixe pour les images */
            object-fit: cover; /* Assure que l'image couvre l'espace */
            display: block;
            border-bottom: 1px solid #eee;
        }

.item-details {
            padding: 15px;
            flex-grow: 1; /* Permet aux détails de prendre l'espace restant */
            display: flex;
            flex-direction: column;
        }

.item-details h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #ff6600;
            font-size: 1.2em;
        }

.item-details p {
            font-size: 0.95em;
            color: #555;
            margin-bottom: 10px;
            flex-grow: 1; /* Permet à la description de s'étendre */
        }

.item-details .price {
            font-size: 1.1em;
            font-weight: bold;
            color: #007bff; /* Un bleu pour le prix */
            text-align: right;
            margin-top: auto; /* Pousse le prix vers le bas */
        }

/* Section de paiement */
        #payment-info {
            background-color: #e6f7ff; /* Bleu clair pour la section info */
            border: 1px solid #b3e0ff;
            border-radius: 8px;
            padding: 25px;
            margin-top: 40px;
            text-align: center;
        }

#payment-info h2 {
            color: #007bff;
            border-bottom: none;
            margin-bottom: 15px;
        }

#payment-info p {
            font-size: 1.1em;
            color: #333;
            margin-bottom: 10px;
        }

.mtn-money-logo {
            max-width: 150px;
            height: auto;
            margin-top: 15px;
            filter: grayscale(10%); /* Légère désaturation pour l'intégration */
        }

/* Pied de page */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            font-size: 0.9em;
        }

footer p {
            margin: 5px 0;
        }

/* Ajustements pour la réactivité mobile */
        @media (max-width: 768px) {
            header h1 {
                font-size: 1.5em;
            }

main {
                padding: 15px;
                margin: 15px auto;
            }

.menu-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }

.menu-item img {
                height: 180px;
            }

.item-details h4 {
                font-size: 1.1em;
            }

.item-details p {
                font-size: 0.9em;
            }

.item-details .price {
                font-size: 1em;
            }

#payment-info {
                padding: 20px;
            }
        }

@media (max-width: 480px) {
            header {
                padding: 10px 15px;
            }

header h1 {
                font-size: 1.3em;
            }

main {
                padding: 10px;
                margin: 10px auto;
            }

.menu-grid {
                grid-template-columns: 1fr; /* Une seule colonne sur les très petits écrans */
                gap: 15px;
            }

.menu-item img {
                height: 160px;
            }

.item-details {
                padding: 10px;
            }

h2 {
                font-size: 1.4em;
                margin-bottom: 20px;
            }

.menu-category h3 {
                font-size: 1.2em;
            }

#payment-info p {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Chez Maman - Fast Food Fait Maison</h1>
        <p>Goûtez l'authenticité de Brazzaville !</p>
    </header>

<main>
        <h2>Notre Menu Gourmand</h2>

<section class="menu-category">
            <h3>Plats Principaux</h3>
            <div class="menu-grid">
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/FFD700/FFFFFF?text=Poulet+Mayo" alt="Poulet Mayonnaise Fait Maison">
                    <div class="item-details">
                        <h4>Poulet Mayonnaise Maison</h4>
                        <p>Un classique revisité avec notre mayonnaise maison onctueuse, accompagné de frites croustillantes et de salade fraîche.</p>
                        <p class="price">3500 FCFA</p>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/FF6347/FFFFFF?text=Brochettes+Boeuf" alt="Brochettes de Boeuf Grillées">
                    <div class="item-details">
                        <h4>Brochettes de Bœuf Grillées</h4>
                        <p>Tendres morceaux de bœuf marinés et grillés à la perfection, servis avec de l'attiéké ou des bananes plantains frites.</p>
                        <p class="price">4000 FCFA</p>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/6A5ACD/FFFFFF?text=Poisson+Brazza" alt="Poisson Braisé de Brazzaville">
                    <div class="item-details">
                        <h4>Poisson Braisé "Brazza"</h4>
                        <p>Un poisson frais braisé à la congolaise, assaisonné d'épices locales, accompagné de manioc ou de riz.</p>
                        <p class="price">5000 FCFA</p>
                    </div>
                </div>
            </div>
        </section>

<section class="menu-category">
            <h3>Burgers & Sandwiches</h3>
            <div class="menu-grid">
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/8B4513/FFFFFF?text=Burger+Maman" alt="Burger Spécial Maman">
                    <div class="item-details">
                        <h4>Burger Spécial Maman</h4>
                        <p>Notre burger signature avec un steak haché maison, du fromage, oignons caramélisés et notre sauce secrète, servi avec frites.</p>
                        <p class="price">3000 FCFA</p>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/228B22/FFFFFF?text=Sandwich+Végétarien" alt="Sandwich Végétarien">
                    <div class="item-details">
                        <h4>Sandwich Végétarien Frais</h4>
                        <p>Un mélange croquant de légumes frais de saison, avocat et une touche de vinaigrette maison dans un pain moelleux.</p>
                        <p class="price">2500 FCFA</p>
                    </div>
                </div>
            </div>
        </section>

<section class="menu-category">
            <h3>Boissons & Accompagnements</h3>
            <div class="menu-grid">
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/ADD8E6/FFFFFF?text=Jus+Frais" alt="Jus de Fruits Frais">
                    <div class="item-details">
                        <h4>Jus de Fruits Frais du Jour</h4>
                        <p>Découvrez nos jus pressés du jour : ananas, bissap, gingembre. 100% naturel et rafraîchissant.</p>
                        <p class="price">1000 FCFA</p>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://via.placeholder.com/400x250/C0C0C0/FFFFFF?text=Frites+Maison" alt="Frites Maison">
                    <div class="item-details">
                        <h4>Frites Maison</h4>
                        <p>Nos frites coupées et préparées maison, croustillantes à l'extérieur et moelleuses à l'intérieur.</p>
                        <p class="price">1500 FCFA</p>
                    </div>
                </div>
            </div>
        </section>

<section id="payment-info">
            <h2>Mode de Paiement</h2>
            <p>Pour simplifier vos commandes, nous acceptons les paiements <strong>uniquement via MTN Mobile Money</strong>.</p>
            <p>Veuillez envoyer votre paiement au numéro suivant : <strong style="color: #ff6600;">+242 0x XXX XXXX</strong> (À remplacer par votre numéro MTN Mobile Money).</p>
            <p>N'oubliez pas d'inclure votre nom et le détail de votre commande en référence pour un traitement rapide.</p>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/MTN_Mobile_Money_Logo.svg/1200px-MTN_Mobile_Money_Logo.svg.png" alt="Logo MTN Mobile Money" class="mtn-money-logo">
        </section>
    </main>

<footer>
        <p>© 2023 Chez Maman. Tous droits réservés.</p>
        <p>Contact : +242 0x XXX XXXX | Email : contact@chezmaman.com</p>
        <p>Adresse : Rue de l'Indépendance, Brazzaville, Congo.</p>
    </footer>
</body>
</html>

Un code par daniel_pindou_7

Recommandé

CodePen Accueil Étoiles et vitesse de distorsion

Un code par ytr3d3

Un code de Mete

HTML

CSS

JS

Recommandé

CodePen Accueil Étoiles et vitesse de distorsion

Un code par ytr3d3

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS