Freehtmlcss

Food ordering menu with cart

Warm gradient ordering page with photo promo cards, category filters, a menu grid and an order sidebar.

Prompt

## Goal

Design a food-ordering menu page for Ember & Bowl, a restaurant serving Indian and Japanese comfort food. Show prices in Indian rupees (₹).

Use the style, layout and image rules below exactly. Replace the sample content with items, names and prices that fit the goal, keeping the same number of items, tone and text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does.
- Page background: a diagonal gradient (135deg) from #F97316 to #BE123C at 55% to #7F1D1D, with 48px vertical and 24px horizontal padding.
- All content sits in one centered white panel: max-width 1200px, 28px border radius, padding 28px 32px 32px, shadow 0 30px 60px rgb(0 0 0 / 0.25).
- Font: system-ui. Body text #1F2937, muted text #6B7280. Accent crimson #BE123C, dark maroon #7F1D1D, light peach #FFF7ED, peach border #FED7AA.
- Buttons are pills (fully rounded), 14px semibold. Primary: crimson with white text. On colored backgrounds: white with crimson text.
- Cards: white, 1px #FFEDD5 border, 20px radius, 16px padding, shadow 0 4px 14px rgb(190 18 60 / 0.06).
- Category pills: 8px 18px padding, 14px semibold. Inactive: #FFF7ED background, #9A3412 text. Active: crimson background, white text.
- Headings are bold and tight: 26px in promo cards, 20px for section titles, 16px on cards. Prices are 18px extra-bold maroon.

## Layout

1. Navbar, one row, space-between. Left: a 36px circular logo mark with an orange-to-crimson gradient holding a 🔥 emoji, then the brand name in 20px extra-bold maroon. Center: 4 links in 15px gray, 32px apart, the current one crimson and bold. Right: a primary "Sign in" pill.
2. Promo hero, 28px below: two equal cards side by side, 20px gap, 22px radius, min-height 200px, 28px padding, white text, overflow hidden. Card 1 gradient #7C2D12 → #BE123C, card 2 gradient #9A3412 → #EA580C. Each has a small uppercase pill tag (white at 18% opacity), a heading, one line of text at 85% opacity, a white pill button, and a round photo on its right edge (see Images), vertically centered and partly cut off by the card edge.
3. Filter row, 28px below, space-between: 6 category pills on the left (the first active), a 260px rounded search field on the right with a #FED7AA border.
4. Main area, 24px below: a grid with the menu on the left and a 300px order panel on the right, 24px gap.
   - Menu: a 20px bold section title with a crimson "View all" link on the same line, then a 3-column grid of 6 cards, 18px gap. Each card, top to bottom: photo, item name, a yellow ★ with rating and order count in 13px gray, then the price on the left and a 36px square crimson "+" button with 12px radius on the right.
   - Order panel: #FFF7ED background, 22px radius, 20px padding, aligned to the top. Title with a small crimson item-count pill on the right, 3 order rows (thumbnail, name with "× qty" below in small gray, amount right-aligned), a thin #FED7AA divider, gray Subtotal and Delivery lines, a bold 17px Total line, and a full-width primary "Checkout" pill.
5. Footer inside the panel: centered 13px gray copyright line, 28px below the main area.

On screens under 900px, stack the hero cards and put the order panel below the menu. Under 600px, show menu cards in one column.

## Sample content

- Links: Home, Menu (current), Offers, Track order.
- Promo 1: tag "Chef's special", heading "Smoky chicken biryani", text "Slow-cooked basmati, saffron and charred chicken. Serves two.", button "Order now".
- Promo 2: tag "20% off today", heading "Tsukemen dipping ramen", text "Thick noodles, a rich dipping broth and a soft egg, ready in 25 minutes.", button "See offer".
- Categories: All, Biryani, Noodles, Grills, Salads, Desserts. Search placeholder "Search dishes…". Section title "Popular this week".
- Menu items: Chicken biryani ★ 4.8 · 1.2k orders ₹289 / Tsukemen dipping ramen ★ 4.7 · 860 orders ₹349 / Paneer tikka ★ 4.6 · 740 orders ₹229 / Kachumber salad ★ 4.5 · 410 orders ₹199 / Tandoori wings ★ 4.8 · 980 orders ₹259 / Strawberry cheesecake ★ 4.9 · 530 orders ₹179.
- Order panel: "Your order", "3 items". Chicken biryani × 1 ₹289, Tsukemen dipping ramen × 1 ₹349, Strawberry cheesecake × 2 ₹358. Subtotal ₹996, Delivery ₹40, Total ₹1,036.
- Footer: "© 2026 Ember & Bowl · Freshly cooked, delivered hot".

## Images

Every image slot below must show a real image, never an empty box or emoji.
1. If you can generate images, generate one for each slot.
2. Otherwise, search the web for free-to-use photos (for example Unsplash or Pexels) that match each slot, and use their direct image links. Only use links you have checked load.
3. If you can do neither, use a placeholder for each slot: a soft peach gradient block with the slot name written on it, and an HTML comment `<!-- IMAGE: slot name -->` so the user can drop their own image in later.

All photos use object-fit: cover so they fill their slot without stretching.

Slots:
- Promo photos (2): the item each promo card features, shot from above on a plate or bowl. 190px circles with an 8px white border at 18% opacity and a deep shadow.
- Menu card photos (6): each menu item, appetizing and well lit. Full card width, 140px tall, 16px radius.
- Order thumbnails (3): reuse the matching menu card photos as 48px squares with 14px radius.

## Output

