-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathjollof.html
474 lines (450 loc) · 23.3 KB
/
jollof.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
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/jstyle.css" />
<link rel="shortcut icon" href="./images/jollof 2.jpg" type="image/x-icon" />
<title>Jollof-Rice</title>
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-expand-md py-0 px-5 pe-md-5">
<a href="#" class="navbar-brand"><img src="./images/image.png" alt="logo" width="70px" height="60px"
class="align-top" />
</a>
<button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="navbar-nav ms-auto me-5 text-center">
<li class="nav-item px-5">
<a href="./index.html" aria-current="page" class="nav-link active">Home</a>
</li>
<li class="nav-item dropdown px-5">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
About
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item text-danger" href="chefsam.html">Chef Samatha</a>
</li>
<li>
<a class="dropdown-item text-danger" href="cheftej.html">Chef Tejasvi</a>
</li>
<li>
<a class="dropdown-item text-danger" href="chefkim.html">Chef KimSandra</a>
</li>
<li>
<a class="dropdown-item text-danger" href="chefay.html">Chef Ayomide</a>
</li>
</ul>
</li>
<li class="nav-item dropdown px-5">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Cuisines
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item text-danger" href="prawnRecipe.html">Indian Prawn Curry</a>
</li>
<li>
<a class="dropdown-item text-danger" href="./tjrecipe.html">Tandoori-Chicken</a>
</li>
<li>
<a class="dropdown-item text-danger" href="beefstew.html">Beef Stew</a>
</li>
<li>
<a class="dropdown-item text-danger" href="./jollof.html">Nigerian Jollof Rice</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="" class="nav-link">Order a book</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Hero -->
<section class="hero d-flex flex-column rounded-bottom-5 justify-content-center container">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><span class="green">Nig</span><span class="wht">eri</span><span class="green">an</span><br><span
class="jr">Jollof Rice</span>
</h1>
<p>...by Ayomide Samuel</p>
</div>
</div>
</div>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- Description -->
<section class="container mt-5 mb-5 intro">
<div class="row">
<h2 class="text-warning">Jollof Rice</h2>
<h4>Welcome to West Africa</h4>
<p class="fs-5">
Jollof Rice is Bae, and much loved South of the Sahara and along the coast of West Africa.
Spiced and stewed in a flavorful tomato broth, it is everything from "everyday" to celebration. The
classic version is
cooked with long-grain rice (Uncle Ben's/Carolina's) and seasoned with Nigerian-style curry powder and
dried thyme.
Served with fried, ripe plantains which we call dodo and coleslaw, it is everything. Note that the world
might consider
this a side but in Nigeria, it is the main. :)
Even more special is Party Rice, a smoky version, cooked over an open fire, layered with smoke, spice,
and immeasurable
goodness. A few years ago, I cracked the code on approximating the smoky flavor on the stovetop. The
secret? Read on.
Learning to make Jollof was a rite of passage for me and I've gone through so many iterations each time
trying to
streamline the process while delivering the most flavour.
</p>
</div>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- Jollof Variations -->
<section class="container mt-5 mb-5 vary">
<h2 class=" text-center text-warning">VARIATIONS</h2>
<p class="fs-5">There are numerous combinations that can be made alongside the Nigerian Jollof. The thing about
Jollof, it's
that one dish across West Africa that is a unifying dish. Every country has their own version of Jollof, but
the Nigerian method of Jollof stands out amongst the rest. But the core is always two things—well, three
things: rice, a tomato
stew, and seasoning. <br>
The most common combinations include;
<ul class="fs-5">
<li>Jollof with plantains</li>
<li>Jollof with beef</li>
<li>Jollof with chicken</li>
<li>Jollof with fish</li>
</ul>
</p>
<div class="row row-cols-1 row-cols-md-4 g-4 mt-2">
<div class="col">
<div class="card h-100">
<img src="./images/jollof 6.jpg" class="card-img-top" alt="jollofandplantain">
<div class="card-body">
<h5 class="card-title">Jollof with Plantain</h5>
<p class="card-text">Jollof, a traditional Nigerian main dish, brings out the best flavors of
rice and fried plantains.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./images/jollof 3.jpg" class="card-img-top" alt="jollofandbeef">
<div class="card-body">
<h5 class="card-title">Jollof with Beef</h5>
<p class="card-text">Jollof, a traditional Nigerian main dish, brings out the best flavors of
rice and beef.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./images/jollof 4.jpg" class="card-img-top" alt="jollofandchicken">
<div class="card-body">
<h5 class="card-title">Jollof with Chicken</h5>
<p class="card-text">Jollof, a traditional Nigerian main dish, brings out the best flavors of
rice and chicken.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="./images/jollof 5.jpg" class="card-img-top" alt="jollofandfish">
<div class="card-body">
<h5 class="card-title">Jollof with Fish</h5>
<p class="card-text">Jollof, a traditional Nigerian main dish, brings out the best flavors of
rice and fish.</p>
</div>
</div>
</div>
</div>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- Ingredients -->
<section class="container mt-5 mb-5 text-center" style="max-width: 640px;">
<table class="table table-hover table-bordered table-responsive table-sm caption-top">
<caption>Ingredients</caption>
<thead>
<tr class="table-primary">
<th scope="col">Measurement</th>
<th scope="col">Ingredient</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>1/3 cup</td>
<td>Oil (vegetable/canola/coconut, not olive oil)</td>
</tr>
<tr class="table-secondary">
<td>6</td>
<td>Medium-sized fresh plum/Roma tomatoes, chopped, OR a 400-gram tin of tomatoes</td>
</tr>
<tr class="table-success">
<td>6</td>
<td>Fresh, red poblano peppers (or 4 large red bell peppers), seeds discarded</td>
</tr>
<tr class="table-secondary">
<td>3</td>
<td>Medium-sized red onions (1 sliced thinly, 2 roughly chopped), divided</td>
</tr>
<tr class="table-success">
<td>1/2 to 1</td>
<td>Hot pepper, or to taste (yellow Scotch bonnets are my favourite)</td>
</tr>
<tr class="table-secondary">
<td>3 tablespoons</td>
<td>Tomato paste</td>
</tr>
<tr class="table-success">
<td>2 teaspoons</td>
<td>Curry powder (Caribbean/Jamaican-style)</td>
</tr>
<tr class="table-secondary">
<td>1 teaspoon</td>
<td>Dried thyme</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>Dried bay leaves</td>
</tr>
<tr class="table-secondary">
<td>5 to 6 cups</td>
<td>Stock (vegetable, chicken, or beef) or water, divided</td>
</tr>
<tr class="table-success">
<td>2 teaspoons</td>
<td>Unsalted butter (optional), divided</td>
</tr>
<tr class="table-secondary">
<td>4 cups</td>
<td>uncooked converted long-grain rice or golden sella basmati, rinsed</td>
</tr>
<tr class="table-success">
<td colspan="2">Salt, to taste</td>
</tr>
<tr class="table-secondary">
<td colspan="2">Black and white pepper, to taste</td>
</tr>
<tr class="table-success">
<td colspan="2">Extra: sliced onions, tomatoes</td>
</tr>
</tbody>
</table>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- How to prepare -->
<section class="container mt-5 mb-5 h2p">
<h2 class="text-warning">How to prepare</h2>
<table class="table table-responsive table-sm align-middle">
<tbody>
<tr>
<td rowspan="8" class="table-sm"><iframe width="560" height="315"
src="https://www.youtube.com/embed/z4tNAyRdo70" frameborder="2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe></td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">1.</span> In a blender, combine tomatoes,
red
poblano (or bell) peppers,
chopped onions, and Scotch
bonnets with 2 cups of stock,
blend till smooth, about a minute or two. You should have roughly 6 cups of blended mix. Pour
into a large pot/ pan and
bring to the boil then turn down and let simmer, partly covered for 10 - 12 minutes</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">2.</span> In a large pan, heat oil and
add the
sliced onions. Season with
a pinch of salt, stir-fry
for
2 to 3 minutes, then add
the bay leaves, curry powder and dried thyme and a pinch of black pepper for 3 - 4 minutes on
medium heat. Then add the
tomato paste - stir for another 2 minutes. Add the reduced tomato-pepper-Scotch bonnet mixture,
stir, and set on medium
heat for 10 to 12 minutes till reduced by half, with the lid partly on. This is the stew that
will define the pot.</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">3.</span> Add 4 cups of the stock to the
cooked
tomato sauce and bring it
to boil for 1 - 2
minutes.
</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">4.</span> Add the rinsed rice and butter,
stir,
cover with a double piece
of foil/baking or
parchment
paper and put a lid on the
pan—this will seal in the steam and lock in the flavor. Turn down the heat and cook on the
lowest possible heat for 30
minutes, stirring half way through.</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">5.</span> Stir rice—taste and adjust as
required.
If rice isn't soft
enough/ needs additional
cooking,
add 1/4 to 1/2 cup of stock
or water, stir through and continue to steam, on low till cooked through.</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">6.</span> If you like, add sliced onions,
fresh
tomatoes and the 2nd
teaspoon of butter and stir
through. Let rest, covered for 5
to 6 minutes.</td>
</tr>
<tr>
<td class="table-info p-2"><span class="nums p-1">7.</span> To make Party Rice, you'll need
one
more step. Now Party Rice
is essentially Smoky Jollof
Rice, traditionally cooked
over an open fire. However, you can achieve the same results on the stove top. Here's how: Once
the rice is cooked, turn
up the heat with the lid on and leave to "burn" for 3 to 5 minutes. You'll hear the rice crackle
and snap and it will
smell toasted. Turn off the heat and leave with the lid on to "rest" till ready to serve. The
longer the lid stays on,
the smokier. Let the party begin!</td>
</tr>
</tbody>
</table>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- About me -->
<section>
<div class="card mb-3 mt-5 mx-auto" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="./images/Schef.jpg" class="img-fluid rounded-start" alt="chefspic">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">About Me</h5>
<p class="card-text">I love food and I'm interested in making space for little-heard voices, as
well as celebrating Nigerian cuisine in its
entirety.</p>
<p class="card-text"><small class="text-muted">Last updated 2 days ago</small></p>
</div>
</div>
</div>
</div>
</section>
<div>
<hr class="section-break-2" />
</div>
<!-- Footer -->
<footer class="footer mt-3 py-1">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 justify-content-center align-items-center g-2">
<div class="col mt-5 px-5">
<a class="fw-bold text-warning px-4" href="">Our Recipes</a>
<ul class="mt-3 px-5">
<li class=""><a href="./jollof.html">Nigerian Jollof Rice</a></li>
<li><a href="./tjrecipe.html">Tandoori Chicken</a></li>
<li><a href="beefstew.html">BeefStew</a></li>
<li>
<a href="prawnRecipe.html">Indian Prawn Curry</a>
</li>
</ul>
</div>
<div class="col text-warning text-center fw-bold">
Follow Us On
<div class="row mt-2 justify-content-center">
<div class="col-2">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="blue"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
</div>
<div class="col-2">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="red"
class="bi bi-youtube" viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
</svg>
</div>
<div class="col-2">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="blue"
class="bi bi-twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</div>
</div>
<div class="row px-0 mt-4 justify-content-center">
<div class="col">
<input type="email" placeholder="Enter your email" />
</div>
<div class="col">
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
</div>
</div>
<div class="col mt-5 text-center" id="about">
<ul class="mt-3">
<li><a href="">About us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Cookie Policy</a></li>
<li><a href="">Terms and Conditions</a></li>
</ul>
</div>
<div class="col">
<div class="row">
<div calss="col">
<img src="./images/image.png" alt="logo" height="120px" class="rounded mx-auto d-block" />
</div>
</div>
<div class="row text-white text-center mt-2">
<i class="fa fa-map-marker">  <span class="text-white">Müller Straße 40, 68099
Frankfurt,
Germany</span></i>
</div>
</div>
</div>
</div>
<div class="text-center text-warning py-0">
<p>© S.T.A.S 2023</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</body>
</html>