-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbutter-chicken.html
476 lines (422 loc) · 17.7 KB
/
butter-chicken.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
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Butter Chicken & Jeera rice. This is a revision to a previous dish and oh so improved! A bit of advise though, do not eat it every week. This is a restaurant style curry"
/>
<!-- *********************FACEBOOK START******************** -->
<!-- facebook meta tags to ensure correct image / page is shared START-->
<!-- set the URL that you want Facebook to point to in this tag -->
<meta
property="og:url"
content="https://www.nuttyskitchen.co.uk/butter-chicken.html"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Butter Chicken" />
<!-- set a very short description of the page in this tag -->
<meta
property="og:description"
content="Butter Chicken Recipe: A restaurant style curry"
/>
<!-- set the image that you want Facebook to display in this tag-->
<meta
property="og:image"
content="https://www.nuttyskitchen.co.uk/images/butter-chicken/650x366/butter-chicken-and-jeera-rice-02.webp"
/>
<!-- facebook meta tags to ensure correct image / page is shared END-->
<!-- *********************FACEBOOK END********************* -->
<!-- Set the webpage title here - it shows up in the browser tab -->
<title>Butter Chicken | Nutty's Kitchen</title>
<!--set the image that shows in the browser tabs -->
<link rel="icon" href="favicon.svg" />
<!-- Pre-load the font used on the website: "Poppins" -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- load the CSS stylesheets here -->
<link rel="stylesheet" href="/styles/tabs-nav.css" />
<link rel="stylesheet" href="/styles/background.css" />
<!-- Set CSS variables here -->
<style>
:root {
/* set the background image */
--bg-img: url("/images/icons/blank.png");
/* set the background size */
--bg-size: 32px;
/* set the start of the 2nd colour of the gradient */
/* basically, increase the value until the background
images are below the intro' paragraphs */
--bg-1st-col-stop: 35%;
}
</style>
</head>
<body>
<nav class="nav-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/recipepage.html">Recipes</a></li>
<li><a href="/contact-form.html">Contact Us</a></li>
</ul>
</nav>
<!-- RECIPE PAGE NAVIGATION -->
<div id="nav-container" class="nav-container"></div>
<!-- RECIPE PAGE NAVIGATION -->
<section class="fg">
<header class="title">
<div class="title-wrap">
<img
width="60"
height="32"
src="/images/logo-left.svg"
alt="logo left"
title="nuttys kitchen logo left"
/>
<!-- Set the page title here -->
<h1>Butter Chicken</h1>
<img
width="60"
height="32"
src="/images/logo-right.svg"
alt="logo right"
title="nuttys kitchen logo right"
/>
</div>
<img
src="/images/nuttys-kitchen-logo.svg"
alt="nuttys kitchen logo"
width="160"
height="40"
title="nuttys kitchen logo"
class="logo-main"
/>
<!-- First paragraph after the page title -->
<p>
<strong>Butter Chicken </strong>& Jeera rice. This is a revision to a
previous dish and it is oh so improved! A bit of advise though, do not
eat it every week :-) This is a restaurant style curry — and a
treat to be eaten just occassionally! The original recipe calls for
500ml of cream! I substitute with two thirds yogurt to make it
slightly lighter & not so rich. As you all know, I do love spice, but
this is a mild dish and the nuts do sing through, after all, I am
Nutty!
</p>
<!-- Second paragraph after the page title -->
<p>
Click the <b>Method</b> tab below to see a step-by-step guide on how
to make <strong>Butter Chicken </strong>& Jeera rice, along with some
pictures as a guide.
</p>
</header>
<!-- class about-center = set columns -->
<!-- class section-center = set width -->
<div class="about-center section-center">
<!-- first image on the page sits underneath the 1st & 2nd paragraphs -->
<article class="about-img">
<img
src="/images/butter-chicken/650x366/butter-chicken-and-jeera-rice-02.webp"
alt="butter chicken and jeera rice"
title="butter chicken served with jeera rice"
/>
</article>
<article class="about">
<!-- buttons container -->
<div class="btn-container">
<!-- class active = show content -->
<button
title="Click this tab to reveal the ingredients"
class="tab-btn active"
data-id="ingredients"
>
ingredients
</button>
<button
title="Click this tab to read the recipe method and see pictures of how to make this dish"
class="tab-btn"
data-id="method"
>
method
</button>
</div>
<!-- This is where the "Ingredients" & "Method" tabs are created -->
<!-- about content -->
<article class="about-content">
<!-- single item -->
<!-- the class `active` is applied to show the contents of the tab. "Ingredients" is active by default -->
<div class="content active" id="ingredients">
<h2>ingredients</h2>
<p>Here's what you need :¬)</p>
<h2>serves 4</h2>
<!-- Ingredients List Goes Below Here!!! -->
<h2>for the marinade</h2>
<ul>
<li>500g diced boneless chicken (breast or thigh)</li>
<li>50g Greek natural yogurt</li>
<li>2 tsp finely grated ginger</li>
<li>2 tsp finely grated garlic</li>
<li>1 tsp garam masala</li>
<li>1 tsp tandoori masala</li>
<li>1 tsp cumin powder</li>
<li>1 tsp coriander powder</li>
<li>1 tsp red kashmiri chilli powder</li>
<li>1 tsp salt</li>
</ul>
<div class="spacer"></div>
<h2>for the sauce</h2>
<ul>
<li>2 Tbsp ghee</li>
<li>2 tsp finely grated ginger</li>
<li>2 tsp finely grated garlic</li>
<li>2 Tbsp tomato puree</li>
<li>1 tsp garam masala</li>
<li>1 tsp tandoori masala</li>
<li>1/2 tsp ground turmeric</li>
<li>1 tsp Kashmiri chilli powder</li>
<li>1 tsp Hot chilli powder</li>
<li>1 Tbsp dried fenugreek leaves</li>
<li>2 tsp salt</li>
<li>6 Tbsp cashew nuts, ground</li>
<li>150 ml double cream</li>
<li>350 ml greek yogurt or plain</li>
<li>400 ml water</li>
</ul>
<div class="spacer"></div>
<h2>For the rice</h2>
<ul>
<li>1 cup basmati rice, soaked in cold water for 15 minutes</li>
<li>2 tsp oil or butter</li>
<li>1 tsp cumin seeds</li>
<li>1 tsp salt</li>
<li>2 cups hot water</li>
</ul>
<!-- Ingredients List Goes Above Here!!! -->
</div>
<!-- end of single item -->
<!-- single item -->
<!-- The method tab does not have the call `active` by default, thus it is hidden from view. When the user clicks
the "Method" tab the `active` class is applied here and
removed from the "Ingredients" tab, which is then hidden
from view
-->
<div class="content" id="method">
<h2>method</h2>
<p>
Try to marinade the chicken overnight, no need to be rushing
here, you will get away with 2 hours but, overnight pays off,
trust me! Always use a plastic container not metal! Oddly, there
are no onions included, but, if you wish to add them in, do so
first and be sure to cook them until translucent then browned.
Dice your meat into bite sized chunks so they are all coated in
the delicious marinade & devourable with just a spoon!
</p>
<p>So, prepare your ingredients and spices:</p>
<!-- Method List Goes Below Here!!! -->
<div class="card_image">
<figcaption>ingredients</figcaption>
<img
src="/images/butter-chicken/650x366/ingredients.webp"
alt="ingredients"
title="ingredients for butter chicken"
/>
</div>
<div class="spacer"></div>
<h2>Method for the marinade</h2>
<ol>
<li>
set your yogurt into a plastic container & stir in all your
spices
</li>
<li>
add your diced chicken & place into the fridge when well
shaken or stired through
</li>
<li>shake or stir occassionally to re-combine</li>
</ol>
<div class="spacer"></div>
<p>
If you go to bed just stir to combine when you wake up & repeat
prior to cooking
</p>
<h2>Pre-cook the chicken</h2>
<ol>
<li>pre-heat your oven to 200°C or grill to med-high</li>
<li>remove the chicken pieces from the marinade</li>
<li>place on to an oven tray</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>marinated chicken</figcaption>
<img
src="/images/butter-chicken/650x366/marinated-chicken-chunks-on-tray.webp"
alt="marinated chicken chunks on tray"
title="marinated chicken chunks on a tray for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="4">
<li>*cook for 10 to 12 mins until cooked & tender</li>
</ol>
<div class="spacer"></div>
<p>
*this may take less time in your oven, so check after 7 mins
</p>
<div class="card_image">
<figcaption>cooked chicken</figcaption>
<img
src="/images/butter-chicken/650x366/cooked-chicken-pieces-on-tray.webp"
alt="cooked chicken chunks on tray"
title="cooked chicken chunks on a tray for butter chicken"
/>
</div>
<div class="spacer"></div>
<h2>Method for the sauce</h2>
<div class="card_image">
<figcaption>ingredients ready to go!</figcaption>
<img
src="/images/butter-chicken/650x366/ground-cashews-and-spices.webp"
alt="ingredients"
title="ingredients for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol>
<li>heat a heavy based pan & add the ghee</li>
<li>once hot, add your garlic & ginger, just brown slightly</li>
<li>add tomato puree and cook for a few mins</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>add tomato puree</figcaption>
<img
src="/images/butter-chicken/650x366/tomato-puree-in-melted-ghee.webp"
alt="tomato puree in melted ghee"
title="tomato puree in melted ghee for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="4">
<li>
now add all your spices and stir constantly until oil
separates
</li>
<li>
add in salt & rub the fengreek leaves in, being sure to crush
them with your hands
</li>
<li>mix through & add your ground cashew nuts</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>add ground cashews</figcaption>
<img
src="/images/butter-chicken/650x366/ground-cashew-nuts-and-spices.webp"
alt="ground cashew nuts and spices"
title="ground cashew nuts and spices for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="7">
<li>stir fry for 5 mins until combined well</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>stir fry to combine</figcaption>
<img
src="/images/butter-chicken/650x366/cashew-nuts-mixed-with-spices.webp"
alt="cashew nuts mixed with spices"
title="cashew nuts mixed with spices for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="8">
<li>add the water & marinade & stir though</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>stir fry to combine</figcaption>
<img
src="/images/butter-chicken/650x366/water-added.webp"
alt="water added"
title="water added for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="9">
<li>
mix your yogurt & cream together, then slowly add to the dish
</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>add yogurt & cream</figcaption>
<img
src="/images/butter-chicken/650x366/yogurt-and-cream-added.webp"
alt="yogurt and cream added"
title="yogurt and cream added for butter chicken"
/>
</div>
<div class="spacer"></div>
<ol start="10">
<li>stir until the dish is all combined & bubbling hot</li>
<li>
now turn down, add the chicken & meat juices, then cover for
10 to 15 minutes, depending on the size of your chicken cubes
</li>
</ol>
<div class="spacer"></div>
<h2>Method for the rice</h2>
<ol>
<li>drain your soaked rice & set aside to dry</li>
<li>heat a sauce pan add the oil or ghee</li>
<li>
as soon as it is hot, add in your cumin seeds & salt allow to
sizzle
</li>
<li>now add you rice & stir fry through the cumin</li>
<li>
add hot water, cover with a lid, bring to the boil then, turn
the ring off and leave for about 20mins until all the water is
absorbed
</li>
<li>separate, stir through with a fork & serve</li>
</ol>
<div class="spacer"></div>
<div class="card_image_round">
<figcaption>butter chicken</figcaption>
<img
src="/images/butter-chicken/650x366/butter-chicken-and-jeera-rice-01.webp"
alt="butter chicken and jeera rice"
title="butter chicken served with jeera rice"
/>
<figcaption>...with jeera rice</figcaption>
</div>
<div class="spacer"></div>
<p>
This is truly a top quality, restaurant curry, made in the
comfort of your own home, saving £££'s & £££'s on an expensive
night out for four! But, please be aware — it is
calorific, so it is a rare a treat :-) Truely Nutty's favorite!
</p>
<!-- Method List Goes Above Here!!! -->
<!-- This is THE END!!!!!! -->
<!-- don't less with the closing tags or anything below here!!! -->
</div>
<!-- end of single item -->
</article>
</article>
</div>
</section>
<!-- javascript -->
<!-- `app.js` is the program that runs on every page to create
the menu and footer amongst other things such as controlling
the visibility of the tabs when a user clicks on them
-->
<script src="/src/app.js"></script>
<!-- NOTE: recipecards.js only runs on the `recipepage.html` -->
</body>
</html>