-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfoodcat.html
184 lines (154 loc) · 11.1 KB
/
foodcat.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
<!DOCTYPE html>
<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">
<link rel="icon" type="image/x-icon" href="inkedInsightslogo.jpeg">
<script src="https://cdn.tailwindcss.com"></script>
<title>INKED INSIGHTS</title>
</head>
<body>
<nav class=" flex h-16 pt-5">
<img src="inkedInsightslogo.jpeg" alt="Inked Insights" class="rounded-full w-auto mx-5">
<div class="text-4xl font-extrabold text-emerald-600 ">Inked Insights</div>
<div class="px-24 ml-auto">
<a href="index.html" class="text-xl px-4">Home</a>
<!-- <a href="" class="text-xl px-4">About</a> -->
<a href="categories.html" class="text-xl px-4">Category</a>
<a href="aboutus.html" class="text-xl px-4">About Us</a>
<!-- <a href="#" class="text-xl px-4 bg-blue-600 py-2 text-white hover:bg-blue-800 rounded-md">Login</a> -->
<button class="bg-blue-600 px-6 py-4 text-white rounded-lg border-none hover:bg-blue-800 outline-none font-semibold " id="#Logbtn" ><a href="login.html">Login</a>
</button>
</div>
</nav>
<div class="m-10 ">
<h1 class="text-4xl flex justify-center m-10 font-thin"> <span class="font-bold">F</span>OOD</h1>
<div class="font-bold text-2xl flex justify-center">INDIAN CUISINE</div>
<div class="grid grid-cols-4 gap-5 m-10">
<div class="max-w-sm rounded overflow-hidden shadow-lg ">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="puri.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 ">Pani Puri: The Delicious Street Food of India</div>
<p class="text-gray-700 text-base">
The origins of panipuri can be traced back to the Indian subcontinent, where it has been a popular snack for centuries. In fact, it is known by different names across different regions of India, such as gol gappa, puchka, and pani ke bataashe.
<a href="panipuri.html" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-300 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="chole.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Chole Bhature: A Hearty North Indian Dish</div>
<p class="text-gray-700 text-base">
Chole bhature is a dish that consists of chole, which are spiced chickpeas cooked in a tomato-based gravy, and bhature, which are deep-fried bread made with flour and yogurt. The combination of these two elements creates a meal that is both satisfying and flavorful.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="puranpoli.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Puran Poli: A Sweet and Traditional Indian Delight</div>
<p class="text-gray-700 text-base">
Puran poli has been a part of Indian cuisine for centuries and is considered a traditional dish in many parts of the country. It is often made during festivals such as Holi, Diwali, and Ganesh Chaturthi, and is served as a dessert or a snack.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="dalbhati.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Dal Baati: A Flavorful Rajasthani Delight</div>
<p class="text-gray-700 text-base">
Dal Baati is a traditional dish that hails from the state of Rajasthan in India. It is a hearty and flavorful dish that is a popular staple in Rajasthani cuisine. The dish is made up of two main components - dal, which is a lentil soup, and baati, which are hard, baked wheat balls.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
</div>
<!-- italian -->
<div class="font-bold text-2xl flex justify-center">ITALIAN CUISINE</div>
<div class="grid grid-cols-4 gap-5 m-10">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer " src="sphaghetti.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Spaghetti Carbonara: Traditional Italian Pasta</div>
<p class="text-gray-700 text-base">
Spaghetti Carbonara is a traditional Italian pasta dish that is loved by people all over the world. This classic dish is made with simple, flavorful ingredients, such as spaghetti noodles, bacon or pancetta, eggs, cheese, and black pepper. The combination of these ingredients creates a rich, creamy sauce that coats the pasta perfectly.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<!-- pizza -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer " src="pizza.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Margherita Pizza: Traditional Italian pizza</div>
<p class="text-gray-700 text-base">
Margherita pizza is a classic Italian dish that is known for its simplicity and delicious flavors. It is named after Queen Margherita of Savoy, who visited Naples in 1889 and was served a pizza that was made to resemble the Italian flag with its red tomato sauce, white mozzarella cheese, and green basil leaves. The Queen loved the pizza so much that it became an instant hit and is now one of the most popular pizza varieties around the world.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<!-- lasagna -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="lasagna.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Lasagna: A classic Italian baked pasta dish </div>
<p class="text-gray-700 text-base">
Lasagna is a classic Italian pasta dish that consists of layered pasta sheets, tomato sauce, meat, and cheese. It's a delicious and hearty meal that is perfect for feeding a crowd or for a comforting family dinner.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
<!-- tiramisu -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full h-60 object-cover hover:scale-75 transition-all duration-500 cursor-pointer" src="tiramisu.jpg" >
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Tiramisu : A delicious Italian dessert </div>
<p class="text-gray-700 text-base">
Tiramisu is a popular dessert that is often served at Italian restaurants and cafes. It's a sophisticated dessert that is perfect for impressing guests or for indulging in a special treat. With its creamy texture and rich flavors, tiramisu is a classic Italian dessert that is sure to satisfy any sweet tooth.
<a href="#" target="blank" class="text-red-600 hover:text-blue-600">continue reading....</a>
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#food</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
</div>
</div>
</div>
</div>
<footer>
<div class="btmline flex justify-center items-center mx-auto m-3 space-x-4"><span></span><span class="font-semibold hover:text-emerald-500 "> © Inked Insights , 2023 </span></div>
</footer>
</body>
</html>