Food Ordering App: UI Layout and CSS

Food Ordering App: UI Layout and CSS

A clean layout makes the food ordering app feel real. Here is how to structure the UI with CSS.

Layout

+----------------------------------+
| Header (logo + cart count)       |
+----------------------------------+
| Search bar + Filters             |
+----------------------+-----------+
| Menu items (grid)    | Cart      |
|                      | sidebar   |
|                      |           |
+----------------------+-----------+

HTML Structure

<div class="app">
  <header class="header">
    <h1>Food App</h1>
    <span class="cart-count">0</span>
  </header>
  <div class="controls">
    <input type="text" id="search" placeholder="Search..." />
    <select id="category"><option value="all">All</option></select>
    <button onclick="toggleVeg()">Veg Only</button>
  </div>
  <div class="main">
    <div class="menu" id="menuList"></div>
    <div class="cart-sidebar" id="cart"></div>
  </div>
</div>

CSS

.app { max-width: 1000px; margin: 0 auto; font-family: Arial, sans-serif; }
.header { display: flex; justify-content: space-between; padding: 16px; background: #ff5722; color: white; }
.controls { display: flex; gap: 12px; padding: 12px; }
.main { display: flex; gap: 16px; padding: 12px; }
.menu { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cart-sidebar { width: 300px; background: #f8f8f8; padding: 12px; border-radius: 8px; }
.menu-item { border: 1px solid #ddd; padding: 12px; border-radius: 8px; text-align: center; }
.menu-item button { background: #ff5722; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.cart-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.total { font-weight: bold; margin-top: 12px; font-size: 18px; }

Responsive

@media (max-width: 768px) {
  .main { flex-direction: column; }
  .cart-sidebar { width: 100%; }
}
``
On mobile, stack the menu and cart vertically.

### The Takeaway

Structure the UI: header (logo + cart count), controls (search + filters), main (menu grid + cart sidebar). Use flexbox for layout, grid for menu items. Add responsive design (stack on mobile). Use a consistent color scheme. Clean CSS makes the app feel real.