-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfruit-cake.html
425 lines (373 loc) · 15.3 KB
/
fruit-cake.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
<!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="There are so many variations of this cake, but don't worry, this one is probably the best fruit cake in the world! It's easy to make and completely and utterly delicious"
/>
<!-- *********************FACEBOOK START******************** -->
<!-- facebook meta tags to ensure correct image / page is shared START-->
<!-- set the URL that you want Facebook to point in this tag -->
<meta
property="og:url"
content="https://www.nuttyskitchen.co.uk/fruit-cake.html"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Fruit Cake" />
<!-- set a very short description of the page in this tag -->
<meta
property="og:description"
content="Probably the best, most deliciously soft & moist fruit cake in the world!"
/>
<!-- set the image that you want Facebook to display in this tag-->
<meta
property="og:image"
content="https://www.nuttyskitchen.co.uk/images/fruit-cake/650x366/fruit-cake-sliced-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>Fruit Cake | 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: 45%;
}
</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>Fruit Cake</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>
I've been called many things, but this is one of my favourites:-
<strong>Fruit Cake!</strong> No Nuts included! Oh! Dear! Forgive me, I
couldn't resist that one<span class="rotatetext">{:¬)</span>There are
so many variations of this cake, but don't worry, this one is
<em>probably the best <strong>fruit cake</strong> in the world!</em>
It's easy to make and completely and utterly delicious with a cup of
afternoon tea. I don't decorate my cakes with icing and stuff, as to
be honest, I really can not stand it! Also, this cake could be served
warm with custard, however, we're not doing that today
<span class="rotatetext">:-P</span>
The choice is yours as always though, so, feel free to knock up a
crème anglaise at your leisure!
</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>Fruit Cake</strong> along with a few pictures to help
you along.
</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/fruit-cake/650x366/fruit-cake-sliced-02.webp"
alt="fruit cake sliced 02"
title="Freshly baked fruit cake sliced on a chopping board"
/>
</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>
<!-- Ingredients List Goes Below Here!!! -->
<ul>
<li>2 tea bags - for the sweet tea</li>
<li>300ml hot sweet tea - no milk!</li>
<li>125g salted butter</li>
<li>125g light brown sugar</li>
<li>220g self-raising flour</li>
<li>5g (1 heap tsp) baking powder</li>
<li>2 large eggs</li>
<li>3 - 5 Tbsp milk*</li>
<li>200g mixed fruit</li>
<li>1 tsp grated lemon rind</li>
</ul>
<div class="spacer"></div>
<p>
*Use 3 Tbsp of milk to start with, then add another 1 or 2 Tbsp
if the mixture is a little dry.
</p>
<!-- 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">
<p>
This fruit cake is so easy to make that I know you wont have any
problems! The main thing you need to do is soak your dried fruit
overnight, this is to plump up them currents and raisins which
will help ensure that your finished cake is wonderfully
delicious and moist.
</p>
<p>
It's taken me three attempts at combining three old recipes to
perfect this. And, I baked it a second time, just to make sure
that the recipe was perfect to publish!
</p>
<p>
The only thing to take note of is the 'wetness' of the cake
batter. You can see in the pictures that there is more fruit
towards the bottom of the cake than the top. This is because the
cake batter was a little on the wet side. That's why I say
"start with 3 Tbps of milk & add a little more if needed.
Practice will make perfect, but, personally, I'd rather
guarantee that my finished cake is moist.
</p>
<p>
So! Don't worry if your fruit sinks, you are still gonna love
it!
</p>
<div class="spacer"></div>
<div class="card_image">
<figcaption>ingredients</figcaption>
<img
src="/images/fruit-cake/650x366/ingredients.webp"
alt="ingredients"
title="fruit cake ingredients"
/>
</div>
<div class="spacer"></div>
<!-- Method List Goes Below Here!!! -->
<h2>method</h2>
<ol>
<li>Soak your dried fruit overnight in the prepared tea</li>
<li>Drain off the tea before you need the fruit</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>
drain off the tea before using the fruit
</figcaption>
<img
src="/images/fruit-cake/650x366/soaked-fruit-drained-in-sieve.webp"
alt="soaked fruit drained in a sieve"
title="soaked dried fruit being drained in a sieve for the fruit cake"
/>
</div>
<div class="spacer"></div>
<ol start="3">
<li>
Prepare a 15cm cake tin or a 1lb loaf tin lining it with
grease proof paper*
</li>
</ol>
<div class="spacer"></div>
<p>* <em>I use cake tin liners it's quicker!</em></p>
<ol start="4">
<li>Pre heat your oven to 180c</li>
<li>
Place your flour, baking powder, sugar & butter into a
blender*
</li>
</ol>
<div class="spacer"></div>
<p>
*<em
>If doing by hand, cream the butter, milk, eggs & sugar first.
Then add your flour etc.</em
>
</p>
<ol start="6">
<li>Now add your grated lemon rind, eggs & milk</li>
<li>
Mix until all is creamed together & check the consistancy, if
a little dry add more milk
</li>
<li>
Now place your soaked dried fruit into a bowl & add the cake
batter
</li>
<li>
Stir the fruit through the batter by hand until fully
dispersed
</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>mix the soaked fruit into the batter</figcaption>
<img
src="/images/fruit-cake/650x366/mixed-fruit-added-to-cake-batter.webp"
alt="mixed fruit added to cake batter"
title="mixing fruit into the fruit cake batter"
/>
</div>
<div class="spacer"></div>
<ol start="10">
<li>
Pour into your prepared cake tin & place into the hot oven
</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>
pour the fruit cake mix into a lined tin
</figcaption>
<img
src="/images/fruit-cake/650x366/fruit-cake-mix-in-lined-loaf-tin.webp"
alt="fruit cake mix in a lined loaf tin"
title="fruit cake mix in a lined loaf tin"
/>
</div>
<div class="spacer"></div>
<ol start="11">
<li>
Bake 180c for 50 to 55mins, test for doneness using a wooden
skewer
</li>
<li>If the skewer comes out clean the cake is done</li>
<li>
Leave for 10 minutes then
<strong>remove from the tin in the paper</strong> & set onto a
cooling rack
</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>
remove the fruit cake in the baking paper
</figcaption>
<img
src="/images/fruit-cake/650x366/fruit-cake-in-baking-paper.webp"
alt="fruit cake in baking paper"
title="fruit cake in baking paper on a chopping board"
/>
</div>
<div class="spacer"></div>
<ol start="14">
<li>
Store in an air tight container
<strong>in the baking paper</strong> when cooled
</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>sliced fruit cake</figcaption>
<img
src="/images/fruit-cake/650x366/fruit-cake-sliced-01.webp"
alt="fruit cake sliced 01"
title="sliced fruit cake on a chopping board"
/>
</div>
<div class="spacer"></div>
<div class="card_image_round">
<figcaption>probably a slice of...</figcaption>
<img
src="/images/fruit-cake/650x366/slice-of-cake-on-a-plate.webp"
alt="slice of cake on a plate"
title="a slice fruit cake on a plate"
/>
<figcaption>...the best fruit cake in the world!</figcaption>
</div>
<div class="spacer"></div>
<p>
<strong>Fruit Cake:</strong> Serve with a smile & mug of tea!
</p>
<!-- Method List Goes Above Here!!! -->
<!-- This is THE END!!!!!! -->
<!-- don't mess 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>