How to Make a Food Dashboard with HTML and CSS

March 14, 2025

A food dashboard is an essential tool for restaurant owners, chefs, and managers to monitor sales, orders, and customer interactions. Whether you are running a restaurant, cloud kitchen, or catering business, a dashboard helps you track key performance indicators in real time.

In this guide, we will build a food dashboard using HTML and CSS. The dashboard will feature a sidebar menu, analytics cards, revenue tracking, and performance goals, ensuring a clean and user-friendly UI without using JavaScript or complex frameworks. checkout this fast food dashboard with HTML, CSS and JavaScript.

Why Create a Food Dashboard with HTML and CSS?

Building a food dashboard with HTML and CSS provides multiple benefits:

Lightweight and Fast: Avoids unnecessary JavaScript overhead for a snappy experience.
Customizable: You have complete control over colors, layouts, and styling.
Mobile-Friendly: Ensures that the dashboard works across different screen sizes using CSS media queries.
Great for Beginners: Helps enhance frontend development skills with real-world practice.

Key Features of a Food Dashboard

1. Sidebar Navigation

A sidebar allows easy access to essential sections like:

Dashboard
Analytics
Menu Management
Orders
Customers
Messages
Reports
Settings

2. Header with Search and Notifications

The header bar enhances navigation and includes:

Search bar: Quickly find orders, customers, or menu items.
Notifications: Stay updated on new orders or alerts.
User Profile: Manage user account settings with an avatar display.

3. Quick Stats Section

The dashboard highlights important restaurant metrics with statistic cards:

Active Menu Items: Number of dishes available.
Total Orders: Tracks completed and pending orders.
Monthly Revenue: Displays restaurant earnings.
Net Profit: Shows financial performance over time.

4. Revenue Distribution Chart

A donut chart visually represents revenue sources like dine-in, delivery, takeout, and catering.

5. Performance Goals

A progress tracking section shows business performance metrics such as:

Monthly Orders
Customer Satisfaction Ratings
Revenue Targets

Steps to Build a Food Dashboard with HTML and CSS

Step 1: Create the Basic Layout

Use HTML div containers to structure the sidebar, header, and main content sections.

Step 2: Design the Sidebar Menu

Apply CSS Flexbox to arrange menu items with icons, ensuring a clean and professional look.

Step 3: Style the Dashboard Metrics

Use CSS grids to position stat cards, each displaying key data points with badges for growth insights.

Step 4: Implement the Revenue Chart

Use CSS styling to design a circular chart, showing revenue breakdowns for different sales channels.

Step 5: Add Responsive Design

Implement CSS media queries to adjust the layout for tablets and mobile devices, ensuring usability across all screen sizes.

Best Practices for Building a Food Dashboard

Keep the UI Clean: Prioritize a minimalist layout with easy navigation.
Ensure Color Contrast: Use colors effectively to highlight critical data.
Make It Interactive: Add hover effects for better engagement.
Optimize for Performance: Minimize heavy styles and ensure fast loading times.

Source code

