-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
416 lines (367 loc) · 24.4 KB
/
index.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
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>Food Zone</title>
<meta name="description" content="Spicy food zone">
<meta name="keywords" content="HTML,CSS,HTML5,Javascript,jQuery,bootstrap">
<meta name="author" content="Raju Sunkara">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Zilla Slab Highlight' rel='stylesheet'>
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<!--Including favicon-->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" sizes="16x16">
</head>
<body>
<!--Here main container class started-->
<div class="container" id="main">
<!--Here navbar is used to fix the navigation bar in top of website-->
<div class="navbar navbar-fixed-top">
<nav>
<div class="container">
<!--Here navbar-toggle is used for collapse the bar-->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--navbar-brand represents logo of the website-->
<a class="navbar-brand" href="#"><img src="images/logo.jpg" alt="Your Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Orders</a>
</li>
<li>
<a href="#">Door Deliviry</a>
</li>
<li>
<a href="#">Catering</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">More Services</li>
<li>
<a href="#">Special orders</a>
</li>
<li>
<a href="#">Equipment</a>
</li>
</ul><!--End dropdown menu-->
</li>
</ul><!--End nav-->
<form class="navbar-form pull-left">
<input type="text" class="form-control" placeholder="Search in this site.." id="searchInput">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form><!--End navbar form-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>My Account<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#"><span class="glyphicon glyphicon-wrench">Settings</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-refresh">Update Profile</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-briefcase">Billing</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><span class="glyphicon glyphicon-off">Sign out</a>
</li>
</ul>
</li>
</ul><!--End nav nav-bar-->
</div><!--End nav-collapse-->
</div> <!--End container-->
</nav>
</div><!--End navbar-->
</div><!--End container-->
<!--Here container-flueid gives full length of row-->
<div class="container-flueid">
<!--carousel starts here-->
<div class="carousel slide" id="mycarousel">
<!--indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#mycarousel"></li>
<li data-slide-to="1" data-target="#mycarousel"></li>
<li data-slide-to="2" data-target="#mycarousel"></li>
</ol>
<!--Warpper for slides-->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4>Spicy Food Zone</h4>
<p>Here you can get homely food</p>
</div><!--End carousel caption-->
</div><!--End item-->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4>Spicy Food Zone</h4>
<p>Biriyani bangalore loves</p>
</div><!--End carousel caption-->
</div><!--End item-->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4>Spicy Food Zone</h4>
<p>Here you can get homely food</p>
</div><!--End carousel caption-->
</div><!--End item-->
</div><!--carousel inner-->
<!--controls-->
<a class="left carousel-control" data-slide="prev" href="#mycarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#mycarousel"><span class="icon-next"></span></a>
</div><!--End carousel-->
</div><!--End container-flueid -->
<!--Here container starts -->
<div class="container" id="main">
<!--Here bigcallout starts-->
<div class="row" id="bigCallout">
<div class="cal-12">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>Thanks for visiting website</p>
</div><!--End alert-->
<div class="well well-small visible-sm">
<a href="" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span>Give us a call!</span></a>
</div><!--End well-small-->
<div class="jumbotron">
<div class="page-header">
<h1>Good food is Good mood <small>Feal like homely food.</small></h1>
</div><!--End page-header-->
<p class="lead">Sometimes we should express our gratitude for the small and simple things like the scent of the rain, the taste of your favorite food, or the sound of a loved one's voice.</p>
<a href="" class="btn btn-large btn-primary" id="alertMe">Want to know more click here</a>
<a href="" class="btn btn-large btn-link">or click here</a>
</div><!--End well class-->
</div><!--End cal-12-->
</div><!--End call out-->
<!--Here one more row featureheading starts-->
<div class="row" id="featureheading">
<div class="col-12">
<h2>More Food Items</h2>
<p class="lead">Here you can can your favourate food items with best quality</p>
</div><!--End col-12-->
</div><!--End featureheading-->
<!--Here one feature row started -->
<div class="row" id="features">
<!--col-sm-4 will divide page into 3 parts-->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Veg Maggi</h3>
</div><!--End panel-heading-->
<img src="images/badge_maggi.jpg" alt="Maggi" class="img-circle">
<p> Masala Maggi Recipe with Vegetables and each serving has 440 calories with added ingredients.</p>
<a href="http://foodomania.com/maggi-noodles-veggies/" target="_blank" class="btn btn-warning btn-block">Want to order Maggi</a>
</div><!--End panel-->
</div><!--End col-sm-4-->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Dahi puri</h3>
</div><!--End panel-heading-->
<img src="images/badge_dahipuri.jpg" alt="Dahipuri" class="img-circle">
<p> Dahipuri, or dahi puri, is a snack which is especially popular in the state of Maharashtra, India</p>
<a href="http://foodviva.com/snacks-recipes/dahi-puri/" target="_blank" class="btn btn-danger btn-block">Want to taste Dahi puri</a>
</div><!--End panel-->
</div><!--End col-sm-4-->
<div class="col-sm-4 feature">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Burger</h3>
</div><!--End panel-heading-->
<img src="images/badge_burger.jpg" alt="Burger" class="img-circle">
<p> A hamburger or burger is a sandwich consisting of one or more cooked patties of ground meat.</p>
<a href="https://www.aaburger.com/" target="_blank" class="btn btn-info btn-block">Want to order Burger</a>
</div><!--End panel-->
</div><!--End col-sm-4-->
</div><!--End features-->
<div class="row" id="moreinfo">
<!--Here col-sm-6 will divides page into 2 colms-->
<div class="col-sm-6">
<h3>Details of Food Zone</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Location</a></li>
<li><a href="#tab2" data-toggle="tab">Details</a></li>
</ul><!--End navbar-tabs-->
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h4><span class="glyphicon glyphicon-map-marker"></span>Our location<small> For reach out to the branch</small></h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15553.016659290523!2d77.70509018181774!3d12.95558143082303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae123527a9b3c3%3A0x7bc4336b0d08d435!2sBiriyani+Zone!5e0!3m2!1sen!2sin!4v1502478840395" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
<p>The Food zone, one of the famous destination in the City for Biryani-Holics. Not just known for the amazing taste but also for authentic style of cooking, we have served over 2 million biriyanis through our branches over a period of 5 years since inception in the year 2010. Our chefs are well-versed with Biriyani and are capable of towing 100 Kgs biriyani in an hour. An average day at Biriyani zone starts with handpicking pure ghee from dairy houses, which is used to cook the dishes. You would be amazed to know that not even a single drop of oil touches the biriyani throughout its strenuous process of cooking. The finest and most tender chicken is chosen to give an amazing experience in every bit of it. The chicken is shredded into medium sized bits best suited for the DUM style. </p>
<p>The cooking goes in huge handis with atleast 50 Kgs of biriyani being cooked specially on firewood and charcoal, to slow cook the entire preparation.</p>
</div><!--End tab-pane-->
<div class="tab-pane" id="tab2">
<h4>The Food zone branch<small>spicy food zone building</small></h4>
<img src="images/thumbnail_img.jpg" class="thumbnail pull-left">
<p>The Food zone, one of the famous destination in the City for Biryani-Holics. Not just known for the amazing taste but also for authentic style of cooking, we have served over 2 million biriyanis through our branches over a period of 5 years since inception in the year 2010. Our chefs are well-versed with Biriyani and are capable of towing 100 Kgs biriyani in an hour. An average day at Biriyani zone starts with handpicking pure ghee from dairy houses, which is used to cook the dishes. You would be amazed to know that not even a single drop of oil touches the biriyani throughout its strenuous process of cooking. The finest and most tender chicken is chosen to give an amazing experience in every bit of it. The chicken is shredded into medium sized bits best suited for the DUM style. </p>
<p>The cooking goes in huge handis with atleast 50 Kgs of biriyani being cooked specially on firewood and charcoal, to slow cook the entire preparation.</p>
<hr>
<a href="#mymodal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Click for give feedback!</a>
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">A feed back form</h4>
</div><!--End modal-header-->
<div class="modal-body" id="modaldata">
<h4>Give your valuable feed back</h4>
<p>Here you can give valuable feed back and your suggestions.</p>
<h4>Popovers in a modal</h4>
<a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="You clicked it" data-content="I know you would">Don't click this button</a>
<h4>Tool tips in a model</h4>
<a href="" data-original-title="Tooltip" rel="tooltip"><h5>This link</h5></a><h5>should have a tips,and so should</h5> <a href="#" data-original-title="Wow!" rel="tooltip"><h5>this one.</h5></a>
<hr>
<p><small class="muted">This form will send the data, so please give care fully</small></p>
<!--Here form started with few fields-->
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div><!--End form-group-->
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="Email">
</div>
</div><!--End form-group-->
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="3">
</textarea>
<button class="btn btn-success pull-right" type="submit">Save</button>
</div>
</div><!--End form-group-->
</form>
</div><!--End modal body-->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
</div><!--End modal-footer-->
</div><!--End modal content-->
</div><!--End modal dialog-->
</div><!--End mymodal-->
</div><!--End tab-pane-->
</div><!--End tab-content-->
</div><!--End tabbable-->
</div><!--End col-sm-6-->
<!--Here col-sm-6 will divides page into two parts-->
<div class="col-sm-6">
<h3>Some info about Food items</h3>
<p>The Food zone, one of the famous destination in the City for Biryani-Holics. Not just known for the amazing taste but also for authentic style of cooking, we have served over 2 million biriyanis through our branches over a period of 5 years since inception in the year 2010. Our chefs are well-versed with Biriyani and are capable of towing 100 Kgs biriyani in an hour. An average day at Biriyani zone starts with handpicking pure ghee from dairy houses, which is used to cook the dishes. You would be amazed to know that not even a single drop of oil touches the biriyani throughout its strenuous process of cooking. The finest and most tender chicken is chosen to give an amazing experience in every bit of it. The chicken is shredded into medium sized bits best suited for the DUM style.</p>
<h4>List Group</h4>
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Panner tikka</h4>
<p class="list-group-item-text">Paneer tikka is an Indian dish made from chunks of paneer marinated in spices and grilled in a tandoor. It is a vegetarian alternative to chicken tikka and other meat dishes.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Tandoori paneer</h4>
<p class="list-group-item-text">This is the best Tandoori Paneer Tikka in the oven you'll ever make at home! Same restaurant style taste, but roasted in the oven.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Panner tikka recipe</h4>
<p class="list-group-item-text">paneer tikka recipe, recipe of paneer tikka on tawa, dry paneer tikka with step by step photo/video</p>
</a>
</div><!--Ended list-group-->
<h5>Special discount</h5>
<p>Here we are going to provide special discounts for every weekend. so lets come and enjoy the weekend with special and favourate food.</p>
</div><!--End col-sm-6-->
</div><!--End more info-->
<hr>
<!--Here one more row started-->
<div class="row" id="morecourses">
<div class="col-12">
<h3>Know more about food dishes</h3>
<div class="thumbnails row">
<div class="col-6">
<div class="thumbnail">
<img src="images/thumbnail_1.jpg" alt="Veg Biriyani">
<div class="label label-success price"><span class="glyphicon glyphicon-tag"></span><sup>$</sup>3</div>
<div class="caption">
<h3>Veg biryani</h3>
<p>This Indian classic stands or falls on the quality of the rice</p>
<p><a href="https://www.theguardian.com/lifeandstyle/wordofmouth/2017/feb/16/how-to-make-the-perfect-vegetable-biryani" class="btn btn-primary btn-small" target="_blank">Order it</a><a href="https://www.theguardian.com/lifeandstyle/wordofmouth/2017/feb/16/how-to-make-the-perfect-vegetable-biryani" target="_blank" class="btn btn-small btn-link">Order more</a></p>
</div><!--End thumbnail captionmo-->
</div><!--End thumbnail-->
</div><!--End col-6-->
<!--Here col-6 will divides two parts of the page-->
<div class="col-6">
<div class="thumbnail">
<img src="images/thumbnail_2.jpg" alt="tandoori special">
<div class="label label-info price"><span class="glyphicon glyphicon-tag"></span><sup>$</sup>5</div>
<div class="caption">
<h3>Tandoori</h3>
<p>Tandoori food is prepared as roasting, yoghurt marinated</p>
<p><a href="http://food.ndtv.com/topic/tandoori/recipes" class="btn btn-primary btn-small" target="_blank">Order it</a><a href="http://food.ndtv.com/topic/tandoori/recipes" target="_blank" class="btn btn-small btn-link">Order more</a></p>
</div><!--End thumbnail caption-->
</div><!--End thumbnail-->
</div><!--End col-6-->
</div><!--End thumbnails-->
</div><!--End col-12-->
</div><!--End more info-->
</div><!--End container-->
<!--Here footer class started -->
<footer>
<!--container class starts-->
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2017(Food Zone) </h6>
</div><!--Ended sm-2-->
<div class="col-sm-4">
<h6>About us</h6>
<p>Our Biriyanis are inspired by the Authentic Mughal Biriyani which came into India along with the Mughal Empire's rule. This favorite dish of the Jahangirs and Mumtajs of India is now among "The favourite dishes in the world"</p>
</div><!--Ended col-sm-4-->
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--Ended col-sm-2-->
<div class="col-sm-2">
<h6>Follow Us</h6>
<ul class="unstyled">
<li><a href="#">Twitter</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div><!--Ended col-sm-2-->
<div class="col-sm-2">
<h6>Coded with<span class="glyphicon glyphicon-heart">by Raju</span></h6>
</div><!--Ended col-sm-2-->
</div><!--Ended row-->
</div><!--Ended container-->
</footer>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>