-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbellyporkdinner.html
293 lines (265 loc) · 10.4 KB
/
bellyporkdinner.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
<!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="I had some left over mash potatoes from when I made my Lamb Mash Pie, so I thought, why not have a mini roast dinner!"
/>
<!-- *********************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/bellyporkdinner.html"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Belly Pork Dinner" />
<!-- set a very short description of the page in this tag -->
<meta
property="og:description"
content="I had some left over mash potatoes from when I made my Lamb Mash Pie, so I thought, why not have a mini roast dinner!"
/>
<!-- set the image that you want Facebook to display in this tag-->
<meta
property="og:image"
content="https://www.nuttyskitchen.co.uk/images/bellyporkdinner/650x366/dinner-plated.jpg"
/>
<!-- facebook meta tags to ensure correct image / page is shared END-->
<!-- *********************FACEBOOK END********************* -->
<title>Belly Pork Dinner</title>
<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"
/>
<!-- styles -->
<link rel="stylesheet" href="./styles/tabs-nav.css" />
<!-- <link rel="stylesheet" href="./styles/tabs-nav-minified.css" /> -->
</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>
<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"
/>
<h1>Belly Pork Dinner</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"
/>
<p>
I had some left over mashed potatoes from when I made my Lamb Mash
Pie, so I thought, why not have a mini roast dinner ;-) I'm fortunate
to own an air fryer that's perfect for this (it costs a little less to
run!) but this can easily be made under a grill or in a standard oven.
</p>
<p>
Click the <b>Method</b> tab below to see a step by step guide with
pictures.
</p>
</header>
<!-- class about-center = set columns -->
<!-- class section-center = set width -->
<div class="about-center section-center">
<article class="about-img">
<img
src="./images/bellyporkdinner/650x366/dinner-served.jpg"
alt="dinner dinner-served"
title="Belly Pork Dinner Served"
/>
</article>
<article class="about">
<!-- buttons container -->
<div class="btn-container">
<!-- class active = show content -->
<button 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>
<!-- about content -->
<article class="about-content">
<!-- single item -->
<div class="content active" id="ingredients">
<h2>ingredients</h2>
<p>Here's what you need :¬)</p>
<!-- Ingredients List Goes Below Here!!! -->
<h2>serves 2</h2>
<h5>Meat</h5>
<ul>
<li>6 slices of belly pork</li>
<li>1 Tblsp veg oil</li>
</ul>
<div class="spacer"></div>
<h5>Gravy</h5>
<ul>
<li>5 Chestnut mushrooms sliced</li>
<li>Knob of butter to fry the mushrooms</li>
<li>1 dessert spoon plain flour</li>
<li>1 dessert spoon Bisto™ gravy powder</li>
<li>Small cup cold water</li>
<li>1 OXO™ veg stock cube</li>
</ul>
<div class="spacer"></div>
<h5>Vegetables</h5>
<ul>
<li>2 Maris Piper potatoes chopped into 4</li>
<li>1 1/2 Tblsp salt</li>
<li>
Mashed potatoes (I had some left over from Lamb Mash pie)
</li>
<li>2 large carrots quatered length ways</li>
<li>3 large savoy cabbage leaves thinly sliced</li>
</ul>
<!-- Ingredients List Goes Above Here!!! -->
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="method">
<h2>method</h2>
<p>
We're doing a few things to make this dinner, roasting the belly
pork, making the roast potatoes and steaming some veg and making
the all important gravy to finish the dish off.
</p>
<!-- Method List Goes Below Here!!! -->
<h5>Prep The Roast Potatoes</h5>
<ol>
<li>Grease a roasting tin with veg oil</li>
<li>Put the potatoes in a pan of cold water</li>
<li>Add 1 heaped Tblsp salt</li>
<li>Bring to the boil</li>
<li>Simmer for 5 mins</li>
<li>Drain & cover with cold water to stop the cooking</li>
<li>Drain well when cold</li>
</ol>
<div class="spacer"></div>
<h5>Prep The Pork</h5>
<div class="card_image">
<figcaption>belly pork</figcaption>
<img
src="./images/bellyporkdinner/650x366/belly-pork-roasting-tin.jpg"
alt="belly pork roasting tin"
title="Belly Pork in Roasting Tin"
/>
</div>
<div class="spacer"></div>
<ol>
<li>Set oven to 200c</li>
<li>Make several cuts across the belly pork fat/skin</li>
<li>Put pork strips into a roasting tin, fat side up</li>
<li>Roast for 10 mins</li>
<li>Turn the pork strips onto their side</li>
<li>Roast for 12 mins</li>
<li>Turn the pork onto the other side</li>
<li>Roast for another 12 mins</li>
<li>Set onto a warm plate & cover to rest</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>belly pork</figcaption>
<img
src="./images/bellyporkdinner/650x366/belly-pork-plated.jpg"
alt="belly pork plated"
title="Belly Pork Dinner plated"
/>
</div>
<div class="spacer"></div>
<p>
<b>Note:</b> It's really important to let the meat rest as it
allows the meat to relax and juices to run through to make it
succulent
</p>
<h5>Roast Potatoes</h5>
<ol>
<li>Set oven to 180c</li>
<li>Put the roasting potatoes into the meat tin</li>
<li>Roast for 30 mins, turn once after 15 mins</li>
</ol>
<div class="spacer"></div>
<h5>Gravy</h5>
<ol>
<li>Melt the butter in a pan</li>
<li>Gently fry the mushrooms on med-high until soft</li>
<li>Put the rest of the ingredients into the pan</li>
<li>Whisk on med-high heat until combined and thickened</li>
<li>Simmer for 2 mins</li>
</ol>
<div class="spacer"></div>
<h5>Veg</h5>
<ol>
<li>Pop the veg into the steamer, all in one basket</li>
<li>Steam for 25mins</li>
<li>Pop the mash in the microwave for 1 min</li>
<li>Stir the mash & heat for another minute</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>dinner done!</figcaption>
<img
src="./images/bellyporkdinner/650x366/dinner-served.jpg"
alt="dinner served"
title="Belly Pork Dinner Served"
/>
</div>
<div class="spacer"></div>
<div class="card_image_round">
<figcaption>dinner plated</figcaption>
<img
src="./images/bellyporkdinner/650x366/dinner-plated.jpg"
alt="dinner plated"
title="Belly Pork dinner with mash, steamed veg, gravy & apple sauce"
/>
<figcaption>
serve with mash, steamed veg, gravy & apple sauce
</figcaption>
</div>
<div class="spacer"></div>
<!-- Method List Goes Above Here!!! -->
</div>
<!-- end of single item -->
</article>
</article>
</div>
</section>
<!-- javascript -->
<!-- <script type="module" src="./src/tabs.js"></script> -->
<script src="./src/app.js"></script>
</body>
</html>