-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
320 lines (320 loc) · 21.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
<!DOCTYPE html>
<html lang="en-us">
<!-- ITS335 - Portfolio Project - Rexford Haugen -->
<head>
<title>Spiced Rum Apple Cake</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif"><!-- Add font from Google Fonts library -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+Symbols+2"><!-- Add font from Google Fonts library -->
<link rel="stylesheet" href="style.css">
<meta name="author" content="Rexford Haugen, [email protected]">
<meta name="description" content="A recipe for a spice rum apple cake">
<meta name="keywords" content="Baking, Cake, Rum, Apple, Glazing, Dessert">
<meta name="revised" content="2023-07-09">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav aria-labelledby="header-title">
<h1 id="header-title">Spiced Rum Apple Cake Recipe</h1>
<ul>
<li>
<a href="#Welcome">Welcome</a>
</li>
<li>
<a href="#Ingredients">Ingredients</a>
</li>
<li>
<a href="#Cake">Cake</a>
</li>
<li>
<a href="#Topping">Topping</a>
</li>
<li>
<a href="#Serving">Serving</a>
</li>
<li>
<a href="#Remarks">Remarks</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="Welcome">
<h3>Welcome!</h3>
<p>
<picture aria-describedby="completed-cake">
<source srcset="images/full/00-hero.jpg" media="(min-width: 680px)">
<source srcset="images/half/00-hero.jpg" media="(min-width: 400px)">
<img src="images/quarter/00-hero.jpg" alt="Photo of completed rum cake with glazed apples on top" loading="eager">
</picture>
<span id="completed-cake" style="display: none;">Photo of completed rum cake with glazed apples on top</span><!-- Hidden description for screen readers -->
When it comes to recipes, this one for a spiced rum apple cake is a favorite of mine. It's a great way to use up extra apples from the tree in my yard using ingredients I usually have on hand. The cake is moist and flavorful, with a hint of spice from cinnamon and nutmeg. The spiced rum adds a touch of sweetness and complexity. This cake is perfect for a fall gathering or a winter holiday dessert.
</p>
</section>
<hr>
<section id="Ingredients">
<h3>Ingredients</h3>
<div class="table">
<div class="column wide">
<h5>Cake</h5>
<ul>
<li>All purpose flour — 2 cups</li>
<li>Granulated cane sugar — 1 cup</li>
<li>Baking soda — 1/2 teaspoon (tsp)</li>
<li>Eggs — 2</li>
<li>Vanilla Extract — 1 tablespoon (tbsp)</li>
<li>Olive oil — 3/4 cup</li>
<li>Milk — 1/4 cup</li>
<li>Spiced rum — 1/2 cup</li>
<li>Cinnamon — 1 teaspoon (tsp)</li>
<li>Nutmeg — 1/2 teaspoon (tsp)</li>
<li>Salt — 1 teaspoon (tsp)</li>
</ul>
<h5>Topping</h5>
<ul>
<li>Apples — 2</li>
<li>Granulated Sugar — 2/3 cup</li>
<li>Cinnamon — 1 stick</li>
<li>Water — 1 cup</li>
</ul>
<!--</div>
<div class="column">-->
<h5>Tools</h5>
<ul>
<li>9 inch spring form cake pan</li>
<li>Large mixing bowl</li>
<li>Quart pot</li>
<li>Measuring cup and spoons</li>
<li>Rubber spatula</li>
<li>Silicone spatula</li>
<li>Sharp knife</li>
<li>Cutting board</li>
<li>Wooden spoon or spatula</li>
<li>Silicone brush</li>
<li>Butter knife</li>
<li>Fork</li>
</ul>
</div>
<div class="column narrow">
<div>
<picture>
<source srcset="images/full/01-cake-ingredients.jpg" media="(min-width: 680px)">
<source srcset="images/half/01-cake-ingredients.jpg" media="(min-width: 400px)">
<img src="images/quarter/01-cake-ingredients.jpg" alt="Ingredients for the cake" aria-describedby="cake-ingredients" loading="lazy">
</picture>
<p class="picture-description" id="cake-ingredients">Ingredients for the cake</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/02-apple-topping-ingredients.jpg" media="(min-width: 680px)">
<source srcset="images/half/02-apple-topping-ingredients.jpg" media="(min-width: 400px)">
<img src="images/quarter/02-apple-topping-ingredients.jpg" alt="Ingredients for the apple topping" aria-describedby="apple-topping-ingredients" loading="lazy">
</picture>
<p class="picture-description" id="apple-topping-ingredients">Ingredients for the apple topping</p>
</div>
</div>
</div>
</section>
<hr>
<section id="Cake">
<h3>Making the cake</h3>
<div class="table">
<div class="column narrow mob-hid">
<div>
<picture>
<source srcset="images/full/05-checking-consistency.jpg" media="(min-width: 680px)">
<source srcset="images/half/05-checking-consistency.jpg" media="(min-width: 400px)">
<img src="images/quarter/05-checking-consistency.jpg" alt="Checking the batter consistency" aria-describedby="checking-consistency" loading="lazy">
</picture>
<p class="picture-description" id="checking-consistency">Checking the batter consistency</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/06-filling-pan.jpg" media="(min-width: 680px)">
<source srcset="images/half/06-filling-pan.jpg" media="(min-width: 400px)">
<img src="images/quarter/06-filling-pan.jpg" alt="Batter poured into cake pan" aria-describedby="filling-pan" loading="lazy">
</picture>
<p class="picture-description" id="filling-pan">Batter poured into cake pan</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/12-checking-cake.jpg" media="(min-width: 680px)">
<source srcset="images/half/12-checking-cake.jpg" media="(min-width: 400px)">
<img src="images/quarter/12-checking-cake.jpg" alt="Checking the bake of the cake" aria-describedby="checking-cake" loading="lazy">
</picture>
<p class="picture-description" id="checking-cake">Checking the bake of the cake</p>
</div>
</div>
<div class="column wide">
<p>The cake is an <strong>olive oil cake</strong> that will be baked in a spring-form pan. Making the cake:</p>
<ol>
<li><span class="symbol">🌡</span> <strong>Preheat oven</strong> to 350 F</li>
<li><span class="symbol">🪔</span> <strong>Combine dry ingredients</strong> in a mixing bowl</li>
<li><span class="symbol">🪔</span> <strong>Add wet ingredients</strong> to the mixing bowl</li>
<li><span class="symbol">⭯</span> <strong>Blend ingredients</strong> until uniform</li>
<li><span class="symbol">♨</span> <strong>Spray spring-form pan</strong> with baking spray</li>
<li><span class="symbol">♨</span> <strong>Pour batter</strong> into pan</li>
<li><span class="symbol">⏱</span> <strong>Bake for 20-25</strong> minutes
<aside><span class="symbol">🗭</span> <em>To check if the cake is done, a butter knife can be inserted into the center and the cake is done when it pulls out cleanly.</em></aside>
</li>
<li><span class="symbol">⏻</span> <strong>Turn off the oven</strong> after removing the cake</li>
</ol>
<p>While the cake is baking, the topping can be made.</p>
</div>
<div class="column narrow mob-vis">
<div>
<picture>
<source srcset="images/full/05-checking-consistency.jpg" media="(min-width: 680px)">
<source srcset="images/half/05-checking-consistency.jpg" media="(min-width: 400px)">
<img src="images/quarter/05-checking-consistency.jpg" alt="Checking the batter consistency" aria-describedby="checking-consistency-mob" loading="lazy">
</picture>
<p class="picture-description" id="checking-consistency-mob">Checking the batter consistency</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/06-filling-pan.jpg" media="(min-width: 680px)">
<source srcset="images/half/06-filling-pan.jpg" media="(min-width: 400px)">
<img src="images/quarter/06-filling-pan.jpg" alt="Batter poured into cake pan" aria-describedby="filling-pan-mob" loading="lazy">
</picture>
<p class="picture-description" id="filling-pan-mob">Batter poured into cake pan</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/12-checking-cake.jpg" media="(min-width: 680px)">
<source srcset="images/half/12-checking-cake.jpg" media="(min-width: 400px)">
<img src="images/quarter/12-checking-cake.jpg" alt="Checking the bake of the cake" aria-describedby="checking-cake-mob" loading="lazy">
</picture>
<p class="picture-description" id="checking-cake-mob">Checking the bake of the cake</p>
</div>
</div>
</div>
</section>
<hr>
<section id="Topping">
<h3>Making the topping</h3>
<div class="table">
<div class="column wide">
<p>The topping consists of a <strong>thin-sliced apples cooked in a simple syrup</strong>. Making the simple syrup:</p>
<ol>
<li><span class="symbol">🫖</span> <strong>Boil water</strong> on high in a quart pot</li>
<li><span class="symbol">🗡</span> <strong>Thinly slice the apples</strong> while the water is boiling</li>
<li><span class="symbol">🪔</span> <strong>Add sugar</strong> to the boiling water</li>
<li><span class="symbol">⏱</span> <strong>Simmer until clear</strong> when the sugar is dissolved</li>
<li><span class="symbol">🫕</span> <strong>Insert cinnamon stick</strong> to infuse flavor</li>
<li><span class="symbol">🌡</span> <strong>Reduce heat</strong> to low from high</li>
<li><span class="symbol">⏱</span> <strong>Simmer apples</strong> until they soften</li>
<li><span class="symbol">⏻</span> <strong>Turn off the stove</strong> and prepare to decorate</li>
</ol>
<p>Once the topping is complete, it can be added to the cake.</p>
</div>
<div class="column narrow">
<div>
<picture>
<source srcset="images/full/08-dissolving-sugar.jpg" media="(min-width: 680px)">
<source srcset="images/half/08-dissolving-sugar.jpg" media="(min-width: 400px)">
<img src="images/quarter/8-dissolving-sugar.jpg" alt="Dissolving the sugar in water to make a simple syrup" aria-describedby="dissolving-sugar" loading="lazy">
</picture>
<p class="picture-description" id="dissolving-sugar">Dissolving the sugar in water to make a simple syrup</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/11-checking-apples.jpg" media="(min-width: 680px)">
<source srcset="images/half/11-checking-apples.jpg" media="(min-width: 400px)">
<img src="images/quarter/11-checking-apples.jpg" alt="Checking the cook of the apples" aria-describedby="checking-apples" loading="lazy">
</picture>
<p class="picture-description" id="checking-apples">Checking the cook of the apples</p>
</div>
</div>
</div>
</section>
<hr>
<section id="Serving">
<h3>Decorating and serving</h3>
<div class="table">
<div class="column narrow mob-hid">
<div>
<picture>
<source srcset="images/full/14-removing-cake.jpg" media="(min-width: 680px)">
<source srcset="images/half/14-removing-cake.jpg" media="(min-width: 400px)">
<img src="images/quarter/14-removing-cake.jpg" alt="Removing cake from the pan" aria-describedby="removing-cake" loading="lazy">
</picture>
<p class="picture-description" id="removing-cake">Removing cake from the pan</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/16-placing-apples-2.jpg" media="(min-width: 680px)">
<source srcset="images/half/16-placing-apples-2.jpg" media="(min-width: 400px)">
<img src="images/quarter/16-placing-apples-2.jpg" alt="Placing apples on the cake" aria-describedby="placing-apples" loading="lazy">
</picture>
<p class="picture-description" id="placing-apples">Placing apples on the cake</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/18-glazing.jpg" media="(min-width: 680px)">
<source srcset="images/half/18-glazing.jpg" media="(min-width: 400px)">
<img src="images/quarter/18-glazing.jpg" alt="Glazing the cake with the simple syrup" aria-describedby="glazing" loading="lazy">
</picture>
<p class="picture-description" id="glazing">Glazing the cake with the simple syrup</p>
</div>
</div>
<div class="column wide">
<p>To decorate the cake:</p>
<ol>
<li><span class="symbol">🔓</span> <strong>Remove the edge</strong> from the spring-form pan</li>
<li><span class="symbol">🌢</span> <strong>Apply syrup</strong> to the cake by using a spoon or brush</li>
<li><span class="symbol">🏵</span> <strong>Lay out apples</strong> in a pattern atop the cake</li>
<li><span class="symbol">🪥</span> <strong>Brush syrup onto apples</strong> to great a glistening look</li>
<li><span class="symbol">🗡</span> <strong>Slice</strong> into desired amount of pieces</li>
</ol>
<p>The cake may be enjoyed on its own or à la mode (topped with ice cream). It goes nicely with a glass of milk or cider.</p>
</div>
<div class="column narrow mob-vis">
<div>
<picture>
<source srcset="images/full/14-removing-cake.jpg" media="(min-width: 680px)">
<source srcset="images/half/14-removing-cake.jpg" media="(min-width: 400px)">
<img src="images/quarter/14-removing-cake.jpg" alt="Removing cake from the pan" aria-describedby="removing-cake-mob" loading="lazy">
</picture>
<p class="picture-description" id="removing-cake-mob">Removing cake from the pan</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/16-placing-apples-2.jpg" media="(min-width: 680px)">
<source srcset="images/half/16-placing-apples-2.jpg" media="(min-width: 400px)">
<img src="images/quarter/16-placing-apples-2.jpg" alt="Placing apples on the cake" aria-describedby="placing-apples-mob" loading="lazy">
</picture>
<p class="picture-description" id="placing-apples-mob">Placing apples on the cake</p>
</div>
<br>
<div>
<picture>
<source srcset="images/full/18-glazing.jpg" media="(min-width: 680px)">
<source srcset="images/half/18-glazing.jpg" media="(min-width: 400px)">
<img src="images/quarter/18-glazing.jpg" alt="Glazing the cake with the simple syrup" aria-describedby="glazing-mob" loading="lazy">
</picture>
<p class="picture-description" id="glazing-mob">Glazing the cake with the simple syrup</p>
</div>
</div>
</div>
</section>
<hr>
<section id="Remarks">
<h3>Remarks</h3>
<p>Although this recipe was initially devised to use up leftover apples and rum, it's now something I make throughout the year to warm the soul. I love the way the spices and rum combine to create a warm and cozy flavor. Feel free to take this recipe and modify it to your liking. You can experiment with different types of apples, or add other ingredients like nuts, raisins, or dried cranberries. You can also adjust the amount of rum to your liking. I hope you enjoy this recipe as much as I do!</p>
</section>
</main>
<footer>
<p>© 2023 - Rexford Haugen</p>
</footer>
</body>
</html>