-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (307 loc) · 14.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" content="Kathak Cafe and Grill" />
<meta property="og:type" content="website" />
<meta property="og:description" content="We are a traditional restaurant cum bakery from the city of Travancore, Kerala, our specialties include seafood and local produce fresh from the sea. ">
<meta property="og:url" content="https://vishnuvijai.github.io/kathak/" />
<meta property="og:image" content="https://vishnuvijai.github.io/kathak/img/kathakcafeandgrill.png" />
<!-- OWL CAROUSEL CDN -->
<link rel="stylesheet" href="./owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./owlcarousel/assets/owl.theme.default.min.css">
<!-- BOOTSTRAP CDN -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- FONTAWSOME CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- STYLESHEET CSS -->
<link rel="stylesheet" href="style.css">
<!-- TITLE -->
<title>Kathak Cafe and Grill</title>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand text-white">
<img src="./img/logo.png" alt="Image Logo" style="width:15rem;" class="border-0 img-fluid">
</a>
<button class="navbar-toggler" data-target="#my-nav" data-toggle="collapse" aria-controls="my-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="my-nav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active mr-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#about-story">About Us</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#about-story">Our Story</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#experience">Experience</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#banner">Thandoor</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#carousel-cards">Gallery</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#seasonal">Seasonal</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link " href="#footer">Find Us</a>
</li>
</ul>
</div>
</nav>
<!-- HEADER -->
<section class="masthead d-none d-md-block">
<div id="my-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#my-carousel" data-slide-to="0" aria-current="location"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
<li data-target="#my-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./img/five.png" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/Six.png" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/four.jpg" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/Seven.png" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/two.png" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/three.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#my-carousel" data-slide="prev" role="button">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#my-carousel" data-slide="next" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</section>
<!-- ABOUT AND STORY SECTION -->
<section class="about-story mt-5 mt-md-0 mb-5 mb-md-7 " id="about-story">
<div class="about-story-container container-fluid">
<div class="row">
<div class="col-12 col-lg-4 about-story-cols p-5 text-center d-flex align-items-center justify-content-center flex-column">
<img src="./img/logo2.png" alt="Image Logo" style="width:12rem;" class="border-0 img-fluid ">
<h2 style="line-height: 5rem;">OUR STORY</h2>
<P class="text-justify">The year was 2005. Adhitya Murugan’s yearning for authentic Kerala Cuisines and pastries in Cochin had been growing for quite some time and eventually, it got the better of him.</P>
</div>
<div class="col-lg-4 d-none d-lg-block about-story-cols " hidden="Image"></div>
<div class="col-12 col-lg-4 about-story-cols p-5 text-center">
<h2 style="line-height: 5rem;">ABOUT US</h2>
<P class="text-justify">Kathak an authentic Kerala style cafe and pastry, bakery house, specializing in grilled products in Cochin. Since its inception, Kathak has been all about quality and excellence. <br>Each of our offerings, from the seasonal fish, kababs, cakes, and pastries to our bread, Quiches, and Croissants, adhere to the strictest standards of perfection and elegance. <br> From our quaint little Macarons to our majestic Galette des Rois and our Millefeuille, there is hardly a French delicacy that you’ll miss at Kathak. Inspired by the quintessential French and Traditional Values Kathak is setting a new trend in Cochin for high-end culinary offerings.</P>
</div>
</div>
</div>
</section>
<!-- EXPERIENCE SECTION -->
<section class="experience mb-5 " id="experience">
<div class="experience-container container-fluid">
<div class="row">
<div class="col-12 col-md-6 experience-cols ">
<div class="img-container">
<img src="./img/Macaroons.jpg" alt="Cake Image" class="d-block mx-auto float-md-right border-gold-noh-3">
</div>
</div>
<div class="col-12 col-md-6 experience-cols d-flex align-items-center ">
<div class="experience-text mt-4 mt-md-0">
<p class=" text-justify d-block mx-auto ml-md-0 ">Experience our signature delicacies and an array of unsorted delights, now at Kathak open at fort Cochin.</p>
</div>
</div>
</div>
</div>
</section>
<!-- BANNER -->
<section class="banner w-100 mb-6 " id="banner">
<img src="./img/KababPlater.png" alt="Kabab Banner Image" class="w-100">
</section>
<!-- CAROUSEL CARDS -->
<section class="carousel-cards mb-6" id="carousel-cards">
<div class="container">
<div class="row">
<div class="owl-carousel owl-theme text-darkbrown">
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/muttonkabab.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Mutton Kababs</h5>
<hr class="bg-gold">
<p class="card-text">Grilled Mutton Kababs</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/cheescake.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Cheese Cake</h5>
<hr class="bg-gold">
<p class="card-text">Redberry Topped Cheese Cake</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/Thandoor.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Thandoori Chicken</h5>
<hr class="bg-gold">
<p class="card-text">Thandoor oven baked chicken</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/Millefeuille.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Mille Feuille</h5>
<hr class="bg-gold">
<p class="card-text">French Desert Mille feuille</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/Kabab.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Seek Kababs</h5>
<hr class="bg-gold">
<p class="card-text">Charcoal Grilled Seek Kababs</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/macaroons.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Macaroon</h5>
<hr class="bg-gold">
<p class="card-text">Macaroons</p>
</div>
</div>
</div>
<div class="item">
<div class="card border-gold-1">
<img class="card-img-top" src="./img/Almondtart.png" alt="Image">
<div class="card-body">
<h5 class="card-title">Almond Tart</h5>
<hr class="bg-gold">
<p class="card-text">Honey Almond Tart</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Seasonal -->
<section class="seasonal" id="seasonal">
<div class="seasonal-container container-fluid">
<div class="row">
<div class=" col-md-7 seasonal-cols" ></div>
<div class=" col-md-5 seasonal-cols bg-plum p-5">
<h3 class="text-center">Seasonal Seafood Cuisines</h3>
<br>
<p class="text-justify">Choose from a wide variety of carefully selected, seafood produces, featuring signature cuisines, all designed to deliver an unforgettable experience. Beiging very close to the sea our picks of extremely fresh and tasty fish and seafood are sure to stimulate your tastebuds. From Kerala style fish and green mango coconut curry to steaming seafood sizzlers, we provide heartwarming cuisine that you are craving for.</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer py-5" id="footer">
<div class="footer-container container">
<div class="row">
<div class="col-lg-4 footer-cols">
<div class="image-container">
<img src="./img/logo3.png" alt="Logo Image" style="width:15rem;">
</div>
</div>
<div class="col-lg-4 footer-cols text-white">
<h3>WHAT’S HAPPENING</h3>
<p class="text-justify">IIM students visit Kathak to study challenges in emerging markets</p>
<p> April 29, 2019 - 4:12 AM</p>
<p class="text-justify">Kathak Taking Cafes Centre Stage – Vanitha Magazine</p>
<p>March 8, 2019 - 9:35 AM</p>
</div>
<div class="col-lg-4 footer-cols text-white">
<address>
<h5>FIND US</h5> <br>
<a href="#"><i class="fab fa-facebook-f fa-lg mr-3"></i></a>
<a href="#"><i class="fab fa-twitter fa-lg mr-3"></i></a>
<a href="#"><i class="fab fa-instagram fa-lg "></i></a><br><br>
<i class="fas fa-map-marker-alt mr-2"></i> Fort Kochi, Cochin, Kerala 685001.<br><br>
<i class="fas fa-phone mr-2"></i>0091 471 2556888<br><br>
<i class="fas fa-envelope-open mr-2"></i><a href="mailto:[email protected]">[email protected]</a>
</address>
</div>
</div>
</div>
</footer>
<!-- JQUERY CDN -->
<script src="./js/jquery-3.4.0.min.js"></script>
<!-- POPPER JS CDN -->
<script src="./js/popper.min.js"></script>
<!-- BOOTSTRAP JS CDN -->
<script src="./js/bootstrap.min.js"></script>
<!-- OWL CAROUSEL JS CDN -->
<script src="./owlcarousel/owl.carousel.min.js"></script>
<!-- OWL CAROUSEL METHOD CALL -->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop:true,
margin:10,
nav: true,
dotsEach:true,
navText: ["<img src='./img/myprevimage.png' style='width:30px;'>","<img src='./img/mynextimage.png' style='width:30px;'>"],
responsive:{
0:{
items:1
},
576:{
items:2
},
768:{
items:3
},
992:{
items:4
}
}
});
});
</script>
</body>
</html>