-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex (1).html
383 lines (337 loc) · 14.8 KB
/
index (1).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> FitFlavors Kitchen.</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar">
<div class="navbar-container container">
<input type="checkbox" name="" id="">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#food">Category</a></li>
<li><a href="#food-menu">Menu</a></li>
<li><a href="#testimonials">reviews</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li><a href="chatbot.html">Chatbot</a></li>-->
<li><a href="https://fssai.gov.in/cms/about-fssai.php">fssai</a></li>
</ul>
<img style="border-radius: 50%; height: 90px;" src="ORGANIC LOGO.jpg" alt="logo" />
</div>
</nav>
<section class="showcase-area" id="showcase">
<div class="showcase-container">
<h1 class="main-title" id="home">Fit Flavors Kitchen</h1>
<p style="color: antiquewhite;">where Flavors meet Freshness.</p>
<!-- Add select tag with options and hide it initially -->
<a href="javascript:void(0);" class="btn btn-primary" id="menu-button">Menu</a>
<select id="food-type" style="padding: 5px; border: 1px solid #ccc; border-radius: 5px; display: none;">
<option>select</option>
<option value="veg">Veg</option>
<option value="non-veg">Non-Veg</option>
</select>
<script>
const menuButton = document.getElementById("menu-button");
//const foodTypeSelect = document.getElementById("food-type");
menuButton.addEventListener("click", () => {
foodTypeSelect.style.display = foodTypeSelect.style.display === "none" ? "block" : "none";
});
</script>
<script>
const foodTypeSelect = document.getElementById("food-type");
foodTypeSelect.addEventListener("change", (event) => {
const selectedValue = event.target.value;
// Redirect to the appropriate page based on the selected value
if (selectedValue === "veg") {
window.location.href = "veg.html";
} else if (selectedValue === "non-veg") {
// Redirect to the non-veg page (replace with the actual URL)
window.location.href = "Non-veg.html";
}
});
</script>
</div>
</section>
<section id="about">
<div class="about-wrapper container">
<div class="about-text">
<p class="small">About Us</p>
<h2>Savor the goodness of nature in every bite</h2>
<p>
Organic restaurants prioritize organic, pesticide-free ingredients
emphasizing sustainability and locally sourced, seasonal produce.
They cater to health-conscious customers with a focus on wholesome,
natural options and environmental consciousness.
</p>
</div>
<div class="about-img">
<img src="organic-food-logo-design.jpg"alt="food" />
</div>
</div>
</section>
<section id="food">
<h2>Types of food</h2>
<div class="food-container container">
<div class="food-type fruite">
<div class="img-container">
<img src="fruits.jpg" alt="error" />
<div class="img-content">
<h3>Fruits</h3>
<a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary" target="blank">learn
more</a>
</div>
</div>
</div>
<div class="food-type vegetable">
<div class="img-container">
<img src="vegetables.jpg" alt="error" />
<div class="img-content">
<h3>Vegetable</h3>
<a href="https://en.wikipedia.org/wiki/Vegetable" class="btn btn-primary" target="blank">learn
more</a>
</div>
</div>
</div>
<div class="food-type grin">
<div class="img-container">
<img src="grains.jpg" alt="error" />
<div class="img-content">
<h3>Garin</h3>
<a href="https://en.wikipedia.org/wiki/Grain" class="btn btn-primary" target="blank">learn
more</a>
</div>
</div>
</div>
</div>
</section>
<section id="food-menu">
<h2 class="food-menu-heading">Food Menu</h2>
<div class="food-menu-container container">
<div class="food-menu-item">
<div class="food-img">
<img src="veggie tacos.png" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Veggie Tacos</h2>
<p>
Nutrient-Rich: Packed with vitamins, minerals,
and fiber from vegetables and plant-based proteins,
contributing to a well-balanced diet.
</p>
<p class="food-price">Price: ₹ 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="wintersalad.jpg" alt="error" />
</div>
<div class="food-description">
<h2 class="food-titile">Winter Salaad</h2>
<p>
Adding winter salads to your meals is a tasty way to nourish your body
with essential nutrients and maintain a well-rounded and healthy
</p>
<p class="food-price">Price: ₹ 350</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="hibachi-chicken-fried-rice-7.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Haibachi-Chicken-Fried-rice</h2>
<p>
The dish may contain added sodium, oil, and possibly high-calorie sauces, so moderation is key
</p>
<p class="food-price">Price: ₹ 499</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="vegtable salad.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Veg Salaad</h2>
<p>
Incorporating a variety of colorful vegetables into your salads allows you to enjoy a diverse
range of nutrients, promoting a balanced and healthy diet
</p>
<p class="food-price">Price: ₹ 150</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="AVACADO EGG TOAST.png" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Avacodo Egg Toast</h2>
<p>
While enjoying avocado egg toast, it's essential to be mindful of portion sizes and consider the
overall balance of your diet. This dish can be part of a nutritious and well-rounded meal plan.
</p>
<p class="food-price">Price: ₹ 180</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="juice.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Fruit Pulpy Juices</h2>
<p>
Incorporating natural juices into a balanced diet can contribute to weight management,
especially if they replace sugary, high-calorie beverages.
</p>
<p class="food-price">Price: ₹ 140</p>
</div>
</div>
</div>
</section>
<section id="testimonials">
<h2 class="testimonial-title">What Our Customers Say</h2>
<div class="testimonial-container container">
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="andrewa bro 1.jpeg" alt="" />
<p class="customer-name">Andrews</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
"They serve healthy & tasty Veg & non-veg homely food with a great packaging."
</p>
</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="hannah.jpg" alt="" />
<p class="customer-name">Hannah</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
"Pure organic restaurant with a different dishes made out of millets served.Its a nice cozy place."
</p>
</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="Eat yourself well! Dr Rupy Aujla shows how to cook your way healthy.jpeg" alt="" />
<p class="customer-name"> Antony Ruben</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
"The food taste is great and the fact that we are eating whole food makes it even more awesome."
Must visit.....
</p>
</div>
</div>
</section>
<section id="contact">
<div class="contact-container container">
<div class="contact-img">
<img src="contact us.jpeg" alt="" />
</div>
<div class="form-container">
<h2>Contact Us</h2>
<form onsubmit="validateAndSubmit()">
<input type="text" id="name" placeholder="Your Name" />
<input type="email" id="email" placeholder="E-Mail" />
<textarea id="message" cols="30" rows="6" placeholder="Type Your Message"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</section>
<footer id="footer">
<!-- ... (previous HTML code) ... -->
<section id="website-timings">
<h2> Our Timings</h2>
<div class="timings-container container">
<div class="timing-row">
<p><strong>Monday to Friday: </strong> 9:00 AM - 8:00 PM</p>
</div>
<div class="timing-row-2">
<p><strong>Saturday:</strong></p><br>
<p>10:00 AM - 6:00 PM</p>
</div>
<div class="timing-row-3">
<p><strong>Sunday:</strong></p><br>
<p>Closed</p>
</div>
</div>
</section>
<!-- ... (remaining HTML code) ... -->
</footer>
<!-- .................../ JS Code for smooth scrolling /...................... -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<script>
function validateAndSubmit() {
// Get form inputs
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var message = document.getElementById('message').value;
// Simple validation
if (name.trim() === '') {
alert('Please enter your name');
return false;
}
if (email.trim() === '') {
alert('Please enter your email');
return false;
}
// You can add more complex email validation if needed
// Example: if (!isValidEmail(email)) {
// alert('Please enter a valid email address');
// return false;
// }
if (message.trim() === '') {
alert('Please enter your message');
return false;
}
// If all fields are filled, the form will be submitted
alert('your response submitted successfully!');
return true;
}
// Example of a simple email validation function
function isValidEmail(email) {
// Use a regular expression for basic email validation
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
</script>
</html>
</body>