A single self-contained HTML file with CSS in a `<style>` tag and no frameworks or web fonts. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML and visible keyboard focus states.

Loading live preview…

## Goal Design a food-ordering menu page for Ember & Bowl, a restaurant serving Indian and Japanese comfort food. Show prices in Indian rupees (₹). Use the style, layout and image rules below exactly. Replace the sample content with items, names and prices that fit the goal, keeping the same number of items, tone and text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. - Page background: a diagonal gradient (135deg) from #F97316 to #BE123C at 55% to #7F1D1D, with 48px vertical and 24px horizontal padding. - All content sits in one centered white panel: max-width 1200px, 28px border radius, padding 28px 32px 32px, shadow 0 30px 60px rgb(0 0 0 / 0.25). - Font: system-ui. Body text #1F2937, muted text #6B7280. Accent crimson #BE123C, dark maroon #7F1D1D, light peach #FFF7ED, peach border #FED7AA. - Buttons are pills (fully rounded), 14px semibold. Primary: crimson with white text. On colored backgrounds: white with crimson text. - Cards: white, 1px #FFEDD5 border, 20px radius, 16px padding, shadow 0 4px 14px rgb(190 18 60 / 0.06). - Category pills: 8px 18px padding, 14px semibold. Inactive: #FFF7ED background, #9A3412 text. Active: crimson background, white text. - Headings are bold and tight: 26px in promo cards, 20px for section titles, 16px on cards. Prices are 18px extra-bold maroon. ## Layout 1. Navbar, one row, space-between. Left: a 36px circular logo mark with an orange-to-crimson gradient holding a 🔥 emoji, then the brand name in 20px extra-bold maroon. Center: 4 links in 15px gray, 32px apart, the current one crimson and bold. Right: a primary "Sign in" pill. 2. Promo hero, 28px below: two equal cards side by side, 20px gap, 22px radius, min-height 200px, 28px padding, white text, overflow hidden. Card 1 gradient #7C2D12 → #BE123C, card 2 gradient #9A3412 → #EA580C. Each has a small uppercase pill tag (white at 18% opacity), a heading, one line of text at 85% opacity, a white pill button, and a round photo on its right edge (see Images), vertically centered and partly cut off by the card edge. 3. Filter row, 28px below, space-between: 6 category pills on the left (the first active), a 260px rounded search field on the right with a #FED7AA border. 4. Main area, 24px below: a grid with the menu on the left and a 300px order panel on the right, 24px gap. - Menu: a 20px bold section title with a crimson "View all" link on the same line, then a 3-column grid of 6 cards, 18px gap. Each card, top to bottom: photo, item name, a yellow ★ with rating and order count in 13px gray, then the price on the left and a 36px square crimson "+" button with 12px radius on the right. - Order panel: #FFF7ED background, 22px radius, 20px padding, aligned to the top. Title with a small crimson item-count pill on the right, 3 order rows (thumbnail, name with "× qty" below in small gray, amount right-aligned), a thin #FED7AA divider, gray Subtotal and Delivery lines, a bold 17px Total line, and a full-width primary "Checkout" pill. 5. Footer inside the panel: centered 13px gray copyright line, 28px below the main area. On screens under 900px, stack the hero cards and put the order panel below the menu. Under 600px, show menu cards in one column. ## Sample content - Links: Home, Menu (current), Offers, Track order. - Promo 1: tag "Chef's special", heading "Smoky chicken biryani", text "Slow-cooked basmati, saffron and charred chicken. Serves two.", button "Order now". - Promo 2: tag "20% off today", heading "Tsukemen dipping ramen", text "Thick noodles, a rich dipping broth and a soft egg, ready in 25 minutes.", button "See offer". - Categories: All, Biryani, Noodles, Grills, Salads, Desserts. Search placeholder "Search dishes…". Section title "Popular this week". - Menu items: Chicken biryani ★ 4.8 · 1.2k orders ₹289 / Tsukemen dipping ramen ★ 4.7 · 860 orders ₹349 / Paneer tikka ★ 4.6 · 740 orders ₹229 / Kachumber salad ★ 4.5 · 410 orders ₹199 / Tandoori wings ★ 4.8 · 980 orders ₹259 / Strawberry cheesecake ★ 4.9 · 530 orders ₹179. - Order panel: "Your order", "3 items". Chicken biryani × 1 ₹289, Tsukemen dipping ramen × 1 ₹349, Strawberry cheesecake × 2 ₹358. Subtotal ₹996, Delivery ₹40, Total ₹1,036. - Footer: "© 2026 Ember & Bowl · Freshly cooked, delivered hot". ## Images Every image slot below must show a real image, never an empty box or emoji. 1. If you can generate images, generate one for each slot. 2. Otherwise, search the web for free-to-use photos (for example Unsplash or Pexels) that match each slot, and use their direct image links. Only use links you have checked load. 3. If you can do neither, use a placeholder for each slot: a soft peach gradient block with the slot name written on it, and an HTML comment `` so the user can drop their own image in later. All photos use object-fit: cover so they fill their slot without stretching. Slots: - Promo photos (2): the item each promo card features, shot from above on a plate or bowl. 190px circles with an 8px white border at 18% opacity and a deep shadow. - Menu card photos (6): each menu item, appetizing and well lit. Full card width, 140px tall, 16px radius. - Order thumbnails (3): reuse the matching menu card photos as 48px squares with 14px radius. ## Output A single self-contained HTML file with CSS in a `<style>` tag and no frameworks or web fonts. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML and visible keyboard focus states.