<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taste of India Menu</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Additional styles for menu.html */
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #ff5733; /* Match the title color with the menu-section h2 color */
margin: 20px 0; /* Ensure margin around the title */
}
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px auto; /* Adjust margin to ensure visibility */
width: 90%; /* Set a fixed width to center content */
}
.menu-column {
width: 15%; /* Adjust width to ensure six columns fit well */
margin-bottom: 20px;
}
.menu-section {
margin-bottom: 20px;
}
.menu-section h2 {
font-size: 24px;
color: #ff5733; /* Set color to orange */
margin-bottom: 10px;
}
.menu-item {
font-size: 18px;
margin-bottom: 10px;
color: #FFDAB9; /* Set color to peach */
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
float: right;
color: #333; /* Set color to dark gray */
}
.quantity-container {
display: flex;
align-items: center;
}
.quantity-button {
width: 20px;
height: 20px;
font-size: 14px;
margin: 0 3px; /* Adjust the margin */
background-color: #ff5733;
color: #fff;
border: none;
border-radius: 70%; /* Decrease the border-radius */
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Taste of India</h1>
<div class="menu-container">
<div class="menu-column">
<div class="menu-section">
<h2>SOUPS</h2>
<div class="menu-item">
<span>VegThai soup</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Eggdrop soup</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Chicken soup</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Wonton soup</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Prawns soup</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
</div>
</div>
<div class="menu-column">
<div class="menu-section">
<h2>PRICE</h2>
<div class="menu-item">$8.99</div><br><br>
<div class="menu-item">$9.99</div><br>
<div class="menu-item">$6.99</div><br>
<div class="menu-item">$7.99</div><br>
<div class="menu-item">$10.99</div>
</div>
</div>
<div class="menu-column">
<div class="menu-section">
<h2>STARTERS</h2>
<div class="menu-item">
<span>Onion Pakoda</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Panner fry</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Crispy Panner </span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>chicken 65</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>chicken Pakodi</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>chicken Kabab</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
</div>
</div>
<div class="menu-column">
<div class="menu-section">
<h2>PRICE</h2>
<div class="menu-item">$4.99</div>
<br><br>
<div class="menu-item">$3.99</div>
<br>
<div class="menu-item">$2.99</div>
<br>
<div class="menu-item">$5.49</div>
<br>
<div class="menu-item">$6.99</div>
<br>
<div class="menu-item">$5.99</div>
</div>
</div>
<div class="menu-column">
<div class="menu-section">
<h2>Main Course</h2>
<div class="menu-item">
<span>Rajma masala</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Panner Masala</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>EggFry</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Butter chicken</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
<div class="menu-item">
<span>Prawns curry</span>
<div class="quantity-container">
<button class="quantity-button" onclick="decrement(this)">-</button>
<span class="quantity">0</span>
<button class="quantity-button" onclick="increment(this)">+</button>
</div>
</div>
</div>
</div>
<div class="menu-column">
<div class="menu-section">
<h2>PRICE</h2>
<div class="menu-item">$3.99</div><br><br>
<div class="menu-item">$2.49</div><br>
<div class="menu-item">$1.99</div><br>
<div class="menu-item">$4.49</div><br>
<div class="menu-item">$2.99</div>
</div>
</div>
</div>
<div class="button-container">
<button class="back-button" onclick="window.location.href='customer.html'">Back</button>
<button class="next-button" onclick="window.location.href='menu2.html'">Next Page</button>
</div>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter