Restaurant Menu Website Template

2,054 securearray494

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Wandering Wok</title>
    <style>
        /* --- CSS --- */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }

header {
            background-color: #e91e63; /* Vibrant Pink */
            color: #fff;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

header h1 {
            margin: 0;
            font-size: 3em;
            font-family: 'Cursive', fantasy; /* Added a more playful font */
        }

header p {
            font-size: 1.2em;
            margin-top: 5px;
        }

#menu {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

.menu-section {
            margin-bottom: 30px;
        }

.menu-section h2 {
            color: #e91e63;
            border-bottom: 2px solid #e91e63;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

.menu-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* Align to top */
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ddd;
        }

.menu-item:last-child {
            border-bottom: none; /* Remove border from the last item */
        }

.item-name {
            font-weight: bold;
            flex: 1; /* Takes up available space */
        }

.item-description {
          font-style: italic;
          color: #666;
          flex: 2; /* Takes up more space */
          margin-left: 20px; /* Add space between name/price and description */
          margin-right: 20px;
        }

.item-price {
            color: #e91e63;
            font-weight: bold;
            white-space: nowrap; /* Prevent price from wrapping */
        }

.special-badge {
            background-color: #ffd700; /* Gold */
            color: #333;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 0.8em;
            margin-left: 5px;
        }

footer {
            text-align: center;
            padding: 20px 0;
            background-color: #333;
            color: #fff;
        }

/* --- Responsive Design --- */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2.5em;
            }

#menu {
                padding: 10px;
            }

.menu-item {
                flex-direction: column; /* Stack items vertically */
                align-items: stretch;  /* Full width */
            }

.item-description {
               margin-left: 0;
               margin-top: 5px; /* Add space above description */
               margin-right: 0;

}
            .item-price {
                margin-top: 5px;
            }
        }

/* --- JavaScript Animation --- */
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.fadeIn {
            animation-name: fadeIn;
        }
    </style>
</head>
<body>
    <header>
        <h1>The Wandering Wok</h1>
        <p>A Culinary Journey Through Asia</p>
    </header>

<div id="menu">
        <section class="menu-section animated fadeIn">
            <h2>Appetizers</h2>
            <div class="menu-item">
                <span class="item-name">Spring Rolls (2)<span class="special-badge">Vegetarian</span></span>
                <span class="item-description">Crispy rolls filled with fresh vegetables and served with sweet chili sauce.</span>
                <span class="item-price">$5.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Gyoza (6)</span>
                <span class="item-description">Pan-fried pork dumplings, served with a soy-ginger dipping sauce.</span>
                <span class="item-price">$7.99</span>
            </div>
             <div class="menu-item">
                <span class="item-name">Edamame</span>
                <span class="item-description">Steamed and lightly salted soybean pods.</span>
                <span class="item-price">$4.99</span>
            </div>
        </section>

<section class="menu-section animated fadeIn">
            <h2>Main Courses</h2>
            <div class="menu-item">
                <span class="item-name">Pad Thai<span class="special-badge">Popular</span></span>
                <span class="item-description">Stir-fried rice noodles with shrimp, chicken, tofu, peanuts, and bean sprouts in a tamarind sauce.</span>
                <span class="item-price">$12.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Kung Pao Chicken</span>
                <span class="item-description">Spicy stir-fried chicken with peanuts, vegetables, and chili peppers.</span>
                <span class="item-price">$13.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Teriyaki Salmon</span>
                <span class="item-description">Grilled salmon fillet glazed with teriyaki sauce, served with steamed rice and vegetables.</span>
                <span class="item-price">$16.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Vegetable Stir-Fry</span>
                <span class="item-description"> A medley of fresh seasonal vegetables wok-tossed in a light garlic sauce.  Served with steamed rice.</span>
                <span class="item-price">$10.99</span>
            </div>

</section>

<section class="menu-section animated fadeIn">
            <h2>Desserts</h2>
            <div class="menu-item">
                <span class="item-name">Mango Sticky Rice</span>
                <span class="item-description">Sweet sticky rice topped with fresh mango slices and coconut milk.</span>
                <span class="item-price">$6.99</span>
            </div>
              <div class="menu-item">
                <span class="item-name">Mochi Ice Cream (2)</span>
                <span class="item-description">Choose from a variety of flavors:  Green Tea, Mango, Strawberry, Chocolate.</span>
                <span class="item-price">$5.99</span>
            </div>
        </section>

<section class="menu-section animated fadeIn">
            <h2>Drinks</h2>
            <div class="menu-item">
                <span class="item-name">Thai Iced Tea</span>
                <span class="item-description">Sweet and creamy Thai tea with milk.</span>
                <span class="item-price">$3.99</span>
            </div>
              <div class="menu-item">
                <span class="item-name">Sake (Small Carafe)</span>
                <span class="item-description">Traditional Japanese rice wine.  Served warm or chilled.</span>
                <span class="item-price">$8.99</span>
            </div>
             <div class="menu-item">
                <span class="item-name">Soft Drinks</span>
                <span class="item-description">Coke, Diet Coke, Sprite, Ginger Ale.</span>
                <span class="item-price">$2.50</span>
            </div>
        </section>
    </div>

// Example:  Add a click handler to menu items (could show an alert, or expand details, etc.)
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // alert(`You clicked on ${item.querySelector('.item-name').textContent}`); // Simple example

// More complex example (toggle description visibility):
                    const description = item.querySelector('.item-description');
                    if (description) { // Check if description exists.
                      if (description.style.display === 'none' || description.style.display === '') {
                            description.style.display = 'block';
                        } else {
                            description.style.display = 'none';
                        }
                    }

});
            });
        });
    </script>
</body>
</html>

CSS

Restaurant Menu Website Template

Recommended