If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML and the other is CSS after creating these files, paste the code provided below.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CulinaryHub Dashboard</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header Bar -->
    <div class="header-bar">
      <div class="brand-container">
        <div class="brand-logo">C</div>
        <div class="brand-name">CulinaryHub</div>
      </div>

      <div class="header-actions">
        <div class="search-bar">
          <span>🔍</span>
          <input type="text" placeholder="Search for dishes, orders..." />
        </div>

        <div>🔔</div>

        <div class="user-profile">
          <div class="user-avatar">MJ</div>
          <div>Maria Johnson</div>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="sidebar">
      <a class="nav-item active">
        <div class="nav-icon">📊</div>
        <div class="nav-label">Dashboard</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">📈</div>
        <div class="nav-label">Analytics</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">🍽️</div>
        <div class="nav-label">Menu</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">🛒</div>
        <div class="nav-label">Orders</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">👥</div>
        <div class="nav-label">Customers</div>
      </a>

      <a class="nav-item" style="position: relative">
        <div class="badge">8</div>
        <div class="nav-icon">✉️</div>
        <div class="nav-label">Messages</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">📝</div>
        <div class="nav-label">Reports</div>
      </a>

      <a class="nav-item">
        <div class="nav-icon">⚙️</div>
        <div class="nav-label">Settings</div>
      </a>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Dashboard Header -->
      <div class="dashboard-header">
        <div>
          <h1 class="dashboard-title">Restaurant Analytics</h1>
          <p class="dashboard-subtitle">
            Track your kitchen performance and sales metrics
          </p>
        </div>

        <div style="display: flex">
          <div class="date-filter">
            <span>October 15, 2024</span>
            <span style="margin-left: 10px">▼</span>
          </div>

          <div class="filter-button">
            <span>Apply Filters</span>
          </div>
        </div>
      </div>

      <!-- Dashboard Grid -->
      <div class="dashboard-grid">
        <!-- Quick Stats -->
        <div class="quick-stats">
          <div class="stat-card">
            <div class="stat-icon blue-gradient">🍽️</div>
            <div class="stat-title">Active Menu Items</div>
            <div class="stat-value">175</div>
            <div class="stat-badge badge-blue">+30 New Additions</div>
          </div>

          <div class="stat-card">
            <div class="stat-icon purple-gradient">🛒</div>
            <div class="stat-title">Total Orders</div>
            <div class="stat-value">12,500</div>
            <div class="stat-badge badge-purple">75% Completed</div>
          </div>

          <div class="stat-card">
            <div class="stat-icon green-gradient">💰</div>
            <div class="stat-title">Monthly Revenue</div>
            <div class="stat-value">$3,250.00</div>
            <div class="stat-badge badge-green">+82% vs Last Month</div>
          </div>

          <div class="stat-card">
            <div class="stat-icon orange-gradient">📈</div>
            <div class="stat-title">Net Profit</div>
            <div class="stat-value">$42,500</div>
            <div class="stat-badge badge-orange">+5.2% Growth Rate</div>
          </div>
        </div>

        <!-- Revenue Chart -->
        <div class="revenue-chart-container">
          <div class="chart-header">
            <div class="chart-title">Revenue Distribution</div>
            <div class="period-tabs">
              <div class="period-tab">Daily</div>
              <div class="period-tab">Weekly</div>
              <div class="period-tab active">Monthly</div>
              <div class="period-tab">Yearly</div>
            </div>
          </div>

          <div class="revenue-chart">
            <div class="circular-chart">
              <div class="donut-chart">
                <div class="donut-hole">
                  <div class="donut-total">$42,500</div>
                  <div class="donut-label">Total Revenue</div>
                </div>
              </div>
            </div>
          </div>

          <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color" style="background-color: #4169e1"></div>
              <div>Dine-in: $10,625 (25%)</div>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #9370db"></div>
              <div>Delivery: $12,750 (30%)</div>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #43a047"></div>
              <div>Takeout: $8,500 (20%)</div>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #ff9800"></div>
              <div>Catering: $10,625 (25%)</div>
            </div>
          </div>
        </div>

        <!-- Performance Container -->
        <div class="performance-container">
          <div class="chart-header">
            <div class="chart-title">Performance Goals</div>
            <div>📊</div>
          </div>

          <div class="goal-progress">
            <div class="goal-item">
              <div class="goal-header">
                <div class="goal-title">Monthly Orders</div>
                <div class="goal-value">2,450 / 3,000</div>
              </div>
              <div class="progress-bar">
                <div class="progress progress-blue" style="width: 82%"></div>
              </div>
            </div>

            <div class="goal-item">
              <div class="goal-header">
                <div class="goal-title">Customer Satisfaction</div>
                <div class="goal-value">4.7 / 5.0</div>
              </div>
              <div class="progress-bar">
                <div class="progress progress-purple" style="width: 94%"></div>
              </div>
            </div>

            <div class="goal-item">
              <div class="goal-header">
                <div class="goal-title">Revenue Target</div>
                <div class="goal-value">$42,500 / $50,000</div>
              </div>
              <div class="progress-bar">
                <div class="progress progress-green" style="width: 85%"></div>
              </div>
            </div>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 40px;
            "
          >
            <div style="text-align: center; flex: 1">
              <div style="font-size: 32px; font-weight: 700; color: #4169e1">
                32
              </div>
              <div style="font-size: 14px; color: #8a94a6">Today's Orders</div>
            </div>

            <div style="text-align: center; flex: 1">
              <div style="font-size: 32px; font-weight: 700; color: #43a047">
                28
              </div>
              <div style="font-size: 14px; color: #8a94a6">Completed</div>
            </div>

            <div style="text-align: center; flex: 1">
              <div style="font-size: 32px; font-weight: 700; color: #ff9800">
                4
              </div>
              <div style="font-size: 14px; color: #8a94a6">In Progress</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

body {
  background-color: #f0f5ff;
  color: #1a2542;
  display: flex;
  min-height: 100vh;
}

/* Header Bar */
.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 100;
}

.brand-container {
  display: flex;
  align-items: center;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #4169e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-right: 12px;
}

.brand-name {
  font-weight: 600;
  font-size: 18px;
  background: linear-gradient(90deg, #4169e1, #9370db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-bar {
  background-color: #f6f8ff;
  border-radius: 20px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  width: 250px;
}

.search-bar input {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  width: 100%;
  color: #1a2542;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #f6f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4169e1;
  font-weight: bold;
}

/* Sidebar Styles */
.sidebar {
  width: 100px;
  background-color: #ffffff;
  padding: 90px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 50;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  margin-bottom: 10px;
  color: #8a94a6;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f5ff;
  color: #4169e1;
}

.nav-item.active {
  background-color: #4169e1;
  color: white;
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.nav-label {
  font-size: 10px;
  text-align: center;
}

.nav-item .badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff6b6b;
  color: white;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Content Styles */
.main-content {
  flex: 1;
  padding: 90px 30px 30px 130px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, #1a2542, #4169e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-subtitle {
  font-size: 15px;
  color: #8a94a6;
  margin-top: 5px;
}

.date-filter {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.filter-button {
  display: flex;
  align-items: center;
  background-color: #4169e1;
  color: white;
  border-radius: 12px;
  padding: 10px 20px;
  margin-left: 15px;
  box-shadow: 0 2px 10px rgba(65, 105, 225, 0.3);
  cursor: pointer;
}

/* Dashboard Sections Layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* Quick Stats */
.quick-stats {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #4169e1, #9370db);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 15px;
}

.blue-gradient {
  background: linear-gradient(135deg, #4169e1, #1e88e5);
  color: white;
}

.purple-gradient {
  background: linear-gradient(135deg, #9370db, #7b1fa2);
  color: white;
}

.green-gradient {
  background: linear-gradient(135deg, #43a047, #00796b);
  color: white;
}

.orange-gradient {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
}

.stat-title {
  font-size: 15px;
  font-weight: 500;
  color: #8a94a6;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.badge-blue {
  background-color: rgba(65, 105, 225, 0.1);
  color: #4169e1;
}

.badge-green {
  background-color: rgba(67, 160, 71, 0.1);
  color: #43a047;
}

.badge-purple {
  background-color: rgba(147, 112, 219, 0.1);
  color: #9370db;
}

.badge-orange {
  background-color: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

/* Charts Section */
.revenue-chart-container {
  grid-column: span 7;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
}

.period-tabs {
  display: flex;
  gap: 10px;
}

.period-tab {
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.period-tab.active {
  background-color: #4169e1;
  color: white;
}

/* Circular Revenue Chart */
.revenue-chart {
  height: 300px;
  position: relative;
}

.circular-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4169e1 0% 25%,
    #9370db 25% 55%,
    #43a047 55% 75%,
    #ff9800 75% 100%
  );
  position: relative;
}

.donut-hole {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.donut-total {
  font-size: 24px;
  font-weight: 700;
}

.donut-label {
  font-size: 14px;
  color: #8a94a6;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

/* Performance Section */
.performance-container {
  grid-column: span 5;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.goal-progress {
  margin-top: 20px;
}

.goal-item {
  margin-bottom: 20px;
}

.goal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.goal-title {
  font-size: 15px;
  font-weight: 500;
}

.goal-value {
  font-size: 15px;
  font-weight: 600;
}

.progress-bar {
  height: 8px;
  background-color: #f0f5ff;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  border-radius: 4px;
}

.progress-blue {
  background: linear-gradient(90deg, #4169e1, #1e88e5);
}

.progress-purple {
  background: linear-gradient(90deg, #9370db, #7b1fa2);
}

.progress-green {
  background: linear-gradient(90deg, #43a047, #00796b);
}

Conclusion

Building a food dashboard with HTML and CSS is an excellent way to improve restaurant analytics and management. By following this guide, you can design a responsive, interactive, and well-structured dashboard to monitor sales, orders, and performance goals.

Start creating your food dashboard today and enhance the way you track restaurant performance, check out this guide on web performance optimization to ensure your dashboard runs smoothly.

For more frontend tutorials, check out our guide on building an admin panel.